From 5c71911104a41613d31d3b575c06363175b65462 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Mon, 14 Oct 2024 19:48:05 +0800
Subject: [PATCH] chore: run lint:fix, re-build registry

---
 apps/www/.vitepress/config.mts                |  10 +-
 .../theme/components/Announcement.vue         |   2 +-
 .../theme/components/BlockCopyButton.vue      |   6 +-
 .../.vitepress/theme/components/Blocks.vue    |  18 +-
 .../theme/components/CodeConfigCustomizer.vue |  10 +-
 .../theme/components/CodeSandbox.vue          |   6 +-
 .../theme/components/CodeWrapper.ts           |   2 +-
 .../theme/components/ComponentLoader.vue      |   2 +-
 .../theme/components/ComponentPreview.vue     |  16 +-
 .../theme/components/CustomizerCode.vue       |   6 +-
 .../theme/components/DocsBreadcrumb.vue       |   4 +-
 .../.vitepress/theme/components/EditLink.vue  |   4 +-
 .../theme/components/ExamplesNav.vue          |   6 +-
 .../theme/components/InlineThemePicker.vue    |   2 +-
 .../theme/components/LandingPage.vue          |  18 +-
 .../.vitepress/theme/components/MobileNav.vue |   6 +-
 .../components/PageHeaderDescription.vue      |   2 +-
 .../theme/components/Stackblitz.vue           |   6 +-
 .../theme/components/StyleSwitcher.vue        |   6 +-
 .../theme/components/TableOfContent.vue       |   8 +-
 .../theme/components/TableOfContentTree.vue   |   4 +-
 .../theme/components/TabsMarkdown.vue         |   2 +-
 .../theme/components/ThemeCustomizer.vue      |   8 +-
 .../theme/components/ThemePopover.vue         |   8 +-
 apps/www/.vitepress/theme/components/index.ts |  10 +-
 .../theme/components/theming/Theming.vue      |  16 +-
 apps/www/.vitepress/theme/index.ts            |   6 +-
 .../.vitepress/theme/layout/DocsLayout.vue    |  10 +-
 .../theme/layout/ExamplesLayout.vue           |  14 +-
 .../.vitepress/theme/layout/MainLayout.vue    |  34 +--
 .../.vitepress/theme/layout/ThemingLayout.vue |  22 +-
 apps/www/.vitepress/theme/plugins/utils.ts    |   2 +-
 apps/www/__registry__/index.ts                | 240 +++++++++---------
 apps/www/scripts/autogen.ts                   |   4 +-
 apps/www/scripts/build-registry.ts            |   4 +-
 .../src/content/docs/components/auto-form.md  |  10 +-
 apps/www/src/content/docs/components/badge.md |   2 +-
 .../www/src/content/docs/components/button.md |   2 +-
 .../content/docs/components/collapsible.md    |   2 +-
 .../src/content/docs/components/combobox.md   |   8 +-
 .../src/content/docs/components/pagination.md |   8 +-
 .../www/src/content/docs/components/sonner.md |   2 +-
 apps/www/src/content/docs/components/toast.md |   2 +-
 .../content/docs/components/v-date-picker.md  |  12 +-
 .../src/content/docs/dark-mode/vitepress.md   |   4 +-
 .../src/examples/authentication/Example.vue   |   4 +-
 .../components/UserAuthForm.vue               |  10 +-
 .../cards/components/CreateAccount.vue        |   2 +-
 .../examples/cards/components/GitHubCard.vue  |  10 +-
 .../cards/components/Notifications.vue        |   8 +-
 apps/www/src/examples/dashboard/Example.vue   |  16 +-
 .../dashboard/components/DateRangePicker.vue  |  12 +-
 .../dashboard/components/TeamSwitcher.vue     |  16 +-
 apps/www/src/examples/forms/Account.vue       |   2 +-
 apps/www/src/examples/forms/Appearance.vue    |   2 +-
 apps/www/src/examples/forms/Display.vue       |   2 +-
 apps/www/src/examples/forms/Example.vue       |   2 +-
 apps/www/src/examples/forms/Notifications.vue |   2 +-
 .../examples/forms/components/AccountForm.vue |  30 +--
 .../forms/components/AppearanceForm.vue       |  16 +-
 .../examples/forms/components/DisplayForm.vue |  14 +-
 .../examples/forms/components/ProfileForm.vue |  22 +-
 .../examples/forms/components/SidebarNav.vue  |   4 +-
 .../examples/forms/layouts/FormsLayout.vue    |   2 +-
 .../mail/components/AccountSwitcher.vue       |   4 +-
 .../www/src/examples/mail/components/Mail.vue |  26 +-
 .../examples/mail/components/MailDisplay.vue  |  18 +-
 .../src/examples/mail/components/MailList.vue |   4 +-
 apps/www/src/examples/mail/components/Nav.vue |   4 +-
 apps/www/src/examples/music/Example.vue       |  20 +-
 .../music/components/AlbumArtwork.vue         |   6 +-
 .../src/examples/music/components/Sidebar.vue |   2 +-
 apps/www/src/examples/playground/Example.vue  |  34 +--
 .../components/MaxLengthSelector.vue          |   2 +-
 .../playground/components/PresetActions.vue   |   6 +-
 .../playground/components/PresetShare.vue     |   4 +-
 .../components/TemperatureSelector.vue        |   2 +-
 .../playground/components/TopPSelector.vue    |   2 +-
 apps/www/src/examples/tasks/Example.vue       |   4 +-
 .../examples/tasks/components/DataTable.vue   |  22 +-
 .../components/DataTableColumnHeader.vue      |  12 +-
 .../components/DataTableFacetedFilter.vue     |   8 +-
 .../tasks/components/DataTablePagination.vue  |  10 +-
 .../tasks/components/DataTableRowActions.vue  |  10 +-
 .../tasks/components/DataTableToolbar.vue     |   8 +-
 .../tasks/components/DataTableViewOptions.vue |   6 +-
 .../src/examples/tasks/components/columns.ts  |  10 +-
 apps/www/src/examples/tasks/data/data.ts      |   2 +-
 .../registry/default/block/Dashboard01.vue    |   2 +-
 .../registry/default/block/Dashboard02.vue    |   4 +-
 .../registry/default/block/Dashboard03.vue    |   4 +-
 .../registry/default/block/Dashboard04.vue    |   4 +-
 .../registry/default/block/Dashboard05.vue    |  50 ++--
 .../registry/default/block/Dashboard06.vue    |  42 +--
 .../registry/default/block/Dashboard07.vue    |  78 +++---
 .../registry/default/example/AlertDemo.vue    |   2 +-
 .../default/example/AlertDestructiveDemo.vue  |   2 +-
 .../example/AreaChartCustomTooltip.vue        |   2 +-
 .../default/example/AreaChartSparkline.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    |  10 +-
 .../default/example/AutoFormDependencies.vue  |   8 +-
 .../example/AutoFormInputWithoutLabel.vue     |   6 +-
 .../default/example/AutoFormSubObject.vue     |   6 +-
 .../default/example/BarChartCustomTooltip.vue |   2 +-
 .../default/example/BreadcrumbDropdown.vue    |   2 +-
 .../default/example/BreadcrumbResponsive.vue  |   4 +-
 .../example/BreadcrumbSeparatorDemo.vue       |   2 +-
 .../default/example/ButtonIconDemo.vue        |   2 +-
 .../default/example/ButtonLoadingDemo.vue     |   2 +-
 .../default/example/ButtonWithIconDemo.vue    |   2 +-
 .../registry/default/example/CalendarDemo.vue |   4 +-
 .../registry/default/example/CalendarForm.vue |  16 +-
 .../lib/registry/default/example/CardChat.vue |  12 +-
 .../lib/registry/default/example/CardDemo.vue |   4 +-
 .../registry/default/example/CardFormDemo.vue |   6 +-
 .../registry/default/example/CardStats.vue    |   8 +-
 .../default/example/Cards/ActivityGoal.vue    |   8 +-
 .../default/example/Cards/DataTable.vue       |  26 +-
 .../registry/default/example/Cards/Metric.vue |   4 +-
 .../registry/default/example/CarouselApi.vue  |   6 +-
 .../default/example/CarouselOrientation.vue   |   2 +-
 .../default/example/CarouselPlugin.vue        |   4 +-
 .../registry/default/example/CarouselSize.vue |   2 +-
 .../default/example/CarouselSpacing.vue       |   2 +-
 .../default/example/CarouselThumbnails.vue    |   6 +-
 .../default/example/CheckboxFormMultiple.vue  |  12 +-
 .../default/example/CheckboxFormSingle.vue    |  12 +-
 .../default/example/CollapsibleDemo.vue       |   6 +-
 .../registry/default/example/ComboboxDemo.vue |   8 +-
 .../default/example/ComboboxDropdownMenu.vue  |   6 +-
 .../registry/default/example/ComboboxForm.vue |  14 +-
 .../default/example/ComboboxResponsive.vue    |   4 +-
 .../registry/default/example/CommandDemo.vue  |  18 +-
 .../default/example/CommandDialogDemo.vue     |   6 +-
 .../default/example/DatePickerDemo.vue        |  12 +-
 .../default/example/DatePickerForm.vue        |  16 +-
 .../DatePickerWithIndependentMonths.vue       |  38 +--
 .../default/example/DatePickerWithPresets.vue |  14 +-
 .../default/example/DatePickerWithRange.vue   |  14 +-
 .../example/DialogCustomCloseButton.vue       |   2 +-
 .../example/DonutChartCustomTooltip.vue       |   2 +-
 .../registry/default/example/DrawerDemo.vue   |   6 +-
 .../registry/default/example/DrawerDialog.vue |   6 +-
 .../example/DropdownMenuCheckboxes.vue        |   2 +-
 .../default/example/DropdownMenuDemo.vue      |  32 +--
 .../example/DropdownMenuRadioGroup.vue        |   2 +-
 .../default/example/HoverCardDemo.vue         |   4 +-
 .../registry/default/example/InputForm.vue    |  10 +-
 .../default/example/InputFormAutoAnimate.vue  |  12 +-
 .../default/example/InputWithButton.vue       |   2 +-
 .../default/example/InputWithIcon.vue         |   2 +-
 .../example/LineChartCustomTooltip.vue        |   2 +-
 .../default/example/NumberFieldCurrency.vue   |   2 +-
 .../default/example/NumberFieldDecimal.vue    |   2 +-
 .../default/example/NumberFieldDemo.vue       |   2 +-
 .../default/example/NumberFieldDisabled.vue   |   2 +-
 .../default/example/NumberFieldPercentage.vue |   2 +-
 .../default/example/PaginationDemo.vue        |   8 +-
 .../default/example/PinInputControlled.vue    |   2 +-
 .../registry/default/example/PinInputDemo.vue |   2 +-
 .../default/example/PinInputDisabled.vue      |   2 +-
 .../default/example/PinInputSeparatorDemo.vue |   2 +-
 .../registry/default/example/PopoverDemo.vue  |   6 +-
 .../registry/default/example/ProgressDemo.vue |   2 +-
 .../default/example/RadioGroupForm.vue        |  10 +-
 .../default/example/RangeCalendarDemo.vue     |   4 +-
 .../registry/default/example/SelectForm.vue   |  10 +-
 .../default/example/SheetSideDemo.vue         |   2 +-
 .../registry/default/example/SliderDemo.vue   |   4 +-
 .../registry/default/example/SliderForm.vue   |  10 +-
 .../registry/default/example/SonnerDemo.vue   |   2 +-
 .../default/example/SonnerWithDialog.vue      |   2 +-
 .../registry/default/example/SwitchForm.vue   |  10 +-
 .../default/example/TagsInputDemo.vue         |   2 +-
 .../registry/default/example/TextareaForm.vue |  10 +-
 .../default/example/TextareaWithButton.vue    |   2 +-
 .../default/example/TextareaWithLabel.vue     |   2 +-
 .../default/example/TextareaWithText.vue      |   2 +-
 .../default/example/ToastDestructive.vue      |   4 +-
 .../default/example/ToastWithAction.vue       |   4 +-
 .../registry/default/example/ToggleDemo.vue   |   4 +-
 .../default/example/ToggleDisabledDemo.vue    |   4 +-
 .../default/example/ToggleGroupDemo.vue       |   4 +-
 .../example/ToggleGroupDisabledDemo.vue       |   4 +-
 .../default/example/ToggleGroupLargeDemo.vue  |   4 +-
 .../example/ToggleGroupOutlineDemo.vue        |   4 +-
 .../default/example/ToggleGroupSingleDemo.vue |   4 +-
 .../default/example/ToggleGroupSmallDemo.vue  |   4 +-
 .../default/example/ToggleItalicDemo.vue      |   4 +-
 .../example/ToggleItalicWithTextDemo.vue      |   4 +-
 .../default/example/ToggleLargeDemo.vue       |   4 +-
 .../default/example/ToggleSmallDemo.vue       |   4 +-
 .../default/example/VCalendarDemo.vue         |   2 +-
 .../default/example/VDatePickerDemo.vue       |  12 +-
 .../default/example/VDatePickerForm.vue       |  20 +-
 .../example/VDatePickerWithPresets.vue        |  12 +-
 .../default/example/VDatePickerWithRange.vue  |  12 +-
 .../default/example/VDateTimePickerDemo.vue   |  12 +-
 .../default/example/VRangePickerWithSlot.vue  |  12 +-
 .../default/ui/accordion/AccordionContent.vue |   4 +-
 .../default/ui/accordion/AccordionItem.vue    |   4 +-
 .../default/ui/accordion/AccordionTrigger.vue |   6 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |   6 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |   6 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |   4 +-
 .../alert-dialog/AlertDialogDescription.vue   |   4 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |   4 +-
 .../registry/default/ui/alert-dialog/index.ts |  12 +-
 .../lib/registry/default/ui/alert/Alert.vue   |   2 +-
 .../lib/registry/default/ui/alert/index.ts    |   4 +-
 .../default/ui/auto-form/AutoFormField.vue    |   2 +-
 .../ui/auto-form/AutoFormFieldArray.vue       |  16 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |   8 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |  14 +-
 .../ui/auto-form/AutoFormFieldEnum.vue        |   6 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |  10 +-
 .../ui/auto-form/AutoFormFieldInput.vue       |   6 +-
 .../ui/auto-form/AutoFormFieldNumber.vue      |   4 +-
 .../ui/auto-form/AutoFormFieldObject.vue      |  10 +-
 .../default/ui/auto-form/dependencies.ts      |   6 +-
 .../registry/default/ui/auto-form/index.ts    |   8 +-
 .../default/ui/auto-form/interface.ts         |   2 +-
 .../lib/registry/default/ui/avatar/Avatar.vue |   4 +-
 .../lib/registry/default/ui/avatar/index.ts   |   4 +-
 .../lib/registry/default/ui/badge/Badge.vue   |   2 +-
 .../lib/registry/default/ui/badge/index.ts    |   2 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   2 +-
 .../default/ui/breadcrumb/BreadcrumbLink.vue  |   2 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   2 +-
 .../lib/registry/default/ui/button/Button.vue |   2 +-
 .../lib/registry/default/ui/button/index.ts   |   2 +-
 .../registry/default/ui/calendar/Calendar.vue |   6 +-
 .../default/ui/calendar/CalendarGrid.vue      |   4 +-
 .../default/ui/calendar/CalendarGridRow.vue   |   4 +-
 .../default/ui/calendar/CalendarHeadCell.vue  |   4 +-
 .../default/ui/calendar/CalendarHeader.vue    |   4 +-
 .../default/ui/calendar/CalendarHeading.vue   |   4 +-
 .../ui/calendar/CalendarNextButton.vue        |   8 +-
 .../ui/calendar/CalendarPrevButton.vue        |   8 +-
 .../src/lib/registry/default/ui/card/index.ts |   6 +-
 .../default/ui/carousel/CarouselContent.vue   |   2 +-
 .../default/ui/carousel/CarouselItem.vue      |   2 +-
 .../default/ui/carousel/CarouselNext.vue      |   6 +-
 .../default/ui/carousel/CarouselPrevious.vue  |   6 +-
 .../lib/registry/default/ui/carousel/index.ts |   6 +-
 .../registry/default/ui/carousel/interface.ts |   2 +-
 .../default/ui/carousel/useCarousel.ts        |   2 +-
 .../default/ui/chart-bar/BarChart.vue         |   8 +-
 .../default/ui/chart-donut/DonutChart.vue     |   8 +-
 .../default/ui/chart-line/LineChart.vue       |  10 +-
 .../default/ui/chart/ChartCrosshair.vue       |   2 +-
 .../registry/default/ui/chart/ChartLegend.vue |   6 +-
 .../default/ui/chart/ChartSingleTooltip.vue   |   2 +-
 .../lib/registry/default/ui/chart/index.ts    |  10 +-
 .../registry/default/ui/checkbox/Checkbox.vue |   6 +-
 .../default/ui/collapsible/Collapsible.vue    |   2 +-
 .../registry/default/ui/collapsible/index.ts  |   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       |   4 +-
 .../default/ui/command/CommandItem.vue        |   4 +-
 .../default/ui/command/CommandList.vue        |   4 +-
 .../default/ui/command/CommandSeparator.vue   |   4 +-
 .../default/ui/context-menu/ContextMenu.vue   |   2 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |   6 +-
 .../ui/context-menu/ContextMenuContent.vue    |   4 +-
 .../ui/context-menu/ContextMenuItem.vue       |   4 +-
 .../ui/context-menu/ContextMenuLabel.vue      |   4 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |   6 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |   4 +-
 .../ui/context-menu/ContextMenuSubContent.vue |   4 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |   6 +-
 .../registry/default/ui/context-menu/index.ts |  14 +-
 .../default/ui/dialog/DialogContent.vue       |   6 +-
 .../default/ui/dialog/DialogDescription.vue   |   4 +-
 .../default/ui/dialog/DialogScrollContent.vue |   6 +-
 .../default/ui/dialog/DialogTitle.vue         |   4 +-
 .../lib/registry/default/ui/dialog/index.ts   |  10 +-
 .../lib/registry/default/ui/drawer/Drawer.vue |   2 +-
 .../default/ui/drawer/DrawerContent.vue       |   6 +-
 .../default/ui/drawer/DrawerDescription.vue   |   4 +-
 .../default/ui/drawer/DrawerOverlay.vue       |   4 +-
 .../default/ui/drawer/DrawerTitle.vue         |   4 +-
 .../lib/registry/default/ui/drawer/index.ts   |  10 +-
 .../DropdownMenuCheckboxItem.vue              |   6 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |   4 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |   4 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |   4 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   6 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |   4 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |   4 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   6 +-
 .../default/ui/dropdown-menu/index.ts         |  18 +-
 .../default/ui/form/FormDescription.vue       |   2 +-
 .../lib/registry/default/ui/form/FormItem.vue |   6 +-
 .../registry/default/ui/form/FormLabel.vue    |   6 +-
 .../src/lib/registry/default/ui/form/index.ts |   6 +-
 .../ui/hover-card/HoverCardContent.vue        |   4 +-
 .../registry/default/ui/hover-card/index.ts   |   2 +-
 .../lib/registry/default/ui/input/Input.vue   |   2 +-
 .../lib/registry/default/ui/label/Label.vue   |   4 +-
 .../registry/default/ui/menubar/Menubar.vue   |   4 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |   6 +-
 .../default/ui/menubar/MenubarContent.vue     |   4 +-
 .../default/ui/menubar/MenubarItem.vue        |   4 +-
 .../default/ui/menubar/MenubarLabel.vue       |   2 +-
 .../default/ui/menubar/MenubarRadioItem.vue   |   6 +-
 .../default/ui/menubar/MenubarSeparator.vue   |   4 +-
 .../default/ui/menubar/MenubarSubContent.vue  |   4 +-
 .../default/ui/menubar/MenubarSubTrigger.vue  |   6 +-
 .../default/ui/menubar/MenubarTrigger.vue     |   4 +-
 .../lib/registry/default/ui/menubar/index.ts  |   8 +-
 .../ui/navigation-menu/NavigationMenu.vue     |   4 +-
 .../navigation-menu/NavigationMenuContent.vue |   4 +-
 .../NavigationMenuIndicator.vue               |   4 +-
 .../ui/navigation-menu/NavigationMenuList.vue |   4 +-
 .../navigation-menu/NavigationMenuTrigger.vue |   6 +-
 .../NavigationMenuViewport.vue                |   4 +-
 .../default/ui/navigation-menu/index.ts       |   6 +-
 .../default/ui/number-field/NumberField.vue   |   4 +-
 .../registry/default/ui/number-field/index.ts |   6 +-
 .../ui/pagination/PaginationEllipsis.vue      |   6 +-
 .../default/ui/pagination/PaginationFirst.vue |   6 +-
 .../default/ui/pagination/PaginationLast.vue  |   6 +-
 .../default/ui/pagination/PaginationNext.vue  |   6 +-
 .../default/ui/pagination/PaginationPrev.vue  |   6 +-
 .../registry/default/ui/pagination/index.ts   |  10 +-
 .../default/ui/pin-input/PinInput.vue         |   4 +-
 .../default/ui/pin-input/PinInputGroup.vue    |   4 +-
 .../default/ui/pin-input/PinInputInput.vue    |   4 +-
 .../ui/pin-input/PinInputSeparator.vue        |   2 +-
 .../registry/default/ui/pin-input/index.ts    |   2 +-
 .../registry/default/ui/popover/Popover.vue   |   2 +-
 .../default/ui/popover/PopoverContent.vue     |   4 +-
 .../lib/registry/default/ui/popover/index.ts  |   2 +-
 .../registry/default/ui/progress/Progress.vue |   4 +-
 .../default/ui/radio-group/RadioGroup.vue     |   4 +-
 .../default/ui/radio-group/RadioGroupItem.vue |   6 +-
 .../ui/range-calendar/RangeCalendar.vue       |   6 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |   4 +-
 .../range-calendar/RangeCalendarGridRow.vue   |   4 +-
 .../ui/range-calendar/RangeCalendarHeader.vue |   4 +-
 .../range-calendar/RangeCalendarHeading.vue   |   4 +-
 .../RangeCalendarNextButton.vue               |   8 +-
 .../RangeCalendarPrevButton.vue               |   8 +-
 .../default/ui/resizable/ResizableHandle.vue  |   6 +-
 .../ui/resizable/ResizablePanelGroup.vue      |   4 +-
 .../registry/default/ui/resizable/index.ts    |   2 +-
 .../default/ui/scroll-area/ScrollArea.vue     |   4 +-
 .../default/ui/scroll-area/ScrollBar.vue      |   4 +-
 .../default/ui/select/SelectContent.vue       |   4 +-
 .../default/ui/select/SelectGroup.vue         |   4 +-
 .../registry/default/ui/select/SelectItem.vue |   6 +-
 .../default/ui/select/SelectLabel.vue         |   2 +-
 .../ui/select/SelectScrollDownButton.vue      |   6 +-
 .../ui/select/SelectScrollUpButton.vue        |   6 +-
 .../default/ui/select/SelectSeparator.vue     |   4 +-
 .../lib/registry/default/ui/select/index.ts   |   8 +-
 .../default/ui/sheet/SheetContent.vue         |   6 +-
 .../default/ui/sheet/SheetDescription.vue     |   4 +-
 .../registry/default/ui/sheet/SheetTitle.vue  |   4 +-
 .../lib/registry/default/ui/sheet/index.ts    |   8 +-
 .../lib/registry/default/ui/switch/Switch.vue |   4 +-
 .../registry/default/ui/table/TableEmpty.vue  |   6 +-
 .../lib/registry/default/ui/table/index.ts    |   6 +-
 .../src/lib/registry/default/ui/tabs/Tabs.vue |   2 +-
 .../registry/default/ui/tabs/TabsContent.vue  |   4 +-
 .../src/lib/registry/default/ui/tabs/index.ts |   4 +-
 .../default/ui/tags-input/TagsInput.vue       |   4 +-
 .../default/ui/tags-input/TagsInputInput.vue  |   4 +-
 .../default/ui/tags-input/TagsInputItem.vue   |   4 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |   6 +-
 .../ui/tags-input/TagsInputItemText.vue       |   4 +-
 .../registry/default/ui/textarea/Textarea.vue |   2 +-
 .../lib/registry/default/ui/toast/Toast.vue   |   6 +-
 .../registry/default/ui/toast/ToastAction.vue |   4 +-
 .../registry/default/ui/toast/ToastClose.vue  |   6 +-
 .../default/ui/toast/ToastDescription.vue     |   4 +-
 .../registry/default/ui/toast/ToastTitle.vue  |   4 +-
 .../default/ui/toast/ToastViewport.vue        |   4 +-
 .../lib/registry/default/ui/toast/Toaster.vue |   2 +-
 .../lib/registry/default/ui/toast/index.ts    |   8 +-
 .../registry/default/ui/toast/use-toast.ts    |   2 +-
 .../default/ui/toggle-group/ToggleGroup.vue   |   6 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |   4 +-
 .../lib/registry/default/ui/toggle/Toggle.vue |   6 +-
 .../lib/registry/default/ui/toggle/index.ts   |   2 +-
 .../default/ui/tooltip/TooltipContent.vue     |   4 +-
 .../lib/registry/default/ui/tooltip/index.ts  |   2 +-
 .../default/ui/v-calendar/Calendar.vue        |   6 +-
 apps/www/src/lib/registry/index.ts            |   2 +-
 .../registry/new-york/block/Dashboard01.vue   |   2 +-
 .../registry/new-york/block/Dashboard02.vue   |   4 +-
 .../registry/new-york/block/Dashboard03.vue   |   4 +-
 .../registry/new-york/block/Dashboard04.vue   |   4 +-
 .../registry/new-york/block/Dashboard05.vue   |  50 ++--
 .../registry/new-york/block/Dashboard06.vue   |  42 +--
 .../registry/new-york/block/Dashboard07.vue   |  76 +++---
 .../registry/new-york/example/AlertDemo.vue   |   2 +-
 .../new-york/example/AlertDestructiveDemo.vue |   2 +-
 .../example/AreaChartCustomTooltip.vue        |   2 +-
 .../new-york/example/AreaChartSparkline.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   |  10 +-
 .../new-york/example/AutoFormDependencies.vue |   8 +-
 .../example/AutoFormInputWithoutLabel.vue     |   6 +-
 .../new-york/example/AutoFormSubObject.vue    |   6 +-
 .../example/BarChartCustomTooltip.vue         |   2 +-
 .../new-york/example/BreadcrumbDropdown.vue   |   2 +-
 .../new-york/example/BreadcrumbResponsive.vue |   4 +-
 .../example/BreadcrumbSeparatorDemo.vue       |   2 +-
 .../new-york/example/ButtonIconDemo.vue       |   2 +-
 .../new-york/example/ButtonLoadingDemo.vue    |   2 +-
 .../new-york/example/ButtonWithIconDemo.vue   |   2 +-
 .../new-york/example/CalendarDemo.vue         |   4 +-
 .../new-york/example/CalendarForm.vue         |  16 +-
 .../registry/new-york/example/CardChat.vue    |  12 +-
 .../registry/new-york/example/CardDemo.vue    |   2 +-
 .../new-york/example/CardFormDemo.vue         |   6 +-
 .../registry/new-york/example/CardStats.vue   |   4 +-
 .../new-york/example/Cards/ActivityGoal.vue   |   8 +-
 .../new-york/example/Cards/DataTable.vue      |  26 +-
 .../new-york/example/Cards/Metric.vue         |   4 +-
 .../registry/new-york/example/CarouselApi.vue |   6 +-
 .../new-york/example/CarouselDemo.vue         |   2 +-
 .../new-york/example/CarouselOrientation.vue  |   2 +-
 .../new-york/example/CarouselPlugin.vue       |   4 +-
 .../new-york/example/CarouselSize.vue         |   2 +-
 .../new-york/example/CarouselSpacing.vue      |   2 +-
 .../new-york/example/CarouselThumbnails.vue   |   6 +-
 .../new-york/example/CheckboxFormMultiple.vue |  12 +-
 .../new-york/example/CheckboxFormSingle.vue   |  12 +-
 .../new-york/example/CollapsibleDemo.vue      |   6 +-
 .../new-york/example/ComboboxDemo.vue         |   8 +-
 .../new-york/example/ComboboxDropdownMenu.vue |   6 +-
 .../new-york/example/ComboboxForm.vue         |  14 +-
 .../new-york/example/ComboboxPopover.vue      |   4 +-
 .../new-york/example/ComboboxResponsive.vue   |   4 +-
 .../registry/new-york/example/CommandDemo.vue |  18 +-
 .../new-york/example/CommandDialogDemo.vue    |   6 +-
 .../new-york/example/DatePickerDemo.vue       |  12 +-
 .../new-york/example/DatePickerForm.vue       |  16 +-
 .../DatePickerWithIndependentMonths.vue       |  38 +--
 .../example/DatePickerWithPresets.vue         |  14 +-
 .../new-york/example/DatePickerWithRange.vue  |  14 +-
 .../example/DialogCustomCloseButton.vue       |   2 +-
 .../example/DonutChartCustomTooltip.vue       |   2 +-
 .../registry/new-york/example/DrawerDemo.vue  |   6 +-
 .../new-york/example/DrawerDialog.vue         |   6 +-
 .../example/DropdownMenuCheckboxes.vue        |   2 +-
 .../example/DropdownMenuRadioGroup.vue        |   2 +-
 .../new-york/example/HoverCardDemo.vue        |   4 +-
 .../registry/new-york/example/InputForm.vue   |  10 +-
 .../new-york/example/InputFormAutoAnimate.vue |  12 +-
 .../new-york/example/InputWithButton.vue      |   2 +-
 .../new-york/example/InputWithIcon.vue        |   2 +-
 .../example/LineChartCustomTooltip.vue        |   2 +-
 .../new-york/example/NumberFieldCurrency.vue  |   2 +-
 .../new-york/example/NumberFieldDecimal.vue   |   2 +-
 .../new-york/example/NumberFieldDemo.vue      |   2 +-
 .../new-york/example/NumberFieldDisabled.vue  |   2 +-
 .../example/NumberFieldPercentage.vue         |   2 +-
 .../new-york/example/PaginationDemo.vue       |   8 +-
 .../new-york/example/PinInputControlled.vue   |   2 +-
 .../new-york/example/PinInputDemo.vue         |   2 +-
 .../new-york/example/PinInputDisabled.vue     |   2 +-
 .../example/PinInputSeparatorDemo.vue         |   2 +-
 .../registry/new-york/example/PopoverDemo.vue |   6 +-
 .../new-york/example/ProgressDemo.vue         |   2 +-
 .../new-york/example/RadioGroupForm.vue       |  10 +-
 .../new-york/example/RangeCalendarDemo.vue    |   4 +-
 .../registry/new-york/example/SelectForm.vue  |  10 +-
 .../new-york/example/SheetSideDemo.vue        |   2 +-
 .../registry/new-york/example/SliderDemo.vue  |   4 +-
 .../registry/new-york/example/SliderForm.vue  |  10 +-
 .../registry/new-york/example/SonnerDemo.vue  |   2 +-
 .../new-york/example/SonnerWithDialog.vue     |   2 +-
 .../registry/new-york/example/SwitchForm.vue  |  10 +-
 .../new-york/example/TagsInputDemo.vue        |   2 +-
 .../new-york/example/TextareaForm.vue         |  10 +-
 .../new-york/example/TextareaWithButton.vue   |   2 +-
 .../new-york/example/TextareaWithLabel.vue    |   2 +-
 .../new-york/example/TextareaWithText.vue     |   2 +-
 .../new-york/example/ToastDestructive.vue     |   4 +-
 .../new-york/example/ToastWithAction.vue      |   4 +-
 .../registry/new-york/example/ToggleDemo.vue  |   4 +-
 .../new-york/example/ToggleDisabledDemo.vue   |   4 +-
 .../new-york/example/ToggleGroupDemo.vue      |   4 +-
 .../example/ToggleGroupDisabledDemo.vue       |   4 +-
 .../new-york/example/ToggleGroupLargeDemo.vue |   4 +-
 .../example/ToggleGroupOutlineDemo.vue        |   4 +-
 .../example/ToggleGroupSingleDemo.vue         |   4 +-
 .../new-york/example/ToggleGroupSmallDemo.vue |   4 +-
 .../new-york/example/ToggleItalicDemo.vue     |   4 +-
 .../example/ToggleItalicWithTextDemo.vue      |   4 +-
 .../new-york/example/ToggleLargeDemo.vue      |   4 +-
 .../new-york/example/ToggleSmallDemo.vue      |   4 +-
 .../new-york/example/VCalendarDemo.vue        |   2 +-
 .../new-york/example/VDatePickerDemo.vue      |  12 +-
 .../new-york/example/VDatePickerForm.vue      |  20 +-
 .../example/VDatePickerWithPresets.vue        |  12 +-
 .../new-york/example/VDatePickerWithRange.vue |  12 +-
 .../new-york/example/VDateTimePickerDemo.vue  |  12 +-
 .../new-york/example/VRangePickerWithSlot.vue |  12 +-
 .../ui/accordion/AccordionContent.vue         |   4 +-
 .../new-york/ui/accordion/AccordionItem.vue   |   4 +-
 .../ui/accordion/AccordionTrigger.vue         |   6 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |   6 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |   6 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |   4 +-
 .../alert-dialog/AlertDialogDescription.vue   |   4 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |   4 +-
 .../new-york/ui/alert-dialog/index.ts         |  12 +-
 .../lib/registry/new-york/ui/alert/Alert.vue  |   2 +-
 .../lib/registry/new-york/ui/alert/index.ts   |   4 +-
 .../new-york/ui/auto-form/AutoFormField.vue   |   2 +-
 .../ui/auto-form/AutoFormFieldArray.vue       |  16 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |   8 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |  14 +-
 .../ui/auto-form/AutoFormFieldEnum.vue        |   6 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |  10 +-
 .../ui/auto-form/AutoFormFieldInput.vue       |   6 +-
 .../ui/auto-form/AutoFormFieldNumber.vue      |   4 +-
 .../ui/auto-form/AutoFormFieldObject.vue      |  10 +-
 .../new-york/ui/auto-form/dependencies.ts     |   6 +-
 .../registry/new-york/ui/auto-form/index.ts   |   8 +-
 .../new-york/ui/auto-form/interface.ts        |   2 +-
 .../registry/new-york/ui/avatar/Avatar.vue    |   4 +-
 .../lib/registry/new-york/ui/avatar/index.ts  |   4 +-
 .../lib/registry/new-york/ui/badge/Badge.vue  |   2 +-
 .../lib/registry/new-york/ui/badge/index.ts   |   2 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   2 +-
 .../new-york/ui/breadcrumb/BreadcrumbLink.vue |   2 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |   2 +-
 .../registry/new-york/ui/button/Button.vue    |   2 +-
 .../lib/registry/new-york/ui/button/index.ts  |   2 +-
 .../new-york/ui/calendar/Calendar.vue         |   6 +-
 .../new-york/ui/calendar/CalendarGrid.vue     |   4 +-
 .../new-york/ui/calendar/CalendarGridRow.vue  |   4 +-
 .../new-york/ui/calendar/CalendarHeadCell.vue |   4 +-
 .../new-york/ui/calendar/CalendarHeader.vue   |   4 +-
 .../new-york/ui/calendar/CalendarHeading.vue  |   4 +-
 .../ui/calendar/CalendarNextButton.vue        |   8 +-
 .../ui/calendar/CalendarPrevButton.vue        |   8 +-
 .../lib/registry/new-york/ui/card/index.ts    |   6 +-
 .../new-york/ui/carousel/CarouselContent.vue  |   2 +-
 .../new-york/ui/carousel/CarouselItem.vue     |   2 +-
 .../new-york/ui/carousel/CarouselNext.vue     |   6 +-
 .../new-york/ui/carousel/CarouselPrevious.vue |   6 +-
 .../registry/new-york/ui/carousel/index.ts    |   6 +-
 .../new-york/ui/carousel/interface.ts         |   2 +-
 .../new-york/ui/carousel/useCarousel.ts       |   2 +-
 .../new-york/ui/chart-bar/BarChart.vue        |   8 +-
 .../new-york/ui/chart-donut/DonutChart.vue    |   8 +-
 .../new-york/ui/chart-line/LineChart.vue      |  10 +-
 .../new-york/ui/chart/ChartCrosshair.vue      |   2 +-
 .../new-york/ui/chart/ChartLegend.vue         |   6 +-
 .../new-york/ui/chart/ChartSingleTooltip.vue  |   2 +-
 .../lib/registry/new-york/ui/chart/index.ts   |  10 +-
 .../new-york/ui/checkbox/Checkbox.vue         |   6 +-
 .../new-york/ui/collapsible/Collapsible.vue   |   2 +-
 .../registry/new-york/ui/collapsible/index.ts |   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      |   4 +-
 .../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  |   2 +-
 .../context-menu/ContextMenuCheckboxItem.vue  |   6 +-
 .../ui/context-menu/ContextMenuContent.vue    |   4 +-
 .../ui/context-menu/ContextMenuItem.vue       |   4 +-
 .../ui/context-menu/ContextMenuLabel.vue      |   4 +-
 .../ui/context-menu/ContextMenuRadioItem.vue  |   6 +-
 .../ui/context-menu/ContextMenuSeparator.vue  |   4 +-
 .../ui/context-menu/ContextMenuSubContent.vue |   4 +-
 .../ui/context-menu/ContextMenuSubTrigger.vue |   6 +-
 .../new-york/ui/context-menu/index.ts         |  14 +-
 .../new-york/ui/dialog/DialogContent.vue      |   6 +-
 .../new-york/ui/dialog/DialogDescription.vue  |   4 +-
 .../new-york/ui/dialog/DialogTitle.vue        |   4 +-
 .../lib/registry/new-york/ui/dialog/index.ts  |  10 +-
 .../registry/new-york/ui/drawer/Drawer.vue    |   2 +-
 .../new-york/ui/drawer/DrawerContent.vue      |   6 +-
 .../new-york/ui/drawer/DrawerDescription.vue  |   4 +-
 .../new-york/ui/drawer/DrawerOverlay.vue      |   4 +-
 .../new-york/ui/drawer/DrawerTitle.vue        |   4 +-
 .../lib/registry/new-york/ui/drawer/index.ts  |  10 +-
 .../DropdownMenuCheckboxItem.vue              |   6 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |   4 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |   4 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |   4 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |   6 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |   4 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |   4 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |   6 +-
 .../new-york/ui/dropdown-menu/index.ts        |  18 +-
 .../new-york/ui/form/FormDescription.vue      |   2 +-
 .../registry/new-york/ui/form/FormItem.vue    |   6 +-
 .../registry/new-york/ui/form/FormLabel.vue   |   6 +-
 .../lib/registry/new-york/ui/form/index.ts    |   6 +-
 .../ui/hover-card/HoverCardContent.vue        |   4 +-
 .../registry/new-york/ui/hover-card/index.ts  |   2 +-
 .../lib/registry/new-york/ui/input/Input.vue  |   2 +-
 .../lib/registry/new-york/ui/label/Label.vue  |   4 +-
 .../registry/new-york/ui/menubar/Menubar.vue  |   4 +-
 .../ui/menubar/MenubarCheckboxItem.vue        |   6 +-
 .../new-york/ui/menubar/MenubarContent.vue    |   4 +-
 .../new-york/ui/menubar/MenubarItem.vue       |   4 +-
 .../new-york/ui/menubar/MenubarLabel.vue      |   2 +-
 .../new-york/ui/menubar/MenubarRadioItem.vue  |   6 +-
 .../new-york/ui/menubar/MenubarSeparator.vue  |   4 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |   4 +-
 .../new-york/ui/menubar/MenubarSubTrigger.vue |   6 +-
 .../new-york/ui/menubar/MenubarTrigger.vue    |   4 +-
 .../lib/registry/new-york/ui/menubar/index.ts |   8 +-
 .../ui/navigation-menu/NavigationMenu.vue     |   4 +-
 .../navigation-menu/NavigationMenuContent.vue |   4 +-
 .../NavigationMenuIndicator.vue               |   4 +-
 .../ui/navigation-menu/NavigationMenuList.vue |   4 +-
 .../navigation-menu/NavigationMenuTrigger.vue |   6 +-
 .../NavigationMenuViewport.vue                |   4 +-
 .../new-york/ui/navigation-menu/index.ts      |   6 +-
 .../new-york/ui/number-field/NumberField.vue  |   4 +-
 .../new-york/ui/number-field/index.ts         |   6 +-
 .../ui/pagination/PaginationEllipsis.vue      |   6 +-
 .../ui/pagination/PaginationFirst.vue         |   6 +-
 .../new-york/ui/pagination/PaginationLast.vue |   6 +-
 .../new-york/ui/pagination/PaginationNext.vue |   6 +-
 .../new-york/ui/pagination/PaginationPrev.vue |   6 +-
 .../registry/new-york/ui/pagination/index.ts  |  10 +-
 .../new-york/ui/pin-input/PinInput.vue        |   4 +-
 .../new-york/ui/pin-input/PinInputGroup.vue   |   4 +-
 .../new-york/ui/pin-input/PinInputInput.vue   |   4 +-
 .../ui/pin-input/PinInputSeparator.vue        |   2 +-
 .../registry/new-york/ui/pin-input/index.ts   |   2 +-
 .../registry/new-york/ui/popover/Popover.vue  |   2 +-
 .../new-york/ui/popover/PopoverContent.vue    |   4 +-
 .../lib/registry/new-york/ui/popover/index.ts |   4 +-
 .../new-york/ui/progress/Progress.vue         |   4 +-
 .../new-york/ui/radio-group/RadioGroup.vue    |   4 +-
 .../ui/radio-group/RadioGroupItem.vue         |   6 +-
 .../ui/range-calendar/RangeCalendar.vue       |   6 +-
 .../ui/range-calendar/RangeCalendarGrid.vue   |   4 +-
 .../ui/range-calendar/RangeCalendarHeader.vue |   4 +-
 .../range-calendar/RangeCalendarHeading.vue   |   4 +-
 .../RangeCalendarNextButton.vue               |   8 +-
 .../RangeCalendarPrevButton.vue               |   8 +-
 .../new-york/ui/resizable/ResizableHandle.vue |   6 +-
 .../ui/resizable/ResizablePanelGroup.vue      |   4 +-
 .../registry/new-york/ui/resizable/index.ts   |   2 +-
 .../new-york/ui/scroll-area/ScrollArea.vue    |   4 +-
 .../new-york/ui/scroll-area/ScrollBar.vue     |   4 +-
 .../new-york/ui/select/SelectContent.vue      |   4 +-
 .../new-york/ui/select/SelectGroup.vue        |   4 +-
 .../new-york/ui/select/SelectItem.vue         |   6 +-
 .../new-york/ui/select/SelectLabel.vue        |   2 +-
 .../ui/select/SelectScrollDownButton.vue      |   6 +-
 .../ui/select/SelectScrollUpButton.vue        |   6 +-
 .../new-york/ui/select/SelectSeparator.vue    |   4 +-
 .../lib/registry/new-york/ui/select/index.ts  |   8 +-
 .../new-york/ui/sheet/SheetContent.vue        |   6 +-
 .../new-york/ui/sheet/SheetDescription.vue    |   4 +-
 .../registry/new-york/ui/sheet/SheetTitle.vue |   4 +-
 .../lib/registry/new-york/ui/sheet/index.ts   |   8 +-
 .../registry/new-york/ui/switch/Switch.vue    |   4 +-
 .../registry/new-york/ui/table/TableEmpty.vue |   6 +-
 .../lib/registry/new-york/ui/table/index.ts   |   6 +-
 .../lib/registry/new-york/ui/tabs/Tabs.vue    |   2 +-
 .../registry/new-york/ui/tabs/TabsContent.vue |   4 +-
 .../lib/registry/new-york/ui/tabs/index.ts    |   4 +-
 .../new-york/ui/tags-input/TagsInput.vue      |   4 +-
 .../new-york/ui/tags-input/TagsInputInput.vue |   4 +-
 .../new-york/ui/tags-input/TagsInputItem.vue  |   4 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |   6 +-
 .../ui/tags-input/TagsInputItemText.vue       |   4 +-
 .../new-york/ui/textarea/Textarea.vue         |   2 +-
 .../lib/registry/new-york/ui/toast/Toast.vue  |   6 +-
 .../new-york/ui/toast/ToastAction.vue         |   4 +-
 .../registry/new-york/ui/toast/ToastClose.vue |   6 +-
 .../new-york/ui/toast/ToastDescription.vue    |   4 +-
 .../registry/new-york/ui/toast/ToastTitle.vue |   4 +-
 .../new-york/ui/toast/ToastViewport.vue       |   4 +-
 .../registry/new-york/ui/toast/Toaster.vue    |   2 +-
 .../lib/registry/new-york/ui/toast/index.ts   |   8 +-
 .../registry/new-york/ui/toast/use-toast.ts   |   2 +-
 .../new-york/ui/toggle-group/ToggleGroup.vue  |   6 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |   4 +-
 .../registry/new-york/ui/toggle/Toggle.vue    |   6 +-
 .../lib/registry/new-york/ui/toggle/index.ts  |   2 +-
 .../new-york/ui/tooltip/TooltipContent.vue    |   4 +-
 .../lib/registry/new-york/ui/tooltip/index.ts |   2 +-
 .../new-york/ui/v-calendar/Calendar.vue       |   8 +-
 apps/www/src/lib/registry/registry.ts         |  10 +-
 apps/www/src/lib/utils.ts                     |   2 +-
 apps/www/src/public/registry/index.json       |  16 +-
 .../registry/styles/default/accordion.json    |   6 +-
 .../registry/styles/default/alert-dialog.json |  16 +-
 .../public/registry/styles/default/alert.json |   4 +-
 .../registry/styles/default/auto-form.json    |  30 +--
 .../registry/styles/default/avatar.json       |   4 +-
 .../public/registry/styles/default/badge.json |   4 +-
 .../registry/styles/default/breadcrumb.json   |   6 +-
 .../registry/styles/default/button.json       |   4 +-
 .../registry/styles/default/calendar.json     |  20 +-
 .../public/registry/styles/default/card.json  |   2 +-
 .../registry/styles/default/carousel.json     |  16 +-
 .../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 |   8 +-
 .../registry/styles/default/checkbox.json     |   2 +-
 .../registry/styles/default/collapsible.json  |   4 +-
 .../registry/styles/default/command.json      |  16 +-
 .../registry/styles/default/context-menu.json |  20 +-
 .../registry/styles/default/dialog.json       |  10 +-
 .../registry/styles/default/drawer.json       |  12 +-
 .../styles/default/dropdown-menu.json         |  18 +-
 .../public/registry/styles/default/form.json  |   8 +-
 .../registry/styles/default/hover-card.json   |   4 +-
 .../public/registry/styles/default/input.json |   2 +-
 .../public/registry/styles/default/label.json |   2 +-
 .../registry/styles/default/menubar.json      |  22 +-
 .../styles/default/navigation-menu.json       |  14 +-
 .../registry/styles/default/number-field.json |  10 +-
 .../registry/styles/default/pagination.json   |  12 +-
 .../registry/styles/default/pin-input.json    |  10 +-
 .../registry/styles/default/popover.json      |   6 +-
 .../registry/styles/default/progress.json     |   2 +-
 .../registry/styles/default/radio-group.json  |   4 +-
 .../styles/default/range-calendar.json        |  20 +-
 .../registry/styles/default/resizable.json    |   6 +-
 .../registry/styles/default/scroll-area.json  |   4 +-
 .../registry/styles/default/select.json       |  18 +-
 .../registry/styles/default/separator.json    |   2 +-
 .../public/registry/styles/default/sheet.json |   8 +-
 .../registry/styles/default/slider.json       |   2 +-
 .../registry/styles/default/stepper.json      |  16 +-
 .../registry/styles/default/switch.json       |   2 +-
 .../public/registry/styles/default/table.json |   4 +-
 .../public/registry/styles/default/tabs.json  |  10 +-
 .../registry/styles/default/tags-input.json   |  10 +-
 .../registry/styles/default/textarea.json     |   2 +-
 .../public/registry/styles/default/toast.json |  18 +-
 .../registry/styles/default/toggle-group.json |   4 +-
 .../registry/styles/default/toggle.json       |   4 +-
 .../registry/styles/default/tooltip.json      |   4 +-
 .../registry/styles/default/v-calendar.json   |  10 +-
 .../registry/styles/new-york/accordion.json   |   6 +-
 .../styles/new-york/alert-dialog.json         |  16 +-
 .../registry/styles/new-york/alert.json       |   4 +-
 .../registry/styles/new-york/auto-form.json   |  30 +--
 .../registry/styles/new-york/avatar.json      |   4 +-
 .../registry/styles/new-york/badge.json       |   4 +-
 .../registry/styles/new-york/breadcrumb.json  |   6 +-
 .../registry/styles/new-york/button.json      |   4 +-
 .../registry/styles/new-york/calendar.json    |  20 +-
 .../public/registry/styles/new-york/card.json |   2 +-
 .../registry/styles/new-york/carousel.json    |  16 +-
 .../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       |   8 +-
 .../registry/styles/new-york/checkbox.json    |   2 +-
 .../registry/styles/new-york/collapsible.json |   4 +-
 .../registry/styles/new-york/command.json     |  16 +-
 .../styles/new-york/context-menu.json         |  20 +-
 .../registry/styles/new-york/dialog.json      |  10 +-
 .../registry/styles/new-york/drawer.json      |  12 +-
 .../styles/new-york/dropdown-menu.json        |  18 +-
 .../public/registry/styles/new-york/form.json |   8 +-
 .../registry/styles/new-york/hover-card.json  |   4 +-
 .../registry/styles/new-york/input.json       |   2 +-
 .../registry/styles/new-york/label.json       |   2 +-
 .../registry/styles/new-york/menubar.json     |  22 +-
 .../styles/new-york/navigation-menu.json      |  14 +-
 .../styles/new-york/number-field.json         |  10 +-
 .../registry/styles/new-york/pagination.json  |  12 +-
 .../registry/styles/new-york/pin-input.json   |  10 +-
 .../registry/styles/new-york/popover.json     |   6 +-
 .../registry/styles/new-york/progress.json    |   2 +-
 .../registry/styles/new-york/radio-group.json |   4 +-
 .../styles/new-york/range-calendar.json       |  20 +-
 .../registry/styles/new-york/resizable.json   |   6 +-
 .../registry/styles/new-york/scroll-area.json |   4 +-
 .../registry/styles/new-york/select.json      |  18 +-
 .../registry/styles/new-york/separator.json   |   2 +-
 .../registry/styles/new-york/sheet.json       |   8 +-
 .../registry/styles/new-york/slider.json      |   2 +-
 .../registry/styles/new-york/stepper.json     |  16 +-
 .../registry/styles/new-york/switch.json      |   2 +-
 .../registry/styles/new-york/table.json       |   4 +-
 .../public/registry/styles/new-york/tabs.json |  10 +-
 .../registry/styles/new-york/tags-input.json  |  10 +-
 .../registry/styles/new-york/textarea.json    |   2 +-
 .../registry/styles/new-york/toast.json       |  18 +-
 .../styles/new-york/toggle-group.json         |   4 +-
 .../registry/styles/new-york/toggle.json      |   4 +-
 .../registry/styles/new-york/tooltip.json     |   4 +-
 .../registry/styles/new-york/v-calendar.json  |  10 +-
 apps/www/src/stores/config.ts                 |   4 +-
 eslint.config.js                              |   2 +
 packages/cli/src/commands/add.ts              |  18 +-
 packages/cli/src/commands/diff.ts             |  16 +-
 packages/cli/src/commands/init.ts             |  32 +--
 packages/cli/src/index.ts                     |   4 +-
 packages/cli/src/utils/get-config.ts          |  10 +-
 packages/cli/src/utils/get-package-info.ts    |   6 +-
 packages/cli/src/utils/get-project-info.ts    |   8 +-
 packages/cli/src/utils/registry/index.ts      |  14 +-
 packages/cli/src/utils/transformers/index.ts  |   4 +-
 .../utils/transformers/transform-css-vars.ts  |   6 +-
 .../utils/transformers/transform-import.ts    |   1 -
 packages/cli/test/commands/init.test.ts       |   2 +-
 .../ui/alert-dialog/AlertDialog.vue           |   2 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |   4 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |   4 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |   2 +-
 .../alert-dialog/AlertDialogDescription.vue   |   2 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |   2 +-
 .../nuxt/components/ui/alert-dialog/index.ts  |  12 +-
 .../nuxt/components/ui/button/Button.vue      |   2 +-
 .../components/ui/button/Button.vue           |   2 +-
 .../playground/components/ui/button/index.ts  |   2 +-
 .../components/ui/carousel/Carousel.vue       |   2 +-
 .../ui/carousel/CarouselContent.vue           |   2 +-
 .../components/ui/carousel/CarouselItem.vue   |   2 +-
 .../components/ui/carousel/CarouselNext.vue   |   6 +-
 .../ui/carousel/CarouselPrevious.vue          |   6 +-
 .../components/ui/carousel/index.ts           |   2 +-
 .../components/ui/carousel/useCarousel.ts     |   6 +-
 .../DropdownMenuCheckboxItem.vue              |   4 +-
 .../components/ui/dropdown-menu/index.ts      |   4 +-
 packages/module/test/basic.test.ts            |   2 +-
 847 files changed, 2859 insertions(+), 2858 deletions(-)

diff --git a/apps/www/.vitepress/config.mts b/apps/www/.vitepress/config.mts
index 7399caab..31f28b8f 100644
--- a/apps/www/.vitepress/config.mts
+++ b/apps/www/.vitepress/config.mts
@@ -1,14 +1,14 @@
 import path from 'node:path'
-import { defineConfig } from 'vitepress'
-import Icons from 'unplugin-icons/vite'
-import tailwind from 'tailwindcss'
-import autoprefixer from 'autoprefixer'
 import { transformerMetaWordHighlight } from '@shikijs/transformers'
+import autoprefixer from 'autoprefixer'
+import tailwind from 'tailwindcss'
+import Icons from 'unplugin-icons/vite'
+import { defineConfig } from 'vitepress'
 import { cssVariables } from './theme/config/shiki'
 
 import { siteConfig } from './theme/config/site'
-import ComponentPreviewPlugin from './theme/plugins/previewer'
 import CodeWrapperPlugin from './theme/plugins/codewrapper'
+import ComponentPreviewPlugin from './theme/plugins/previewer'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
diff --git a/apps/www/.vitepress/theme/components/Announcement.vue b/apps/www/.vitepress/theme/components/Announcement.vue
index bcf63a66..f407ebf5 100644
--- a/apps/www/.vitepress/theme/components/Announcement.vue
+++ b/apps/www/.vitepress/theme/components/Announcement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { announcementConfig } from '../config/site'
 import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
+import { announcementConfig } from '../config/site'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/BlockCopyButton.vue b/apps/www/.vitepress/theme/components/BlockCopyButton.vue
index d56e82ca..ff344b38 100644
--- a/apps/www/.vitepress/theme/components/BlockCopyButton.vue
+++ b/apps/www/.vitepress/theme/components/BlockCopyButton.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { toRefs } from 'vue'
-import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
+import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
+import { useClipboard } from '@vueuse/core'
+import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{
   code?: string
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index e6eee172..61b33a9b 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageAction from '../components/PageAction.vue'
-import Announcement from '../components/Announcement.vue'
-import BlockPreview from './BlockPreview.vue'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import GitHubIcon from '~icons/radix-icons/github-logo'
+import { ref } from 'vue'
+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 BlockPreview from './BlockPreview.vue'
 
 const blocks = ref<string[]>([])
 
diff --git a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
index fa85049a..f848f8ce 100644
--- a/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { useConfigStore } from '@/stores/config'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
 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 { useConfigStore } from '@/stores/config'
+import { toTypedSchema } from '@vee-validate/zod'
 import RadixIconsGear from '~icons/radix-icons/gear'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
 
 const { codeConfig, setCodeConfig } = useConfigStore()
 
diff --git a/apps/www/.vitepress/theme/components/CodeSandbox.vue b/apps/www/.vitepress/theme/components/CodeSandbox.vue
index 56bfb25c..04b95504 100644
--- a/apps/www/.vitepress/theme/components/CodeSandbox.vue
+++ b/apps/www/.vitepress/theme/components/CodeSandbox.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import type { Style } from '@/lib/registry/styles'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
+import { ref, toRefs, watch } from 'vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/CodeWrapper.ts b/apps/www/.vitepress/theme/components/CodeWrapper.ts
index 4b9a4b37..6bb6ba04 100644
--- a/apps/www/.vitepress/theme/components/CodeWrapper.ts
+++ b/apps/www/.vitepress/theme/components/CodeWrapper.ts
@@ -1,5 +1,5 @@
-import { type VNode, type VNodeArrayChildren, cloneVNode, defineComponent } from 'vue'
 import { useConfigStore } from '@/stores/config'
+import { cloneVNode, defineComponent, type VNode, type VNodeArrayChildren } from 'vue'
 
 function crawlSpan(children: VNodeArrayChildren, cb: (vnode: VNode) => void) {
   children.forEach((childNode) => {
diff --git a/apps/www/.vitepress/theme/components/ComponentLoader.vue b/apps/www/.vitepress/theme/components/ComponentLoader.vue
index b57c59d5..e7ed23e5 100644
--- a/apps/www/.vitepress/theme/components/ComponentLoader.vue
+++ b/apps/www/.vitepress/theme/components/ComponentLoader.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useConfigStore } from '@/stores/config'
 import { defineAsyncComponent } from 'vue'
 import Spinner from './Spinner.vue'
-import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/ComponentPreview.vue b/apps/www/.vitepress/theme/components/ComponentPreview.vue
index cca57a58..aa68e46b 100644
--- a/apps/www/.vitepress/theme/components/ComponentPreview.vue
+++ b/apps/www/.vitepress/theme/components/ComponentPreview.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
-import { codeToHtml } from 'shiki'
-import MagicString from 'magic-string'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { cn } from '@/lib/utils'
+import { useConfigStore } from '@/stores/config'
 import { useClipboard } from '@vueuse/core'
+import MagicString from 'magic-string'
+import { codeToHtml } from 'shiki'
+import { computed, ref, watch } from 'vue'
 import { cssVariables } from '../config/shiki'
-import StyleSwitcher from './StyleSwitcher.vue'
+import CodeSandbox from './CodeSandbox.vue'
 import ComponentLoader from './ComponentLoader.vue'
 import Stackblitz from './Stackblitz.vue'
-import CodeSandbox from './CodeSandbox.vue'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
-import { useConfigStore } from '@/stores/config'
-import { cn } from '@/lib/utils'
+import StyleSwitcher from './StyleSwitcher.vue'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/.vitepress/theme/components/CustomizerCode.vue b/apps/www/.vitepress/theme/components/CustomizerCode.vue
index 27aa6608..c6f93537 100644
--- a/apps/www/.vitepress/theme/components/CustomizerCode.vue
+++ b/apps/www/.vitepress/theme/components/CustomizerCode.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useClipboard } from '@vueuse/core'
-import { useConfigStore } from '@/stores/config'
 import { themes } from '@/lib/registry'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { useConfigStore } from '@/stores/config'
+import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
 import CopyIcon from '~icons/radix-icons/copy'
+import { computed, ref } from 'vue'
 
 const { theme, config } = useConfigStore()
 
diff --git a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
index bcb56a32..57fb9143 100644
--- a/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
+++ b/apps/www/.vitepress/theme/components/DocsBreadcrumb.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,6 +6,8 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from '@/lib/registry/new-york/ui/breadcrumb'
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
 
 const route = useRoute()
 
diff --git a/apps/www/.vitepress/theme/components/EditLink.vue b/apps/www/.vitepress/theme/components/EditLink.vue
index 7ff8faeb..c6e705a3 100644
--- a/apps/www/.vitepress/theme/components/EditLink.vue
+++ b/apps/www/.vitepress/theme/components/EditLink.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import Pencil2Icon from '~icons/radix-icons/pencil-2'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
-import Pencil2Icon from '~icons/radix-icons/pencil-2'
-import { Button } from '@/lib/registry/default/ui/button'
 
 const { theme, page } = useData()
 
diff --git a/apps/www/.vitepress/theme/components/ExamplesNav.vue b/apps/www/.vitepress/theme/components/ExamplesNav.vue
index 039c010f..d4845775 100644
--- a/apps/www/.vitepress/theme/components/ExamplesNav.vue
+++ b/apps/www/.vitepress/theme/components/ExamplesNav.vue
@@ -1,9 +1,9 @@
 <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'
-import { cn } from '@/lib/utils'
-import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 
 const { path } = toRefs(useRoute())
 
diff --git a/apps/www/.vitepress/theme/components/InlineThemePicker.vue b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
index 5a3cd7b7..d610157d 100644
--- a/apps/www/.vitepress/theme/components/InlineThemePicker.vue
+++ b/apps/www/.vitepress/theme/components/InlineThemePicker.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
-import { useConfigStore } from '@/stores/config'
 import { colors } from '@/lib/registry'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 
 defineProps<{
diff --git a/apps/www/.vitepress/theme/components/LandingPage.vue b/apps/www/.vitepress/theme/components/LandingPage.vue
index 6a6a7dd0..197960d7 100644
--- a/apps/www/.vitepress/theme/components/LandingPage.vue
+++ b/apps/www/.vitepress/theme/components/LandingPage.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageAction from '../components/PageAction.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import Announcement from '../components/Announcement.vue'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-
+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 Announcement from '../components/Announcement.vue'
+import ExamplesNav from '../components/ExamplesNav.vue'
+import PageAction from '../components/PageAction.vue'
 
-import MailExample from '@/examples/mail/Example.vue'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/MobileNav.vue b/apps/www/.vitepress/theme/components/MobileNav.vue
index c6d0916c..10de01c1 100644
--- a/apps/www/.vitepress/theme/components/MobileNav.vue
+++ b/apps/www/.vitepress/theme/components/MobileNav.vue
@@ -1,10 +1,10 @@
 <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 { ref } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from './Logo.vue'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
-import { Button } from '@/lib/registry/default/ui/button'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const open = ref(false)
 </script>
diff --git a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
index 68430c80..e9794db8 100644
--- a/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
+++ b/apps/www/.vitepress/theme/components/PageHeaderDescription.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import WrapBalancer from 'vue-wrap-balancer'
 import { cn } from '@/lib/utils'
+import WrapBalancer from 'vue-wrap-balancer'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/components/Stackblitz.vue b/apps/www/.vitepress/theme/components/Stackblitz.vue
index fe364a67..c45c85a8 100644
--- a/apps/www/.vitepress/theme/components/Stackblitz.vue
+++ b/apps/www/.vitepress/theme/components/Stackblitz.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, toRefs, watch } from 'vue'
+import type { Style } from '@/lib/registry/styles'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import { Icon } from '@iconify/vue'
+import { ref, toRefs, watch } from 'vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string
diff --git a/apps/www/.vitepress/theme/components/StyleSwitcher.vue b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
index f48cc032..b46de100 100644
--- a/apps/www/.vitepress/theme/components/StyleSwitcher.vue
+++ b/apps/www/.vitepress/theme/components/StyleSwitcher.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import type { SelectTriggerProps } from 'radix-vue'
-import { useConfigStore } from '@/stores/config'
-
-import { cn } from '@/lib/utils'
 import {
   Select,
   SelectContent,
@@ -10,7 +7,10 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
+
 import { styles } from '@/lib/registry/styles'
+import { cn } from '@/lib/utils'
+import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<SelectTriggerProps & { class?: string }>()
 const { config } = useConfigStore()
diff --git a/apps/www/.vitepress/theme/components/TableOfContent.vue b/apps/www/.vitepress/theme/components/TableOfContent.vue
index 7e02aae4..a46284b7 100644
--- a/apps/www/.vitepress/theme/components/TableOfContent.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContent.vue
@@ -1,11 +1,11 @@
 <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 { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
-import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import TableOfContentTree from './TableOfContentTree.vue'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const headers = shallowRef<TableOfContents>()
 
diff --git a/apps/www/.vitepress/theme/components/TableOfContentTree.vue b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
index 7e07e8fd..b0da4502 100644
--- a/apps/www/.vitepress/theme/components/TableOfContentTree.vue
+++ b/apps/www/.vitepress/theme/components/TableOfContentTree.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRoute } from 'vitepress'
 import type { TableOfContentsItem } from '../types/docs'
 import { cn } from '@/lib/utils'
+import { useRoute } from 'vitepress'
+import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 withDefaults(defineProps<{
   level: number
diff --git a/apps/www/.vitepress/theme/components/TabsMarkdown.vue b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
index f8186f8b..ac893c0a 100644
--- a/apps/www/.vitepress/theme/components/TabsMarkdown.vue
+++ b/apps/www/.vitepress/theme/components/TabsMarkdown.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
 import { Tabs, TabsList, TabsTrigger } from '@/lib/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 a5a653ba..769b1c41 100644
--- a/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
+++ b/apps/www/.vitepress/theme/components/ThemeCustomizer.vue
@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { useData } from 'vitepress'
 import type { Color } from '../types/colors'
-import { RADII, useConfigStore } from '@/stores/config'
+import { colors } from '@/lib/registry'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Label } from '@/lib/registry/new-york/ui/label'
-import { colors } from '@/lib/registry'
+import { RADII, useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsSun from '~icons/radix-icons/sun'
 import RadixIconsMoon from '~icons/radix-icons/moon'
+import RadixIconsSun from '~icons/radix-icons/sun'
+import { useData } from 'vitepress'
 
 defineProps<{
   allColors: Color[]
diff --git a/apps/www/.vitepress/theme/components/ThemePopover.vue b/apps/www/.vitepress/theme/components/ThemePopover.vue
index d862ec98..804afc1a 100644
--- a/apps/www/.vitepress/theme/components/ThemePopover.vue
+++ b/apps/www/.vitepress/theme/components/ThemePopover.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { Paintbrush } from 'lucide-vue-next'
-import { onMounted, watch } from 'vue'
-import { allColors } from './theming/utils/data'
-import ThemeCustomizer from './ThemeCustomizer.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 import { useConfigStore } from '@/stores/config'
+import { Paintbrush } from 'lucide-vue-next'
+import { onMounted, watch } from 'vue'
+import ThemeCustomizer from './ThemeCustomizer.vue'
+import { allColors } from './theming/utils/data'
 
 const { theme, radius } = useConfigStore()
 
diff --git a/apps/www/.vitepress/theme/components/index.ts b/apps/www/.vitepress/theme/components/index.ts
index ec426bc3..5ab35ce6 100644
--- a/apps/www/.vitepress/theme/components/index.ts
+++ b/apps/www/.vitepress/theme/components/index.ts
@@ -1,11 +1,11 @@
+export { default as APITable } from './APITable.vue'
+export { default as Callout } from './Callout.vue'
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
-export { default as APITable } from './APITable.vue'
-export { default as TabPreview } from './TabPreview.vue'
-export { default as TabMarkdown } from './TabMarkdown.vue'
-export { default as TabsMarkdown } from './TabsMarkdown.vue'
-export { default as Callout } from './Callout.vue'
 export { default as LinkedCard } from './LinkedCard.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
 export { default as Steps } from './Steps.vue'
+export { default as TabMarkdown } from './TabMarkdown.vue'
+export { default as TabPreview } from './TabPreview.vue'
+export { default as TabsMarkdown } from './TabsMarkdown.vue'
 export { default as VPImage } from './VPImage.vue'
diff --git a/apps/www/.vitepress/theme/components/theming/Theming.vue b/apps/www/.vitepress/theme/components/theming/Theming.vue
index e4d36786..4f55163e 100644
--- a/apps/www/.vitepress/theme/components/theming/Theming.vue
+++ b/apps/www/.vitepress/theme/components/theming/Theming.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
 import type { DateRange } from 'radix-vue'
-import { getLocalTimeZone, today } from '@internationalized/date'
-
-import ThemingLayout from './../../layout/ThemingLayout.vue'
-
 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 Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
 import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
-import CardStats from '@/lib/registry/new-york/example/CardStats.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'
+import ThemingLayout from './../../layout/ThemingLayout.vue'
 
 const now = today(getLocalTimeZone())
 
diff --git a/apps/www/.vitepress/theme/index.ts b/apps/www/.vitepress/theme/index.ts
index d4e14dc1..12f4b79f 100644
--- a/apps/www/.vitepress/theme/index.ts
+++ b/apps/www/.vitepress/theme/index.ts
@@ -1,8 +1,8 @@
-// https://vitepress.dev/guide/custom-theme
-import Layout from './layout/MainLayout.vue'
+import * as components from './components'
 import DocsLayout from './layout/DocsLayout.vue'
 import ExamplesLayout from './layout/ExamplesLayout.vue'
-import * as components from './components'
+// https://vitepress.dev/guide/custom-theme
+import Layout from './layout/MainLayout.vue'
 import './style.css'
 import './styles/vp-doc.css'
 import './styles/shiki.css'
diff --git a/apps/www/.vitepress/theme/layout/DocsLayout.vue b/apps/www/.vitepress/theme/layout/DocsLayout.vue
index d4ad12e0..4e4ce41d 100644
--- a/apps/www/.vitepress/theme/layout/DocsLayout.vue
+++ b/apps/www/.vitepress/theme/layout/DocsLayout.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useData, useRoute } from 'vitepress'
-import { docsConfig } from '../config/docs'
-import TableOfContentVue from '../components/TableOfContent.vue'
-import EditLink from '../components/EditLink.vue'
-import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
+import { useData, useRoute } from 'vitepress'
+import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
+import EditLink from '../components/EditLink.vue'
+import TableOfContentVue from '../components/TableOfContent.vue'
+import { docsConfig } from '../config/docs'
 
 const $route = useRoute()
 const { frontmatter } = useData()
diff --git a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
index 30db29d6..01ffbf52 100644
--- a/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ExamplesLayout.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageAction from '../components/PageAction.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import Announcement from '../components/Announcement.vue'
-
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
+import Announcement from '../components/Announcement.vue'
+import ExamplesNav from '../components/ExamplesNav.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'
 </script>
 
 <template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 1b67e924..284df227 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import { useMagicKeys, useToggle } from '@vueuse/core'
-import { onMounted, ref, watch } from 'vue'
-import { Content, useData, useRoute, useRouter } from 'vitepress'
-import { type NavItem, docsConfig } from '../config/docs'
-import Logo from '../components/Logo.vue'
-import MobileNav from '../components/MobileNav.vue'
-import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
-
-import Kbd from '../components/Kbd.vue'
-import ThemePopover from '../components/ThemePopover.vue'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
-
 import { Button } from '@/lib/registry/default/ui/button'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import { useConfigStore } from '@/stores/config'
+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 File from '~icons/radix-icons/file'
+import { useConfigStore } from '@/stores/config'
+import { useMagicKeys, useToggle } from '@vueuse/core'
 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 { 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 ThemePopover from '../components/ThemePopover.vue'
+import { docsConfig, type NavItem } from '../config/docs'
+
 const { radius, theme } = useConfigStore()
 // Whenever the component is mounted, update the document class list
 onMounted(() => {
diff --git a/apps/www/.vitepress/theme/layout/ThemingLayout.vue b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
index 4159084b..d0ac6abd 100644
--- a/apps/www/.vitepress/theme/layout/ThemingLayout.vue
+++ b/apps/www/.vitepress/theme/layout/ThemingLayout.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { onMounted, watch } from 'vue'
-import { Paintbrush } from 'lucide-vue-next'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import CustomizerCode from '../components/CustomizerCode.vue'
 import type { Color } from '../types/colors'
-import ThemeCustomizer from '../components/ThemeCustomizer.vue'
-import InlineThemePicker from '../components/InlineThemePicker.vue'
-import PageAction from '../components/PageAction.vue'
-import { useConfigStore } from '@/stores/config'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 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 { useConfigStore } from '@/stores/config'
+import { Paintbrush } from 'lucide-vue-next'
+import { onMounted, watch } from 'vue'
+import CustomizerCode from '../components/CustomizerCode.vue'
+import InlineThemePicker from '../components/InlineThemePicker.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 ThemeCustomizer from '../components/ThemeCustomizer.vue'
 
 // Create an array of color values
 const allColors: Color[] = [
diff --git a/apps/www/.vitepress/theme/plugins/utils.ts b/apps/www/.vitepress/theme/plugins/utils.ts
index 7ed2cb28..af3d0299 100644
--- a/apps/www/.vitepress/theme/plugins/utils.ts
+++ b/apps/www/.vitepress/theme/plugins/utils.ts
@@ -1,7 +1,7 @@
 // Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
 
-import { baseParse } from '@vue/compiler-core'
 import type { AttributeNode, ElementNode } from '@vue/compiler-core'
+import { baseParse } from '@vue/compiler-core'
 
 export interface GenerateOptions {
   attrs?: string
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 4f3683db..fbcb0e4a 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -62,56 +62,56 @@ export const Index = {
     "AutoFormApi": {
       name: "AutoFormApi",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
@@ -300,7 +300,7 @@ export const Index = {
     "CalendarForm": {
       name: "CalendarForm",
       type: "components:example",
-      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      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"],
     },
@@ -314,7 +314,7 @@ export const Index = {
     "CardChat": {
       name: "CardChat",
       type: "components:example",
-      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
+      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"],
     },
@@ -328,14 +328,14 @@ export const Index = {
     "CardFormDemo": {
       name: "CardFormDemo",
       type: "components:example",
-      registryDependencies: ["card","select","input","label","button"],
+      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"],
     },
     "CardStats": {
       name: "CardStats",
       type: "components:example",
-      registryDependencies: ["card","config","themes"],
+      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"],
     },
@@ -356,42 +356,42 @@ export const Index = {
     "CarouselDemo": {
       name: "CarouselDemo",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselDemo.vue"],
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselOrientation.vue"],
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselPlugin.vue"],
     },
     "CarouselSize": {
       name: "CarouselSize",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselSize.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselSize.vue"],
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselSpacing.vue"],
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      registryDependencies: ["card","carousel"],
       component: () => import("../src/lib/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselThumbnails.vue"],
     },
@@ -412,14 +412,14 @@ export const Index = {
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
       type: "components:example",
-      registryDependencies: ["button","form","checkbox","toast"],
+      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"],
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
       type: "components:example",
-      registryDependencies: ["button","form","checkbox","toast"],
+      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"],
     },
@@ -440,7 +440,7 @@ export const Index = {
     "ComboboxDemo": {
       name: "ComboboxDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
+      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"],
     },
@@ -454,14 +454,14 @@ export const Index = {
     "ComboboxForm": {
       name: "ComboboxForm",
       type: "components:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      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"],
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
       type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
+      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"],
     },
@@ -517,7 +517,7 @@ export const Index = {
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
       type: "components:example",
-      registryDependencies: ["dropdown-menu","button"],
+      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"],
     },
@@ -531,35 +531,35 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["calendar","button","popover","utils"],
+      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"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      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"],
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
       type: "components:example",
-      registryDependencies: ["range-calendar","button","popover","utils"],
+      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"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["calendar","button","popover","select","utils"],
+      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"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["range-calendar","button","popover","utils"],
+      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"],
     },
@@ -580,7 +580,7 @@ export const Index = {
     "DialogForm": {
       name: "DialogForm",
       type: "components:example",
-      registryDependencies: ["button","form","dialog","input","toast"],
+      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"],
     },
@@ -636,7 +636,7 @@ export const Index = {
     "DrawerDialog": {
       name: "DrawerDialog",
       type: "components:example",
-      registryDependencies: ["button","dialog","drawer","label","input"],
+      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"],
     },
@@ -706,7 +706,7 @@ export const Index = {
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",
-      registryDependencies: ["input","button"],
+      registryDependencies: ["button","input"],
       component: () => import("../src/lib/registry/default/example/InputWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/InputWithButton.vue"],
     },
@@ -769,28 +769,28 @@ export const Index = {
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
@@ -804,14 +804,14 @@ export const Index = {
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "PaginationDemo": {
       name: "PaginationDemo",
       type: "components:example",
-      registryDependencies: ["pagination","button"],
+      registryDependencies: ["button","pagination"],
       component: () => import("../src/lib/registry/default/example/PaginationDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PaginationDemo.vue"],
     },
@@ -839,7 +839,7 @@ export const Index = {
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
-      registryDependencies: ["pin-input","button","form","toast"],
+      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"],
     },
@@ -853,7 +853,7 @@ export const Index = {
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
-      registryDependencies: ["popover","button","label","input"],
+      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"],
     },
@@ -979,7 +979,7 @@ export const Index = {
     "SliderDemo": {
       name: "SliderDemo",
       type: "components:example",
-      registryDependencies: ["utils","slider"],
+      registryDependencies: ["slider","utils"],
       component: () => import("../src/lib/registry/default/example/SliderDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SliderDemo.vue"],
     },
@@ -1014,21 +1014,21 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["stepper","form","select","input","button","toast"],
+      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"],
     },
     "StepperHorizental": {
       name: "StepperHorizental",
       type: "components:example",
-      registryDependencies: ["stepper","button"],
+      registryDependencies: ["button","stepper"],
       component: () => import("../src/lib/registry/default/example/StepperHorizental.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperHorizental.vue"],
     },
     "StepperVertical": {
       name: "StepperVertical",
       type: "components:example",
-      registryDependencies: ["stepper","button"],
+      registryDependencies: ["button","stepper"],
       component: () => import("../src/lib/registry/default/example/StepperVertical.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperVertical.vue"],
     },
@@ -1084,7 +1084,7 @@ export const Index = {
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
       type: "components:example",
-      registryDependencies: ["tags-input","button","form","toast"],
+      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"],
     },
@@ -1112,21 +1112,21 @@ export const Index = {
     "TextareaWithButton": {
       name: "TextareaWithButton",
       type: "components:example",
-      registryDependencies: ["textarea","button"],
+      registryDependencies: ["button","textarea"],
       component: () => import("../src/lib/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithButton.vue"],
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
       type: "components:example",
-      registryDependencies: ["textarea","label"],
+      registryDependencies: ["label","textarea"],
       component: () => import("../src/lib/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithLabel.vue"],
     },
     "TextareaWithText": {
       name: "TextareaWithText",
       type: "components:example",
-      registryDependencies: ["textarea","label"],
+      registryDependencies: ["label","textarea"],
       component: () => import("../src/lib/registry/default/example/TextareaWithText.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithText.vue"],
     },
@@ -1140,7 +1140,7 @@ export const Index = {
     "ToastDestructive": {
       name: "ToastDestructive",
       type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
+      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"],
     },
@@ -1154,7 +1154,7 @@ export const Index = {
     "ToastWithAction": {
       name: "ToastWithAction",
       type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
+      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"],
     },
@@ -1364,42 +1364,42 @@ export const Index = {
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
+      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"],
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover","select"],
+      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"],
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
@@ -1413,7 +1413,7 @@ export const Index = {
     "DataTable": {
       name: "DataTable",
       type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","card","utils"],
+      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"],
     },
@@ -1483,21 +1483,21 @@ export const Index = {
     "Dashboard05": {
       name: "Dashboard05",
       type: "components:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
+      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","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
+      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","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
+      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"],
     },
@@ -1561,56 +1561,56 @@ export const Index = {
     "AutoFormApi": {
       name: "AutoFormApi",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
       type: "components:example",
-      registryDependencies: ["button","toast","auto-form"],
+      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"],
     },
@@ -1799,7 +1799,7 @@ export const Index = {
     "CalendarForm": {
       name: "CalendarForm",
       type: "components:example",
-      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      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"],
     },
@@ -1813,7 +1813,7 @@ export const Index = {
     "CardChat": {
       name: "CardChat",
       type: "components:example",
-      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
+      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"],
     },
@@ -1827,14 +1827,14 @@ export const Index = {
     "CardFormDemo": {
       name: "CardFormDemo",
       type: "components:example",
-      registryDependencies: ["card","select","input","label","button"],
+      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"],
     },
     "CardStats": {
       name: "CardStats",
       type: "components:example",
-      registryDependencies: ["card","config","themes"],
+      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"],
     },
@@ -1855,42 +1855,42 @@ export const Index = {
     "CarouselDemo": {
       name: "CarouselDemo",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
     "CarouselSize": {
       name: "CarouselSize",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
       type: "components:example",
-      registryDependencies: ["carousel","card"],
+      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"],
     },
@@ -1911,14 +1911,14 @@ export const Index = {
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
       type: "components:example",
-      registryDependencies: ["button","form","checkbox","toast"],
+      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"],
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
       type: "components:example",
-      registryDependencies: ["button","form","checkbox","toast"],
+      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"],
     },
@@ -1939,7 +1939,7 @@ export const Index = {
     "ComboboxDemo": {
       name: "ComboboxDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
+      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"],
     },
@@ -1953,14 +1953,14 @@ export const Index = {
     "ComboboxForm": {
       name: "ComboboxForm",
       type: "components:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
+      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"],
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
       type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
+      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"],
     },
@@ -2016,7 +2016,7 @@ export const Index = {
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
       type: "components:example",
-      registryDependencies: ["dropdown-menu","button"],
+      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"],
     },
@@ -2030,35 +2030,35 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["calendar","button","popover","utils"],
+      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"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["calendar","button","form","popover","toast","utils"],
+      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"],
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
       type: "components:example",
-      registryDependencies: ["range-calendar","button","popover","utils"],
+      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"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["calendar","button","popover","select","utils"],
+      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"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["range-calendar","button","popover","utils"],
+      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"],
     },
@@ -2079,7 +2079,7 @@ export const Index = {
     "DialogForm": {
       name: "DialogForm",
       type: "components:example",
-      registryDependencies: ["button","form","dialog","input","toast"],
+      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"],
     },
@@ -2135,7 +2135,7 @@ export const Index = {
     "DrawerDialog": {
       name: "DrawerDialog",
       type: "components:example",
-      registryDependencies: ["button","dialog","drawer","label","input"],
+      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"],
     },
@@ -2205,7 +2205,7 @@ export const Index = {
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",
-      registryDependencies: ["input","button"],
+      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"],
     },
@@ -2268,28 +2268,28 @@ export const Index = {
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
@@ -2303,14 +2303,14 @@ export const Index = {
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
       type: "components:example",
-      registryDependencies: ["number-field","label"],
+      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"],
     },
     "PaginationDemo": {
       name: "PaginationDemo",
       type: "components:example",
-      registryDependencies: ["pagination","button"],
+      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"],
     },
@@ -2338,7 +2338,7 @@ export const Index = {
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
-      registryDependencies: ["pin-input","button","form","toast"],
+      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"],
     },
@@ -2352,7 +2352,7 @@ export const Index = {
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
-      registryDependencies: ["popover","button","label","input"],
+      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"],
     },
@@ -2478,7 +2478,7 @@ export const Index = {
     "SliderDemo": {
       name: "SliderDemo",
       type: "components:example",
-      registryDependencies: ["utils","slider"],
+      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"],
     },
@@ -2513,21 +2513,21 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["stepper","form","select","input","button","toast"],
+      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"],
     },
     "StepperHorizental": {
       name: "StepperHorizental",
       type: "components:example",
-      registryDependencies: ["stepper","button"],
+      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"],
     },
     "StepperVertical": {
       name: "StepperVertical",
       type: "components:example",
-      registryDependencies: ["stepper","button"],
+      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"],
     },
@@ -2583,7 +2583,7 @@ export const Index = {
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
       type: "components:example",
-      registryDependencies: ["tags-input","button","form","toast"],
+      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"],
     },
@@ -2611,21 +2611,21 @@ export const Index = {
     "TextareaWithButton": {
       name: "TextareaWithButton",
       type: "components:example",
-      registryDependencies: ["textarea","button"],
+      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"],
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
       type: "components:example",
-      registryDependencies: ["textarea","label"],
+      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"],
     },
     "TextareaWithText": {
       name: "TextareaWithText",
       type: "components:example",
-      registryDependencies: ["textarea","label"],
+      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"],
     },
@@ -2639,7 +2639,7 @@ export const Index = {
     "ToastDestructive": {
       name: "ToastDestructive",
       type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
+      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"],
     },
@@ -2653,7 +2653,7 @@ export const Index = {
     "ToastWithAction": {
       name: "ToastWithAction",
       type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
+      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"],
     },
@@ -2863,42 +2863,42 @@ export const Index = {
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
+      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"],
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover","select"],
+      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"],
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
       type: "components:example",
-      registryDependencies: ["utils","button","v-calendar","popover"],
+      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"],
     },
@@ -2912,7 +2912,7 @@ export const Index = {
     "DataTable": {
       name: "DataTable",
       type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","card","utils"],
+      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"],
     },
@@ -2982,21 +2982,21 @@ export const Index = {
     "Dashboard05": {
       name: "Dashboard05",
       type: "components:block",
-      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
+      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","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
+      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","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
+      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"],
     },
diff --git a/apps/www/scripts/autogen.ts b/apps/www/scripts/autogen.ts
index 6fc10009..43b9a7d7 100644
--- a/apps/www/scripts/autogen.ts
+++ b/apps/www/scripts/autogen.ts
@@ -1,9 +1,9 @@
-import { join, parse, resolve } from 'node:path'
+import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
 import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { join, parse, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import fg from 'fast-glob'
 import MarkdownIt from 'markdown-it'
-import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
 import { createComponentMetaChecker } from 'vue-component-meta'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 773fae96..25c23fed 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -4,10 +4,10 @@ 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'
-import { buildRegistry } from '../src/lib/registry/registry'
 
 const REGISTRY_PATH = path.join(process.cwd(), 'src/public/registry')
 
@@ -283,7 +283,7 @@ for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone', 'lime']) {
       if (typeof value === 'string') {
         const resolvedColor = value.replace(
           /\{\{base\}\}-/g,
-					`${baseColor}-`,
+          `${baseColor}-`,
         )
         base.inlineColors[mode][key] = resolvedColor
 
diff --git a/apps/www/src/content/docs/components/auto-form.md b/apps/www/src/content/docs/components/auto-form.md
index 9dd5286f..149fda08 100644
--- a/apps/www/src/content/docs/components/auto-form.md
+++ b/apps/www/src/content/docs/components/auto-form.md
@@ -312,12 +312,12 @@ In `CustomField.vue`
 
 ```vue
 <script setup lang="ts">
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
 import type { FieldProps } from './interface'
+import { AutoFormLabel } from '@/ui/auto-form'
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/form'
 import { Input } from '@/ui/input'
-import { AutoFormLabel } from '@/ui/auto-form'
+import { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
 
 const props = defineProps<FieldProps>()
 </script>
@@ -403,9 +403,9 @@ By passing the `form` as props, you can control and use the method provided by `
 
 ```vue
 <script setup lang="ts">
-import * as z from 'zod'
-import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
 
 const schema = z.object({
   username: z.string(),
diff --git a/apps/www/src/content/docs/components/badge.md b/apps/www/src/content/docs/components/badge.md
index 714ba2cb..424e4ee6 100644
--- a/apps/www/src/content/docs/components/badge.md
+++ b/apps/www/src/content/docs/components/badge.md
@@ -23,8 +23,8 @@ npx shadcn-vue@latest add badge
 
 ```vue
 <script setup lang="ts">
-import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 defineProps<Props>()
 
diff --git a/apps/www/src/content/docs/components/button.md b/apps/www/src/content/docs/components/button.md
index d02a5357..7f5a711a 100644
--- a/apps/www/src/content/docs/components/button.md
+++ b/apps/www/src/content/docs/components/button.md
@@ -23,8 +23,8 @@ npx shadcn-vue@latest add button
 
 ```vue
 <script setup lang="ts">
-import { cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { cva } from 'class-variance-authority'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center 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',
diff --git a/apps/www/src/content/docs/components/collapsible.md b/apps/www/src/content/docs/components/collapsible.md
index 185601d4..2dffc579 100644
--- a/apps/www/src/content/docs/components/collapsible.md
+++ b/apps/www/src/content/docs/components/collapsible.md
@@ -51,12 +51,12 @@ module.exports = {
 
 ```vue
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
+import { ref } from 'vue'
 
 const isOpen = ref(false)
 </script>
diff --git a/apps/www/src/content/docs/components/combobox.md b/apps/www/src/content/docs/components/combobox.md
index 3a919d56..86a970f3 100644
--- a/apps/www/src/content/docs/components/combobox.md
+++ b/apps/www/src/content/docs/components/combobox.md
@@ -22,11 +22,8 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+
 import {
   Command,
   CommandEmpty,
@@ -40,6 +37,9 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
diff --git a/apps/www/src/content/docs/components/pagination.md b/apps/www/src/content/docs/components/pagination.md
index cdc75bce..3bd93833 100644
--- a/apps/www/src/content/docs/components/pagination.md
+++ b/apps/www/src/content/docs/components/pagination.md
@@ -17,6 +17,10 @@ npx shadcn-vue@latest add pagination
 
 ```vue
 <script setup lang="ts">
+import {
+  Button,
+} from '@/components/ui/button'
+
 import {
   Pagination,
   PaginationEllipsis,
@@ -27,10 +31,6 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
-
-import {
-  Button,
-} from '@/components/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/sonner.md b/apps/www/src/content/docs/components/sonner.md
index c78cf2e8..e17d99f8 100644
--- a/apps/www/src/content/docs/components/sonner.md
+++ b/apps/www/src/content/docs/components/sonner.md
@@ -41,8 +41,8 @@ import { Toaster } from '@/components/ui/sonner'
 
 ```vue
 <script setup lang="ts">
-import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
+import { toast } from 'vue-sonner'
 </script>
 
 <template>
diff --git a/apps/www/src/content/docs/components/toast.md b/apps/www/src/content/docs/components/toast.md
index 8811e760..1b579b2c 100644
--- a/apps/www/src/content/docs/components/toast.md
+++ b/apps/www/src/content/docs/components/toast.md
@@ -44,8 +44,8 @@ import { useToast } from '@/components/ui/toast/use-toast'
 ```vue
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
-import { useToast } from '@/components/ui/toast/use-toast'
 import { Toaster } from '@/components/ui/toast'
+import { useToast } from '@/components/ui/toast/use-toast'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/content/docs/components/v-date-picker.md b/apps/www/src/content/docs/components/v-date-picker.md
index 219e36c5..d9288b20 100644
--- a/apps/www/src/content/docs/components/v-date-picker.md
+++ b/apps/www/src/content/docs/components/v-date-picker.md
@@ -15,19 +15,19 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Calendar } from '@/components/ui/v-calendar'
 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>
 
diff --git a/apps/www/src/content/docs/dark-mode/vitepress.md b/apps/www/src/content/docs/dark-mode/vitepress.md
index 1006bcc6..66f1b39f 100644
--- a/apps/www/src/content/docs/dark-mode/vitepress.md
+++ b/apps/www/src/content/docs/dark-mode/vitepress.md
@@ -27,9 +27,9 @@ We're using [`useToggle`](https://vueuse.org/shared/useToggle/) from [`@vueuse/c
 
 ```vue
 <script setup lang="ts">
-import { useData } from 'vitepress'
-import { useToggle } from '@vueuse/core'
 import { Button } from '@/lib/registry/default/ui/button'
+import { useToggle } from '@vueuse/core'
+import { useData } from 'vitepress'
 
 const { frontmatter, isDark } = useData()
 const toggleDark = useToggle(isDark)
diff --git a/apps/www/src/examples/authentication/Example.vue b/apps/www/src/examples/authentication/Example.vue
index 66c4530d..fe6655f1 100644
--- a/apps/www/src/examples/authentication/Example.vue
+++ b/apps/www/src/examples/authentication/Example.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import UserAuthForm from './components/UserAuthForm.vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import UserAuthForm from './components/UserAuthForm.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/authentication/components/UserAuthForm.vue b/apps/www/src/examples/authentication/components/UserAuthForm.vue
index 35f37ec4..4a7417ec 100644
--- a/apps/www/src/examples/authentication/components/UserAuthForm.vue
+++ b/apps/www/src/examples/authentication/components/UserAuthForm.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import LucideSpinner from '~icons/lucide/loader-2'
-import GitHubLogo from '~icons/radix-icons/github-logo'
-
-import { cn } from '@/lib/utils'
 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 LucideSpinner from '~icons/lucide/loader-2'
+import GitHubLogo from '~icons/radix-icons/github-logo'
+import { ref } from 'vue'
+
 const isLoading = ref(false)
 async function onSubmit(event: Event) {
   event.preventDefault()
diff --git a/apps/www/src/examples/cards/components/CreateAccount.vue b/apps/www/src/examples/cards/components/CreateAccount.vue
index 9a06dd94..b40dcd61 100644
--- a/apps/www/src/examples/cards/components/CreateAccount.vue
+++ b/apps/www/src/examples/cards/components/CreateAccount.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import GitHubIcon from '~icons/radix-icons/github-logo'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -11,6 +10,7 @@ import {
 } 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 GitHubIcon from '~icons/radix-icons/github-logo'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
index 30450833..0b58b1c1 100644
--- a/apps/www/src/examples/cards/components/GitHubCard.vue
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import ChevronDownIcon from '~icons/radix-icons/chevron-down'
-import CircleIcon from '~icons/radix-icons/circle'
-import PlusIcon from '~icons/radix-icons/plus'
-import StarIcon from '~icons/radix-icons/star'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -22,6 +17,11 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
+
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+import CircleIcon from '~icons/radix-icons/circle'
+import PlusIcon from '~icons/radix-icons/plus'
+import StarIcon from '~icons/radix-icons/star'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/cards/components/Notifications.vue b/apps/www/src/examples/cards/components/Notifications.vue
index 64dbca49..92ec3772 100644
--- a/apps/www/src/examples/cards/components/Notifications.vue
+++ b/apps/www/src/examples/cards/components/Notifications.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import BellIcon from '~icons/radix-icons/bell'
-import EyeNoneIcon from '~icons/radix-icons/eye-none'
-import PersonIcon from '~icons/radix-icons/person'
-
 import {
   Card,
   CardContent,
@@ -10,6 +6,10 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
+import BellIcon from '~icons/radix-icons/bell'
+import EyeNoneIcon from '~icons/radix-icons/eye-none'
+
+import PersonIcon from '~icons/radix-icons/person'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/dashboard/Example.vue b/apps/www/src/examples/dashboard/Example.vue
index 20d1f76c..20dd3d91 100644
--- a/apps/www/src/examples/dashboard/Example.vue
+++ b/apps/www/src/examples/dashboard/Example.vue
@@ -1,12 +1,4 @@
 <script setup lang="ts">
-import Overview from './components/Overview.vue'
-import DateRangePicker from './components/DateRangePicker.vue'
-import MainNav from './components/MainNav.vue'
-import RecentSales from './components/RecentSales.vue'
-import Search from './components/Search.vue'
-import TeamSwitcher from './components/TeamSwitcher.vue'
-import UserNav from './components/UserNav.vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -21,6 +13,14 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
+import DateRangePicker from './components/DateRangePicker.vue'
+import MainNav from './components/MainNav.vue'
+import Overview from './components/Overview.vue'
+import RecentSales from './components/RecentSales.vue'
+
+import Search from './components/Search.vue'
+import TeamSwitcher from './components/TeamSwitcher.vue'
+import UserNav from './components/UserNav.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/dashboard/components/DateRangePicker.vue b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
index 2763319f..02c89d33 100644
--- a/apps/www/src/examples/dashboard/components/DateRangePicker.vue
+++ b/apps/www/src/examples/dashboard/components/DateRangePicker.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import type { DateRange } from 'radix-vue'
-import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
-
-import { type Ref, ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 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 { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { type Ref, ref } from 'vue'
+
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
 })
diff --git a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
index 2d8c1ac6..b73c042f 100644
--- a/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
+++ b/apps/www/src/examples/dashboard/components/TeamSwitcher.vue
@@ -1,17 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import CaretSortIcon from '~icons/radix-icons/caret-sort'
-import CheckIcon from '~icons/radix-icons/check'
-import PlusCircledIcon from '~icons/radix-icons/plus-circled'
-
-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'
 import {
   Dialog,
   DialogContent,
@@ -21,7 +15,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/new-york/ui/dialog'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
+
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { Label } from '@/lib/registry/new-york/ui/label'
 import {
@@ -29,6 +23,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+
 import {
   Select,
   SelectContent,
@@ -36,6 +31,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
+import { cn } from '@/lib/utils'
+import CaretSortIcon from '~icons/radix-icons/caret-sort'
+import CheckIcon from '~icons/radix-icons/check'
+import PlusCircledIcon from '~icons/radix-icons/plus-circled'
+import { ref } from 'vue'
 
 const groups = [
   {
diff --git a/apps/www/src/examples/forms/Account.vue b/apps/www/src/examples/forms/Account.vue
index bb3d6f97..c4921b4d 100644
--- a/apps/www/src/examples/forms/Account.vue
+++ b/apps/www/src/examples/forms/Account.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FormsLayout from './layouts/FormsLayout.vue'
 import AccountForm from './components/AccountForm.vue'
+import FormsLayout from './layouts/FormsLayout.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/Appearance.vue b/apps/www/src/examples/forms/Appearance.vue
index f678c509..82e492cf 100644
--- a/apps/www/src/examples/forms/Appearance.vue
+++ b/apps/www/src/examples/forms/Appearance.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FormsLayout from './layouts/FormsLayout.vue'
 import AppearanceForm from './components/AppearanceForm.vue'
+import FormsLayout from './layouts/FormsLayout.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/Display.vue b/apps/www/src/examples/forms/Display.vue
index d75619ef..d694c336 100644
--- a/apps/www/src/examples/forms/Display.vue
+++ b/apps/www/src/examples/forms/Display.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FormsLayout from './layouts/FormsLayout.vue'
 import DisplayForm from './components/DisplayForm.vue'
+import FormsLayout from './layouts/FormsLayout.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/Example.vue b/apps/www/src/examples/forms/Example.vue
index 34171518..5eaabac5 100644
--- a/apps/www/src/examples/forms/Example.vue
+++ b/apps/www/src/examples/forms/Example.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FormsLayout from './layouts/FormsLayout.vue'
 import ProfileForm from './components/ProfileForm.vue'
+import FormsLayout from './layouts/FormsLayout.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/Notifications.vue b/apps/www/src/examples/forms/Notifications.vue
index 89501d56..21cff916 100644
--- a/apps/www/src/examples/forms/Notifications.vue
+++ b/apps/www/src/examples/forms/Notifications.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import FormsLayout from './layouts/FormsLayout.vue'
 import NotificationsForm from './components/NotificationsForm.vue'
+import FormsLayout from './layouts/FormsLayout.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/forms/components/AccountForm.vue b/apps/www/src/examples/forms/components/AccountForm.vue
index 3366987f..0a81c4af 100644
--- a/apps/www/src/examples/forms/components/AccountForm.vue
+++ b/apps/www/src/examples/forms/components/AccountForm.vue
@@ -1,17 +1,6 @@
 <script setup lang="ts">
-import { h, ref } from 'vue'
-import * as z from 'zod'
-import { toDate } from 'radix-vue/date'
-import { toTypedSchema } from '@vee-validate/zod'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
-import { cn } from '@/lib/utils'
-
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
-
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import {
   Command,
   CommandEmpty,
@@ -20,15 +9,26 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/new-york/ui/command'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { cn } from '@/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
+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 { h, ref } from 'vue'
+import * as z from 'zod'
+
 const open = ref(false)
 const dateValue = ref()
 const placeholder = ref()
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 61d9ab8e..b5f766de 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { ChevronDownIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
 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 { ChevronDownIcon } from '@radix-icons/vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const appearanceFormSchema = toTypedSchema(z.object({
   theme: z.enum(['light', 'dark'], {
diff --git a/apps/www/src/examples/forms/components/DisplayForm.vue b/apps/www/src/examples/forms/components/DisplayForm.vue
index cf4c49a7..e7185561 100644
--- a/apps/www/src/examples/forms/components/DisplayForm.vue
+++ b/apps/www/src/examples/forms/components/DisplayForm.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 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 { toast } from '@/lib/registry/new-york/ui/toast'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const items = [
   {
diff --git a/apps/www/src/examples/forms/components/ProfileForm.vue b/apps/www/src/examples/forms/components/ProfileForm.vue
index b6a4540d..08cd8215 100644
--- a/apps/www/src/examples/forms/components/ProfileForm.vue
+++ b/apps/www/src/examples/forms/components/ProfileForm.vue
@@ -1,15 +1,7 @@
 <script setup lang="ts">
-import { h, ref } from 'vue'
-import { FieldArray, useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { Cross1Icon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
-
-import { Input } from '@/lib/registry/new-york/ui/input'
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Select,
   SelectContent,
@@ -18,8 +10,16 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { cn } from '@/lib/utils'
+import { Cross1Icon } from '@radix-icons/vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { FieldArray, useForm } from 'vee-validate'
+import { h, ref } from 'vue'
+import * as z from 'zod'
 
 const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
 
diff --git a/apps/www/src/examples/forms/components/SidebarNav.vue b/apps/www/src/examples/forms/components/SidebarNav.vue
index 684cea06..b4a64305 100644
--- a/apps/www/src/examples/forms/components/SidebarNav.vue
+++ b/apps/www/src/examples/forms/components/SidebarNav.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useRoute } from 'vitepress'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { useRoute } from 'vitepress'
 
 interface Item {
   title: string
diff --git a/apps/www/src/examples/forms/layouts/FormsLayout.vue b/apps/www/src/examples/forms/layouts/FormsLayout.vue
index 67a199da..814268f9 100644
--- a/apps/www/src/examples/forms/layouts/FormsLayout.vue
+++ b/apps/www/src/examples/forms/layouts/FormsLayout.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import SidebarNav from '../components/SidebarNav.vue'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
+import SidebarNav from '../components/SidebarNav.vue'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/mail/components/AccountSwitcher.vue b/apps/www/src/examples/mail/components/AccountSwitcher.vue
index 7f37a978..0b0033bc 100644
--- a/apps/www/src/examples/mail/components/AccountSwitcher.vue
+++ b/apps/www/src/examples/mail/components/AccountSwitcher.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
-import { Icon } from '@iconify/vue'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
 import { cn } from '@/lib/utils'
+import { Icon } from '@iconify/vue'
+import { computed, ref } from 'vue'
 
 interface AccountSwitcherProps {
   isCollapsed: boolean
diff --git a/apps/www/src/examples/mail/components/Mail.vue b/apps/www/src/examples/mail/components/Mail.vue
index 59f652b1..16172fb4 100644
--- a/apps/www/src/examples/mail/components/Mail.vue
+++ b/apps/www/src/examples/mail/components/Mail.vue
@@ -1,18 +1,9 @@
 <script lang="ts" setup>
-import {
-  Search,
-} from 'lucide-vue-next'
-
-import { computed, ref } from 'vue'
-import { refDebounced } from '@vueuse/core'
 import type { Mail } from '../data/mails'
-import AccountSwitcher from './AccountSwitcher.vue'
-import MailList from './MailList.vue'
-import MailDisplay from './MailDisplay.vue'
-import Nav, { type LinkProp } from './Nav.vue'
-import { cn } from '@/lib/utils'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+
 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 {
   Tabs,
   TabsContent,
@@ -20,7 +11,16 @@ import {
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
 import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
+import { cn } from '@/lib/utils'
+import { refDebounced } from '@vueuse/core'
+import {
+  Search,
+} from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+import AccountSwitcher from './AccountSwitcher.vue'
+import MailDisplay from './MailDisplay.vue'
+import MailList from './MailList.vue'
+import Nav, { type LinkProp } from './Nav.vue'
 
 interface MailProps {
   accounts: {
diff --git a/apps/www/src/examples/mail/components/MailDisplay.vue b/apps/www/src/examples/mail/components/MailDisplay.vue
index c783b363..de7c78eb 100644
--- a/apps/www/src/examples/mail/components/MailDisplay.vue
+++ b/apps/www/src/examples/mail/components/MailDisplay.vue
@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import { Archive, ArchiveX, Clock, Forward, MoreVertical, Reply, ReplyAll, Trash2 } from 'lucide-vue-next'
-import { computed } from 'vue'
-import addDays from 'date-fns/addDays'
-import addHours from 'date-fns/addHours'
-import format from 'date-fns/format'
-import nextSaturday from 'date-fns/nextSaturday'
 import type { Mail } from '../data/mails'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 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 addDays from 'date-fns/addDays'
+import addHours from 'date-fns/addHours'
+import format from 'date-fns/format'
+import nextSaturday from 'date-fns/nextSaturday'
+import { Archive, ArchiveX, Clock, Forward, MoreVertical, Reply, ReplyAll, Trash2 } from 'lucide-vue-next'
+import { computed } from 'vue'
 
 interface MailDisplayProps {
   mail: Mail | undefined
diff --git a/apps/www/src/examples/mail/components/MailList.vue b/apps/www/src/examples/mail/components/MailList.vue
index bf9d1592..6f7ba6af 100644
--- a/apps/www/src/examples/mail/components/MailList.vue
+++ b/apps/www/src/examples/mail/components/MailList.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { formatDistanceToNow } from 'date-fns'
 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 '@/lib/registry/new-york/ui/badge'
+import { formatDistanceToNow } from 'date-fns'
 
 interface MailListProps {
   items: Mail[]
diff --git a/apps/www/src/examples/mail/components/Nav.vue b/apps/www/src/examples/mail/components/Nav.vue
index 8dcf55ef..a2efdf4f 100644
--- a/apps/www/src/examples/mail/components/Nav.vue
+++ b/apps/www/src/examples/mail/components/Nav.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import { Icon } from '@iconify/vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { Icon } from '@iconify/vue'
 
 export interface LinkProp {
   title: string
diff --git a/apps/www/src/examples/music/Example.vue b/apps/www/src/examples/music/Example.vue
index 7cf8d5c8..fd0820b5 100644
--- a/apps/www/src/examples/music/Example.vue
+++ b/apps/www/src/examples/music/Example.vue
@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import AlbumArtwork from './components/AlbumArtwork.vue'
-import Menu from './components/Menu.vue'
-import PodcastEmptyPlaceholder from './components/PodcastEmptyPlaceholder.vue'
-import Sidebar from './components/Sidebar.vue'
-
-import { listenNowAlbums, madeForYouAlbums } from './data/albums'
-import { playlists } from './data/playlists'
+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 {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
+
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
+import AlbumArtwork from './components/AlbumArtwork.vue'
+import Menu from './components/Menu.vue'
+import PodcastEmptyPlaceholder from './components/PodcastEmptyPlaceholder.vue'
+import Sidebar from './components/Sidebar.vue'
+import { listenNowAlbums, madeForYouAlbums } from './data/albums'
+import { playlists } from './data/playlists'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/music/components/AlbumArtwork.vue b/apps/www/src/examples/music/components/AlbumArtwork.vue
index e47aa0a5..59b4586f 100644
--- a/apps/www/src/examples/music/components/AlbumArtwork.vue
+++ b/apps/www/src/examples/music/components/AlbumArtwork.vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
 import type { Album } from '../data/albums'
-import { playlists } from '../data/playlists'
-import PlusCircledIcon from '~icons/radix-icons/plus-circled'
-import { cn } from '@/lib/utils'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -13,6 +10,9 @@ import {
   ContextMenuSubTrigger,
   ContextMenuTrigger,
 } from '@/lib/registry/new-york/ui/context-menu'
+import { cn } from '@/lib/utils'
+import PlusCircledIcon from '~icons/radix-icons/plus-circled'
+import { playlists } from '../data/playlists'
 
 interface AlbumArtworkProps {
   album: Album
diff --git a/apps/www/src/examples/music/components/Sidebar.vue b/apps/www/src/examples/music/components/Sidebar.vue
index a99c6a69..7b253370 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 { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
+import { cn } from '@/lib/utils'
 
 interface SidebarProps {
   playlists: Playlist[]
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
index 915a69bf..0975ba39 100644
--- a/apps/www/src/examples/playground/Example.vue
+++ b/apps/www/src/examples/playground/Example.vue
@@ -1,6 +1,23 @@
 <script setup lang="ts">
+import { Button } from '@/lib/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'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/lib/registry/new-york/ui/tabs'
+import { Textarea } from '@/lib/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'
+
 import ModelSelector from './components/ModelSelector.vue'
 import PresetActions from './components/PresetActions.vue'
 import PresetSave from './components/PresetSave.vue'
@@ -8,23 +25,6 @@ import PresetSelector from './components/PresetSelector.vue'
 import PresetShare from './components/PresetShare.vue'
 import TemperatureSelector from './components/TemperatureSelector.vue'
 import TopPSelector from './components/TopPSelector.vue'
-
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@/lib/registry/new-york/ui/tabs'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import {
-  HoverCard,
-  HoverCardContent,
-  HoverCardTrigger,
-} from '@/lib/registry/new-york/ui/hover-card'
-import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-clock'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/playground/components/MaxLengthSelector.vue b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
index f592e185..cefce234 100644
--- a/apps/www/src/examples/playground/components/MaxLengthSelector.vue
+++ b/apps/www/src/examples/playground/components/MaxLengthSelector.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { SliderRootProps } from 'radix-vue'
-import { ref } from 'vue'
 import {
   HoverCard,
   HoverCardContent,
@@ -8,6 +7,7 @@ import {
 } 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'
+import { ref } from 'vue'
 
 const props = defineProps<{
   defaultValue: SliderRootProps['defaultValue']
diff --git a/apps/www/src/examples/playground/components/PresetActions.vue b/apps/www/src/examples/playground/components/PresetActions.vue
index c5e02ddc..3c2a08c0 100644
--- a/apps/www/src/examples/playground/components/PresetActions.vue
+++ b/apps/www/src/examples/playground/components/PresetActions.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
-
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -12,6 +9,7 @@ import {
   AlertDialogTitle,
 } from '@/lib/registry/new-york/ui/alert-dialog'
 import { Button } from '@/lib/registry/new-york/ui/button'
+
 import {
   Dialog,
   DialogContent,
@@ -29,6 +27,8 @@ import {
 } 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'
+import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
+import { ref } from 'vue'
 
 // import { toast } from "@/lib/registry/new-york/ui/use-toast"
 
diff --git a/apps/www/src/examples/playground/components/PresetShare.vue b/apps/www/src/examples/playground/components/PresetShare.vue
index fc839dfd..0723d2f5 100644
--- a/apps/www/src/examples/playground/components/PresetShare.vue
+++ b/apps/www/src/examples/playground/components/PresetShare.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import CopyIcon from '~icons/radix-icons/copy'
-
 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 {
@@ -9,6 +8,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+import CopyIcon from '~icons/radix-icons/copy'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/playground/components/TemperatureSelector.vue b/apps/www/src/examples/playground/components/TemperatureSelector.vue
index 9b4ca198..0a086051 100644
--- a/apps/www/src/examples/playground/components/TemperatureSelector.vue
+++ b/apps/www/src/examples/playground/components/TemperatureSelector.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SliderRootProps } from 'radix-vue'
 
-import { ref } from 'vue'
 import {
   HoverCard,
   HoverCardContent,
@@ -9,6 +8,7 @@ import {
 } 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'
+import { ref } from 'vue'
 
 const props = defineProps<{
   defaultValue: SliderRootProps['defaultValue']
diff --git a/apps/www/src/examples/playground/components/TopPSelector.vue b/apps/www/src/examples/playground/components/TopPSelector.vue
index b6b6d071..664cef46 100644
--- a/apps/www/src/examples/playground/components/TopPSelector.vue
+++ b/apps/www/src/examples/playground/components/TopPSelector.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import type { SliderRootProps } from 'radix-vue'
 
-import { ref } from 'vue'
 import {
   HoverCard,
   HoverCardContent,
@@ -9,6 +8,7 @@ import {
 } 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'
+import { ref } from 'vue'
 
 const props = defineProps<{
   defaultValue: SliderRootProps['defaultValue']
diff --git a/apps/www/src/examples/tasks/Example.vue b/apps/www/src/examples/tasks/Example.vue
index cd8257c5..3330ad12 100644
--- a/apps/www/src/examples/tasks/Example.vue
+++ b/apps/www/src/examples/tasks/Example.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import tasks from './data/tasks.json'
+import { columns } from './components/columns'
 import DataTable from './components/DataTable.vue'
 import UserNav from './components/UserNav.vue'
-import { columns } from './components/columns'
+import tasks from './data/tasks.json'
 </script>
 
 <template>
diff --git a/apps/www/src/examples/tasks/components/DataTable.vue b/apps/www/src/examples/tasks/components/DataTable.vue
index 4730b371..0f1a00f6 100644
--- a/apps/www/src/examples/tasks/components/DataTable.vue
+++ b/apps/www/src/examples/tasks/components/DataTable.vue
@@ -5,6 +5,17 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
+import type { Task } from '../data/schema'
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/lib/registry/new-york/ui/table'
+import { valueUpdater } from '@/lib/utils'
 import {
   FlexRender,
   getCoreRowModel,
@@ -15,20 +26,9 @@ import {
   getSortedRowModel,
   useVueTable,
 } from '@tanstack/vue-table'
-
 import { ref } from 'vue'
-import type { Task } from '../data/schema'
 import DataTablePagination from './DataTablePagination.vue'
 import DataTableToolbar from './DataTableToolbar.vue'
-import { valueUpdater } from '@/lib/utils'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/lib/registry/new-york/ui/table'
 
 interface DataTableProps {
   columns: ColumnDef<Task, any>[]
diff --git a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
index da4f9735..b59dac44 100644
--- a/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
+++ b/apps/www/src/examples/tasks/components/DataTableColumnHeader.vue
@@ -1,12 +1,6 @@
 <script setup lang="ts">
 import type { Column } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import ArrowDownIcon from '~icons/radix-icons/arrow-down'
-import ArrowUpIcon from '~icons/radix-icons/arrow-up'
-import CaretSortIcon from '~icons/radix-icons/caret-sort'
-import EyeNoneIcon from '~icons/radix-icons/eye-none'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
@@ -15,6 +9,12 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { cn } from '@/lib/utils'
+import ArrowDownIcon from '~icons/radix-icons/arrow-down'
+
+import ArrowUpIcon from '~icons/radix-icons/arrow-up'
+import CaretSortIcon from '~icons/radix-icons/caret-sort'
+import EyeNoneIcon from '~icons/radix-icons/eye-none'
 
 interface DataTableColumnHeaderProps {
   column: Column<Task, any>
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index 63205fd6..921655a4 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
 import type { Column } from '@tanstack/vue-table'
 import type { Component } from 'vue'
-import { computed } from 'vue'
 import type { Task } from '../data/schema'
-import PlusCircledIcon from '~icons/radix-icons/plus-circled'
-import CheckIcon from '~icons/radix-icons/check'
-
 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'
@@ -18,6 +14,10 @@ import {
 import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { cn } from '@/lib/utils'
 
+import CheckIcon from '~icons/radix-icons/check'
+import PlusCircledIcon from '~icons/radix-icons/plus-circled'
+import { computed } from 'vue'
+
 interface DataTableFacetedFilter {
   column?: Column<Task, any>
   title?: string
diff --git a/apps/www/src/examples/tasks/components/DataTablePagination.vue b/apps/www/src/examples/tasks/components/DataTablePagination.vue
index acd18544..5d396410 100644
--- a/apps/www/src/examples/tasks/components/DataTablePagination.vue
+++ b/apps/www/src/examples/tasks/components/DataTablePagination.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
 import type { Task } from '../data/schema'
-import ChevronLeftIcon from '~icons/radix-icons/chevron-left'
-import ChevronRightIcon from '~icons/radix-icons/chevron-right'
-import DoubleArrowLeftIcon from '~icons/radix-icons/double-arrow-left'
-import DoubleArrowRightIcon from '~icons/radix-icons/double-arrow-right'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Select,
@@ -14,6 +9,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
+import ChevronLeftIcon from '~icons/radix-icons/chevron-left'
+import ChevronRightIcon from '~icons/radix-icons/chevron-right'
+
+import DoubleArrowLeftIcon from '~icons/radix-icons/double-arrow-left'
+import DoubleArrowRightIcon from '~icons/radix-icons/double-arrow-right'
 
 interface DataTablePaginationProps {
   table: Table<Task>
diff --git a/apps/www/src/examples/tasks/components/DataTableRowActions.vue b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
index d3a23541..20cd207d 100644
--- a/apps/www/src/examples/tasks/components/DataTableRowActions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableRowActions.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import type { Row } from '@tanstack/vue-table'
-import { computed } from 'vue'
-import { labels } from '../data/data'
-import { taskSchema } from '../data/schema'
 import type { Task } from '../data/schema'
-import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
@@ -20,6 +15,11 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import DotsHorizontalIcon from '~icons/radix-icons/dots-horizontal'
+import { computed } from 'vue'
+
+import { labels } from '../data/data'
+import { taskSchema } from '../data/schema'
 
 interface DataTableRowActionsProps {
   row: Row<Task>
diff --git a/apps/www/src/examples/tasks/components/DataTableToolbar.vue b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
index 9887e815..0544594f 100644
--- a/apps/www/src/examples/tasks/components/DataTableToolbar.vue
+++ b/apps/www/src/examples/tasks/components/DataTableToolbar.vue
@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
-import { computed } from 'vue'
 import type { Task } from '../data/schema'
+import { Button } from '@/lib/registry/new-york/ui/button'
 
+import { Input } from '@/lib/registry/new-york/ui/input'
+import Cross2Icon from '~icons/radix-icons/cross-2'
+import { computed } from 'vue'
 import { priorities, statuses } from '../data/data'
 import DataTableFacetedFilter from './DataTableFacetedFilter.vue'
 import DataTableViewOptions from './DataTableViewOptions.vue'
-import Cross2Icon from '~icons/radix-icons/cross-2'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
 
 interface DataTableToolbarProps {
   table: Table<Task>
diff --git a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
index 84a42f26..7bba52ef 100644
--- a/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
+++ b/apps/www/src/examples/tasks/components/DataTableViewOptions.vue
@@ -1,9 +1,6 @@
 <script setup lang="ts">
 import type { Table } from '@tanstack/vue-table'
-import { computed } from 'vue'
 import type { Task } from '../data/schema'
-import MixerHorizontalIcon from '~icons/radix-icons/mixer-horizontal'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
@@ -14,6 +11,9 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 
+import MixerHorizontalIcon from '~icons/radix-icons/mixer-horizontal'
+import { computed } from 'vue'
+
 interface DataTableViewOptionsProps {
   table: Table<Task>
 }
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index 2e18e826..c07e42cc 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -1,12 +1,12 @@
 import type { ColumnDef } from '@tanstack/vue-table'
-import { h } from 'vue'
-
-import { labels, priorities, statuses } from '../data/data'
 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 { h } from 'vue'
+import { labels, priorities, statuses } from '../data/data'
 import DataTableColumnHeader from './DataTableColumnHeader.vue'
 import DataTableRowActions from './DataTableRowActions.vue'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
 
 export const columns: ColumnDef<Task>[] = [
   {
diff --git a/apps/www/src/examples/tasks/data/data.ts b/apps/www/src/examples/tasks/data/data.ts
index 774b990e..1a2974c9 100644
--- a/apps/www/src/examples/tasks/data/data.ts
+++ b/apps/www/src/examples/tasks/data/data.ts
@@ -1,4 +1,3 @@
-import { h } from 'vue'
 import ArrowDownIcon from '~icons/radix-icons/arrow-down'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import ArrowUpIcon from '~icons/radix-icons/arrow-up'
@@ -7,6 +6,7 @@ import CircleIcon from '~icons/radix-icons/circle'
 import CrossCircledIcon from '~icons/radix-icons/cross-circled'
 import QuestionMarkCircledIcon from '~icons/radix-icons/question-mark-circled'
 import StopwatchIcon from '~icons/radix-icons/stopwatch'
+import { h } from 'vue'
 
 export const labels = [
   {
diff --git a/apps/www/src/lib/registry/default/block/Dashboard01.vue b/apps/www/src/lib/registry/default/block/Dashboard01.vue
index 9be9aad6..b685db07 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard01.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard01.vue
@@ -5,7 +5,6 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 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'
@@ -14,6 +13,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 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 { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard02.vue b/apps/www/src/lib/registry/default/block/Dashboard02.vue
index c8853dfa..c28fe7c8 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard02.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard02.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
-
 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 { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard03.vue b/apps/www/src/lib/registry/default/block/Dashboard03.vue
index 7c0b91a9..2074631b 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard03.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard03.vue
@@ -5,9 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
-
 import { Badge } from '@/lib/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'
@@ -15,6 +14,7 @@ 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 { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard04.vue b/apps/www/src/lib/registry/default/block/Dashboard04.vue
index abb7d11d..0df5844f 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard04.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard04.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
-
 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'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard05.vue b/apps/www/src/lib/registry/default/block/Dashboard05.vue
index 502bef01..a46390c2 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard05.vue
@@ -5,30 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  CircleUser,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from 'lucide-vue-next'
-
 import { Badge } from '@/lib/registry/default/ui/badge'
-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 {
   Breadcrumb,
   BreadcrumbItem,
@@ -37,7 +15,11 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/lib/registry/default/ui/breadcrumb'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+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'
 import {
   Pagination,
   PaginationList,
@@ -46,6 +28,7 @@ import {
 } 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'
 import {
   Table,
   TableBody,
@@ -66,7 +49,24 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/lib/registry/default/ui/tooltip'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
+import {
+  CircleUser,
+  Copy,
+  CreditCard,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreVertical,
+  Package,
+  Package2,
+  PanelLeft,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  Users2,
+} from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard06.vue b/apps/www/src/lib/registry/default/block/Dashboard06.vue
index b074d848..79fa5797 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard06.vue
@@ -5,28 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  CircleUser,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreHorizontal,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Users2,
-} from 'lucide-vue-next'
-
 import { Badge } from '@/lib/registry/default/ui/badge'
-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 {
   Breadcrumb,
   BreadcrumbItem,
@@ -35,6 +15,10 @@ import {
   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'
 import {
   Table,
@@ -56,6 +40,22 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/lib/registry/default/ui/tooltip'
+import {
+  CircleUser,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreHorizontal,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Users2,
+} from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/block/Dashboard07.vue b/apps/www/src/lib/registry/default/block/Dashboard07.vue
index 86b10bed..cd0f2b4d 100644
--- a/apps/www/src/lib/registry/default/block/Dashboard07.vue
+++ b/apps/www/src/lib/registry/default/block/Dashboard07.vue
@@ -5,6 +5,45 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  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'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  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'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/lib/registry/default/ui/tooltip'
 import {
   ChevronLeft,
   CircleUser,
@@ -20,45 +59,6 @@ import {
   Upload,
   Users2,
 } from 'lucide-vue-next'
-
-import { Badge } from '@/lib/registry/default/ui/badge'
-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 { Textarea } from '@/lib/registry/default/ui/textarea'
-import { Label } from '@/lib/registry/default/ui/label'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/lib/registry/default/ui/breadcrumb'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/lib/registry/default/ui/table'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/default/ui/select'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/lib/registry/default/ui/tooltip'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/AlertDemo.vue b/apps/www/src/lib/registry/default/example/AlertDemo.vue
index b4023088..651de6cc 100644
--- a/apps/www/src/lib/registry/default/example/AlertDemo.vue
+++ b/apps/www/src/lib/registry/default/example/AlertDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Terminal } from 'lucide-vue-next'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+import { Terminal } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue b/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
index 8766ec63..912bf679 100644
--- a/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
+++ b/apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { AlertCircle } from 'lucide-vue-next'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+import { AlertCircle } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
index 8c4da5e3..d088bb12 100644
--- a/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/default/example/AreaChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
index 37cb2b65..e31ed3c3 100644
--- a/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
+++ b/apps/www/src/lib/registry/default/example/AreaChartSparkline.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { CurveType } from '@unovis/ts'
 import { AreaChart } from '@/lib/registry/default/ui/chart-area'
+import { CurveType } from '@unovis/ts'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
diff --git a/apps/www/src/lib/registry/default/example/AutoFormApi.vue b/apps/www/src/lib/registry/default/example/AutoFormApi.vue
index f24684d1..c7c12759 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormApi.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormApi.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h, onMounted, shallowRef } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h, onMounted, shallowRef } from 'vue'
+import * as z from 'zod'
 
 const schema = shallowRef<z.ZodObject< any, any, any > | null>(null)
 
diff --git a/apps/www/src/lib/registry/default/example/AutoFormArray.vue b/apps/www/src/lib/registry/default/example/AutoFormArray.vue
index 8b97ddc4..196d5e86 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormArray.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormArray.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   guestListName: z.string(),
diff --git a/apps/www/src/lib/registry/default/example/AutoFormBasic.vue b/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
index b48b9021..43dca27c 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormBasic.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 enum Sports {
   Football = 'Football/Soccer',
diff --git a/apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue b/apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue
index 740824e7..45bd1f76 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormConfirmPassword.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z
   .object({
diff --git a/apps/www/src/lib/registry/default/example/AutoFormControlled.vue b/apps/www/src/lib/registry/default/example/AutoFormControlled.vue
index 14d002a1..6ba7c7aa 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormControlled.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormControlled.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
+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 '@/lib/registry/default/ui/auto-form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   username: z.string(),
diff --git a/apps/www/src/lib/registry/default/example/AutoFormDependencies.vue b/apps/www/src/lib/registry/default/example/AutoFormDependencies.vue
index a242d9b0..3ea9de24 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormDependencies.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormDependencies.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
-import { DependencyType } from '../ui/auto-form/interface'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
+import { DependencyType } from '../ui/auto-form/interface'
 
 const schema = z.object({
   age: z.number(),
diff --git a/apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue b/apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue
index 287df014..bc6355a8 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormInputWithoutLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   username: z.string(),
diff --git a/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue b/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
index c6f42059..924f9022 100644
--- a/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
+++ b/apps/www/src/lib/registry/default/example/AutoFormSubObject.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/default/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   subObject: z.object({
diff --git a/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
index c450772b..853e706e 100644
--- a/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/default/example/BarChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { BarChart } from '@/lib/registry/default/ui/chart-bar'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue b/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue
index ab603bb6..085a5426 100644
--- a/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/lib/registry/default/example/BreadcrumbDropdown.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ChevronDown, Slash } from 'lucide-vue-next'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -14,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+import { ChevronDown, Slash } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue b/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue
index 746213b3..539cbd35 100644
--- a/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue
+++ b/apps/www/src/lib/registry/default/example/BreadcrumbResponsive.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useMediaQuery } from '@vueuse/core'
-import { computed, ref } from 'vue'
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -27,6 +25,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+import { useMediaQuery } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 const isDesktop = useMediaQuery('(min-width: 768px)')
 const isOpen = ref(false)
diff --git a/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue
index 4d4e7a1f..7a6d6ccb 100644
--- a/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue
+++ b/apps/www/src/lib/registry/default/example/BreadcrumbSeparatorDemo.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { Slash } from 'lucide-vue-next'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,6 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/lib/registry/default/ui/breadcrumb'
+import { Slash } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
index 2b4ce9a3..a04e0875 100644
--- a/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonIconDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ChevronRight } from 'lucide-vue-next'
 import { Button } from '@/lib/registry/default/ui/button'
+import { ChevronRight } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
index 221e1403..d25c1e33 100644
--- a/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Loader2 } from 'lucide-vue-next'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Loader2 } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
index 801e4ebe..6cea6345 100644
--- a/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Mail } from 'lucide-vue-next'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Mail } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CalendarDemo.vue b/apps/www/src/lib/registry/default/example/CalendarDemo.vue
index 5795206b..d77f1551 100644
--- a/apps/www/src/lib/registry/default/example/CalendarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
-import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { Calendar } from '@/lib/registry/default/ui/calendar'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { type Ref, ref } from 'vue'
 
 const value = ref(today(getLocalTimeZone())) as Ref<DateValue>
 </script>
diff --git a/apps/www/src/lib/registry/default/example/CalendarForm.vue b/apps/www/src/lib/registry/default/example/CalendarForm.vue
index 3bb7e9d9..84233db3 100644
--- a/apps/www/src/lib/registry/default/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/default/example/CalendarForm.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
-import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue/date'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -19,6 +12,13 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
 import { toast } from '@/lib/registry/default/ui/toast'
 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 { useForm } from 'vee-validate'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
diff --git a/apps/www/src/lib/registry/default/example/CardChat.vue b/apps/www/src/lib/registry/default/example/CardChat.vue
index 66089f4e..71cb99c4 100644
--- a/apps/www/src/lib/registry/default/example/CardChat.vue
+++ b/apps/www/src/lib/registry/default/example/CardChat.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { Check, Plus, Send } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+import { Button } from '@/lib/registry/default/ui/button'
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
 } from '@/lib/registry/default/ui/card'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/lib/registry/default/ui/dialog'
 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'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/default/ui/avatar'
+import { Input } from '@/lib/registry/default/ui/input'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/lib/registry/default/ui/tooltip'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Input } from '@/lib/registry/default/ui/input'
 import { cn } from '@/lib/utils'
+import { Check, Plus, Send } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
 
 const input = ref('')
 const inputLength = computed(() => input.value.trim().length)
diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue
index 81e6eff7..ff030922 100644
--- a/apps/www/src/lib/registry/default/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardDemo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { BellRing, Check } from 'lucide-vue-next'
-
 import { Button } from '@/lib/registry/default/ui/button'
+
 import {
   Card,
   CardContent,
@@ -12,6 +11,7 @@ import {
 } from '@/lib/registry/default/ui/card'
 import { Switch } from '@/lib/registry/default/ui/switch'
 import { cn } from '@/lib/utils'
+import { BellRing, Check } from 'lucide-vue-next'
 
 const notifications = [
   {
diff --git a/apps/www/src/lib/registry/default/example/CardFormDemo.vue b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
index 734aed7b..3c7a0f2d 100644
--- a/apps/www/src/lib/registry/default/example/CardFormDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardFormDemo.vue
@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import { Button } from '@/lib/registry/default/ui/button'
 import {
   Card,
   CardContent,
@@ -7,6 +8,8 @@ import {
   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 {
   Select,
   SelectContent,
@@ -14,9 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/default/ui/select'
-import { Input } from '@/lib/registry/default/ui/input'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Button } from '@/lib/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/src/lib/registry/default/example/CardStats.vue
index 2e0e49cd..8b2d1bf9 100644
--- a/apps/www/src/lib/registry/default/example/CardStats.vue
+++ b/apps/www/src/lib/registry/default/example/CardStats.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { computed } from 'vue'
-import { useData } from 'vitepress'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
-import { useConfigStore } from '@/stores/config'
 import { themes } from '@/lib/registry/themes'
+import { useConfigStore } from '@/stores/config'
+import { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
index 3872ea6a..e4663052 100644
--- a/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/ActivityGoal.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Minus, Plus } from 'lucide-vue-next'
-import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Button } from '@/lib/registry/default/ui/button'
-
 import {
   Card,
   CardContent,
@@ -12,6 +8,10 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/default/ui/card'
+import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Minus, Plus } from 'lucide-vue-next'
+
+import { ref } from 'vue'
 
 const goal = ref(350)
 
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 d66b9faa..f2e1608b 100644
--- a/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/DataTable.vue
@@ -5,19 +5,8 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { h, ref } from 'vue'
-import { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'
-import DropdownAction from '../DataTableDemoColumn.vue'
-
 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 {
   DropdownMenu,
@@ -25,6 +14,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+
 import { Input } from '@/lib/registry/default/ui/input'
 import {
   Table,
@@ -34,8 +24,18 @@ import {
   TableHeader,
   TableRow,
 } from '@/lib/registry/default/ui/table'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
 import { valueUpdater } from '@/lib/utils'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { ChevronDown, ChevronsUpDown } from 'lucide-vue-next'
+import { h, ref } from 'vue'
+import DropdownAction from '../DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string
diff --git a/apps/www/src/lib/registry/default/example/Cards/Metric.vue b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
index d96f506f..498e7951 100644
--- a/apps/www/src/lib/registry/default/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/default/example/Cards/Metric.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
-import { Line } from '@unovis/ts'
 import {
   Card,
   CardContent,
@@ -8,6 +6,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/default/ui/card'
+import { Line } from '@unovis/ts'
+import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/default/example/CarouselApi.vue b/apps/www/src/lib/registry/default/example/CarouselApi.vue
index 521d0e0a..efc377f9 100644
--- a/apps/www/src/lib/registry/default/example/CarouselApi.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselApi.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
 import type { CarouselApi } from '@/lib/registry/default/ui/carousel'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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 { watchOnce } from '@vueuse/core'
+import { ref } from 'vue'
 
 const api = ref<CarouselApi>()
 const totalCount = ref(0)
diff --git a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
index dcf06bd6..f8fd8f8f 100644
--- a/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselOrientation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
index 8837623d..72616f66 100644
--- a/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselPlugin.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Autoplay from 'embla-carousel-autoplay'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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 Autoplay from 'embla-carousel-autoplay'
 
 const plugin = Autoplay({
   delay: 2000,
diff --git a/apps/www/src/lib/registry/default/example/CarouselSize.vue b/apps/www/src/lib/registry/default/example/CarouselSize.vue
index dc9bc03d..7ac86fd3 100644
--- a/apps/www/src/lib/registry/default/example/CarouselSize.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselSize.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
index 04bc1024..00944e84 100644
--- a/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselSpacing.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue b/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
index cc99665b..49f05ee1 100644
--- a/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
+++ b/apps/www/src/lib/registry/default/example/CarouselThumbnails.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
-import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
 import { Card, CardContent } from '@/lib/registry/default/ui/card'
+import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/default/ui/carousel'
+import { watchOnce } from '@vueuse/core'
+import { ref } from 'vue'
 
 const emblaMainApi = ref<CarouselApi>()
 const emblaThumbnailApi = ref<CarouselApi>()
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
index 641c719b..3b7788fe 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormMultiple.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -13,9 +9,13 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const items = [
   {
     id: 'recents',
diff --git a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
index 43414195..9e2988ce 100644
--- a/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/default/example/CheckboxFormSingle.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
+import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -13,9 +9,13 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/default/ui/form'
-import { Checkbox } from '@/lib/registry/default/ui/checkbox'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   mobile: z.boolean().default(false).optional(),
 }))
diff --git a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
index b0980a30..b0bcbe5c 100644
--- a/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CollapsibleDemo.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { ChevronsUpDown } from 'lucide-vue-next'
-
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
+
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/lib/registry/default/ui/collapsible'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const isOpen = ref(false)
 </script>
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
index 88ae0465..4693e62a 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDemo.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Command,
@@ -12,11 +8,15 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/default/ui/command'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
+import { cn } from '@/lib/utils'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
diff --git a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
index a274c0c5..bc28977a 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxDropdownMenu.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Command,
@@ -11,6 +8,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/default/ui/command'
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,6 +22,8 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+import { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const labels = [
   'feature',
diff --git a/apps/www/src/lib/registry/default/example/ComboboxForm.vue b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
index d7c27a52..31a2bb11 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxForm.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Command,
@@ -28,7 +21,14 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
+
 import { toast } from '@/lib/registry/default/ui/toast'
+import { cn } from '@/lib/utils'
+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' },
diff --git a/apps/www/src/lib/registry/default/example/ComboboxResponsive.vue b/apps/www/src/lib/registry/default/example/ComboboxResponsive.vue
index 14618874..1aed1445 100644
--- a/apps/www/src/lib/registry/default/example/ComboboxResponsive.vue
+++ b/apps/www/src/lib/registry/default/example/ComboboxResponsive.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
-import { ref } from 'vue'
 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 { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
 
 interface Status {
   value: string
diff --git a/apps/www/src/lib/registry/default/example/CommandDemo.vue b/apps/www/src/lib/registry/default/example/CommandDemo.vue
index df1a4216..f32b98d1 100644
--- a/apps/www/src/lib/registry/default/example/CommandDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CommandDemo.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import {
-  Calculator,
-  Calendar,
-  CreditCard,
-  Settings,
-  Smile,
-  User,
-} from 'lucide-vue-next'
-
 import {
   Command,
   CommandEmpty,
@@ -18,6 +9,15 @@ import {
   CommandSeparator,
   CommandShortcut,
 } from '@/lib/registry/default/ui/command'
+
+import {
+  Calculator,
+  Calendar,
+  CreditCard,
+  Settings,
+  Smile,
+  User,
+} from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue b/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
index ddc3f24c..b2de3c13 100644
--- a/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CommandDialogDemo.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useMagicKeys } from '@vueuse/core'
-
-import { ref, watch } from 'vue'
 import {
   CommandDialog,
   CommandEmpty,
@@ -12,6 +9,9 @@ import {
   CommandSeparator,
 } from '@/lib/registry/default/ui/command'
 
+import { useMagicKeys } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
 const open = ref(false)
 
 const { Meta_J, Ctrl_J } = useMagicKeys({
diff --git a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
index 4cf6cb2e..bc2cd364 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerDemo.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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 {
   DateFormatter,
   type DateValue,
   getLocalTimeZone,
 } from '@internationalized/date'
-
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
diff --git a/apps/www/src/lib/registry/default/example/DatePickerForm.vue b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
index 6f499148..9f35c2e5 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerForm.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
-import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue/date'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Calendar } from '@/lib/registry/default/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -19,6 +12,13 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
 import { toast } from '@/lib/registry/default/ui/toast'
 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 { useForm } from 'vee-validate'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue b/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
index b7d91e4c..45e6b427 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithIndependentMonths.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue'
+import { Button, buttonVariants } from '@/lib/registry/default/ui/button'
 
 import {
-  Calendar as CalendarIcon,
-  ChevronLeft,
-  ChevronRight,
-} from 'lucide-vue-next'
-import {
-  CalendarDate,
-  type DateValue,
-  isEqualMonth,
-} from '@internationalized/date'
-
-import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
-import { type Grid, createMonth, toDate } from 'radix-vue/date'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/default/ui/popover'
 import {
   RangeCalendarCell,
   RangeCalendarCellTrigger,
@@ -23,13 +15,21 @@ import {
   RangeCalendarGridRow,
   RangeCalendarHeadCell,
 } from '@/lib/registry/default/ui/range-calendar'
-import { Button, buttonVariants } from '@/lib/registry/default/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/default/ui/popover'
+
 import { cn } from '@/lib/utils'
+import {
+  CalendarDate,
+  type DateValue,
+  isEqualMonth,
+} from '@internationalized/date'
+import {
+  Calendar as CalendarIcon,
+  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 Ref, ref, watch } from 'vue'
 
 const value = ref({
   start: new CalendarDate(2022, 1, 20),
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
index cfe0a953..89863d4e 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithPresets.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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 {
   DateFormatter,
   type DateValue,
   getLocalTimeZone,
   today,
 } from '@internationalized/date'
-
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { Calendar } from '@/lib/registry/default/ui/calendar'
-import { Button } from '@/lib/registry/default/ui/button'
-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 { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
diff --git a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
index 17a236e0..01208d73 100644
--- a/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/DatePickerWithRange.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+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 {
   CalendarDate,
   DateFormatter,
   getLocalTimeZone,
 } from '@internationalized/date'
-
 import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import type { DateRange } from 'radix-vue'
-import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'
-import { cn } from '@/lib/utils'
+import { type Ref, ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
diff --git a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
index 7f286bba..9a69f66b 100644
--- a/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Copy } from 'lucide-vue-next'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Dialog,
@@ -13,6 +12,7 @@ import {
 } from '@/lib/registry/default/ui/dialog'
 import { Input } from '@/lib/registry/default/ui/input'
 import { Label } from '@/lib/registry/default/ui/label'
+import { Copy } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
index 2e927858..48e79e6f 100644
--- a/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/default/example/DonutChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { DonutChart } from '@/lib/registry/default/ui/chart-donut'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/default/example/DrawerDemo.vue b/apps/www/src/lib/registry/default/example/DrawerDemo.vue
index aec72f27..2feba219 100644
--- a/apps/www/src/lib/registry/default/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DrawerDemo.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { Minus, Plus } from 'lucide-vue-next'
-import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Drawer,
@@ -13,6 +10,9 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '@/lib/registry/default/ui/drawer'
+import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Minus, Plus } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const goal = ref(350)
 
diff --git a/apps/www/src/lib/registry/default/example/DrawerDialog.vue b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
index 488ca7f0..619c513c 100644
--- a/apps/www/src/lib/registry/default/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/default/example/DrawerDialog.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Dialog,
@@ -20,8 +18,10 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '@/lib/registry/default/ui/drawer'
-import { Label } from '@/lib/registry/default/ui/label'
 import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
 
 // Reuse `form` section
 const [UseTemplate, GridForm] = createReusableTemplate()
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
index e8ed233e..6d688310 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuCheckboxes.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   DropdownMenu,
@@ -10,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+import { ref } from 'vue'
 
 type Checked = DropdownMenuCheckboxItemProps['checked']
 
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
index 025a3aa1..e34ac244 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuDemo.vue
@@ -1,4 +1,20 @@
 <script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@/lib/registry/default/ui/dropdown-menu'
 import {
   Cloud,
   CreditCard,
@@ -15,22 +31,6 @@ import {
   UserPlus,
   Users,
 } from 'lucide-vue-next'
-
-import { Button } from '@/lib/registry/default/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from '@/lib/registry/default/ui/dropdown-menu'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
index 77f23ce4..59587d7d 100644
--- a/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/default/example/DropdownMenuRadioGroup.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   DropdownMenu,
@@ -10,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/lib/registry/default/ui/dropdown-menu'
+import { ref } from 'vue'
 
 const position = ref('bottom')
 </script>
diff --git a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
index 54e4a8d7..d0a6e054 100644
--- a/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/HoverCardDemo.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { CalendarDays } from 'lucide-vue-next'
-
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@/lib/registry/default/ui/avatar'
+
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from '@/lib/registry/default/ui/hover-card'
+import { CalendarDays } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/InputForm.vue b/apps/www/src/lib/registry/default/example/InputForm.vue
index f0d28536..66696351 100644
--- a/apps/www/src/lib/registry/default/example/InputForm.vue
+++ b/apps/www/src/lib/registry/default/example/InputForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Input } from '@/lib/registry/default/ui/input'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
 }))
diff --git a/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
index e8b53476..6eed66af 100644
--- a/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
+++ b/apps/www/src/lib/registry/default/example/InputFormAutoAnimate.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -16,6 +10,12 @@ import {
 } from '@/lib/registry/default/ui/form'
 import { Input } from '@/lib/registry/default/ui/input'
 import { toast } from '@/lib/registry/default/ui/toast'
+import { vAutoAnimate } from '@formkit/auto-animate/vue'
+
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
diff --git a/apps/www/src/lib/registry/default/example/InputWithButton.vue b/apps/www/src/lib/registry/default/example/InputWithButton.vue
index c2283582..ec26f83a 100644
--- a/apps/www/src/lib/registry/default/example/InputWithButton.vue
+++ b/apps/www/src/lib/registry/default/example/InputWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/default/ui/input'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
index 0e393679..8b3680df 100644
--- a/apps/www/src/lib/registry/default/example/InputWithIcon.vue
+++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Search } from 'lucide-vue-next'
 import { Input } from '@/lib/registry/default/ui/input'
+import { Search } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
index fbd20dfa..975baff2 100644
--- a/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/default/example/LineChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { LineChart } from '@/lib/registry/default/ui/chart-line'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   {
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue b/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
index 93d3ff65..4b9ee2b8 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldCurrency.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/default/ui/number-field'
-import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue b/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
index abbfc115..5821a301 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDecimal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/default/ui/number-field'
-import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue b/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
index 0547fba7..fbf6eded 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDemo.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/default/ui/number-field'
-import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue b/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
index 33ad1852..f453d2f2 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldDisabled.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/default/ui/number-field'
-import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue b/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
index 7cd3b81a..a92bab90 100644
--- a/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
+++ b/apps/www/src/lib/registry/default/example/NumberFieldPercentage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/default/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/default/ui/number-field'
-import { Label } from '@/lib/registry/default/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/PaginationDemo.vue b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
index be12cb91..145af875 100644
--- a/apps/www/src/lib/registry/default/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PaginationDemo.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import {
+  Button,
+} from '@/lib/registry/default/ui/button'
+
 import {
   Pagination,
   PaginationEllipsis,
@@ -9,10 +13,6 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/lib/registry/default/ui/pagination'
-
-import {
-  Button,
-} from '@/lib/registry/default/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/PinInputControlled.vue b/apps/www/src/lib/registry/default/example/PinInputControlled.vue
index 259ee375..8a74b97d 100644
--- a/apps/www/src/lib/registry/default/example/PinInputControlled.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputControlled.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/default/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>(['1', '2', '3'])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/default/example/PinInputDemo.vue b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
index 49ab9bf4..4bc8359d 100644
--- a/apps/www/src/lib/registry/default/example/PinInputDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputDemo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/default/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/default/example/PinInputDisabled.vue b/apps/www/src/lib/registry/default/example/PinInputDisabled.vue
index 982ef5fc..2ab8ca71 100644
--- a/apps/www/src/lib/registry/default/example/PinInputDisabled.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputDisabled.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/default/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 </script>
diff --git a/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue b/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
index 2fb54aa1..370e9d79 100644
--- a/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
+++ b/apps/www/src/lib/registry/default/example/PinInputSeparatorDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
   PinInputSeparator,
 } from '@/lib/registry/default/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/default/example/PopoverDemo.vue b/apps/www/src/lib/registry/default/example/PopoverDemo.vue
index 9315cb73..b79ba8d6 100644
--- a/apps/www/src/lib/registry/default/example/PopoverDemo.vue
+++ b/apps/www/src/lib/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 {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
-import { Button } from '@/lib/registry/default/ui/button'
-import { Label } from '@/lib/registry/default/ui/label'
-import { Input } from '@/lib/registry/default/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ProgressDemo.vue b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
index 110c3978..f93e06d2 100644
--- a/apps/www/src/lib/registry/default/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
 import { Progress } from '@/lib/registry/default/ui/progress'
+import { ref, watchEffect } from 'vue'
 
 const progress = ref(13)
 
diff --git a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
index fb8eed47..e871abf7 100644
--- a/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/default/example/RadioGroupForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -15,6 +10,11 @@ import {
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   type: z.enum(['all', 'mentions', 'none'], {
     required_error: 'You need to select a notification type.',
diff --git a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
index caec1ef6..3e3bc296 100644
--- a/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/RangeCalendarDemo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
 import type { DateRange } from 'radix-vue'
-import { getLocalTimeZone, today } from '@internationalized/date'
 import { RangeCalendar } from '@/lib/registry/default/ui/range-calendar'
+import { getLocalTimeZone, today } from '@internationalized/date'
+import { type Ref, ref } from 'vue'
 
 const start = today(getLocalTimeZone())
 const end = start.add({ days: 7 })
diff --git a/apps/www/src/lib/registry/default/example/SelectForm.vue b/apps/www/src/lib/registry/default/example/SelectForm.vue
index 5ec2c98e..5c998146 100644
--- a/apps/www/src/lib/registry/default/example/SelectForm.vue
+++ b/apps/www/src/lib/registry/default/example/SelectForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -23,6 +18,11 @@ import {
 } from '@/lib/registry/default/ui/select'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   email: z
     .string({
diff --git a/apps/www/src/lib/registry/default/example/SheetSideDemo.vue b/apps/www/src/lib/registry/default/example/SheetSideDemo.vue
index 33579bfb..f82cd999 100644
--- a/apps/www/src/lib/registry/default/example/SheetSideDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SheetSideDemo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
 import { Input } from '@/lib/registry/default/ui/input'
 import { Label } from '@/lib/registry/default/ui/label'
@@ -13,6 +12,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/lib/registry/default/ui/sheet'
+import { ref } from 'vue'
 
 const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
 
diff --git a/apps/www/src/lib/registry/default/example/SliderDemo.vue b/apps/www/src/lib/registry/default/example/SliderDemo.vue
index 219c6a7c..5c02774b 100644
--- a/apps/www/src/lib/registry/default/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SliderDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Slider } from '@/lib/registry/default/ui/slider'
+import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const modelValue = ref([50])
 </script>
diff --git a/apps/www/src/lib/registry/default/example/SliderForm.vue b/apps/www/src/lib/registry/default/example/SliderForm.vue
index d6d48304..43720165 100644
--- a/apps/www/src/lib/registry/default/example/SliderForm.vue
+++ b/apps/www/src/lib/registry/default/example/SliderForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Slider } from '@/lib/registry/default/ui/slider'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   duration: z.array(
     z.number().min(0).max(60),
diff --git a/apps/www/src/lib/registry/default/example/SonnerDemo.vue b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
index 17eba2d4..ae84c1d2 100644
--- a/apps/www/src/lib/registry/default/example/SonnerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SonnerDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { toast } from 'vue-sonner'
 import { Button } from '@/lib/registry/default/ui/button'
+import { toast } from 'vue-sonner'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/SonnerWithDialog.vue b/apps/www/src/lib/registry/default/example/SonnerWithDialog.vue
index 8f836aab..ebef1d4d 100644
--- a/apps/www/src/lib/registry/default/example/SonnerWithDialog.vue
+++ b/apps/www/src/lib/registry/default/example/SonnerWithDialog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { toast } from 'vue-sonner'
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   Dialog,
@@ -9,6 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/default/ui/dialog'
+import { toast } from 'vue-sonner'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/SwitchForm.vue b/apps/www/src/lib/registry/default/example/SwitchForm.vue
index ea5e4c38..35e9f39f 100644
--- a/apps/www/src/lib/registry/default/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/default/example/SwitchForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -15,6 +10,11 @@ import {
 import { Switch } from '@/lib/registry/default/ui/switch'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   marketing_emails: z.boolean().default(false).optional(),
   security_emails: z.boolean(),
diff --git a/apps/www/src/lib/registry/default/example/TagsInputDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
index 260005b6..12e482f7 100644
--- a/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
+++ b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+import { ref } from 'vue'
 
 const modelValue = ref(['Apple', 'Banana'])
 </script>
diff --git a/apps/www/src/lib/registry/default/example/TextareaForm.vue b/apps/www/src/lib/registry/default/example/TextareaForm.vue
index e6f9dece..a5247552 100644
--- a/apps/www/src/lib/registry/default/example/TextareaForm.vue
+++ b/apps/www/src/lib/registry/default/example/TextareaForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/default/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Textarea } from '@/lib/registry/default/ui/textarea'
 import { toast } from '@/lib/registry/default/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   bio: z
     .string()
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithButton.vue b/apps/www/src/lib/registry/default/example/TextareaWithButton.vue
index d7aab001..78b57f88 100644
--- a/apps/www/src/lib/registry/default/example/TextareaWithButton.vue
+++ b/apps/www/src/lib/registry/default/example/TextareaWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
 import { Button } from '@/lib/registry/default/ui/button'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue b/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
index c42a1c5b..1cfe925e 100644
--- a/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
+++ b/apps/www/src/lib/registry/default/example/TextareaWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
 import { Label } from '@/lib/registry/default/ui/label'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/TextareaWithText.vue b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
index 2996519e..3ea03b20 100644
--- a/apps/www/src/lib/registry/default/example/TextareaWithText.vue
+++ b/apps/www/src/lib/registry/default/example/TextareaWithText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/default/ui/textarea'
 import { Label } from '@/lib/registry/default/ui/label'
+import { Textarea } from '@/lib/registry/default/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToastDestructive.vue b/apps/www/src/lib/registry/default/example/ToastDestructive.vue
index 0cf00554..c6e9bd2a 100644
--- a/apps/www/src/lib/registry/default/example/ToastDestructive.vue
+++ b/apps/www/src/lib/registry/default/example/ToastDestructive.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { h } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
 import { ToastAction } from '@/lib/registry/default/ui/toast'
+import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { h } from 'vue'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/lib/registry/default/example/ToastWithAction.vue b/apps/www/src/lib/registry/default/example/ToastWithAction.vue
index 03f7640a..43cbf9b3 100644
--- a/apps/www/src/lib/registry/default/example/ToastWithAction.vue
+++ b/apps/www/src/lib/registry/default/example/ToastWithAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { h } from 'vue'
 import { Button } from '@/lib/registry/default/ui/button'
-import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
 import { ToastAction } from '@/lib/registry/default/ui/toast'
+import { useToast } from '@/lib/registry/default/ui/toast/use-toast'
+import { h } from 'vue'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/lib/registry/default/example/ToggleDemo.vue b/apps/www/src/lib/registry/default/example/ToggleDemo.vue
index ea4fef1e..189576e7 100644
--- a/apps/www/src/lib/registry/default/example/ToggleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Bold } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue b/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
index 432ca33c..50312709 100644
--- a/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Underline } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue
index acadbb58..78d66f01 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue
index 69ea5d09..b4605d4d 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupDisabledDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue
index f3c54ea2..6ff3a3f1 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupLargeDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue
index e802d64a..9eaf2150 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupOutlineDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue
index 14da4d41..9dab3eec 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupSingleDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue b/apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue
index e7364dc5..8aede9da 100644
--- a/apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleGroupSmallDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Bold, Italic, Underline } from 'lucide-vue-next'
-
 import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/default/ui/toggle-group'
+
+import { Bold, Italic, Underline } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
index de682c2a..06c24f99 100644
--- a/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Italic } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
index c888989c..594b7af3 100644
--- a/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Italic } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue b/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
index f464b49d..bd1ce68b 100644
--- a/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Italic } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue b/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
index 17b66c8e..3b2114dd 100644
--- a/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Italic } from 'lucide-vue-next'
-
 import { Toggle } from '@/lib/registry/default/ui/toggle'
+
+import { Italic } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/default/example/VCalendarDemo.vue b/apps/www/src/lib/registry/default/example/VCalendarDemo.vue
index 2add2507..cddb3ceb 100644
--- a/apps/www/src/lib/registry/default/example/VCalendarDemo.vue
+++ b/apps/www/src/lib/registry/default/example/VCalendarDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { ref } from 'vue'
 
 const date = ref(new Date())
 </script>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue b/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
index 3b8540cf..a8ac22c2 100644
--- a/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/VDatePickerDemo.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
 
+import { Calendar } from '@/lib/registry/default/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>
 
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerForm.vue b/apps/www/src/lib/registry/default/example/VDatePickerForm.vue
index b46495c3..7dbfff24 100644
--- a/apps/www/src/lib/registry/default/example/VDatePickerForm.vue
+++ b/apps/www/src/lib/registry/default/example/VDatePickerForm.vue
@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   FormControl,
   FormDescription,
@@ -17,13 +8,22 @@ import {
   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 { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { cn } from '@/lib/utils'
+
+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({
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue b/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
index 5b310a99..c0d92ed7 100644
--- a/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/default/example/VDatePickerWithPresets.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
+
 import {
   Select,
   SelectContent,
@@ -18,6 +13,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/default/ui/select'
+import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { cn } from '@/lib/utils'
+import { addDays, format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
 
 const date = ref<Date>()
 </script>
diff --git a/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue b/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
index eff99265..8d6b5df6 100644
--- a/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/default/example/VDatePickerWithRange.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
 
+import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { cn } from '@/lib/utils'
+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),
diff --git a/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue b/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
index ba0b231d..c9c394a2 100644
--- a/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/default/example/VDateTimePickerDemo.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
 
+import { Calendar } from '@/lib/registry/default/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>
 
diff --git a/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue b/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
index 235f69bc..c0fe2325 100644
--- a/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/default/example/VRangePickerWithSlot.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Calendar } from '@/lib/registry/default/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/default/ui/popover'
 
+import { Calendar } from '@/lib/registry/default/ui/v-calendar'
+import { cn } from '@/lib/utils'
+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),
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 d8ec9889..62a445dc 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+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 9975c238..ca2ed207 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+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 17c15ca2..7aa9871e 100644
--- a/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/accordion/AccordionTrigger.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
 import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
 } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+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/AlertDialogAction.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogAction.vue
index cd87a927..48c7ccea 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+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 54acd0da..927606d5 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+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 9f09909e..83fdf990 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -8,7 +8,7 @@ import {
   AlertDialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
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 9682cbb1..9f6db432 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 50c583d0..6cd13f93 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
index 91d138ae..448d5198 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
 export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
 export { default as AlertDialogAction } from './AlertDialogAction.vue'
 export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/apps/www/src/lib/registry/default/ui/alert/Alert.vue b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
index b3502d52..964d61d5 100644
--- a/apps/www/src/lib/registry/default/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/default/ui/alert/Alert.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type AlertVariants, alertVariants } from '.'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/alert/index.ts b/apps/www/src/lib/registry/default/ui/alert/index.ts
index 765f704d..d608673f 100644
--- a/apps/www/src/lib/registry/default/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/default/ui/alert/index.ts
@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
   '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',
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue
index 5c31d8b4..5c371a86 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="U extends ZodAny">
 import type { ZodAny } from 'zod'
-import { computed } from 'vue'
 import type { Config, ConfigItem, Shape } from './interface'
+import { computed } from 'vue'
 import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
 import useDependencies from './dependencies'
 
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue
index 7f777bc0..3d3efceb 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldArray.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts" generic="T extends z.ZodAny">
-import * as z from 'zod'
-import { computed, provide } from 'vue'
-import { PlusIcon, TrashIcon } from 'lucide-vue-next'
-import { FieldArray, FieldContextKey, useField } from 'vee-validate'
 import type { Config, ConfigItem } from './interface'
-import { beautifyObjectName, getBaseType } from './utils'
-import AutoFormField from './AutoFormField.vue'
-import AutoFormLabel from './AutoFormLabel.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
 import { Button } from '@/lib/registry/default/ui/button'
-import { Separator } from '@/lib/registry/default/ui/separator'
 import { FormItem, FormMessage } from '@/lib/registry/default/ui/form'
+import { Separator } from '@/lib/registry/default/ui/separator'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import * as z from 'zod'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseType } from './utils'
 
 const props = defineProps<{
   fieldName: string
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 24926a20..e6bb6a25 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
-import AutoFormLabel from './AutoFormLabel.vue'
+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 '@/lib/registry/default/ui/checkbox'
+import { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 const props = defineProps<FieldProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue
index a3489e52..161144db 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldDate.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { CalendarIcon } from 'lucide-vue-next'
-import { beautifyObjectName } from './utils'
-import AutoFormLabel from './AutoFormLabel.vue'
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-
-import { Calendar } from '@/lib/registry/default/ui/calendar'
 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 { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { CalendarIcon } from 'lucide-vue-next'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
 defineProps<FieldProps>()
 
 const df = new DateFormatter('en-US', {
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
index 49f6fc73..fc1a2d92 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'
 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 AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineProps<FieldProps & {
   options?: string[]
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue
index bde54b2c..e8d19d40 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldFile.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { TrashIcon } from 'lucide-vue-next'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 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 '@/lib/registry/default/ui/button'
+import { TrashIcon } from 'lucide-vue-next'
+import { ref } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineProps<FieldProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue
index 066f0d5c..6e18433d 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 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 { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 const props = defineProps<FieldProps>()
 const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue
index 7e281e57..b978ff25 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldNumber.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 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 AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue
index ea748d46..963f1101 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue
+++ b/apps/www/src/lib/registry/default/ui/auto-form/AutoFormFieldObject.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodRawShape">
 import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
-import { computed, provide } from 'vue'
-import { FieldContextKey, useField } from 'vee-validate'
-import AutoFormField from './AutoFormField.vue'
 import type { Config, ConfigItem, Shape } from './interface'
-import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
-import AutoFormLabel from './AutoFormLabel.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'
 import { FormItem } from '@/lib/registry/default/ui/form'
+import { FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
 
 const props = defineProps<{
   fieldName: string
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 ea761633..362cdb0c 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,8 +1,8 @@
-import type * as z from 'zod'
 import type { Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
-import { useFieldValue, useFormValues } from 'vee-validate'
+import type * as z from 'zod'
 import { createContext } from 'radix-vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { computed, ref, watch } from 'vue'
 import { type Dependency, DependencyType, type EnumValues } from './interface'
 import { getFromPath, getIndexIfArray } from './utils'
 
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/index.ts b/apps/www/src/lib/registry/default/ui/auto-form/index.ts
index 0fb84384..1874fd19 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/index.ts
+++ b/apps/www/src/lib/registry/default/ui/auto-form/index.ts
@@ -1,15 +1,15 @@
-export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
-export type { Config, ConfigItem, FieldProps } from './interface'
-
 export { default as AutoForm } from './AutoForm.vue'
 export { default as AutoFormField } from './AutoFormField.vue'
-export { default as AutoFormLabel } from './AutoFormLabel.vue'
 
 export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
 export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
 export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+
 export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
 export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
 export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
 export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
 export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
+export type { Config, ConfigItem, FieldProps } from './interface'
+export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'
diff --git a/apps/www/src/lib/registry/default/ui/auto-form/interface.ts b/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
index 4dd8b121..07fe8621 100644
--- a/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/auto-form/interface.ts
@@ -1,5 +1,5 @@
 import type { Component, InputHTMLAttributes } from 'vue'
-import type { ZodAny, z } from 'zod'
+import type { z, ZodAny } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
 export interface FieldProps {
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 5b7b9fbf..ed6ef22a 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
+++ b/apps/www/src/lib/registry/default/ui/avatar/Avatar.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'radix-vue'
+import { avatarVariant, type AvatarVariants } from '.'
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/avatar/index.ts b/apps/www/src/lib/registry/default/ui/avatar/index.ts
index c4af1a66..5367952a 100644
--- a/apps/www/src/lib/registry/default/ui/avatar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/avatar/index.ts
@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
 export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
 
 export const avatarVariant = cva(
   'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
diff --git a/apps/www/src/lib/registry/default/ui/badge/Badge.vue b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
index 2e8bdffa..9ed80393 100644
--- a/apps/www/src/lib/registry/default/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/default/ui/badge/Badge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
 
 const props = defineProps<{
   variant?: BadgeVariants['variant']
diff --git a/apps/www/src/lib/registry/default/ui/badge/index.ts b/apps/www/src/lib/registry/default/ui/badge/index.ts
index d90c2ef4..35e7a1a0 100644
--- a/apps/www/src/lib/registry/default/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/default/ui/badge/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
index 4925600d..cfccf9fe 100644
--- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 67de3947..df004a13 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 { Primitive, type PrimitiveProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
diff --git a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
index 436015df..8b56104b 100644
--- a/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 5cfd668a..d3e3786f 100644
--- a/apps/www/src/lib/registry/default/ui/button/Button.vue
+++ b/apps/www/src/lib/registry/default/ui/button/Button.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
diff --git a/apps/www/src/lib/registry/default/ui/button/index.ts b/apps/www/src/lib/registry/default/ui/button/index.ts
index 1b00c326..2ed708eb 100644
--- a/apps/www/src/lib/registry/default/ui/button/index.ts
+++ b/apps/www/src/lib/registry/default/ui/button/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
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 0486e496..6013df29 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
 const props = defineProps<CalendarRootProps & { 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 2fe5439a..41c69acb 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGrid.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
 
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 47fdb460..15b084c2 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarGridRow.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+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 f1ebfbab..71f65754 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeadCell.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+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 8bfa1969..dbb7ad8d 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeader.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+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 7062d3db..2de4ab77 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarHeading.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+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 5670dd98..700b0a86 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarNextButton.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 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 { 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 22398acc..c0a0d8ac 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/CalendarPrevButton.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
-import { ChevronLeft } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/card/index.ts b/apps/www/src/lib/registry/default/ui/card/index.ts
index 8170483c..9ff6d5e7 100644
--- a/apps/www/src/lib/registry/default/ui/card/index.ts
+++ b/apps/www/src/lib/registry/default/ui/card/index.ts
@@ -1,6 +1,6 @@
 export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
 export { default as CardHeader } from './CardHeader.vue'
 export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
index 87f0e308..6b40f14a 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
index 801e5c16..9c168237 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
index 27988d6a..2959c558 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselNext.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 import { ArrowRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
index 81a441d2..92c5a5a1 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/default/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 import { ArrowLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/default/ui/carousel/index.ts b/apps/www/src/lib/registry/default/ui/carousel/index.ts
index 5ccaad27..58162c02 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/index.ts
@@ -1,10 +1,10 @@
 export { default as Carousel } from './Carousel.vue'
 export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
-export { useCarousel } from './useCarousel'
-
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export type {
   UnwrapRefCarouselApi as CarouselApi,
 } from './interface'
+
+export { useCarousel } from './useCarousel'
diff --git a/apps/www/src/lib/registry/default/ui/carousel/interface.ts b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
index 195ff811..e2605be6 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/interface.ts
@@ -1,8 +1,8 @@
-import type { HTMLAttributes, UnwrapRef } from 'vue'
 import type useEmblaCarousel from 'embla-carousel-vue'
 import type {
   EmblaCarouselVueType,
 } from 'embla-carousel-vue'
+import type { HTMLAttributes, UnwrapRef } from 'vue'
 
 type CarouselApi = EmblaCarouselVueType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
diff --git a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
index 012d9434..7d762fdd 100644
--- a/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/default/ui/carousel/useCarousel.ts
@@ -1,7 +1,7 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 import { createInjectionState } from '@vueuse/core'
 import emblaCarouselVue from 'embla-carousel-vue'
 import { onMounted, ref } from 'vue'
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
   ({
diff --git a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
index d65b6567..9cbd0b6b 100644
--- a/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-bar/BarChart.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
diff --git a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
index a87863a0..0a79e97d 100644
--- a/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-donut/DonutChart.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { VisDonut, VisSingleContainer } from '@unovis/vue'
-import { Donut } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { Donut } from '@unovis/ts'
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
   /**
diff --git a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
index 82734ab3..f2311a8e 100644
--- a/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/default/ui/chart-line/LineChart.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
-import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Axis, Line } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'
 import { cn } from '@/lib/utils'
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { Axis, Line } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
index 4c47149e..7d1a6da7 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartCrosshair.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import { type Component, createApp } from 'vue'
 import { ChartTooltip } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
index 9a959b56..3c442086 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartLegend.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { VisBulletLegend } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { BulletLegend } from '@unovis/ts'
-import { nextTick, onMounted, ref } from 'vue'
 import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { BulletLegend } from '@unovis/ts'
+import { VisBulletLegend } from '@unovis/vue'
+import { nextTick, onMounted, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
   items: () => [],
diff --git a/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue b/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
index 49ca011c..b441fbf8 100644
--- a/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
+++ b/apps/www/src/lib/registry/default/ui/chart/ChartSingleTooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
+import { VisTooltip } from '@unovis/vue'
 import { type Component, createApp } from 'vue'
 import { ChartTooltip } from '.'
 
diff --git a/apps/www/src/lib/registry/default/ui/chart/index.ts b/apps/www/src/lib/registry/default/ui/chart/index.ts
index e2d64c17..d07ad7cc 100644
--- a/apps/www/src/lib/registry/default/ui/chart/index.ts
+++ b/apps/www/src/lib/registry/default/ui/chart/index.ts
@@ -1,7 +1,7 @@
-export { default as ChartTooltip } from './ChartTooltip.vue'
-export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
-export { default as ChartLegend } from './ChartLegend.vue'
 export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartTooltip } from './ChartTooltip.vue'
 
 export function defaultColors(count: number = 3) {
   const quotient = Math.floor(count / 2)
@@ -10,8 +10,8 @@ export function defaultColors(count: number = 3) {
   const primaryCount = quotient + remainder
   const secondaryCount = quotient
   return [
-    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
-    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }
 
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 4621bf75..be0d9589 100644
--- a/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
+++ b/apps/www/src/lib/registry/default/ui/checkbox/Checkbox.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
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 52bff5f2..fae7919c 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 { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/collapsible/index.ts b/apps/www/src/lib/registry/default/ui/collapsible/index.ts
index 4930f4c6..abab9567 100644
--- a/apps/www/src/lib/registry/default/ui/collapsible/index.ts
+++ b/apps/www/src/lib/registry/default/ui/collapsible/index.ts
@@ -1,3 +1,3 @@
 export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
 export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
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 fe7445c0..d33ab388 100644
--- a/apps/www/src/lib/registry/default/ui/command/Command.vue
+++ b/apps/www/src/lib/registry/default/ui/command/Command.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,
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 37c8406a..ac79ade8 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandDialog.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
+import { useForwardPropsEmits } from 'radix-vue'
+import Command from './Command.vue'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
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 1295d2a0..cd097d78 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandEmpty.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'radix-vue'
+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 ba6433e5..939b78e5 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandGroup.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class']
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 66923733..261fb95a 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandInput.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { Search } from 'lucide-vue-next'
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
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 5c6a6ffe..ec9dacff 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandItem.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
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 00d1b3a7..889b8d09 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandList.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandList.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,
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 477799cc..8f0cc1e6 100644
--- a/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/command/CommandSeparator.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'radix-vue'
+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 a888b59c..363e9c6b 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 { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 3025e5aa..6fb7994b 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
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 4651fb3d..568e878f 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
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 dc2903a6..ab8e077d 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
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 e9a94394..933cdbfd 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+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/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuRadioItem.vue
index 37a39a4e..7967b3f6 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
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 ae55f3a4..b3a8e4ff 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index 744388b0..3ffa4f67 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
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 94400a67..88e0d372 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+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/index.ts b/apps/www/src/lib/registry/default/ui/context-menu/index.ts
index 157f7b1d..3ed59e63 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/index.ts
+++ b/apps/www/src/lib/registry/default/ui/context-menu/index.ts
@@ -1,14 +1,14 @@
 export { default as ContextMenu } from './ContextMenu.vue'
-export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
 export { default as ContextMenuContent } from './ContextMenuContent.vue'
 export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
-export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
 export { default as ContextMenuItem } from './ContextMenuItem.vue'
-export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
-export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
-export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
-export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
 export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
 export { default as ContextMenuSub } from './ContextMenuSub.vue'
-export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
 export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
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 7b3aeaba..0de84518 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
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 3637b7ec..878ef2bd 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogDescription.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+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 cd9ba0d2..0d448213 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogScrollContent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
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 1bb40461..1f049e32 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/dialog/index.ts b/apps/www/src/lib/registry/default/ui/dialog/index.ts
index 847e999f..ca8cfeae 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/index.ts
+++ b/apps/www/src/lib/registry/default/ui/dialog/index.ts
@@ -1,9 +1,9 @@
 export { default as Dialog } from './Dialog.vue'
 export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.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'
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 05624d02..8be66568 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/Drawer.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { DrawerRoot } from 'vaul-vue'
 import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot } from 'vaul-vue'
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
   shouldScaleBackground: true,
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 6be17d0b..9639a6f3 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerContent.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { DrawerContent, DrawerPortal } from 'vaul-vue'
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import DrawerOverlay from './DrawerOverlay.vue'
 import { cn } from '@/lib/utils'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
 
 const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue
index 2a446c1e..092dc503 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerDescription.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
-import { DrawerDescription } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
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 c182463c..41c3c523 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerOverlay.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { DrawerOverlay } from 'vaul-vue'
 import type { DialogOverlayProps } from 'radix-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue b/apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue
index f8d77044..475c3ab4 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/drawer/DrawerTitle.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { DrawerTitleProps } from 'vaul-vue'
-import { DrawerTitle } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerTitle } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/drawer/index.ts b/apps/www/src/lib/registry/default/ui/drawer/index.ts
index b02bd3a6..d41b7928 100644
--- a/apps/www/src/lib/registry/default/ui/drawer/index.ts
+++ b/apps/www/src/lib/registry/default/ui/drawer/index.ts
@@ -1,8 +1,8 @@
-export { DrawerPortal, DrawerTrigger, DrawerClose } from 'vaul-vue'
 export { default as Drawer } from './Drawer.vue'
-export { default as DrawerOverlay } from './DrawerOverlay.vue'
 export { default as DrawerContent } from './DrawerContent.vue'
-export { default as DrawerHeader } from './DrawerHeader.vue'
-export { default as DrawerFooter } from './DrawerFooter.vue'
-export { default as DrawerTitle } from './DrawerTitle.vue'
 export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
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 cd21fdeb..ca8867c0 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
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 b33d58eb..6523e9ee 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
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 04d3d60e..86a30e65 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+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 5fa684e1..10494d4d 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+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/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuRadioItem.vue
index c8b9029c..d3fa4751 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+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 fc51205b..dac6a167 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']
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 446f9fb5..92078d9b 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
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 3474553d..51b137f1 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+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/index.ts b/apps/www/src/lib/registry/default/ui/dropdown-menu/index.ts
index 6f9446c3..6011f35c 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
@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from 'radix-vue'
-
 export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
 export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
 export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
 export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.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'
diff --git a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
index 6085f76c..93000660 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormDescription.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 444d9013..699724e4 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormItem.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, provide } from 'vue'
-import { useId } from 'radix-vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
+import { useId } from 'radix-vue'
+import { type HTMLAttributes, provide } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 5757aed9..6004460a 100644
--- a/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
+++ b/apps/www/src/lib/registry/default/ui/form/FormLabel.vue
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
 import type { LabelProps } from 'radix-vue'
-import { useFormField } from './useFormField'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
 import { Label } from '@/lib/registry/default/ui/label'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/form/index.ts b/apps/www/src/lib/registry/default/ui/form/index.ts
index 9e3f4796..fca299e7 100644
--- a/apps/www/src/lib/registry/default/ui/form/index.ts
+++ b/apps/www/src/lib/registry/default/ui/form/index.ts
@@ -1,7 +1,7 @@
-export { Form, Field as FormField } from 'vee-validate'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'
 export { default as FormLabel } from './FormLabel.vue'
-export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
-export { default as FormDescription } from './FormDescription.vue'
 export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Field as FormField, Form } from 'vee-validate'
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 8affac42..89c92131 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   HoverCardContent,
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/apps/www/src/lib/registry/default/ui/hover-card/index.ts b/apps/www/src/lib/registry/default/ui/hover-card/index.ts
index c7bfd32d..9e4ccc2a 100644
--- a/apps/www/src/lib/registry/default/ui/hover-card/index.ts
+++ b/apps/www/src/lib/registry/default/ui/hover-card/index.ts
@@ -1,3 +1,3 @@
 export { default as HoverCard } from './HoverCard.vue'
-export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
 export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/apps/www/src/lib/registry/default/ui/input/Input.vue b/apps/www/src/lib/registry/default/ui/input/Input.vue
index 39c9cee6..81140b40 100644
--- a/apps/www/src/lib/registry/default/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/default/ui/input/Input.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
   defaultValue?: string | number
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 8fba8db4..5ad1568f 100644
--- a/apps/www/src/lib/registry/default/ui/label/Label.vue
+++ b/apps/www/src/lib/registry/default/ui/label/Label.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'radix-vue'
+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 a016e106..7d2ebc5d 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/Menubar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
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 1e7c3a9f..0d2f7511 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarCheckboxItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   MenubarItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarCheckboxItemEmits>()
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 a529f149..ef09e786 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
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 027ff793..685b4bef 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarItem.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 7b3b8fff..574ce496 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 { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
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 c97b00db..bf265bff 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarRadioItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -7,8 +8,7 @@ import {
   type MenubarRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()
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 ed437697..234334e1 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
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 0a0ad68e..1cb245b2 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarPortal,
   MenubarSubContent,
@@ -7,7 +7,7 @@ import {
   type MenubarSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 341e91fc..a45e5b9f 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubTrigger.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+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 895f1ba6..61b27a88 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarTrigger.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/menubar/index.ts b/apps/www/src/lib/registry/default/ui/menubar/index.ts
index 808ec4d3..600c23ea 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/index.ts
+++ b/apps/www/src/lib/registry/default/ui/menubar/index.ts
@@ -1,15 +1,15 @@
 export { default as Menubar } from './Menubar.vue'
-export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarContent } from './MenubarContent.vue'
 export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
 export { default as MenubarMenu } from './MenubarMenu.vue'
 export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
 export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
-export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
 export { default as MenubarSub } from './MenubarSub.vue'
 export { default as MenubarSubContent } from './MenubarSubContent.vue'
 export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
 export { default as MenubarTrigger } from './MenubarTrigger.vue'
-export { default as MenubarShortcut } from './MenubarShortcut.vue'
-export { default as MenubarLabel } from './MenubarLabel.vue'
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 080d3bb1..a0b5bec8 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
 
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 03d8fbbc..101f450e 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuContent,
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 1d53291e..bbf7eb8b 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+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/NavigationMenuList.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuList.vue
index 354365c5..4cf0d10e 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+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 f93d9c22..6f2d0a27 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
 import { navigationMenuTriggerStyle } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
 
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 8abf60d1..56f53e61 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts b/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
index 1aca4227..5e89cbf2 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/index.ts
@@ -1,11 +1,11 @@
 import { cva } from 'class-variance-authority'
 
 export { default as NavigationMenu } from './NavigationMenu.vue'
-export { default as NavigationMenuList } from './NavigationMenuList.vue'
-export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
-export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
 export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 
 export const navigationMenuTriggerStyle = cva(
   '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',
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 c89c06fb..3c7db463 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,8 +1,8 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
diff --git a/apps/www/src/lib/registry/default/ui/number-field/index.ts b/apps/www/src/lib/registry/default/ui/number-field/index.ts
index 45edbe40..5489697d 100644
--- a/apps/www/src/lib/registry/default/ui/number-field/index.ts
+++ b/apps/www/src/lib/registry/default/ui/number-field/index.ts
@@ -1,5 +1,5 @@
 export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
 export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
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 09ffa359..62183ab9 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationEllipsis.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
-import { MoreHorizontal } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+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 cd3a0d29..8ca3c94b 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationFirst.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
-import { ChevronsLeft } from 'lucide-vue-next'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 b155e12a..d0c33638 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationLast.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
-import { ChevronsRight } from 'lucide-vue-next'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 360cb43d..9e5faab5 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationNext.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 e37aeb64..ee0ee042 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
+++ b/apps/www/src/lib/registry/default/ui/pagination/PaginationPrev.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
-import { ChevronLeft } from 'lucide-vue-next'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 183ecbe9..b113cd15 100644
--- a/apps/www/src/lib/registry/default/ui/pagination/index.ts
+++ b/apps/www/src/lib/registry/default/ui/pagination/index.ts
@@ -1,10 +1,10 @@
-export {
-  PaginationRoot as Pagination,
-  PaginationList,
-  PaginationListItem,
-} from 'radix-vue'
 export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
 export { default as PaginationFirst } from './PaginationFirst.vue'
 export { default as PaginationLast } from './PaginationLast.vue'
 export { default as PaginationNext } from './PaginationNext.vue'
 export { default as PaginationPrev } from './PaginationPrev.vue'
+export {
+  PaginationList,
+  PaginationListItem,
+  PaginationRoot as Pagination,
+} from 'radix-vue'
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 a79c3af5..49f4277c 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: () => [],
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 97afadae..8bf50d15 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 const delegatedProps = computed(() => {
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 ac3b9525..9277580c 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+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 b00f5665..f9b00b33 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 { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 import { Dot } from 'lucide-vue-next'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<PrimitiveProps>()
 const forwardedProps = useForwardProps(props)
diff --git a/apps/www/src/lib/registry/default/ui/pin-input/index.ts b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
index abec8fce..e645e414 100644
--- a/apps/www/src/lib/registry/default/ui/pin-input/index.ts
+++ b/apps/www/src/lib/registry/default/ui/pin-input/index.ts
@@ -1,4 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
 export { default as PinInputGroup } from './PinInputGroup.vue'
-export { default as PinInputSeparator } from './PinInputSeparator.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
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 1a5873a3..da5f7096 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 { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 e691fe82..97580eca 100644
--- a/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
+++ b/apps/www/src/lib/registry/default/ui/popover/PopoverContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   PopoverContent,
   type PopoverContentEmits,
@@ -7,7 +7,7 @@ import {
   PopoverPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/default/ui/popover/index.ts b/apps/www/src/lib/registry/default/ui/popover/index.ts
index 495d55a8..c621f9b1 100644
--- a/apps/www/src/lib/registry/default/ui/popover/index.ts
+++ b/apps/www/src/lib/registry/default/ui/popover/index.ts
@@ -1,3 +1,3 @@
 export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
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 6e006ffa..ea8f6d10 100644
--- a/apps/www/src/lib/registry/default/ui/progress/Progress.vue
+++ b/apps/www/src/lib/registry/default/ui/progress/Progress.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ProgressIndicator,
   ProgressRoot,
   type ProgressRootProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
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 9262656e..752468e1 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
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 b147fd86..86e8d194 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   type RadioGroupItemProps,
   useForwardProps,
 } from 'radix-vue'
-import { Circle } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+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 3033f05b..ee7a5302 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,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
-import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 
 const props = defineProps<RangeCalendarRootProps & { 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 e346b07d..c9bb72a9 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+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/RangeCalendarGridRow.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarGridRow.vue
index 425ed58f..05bff21a 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'
+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/RangeCalendarHeader.vue b/apps/www/src/lib/registry/default/ui/range-calendar/RangeCalendarHeader.vue
index 7d98cafa..662a7118 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+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 51ee1f8b..f3e55160 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+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 e82731e4..9d9d621b 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
-import { ChevronRight } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 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 { 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 97d5cbf4..b245e5c1 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
-import { ChevronLeft } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 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 { 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 fc0cc35d..eeb77c1f 100644
--- a/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
+++ b/apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
-import { GripVertical } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { GripVertical } from 'lucide-vue-next'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()
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 6c317fa7..d1449e09 100644
--- a/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()
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 22a0a8a8..605e8106 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 ResizablePanelGroup } from './ResizablePanelGroup.vue'
 export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
 export { SplitterPanel as ResizablePanel } from 'radix-vue'
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 8f501cce..b9a1c59f 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
   type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import ScrollBar from './ScrollBar.vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
 
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 efaaee2d..8cd4a184 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
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 4fe234b2..f597885d 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -8,8 +8,8 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
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 407d8ad3..b0803e13 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectGroup.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+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 b102a812..9a410270 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   SelectItem,
   SelectItemIndicator,
@@ -7,8 +8,7 @@ import {
   SelectItemText,
   useForwardProps,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
 
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 3d45cdb6..503e8905 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 { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 
 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 54b6c6ac..88543347 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollDownButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronDown } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+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 5535f1c7..6c3711fc 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectScrollUpButton.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronUp } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { ChevronUp } from 'lucide-vue-next'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+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 5ae593d2..cb06b8d1 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectSeparator.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/select/index.ts b/apps/www/src/lib/registry/default/ui/select/index.ts
index b1d89eed..31b92946 100644
--- a/apps/www/src/lib/registry/default/ui/select/index.ts
+++ b/apps/www/src/lib/registry/default/ui/select/index.ts
@@ -1,11 +1,11 @@
 export { default as Select } from './Select.vue'
-export { default as SelectValue } from './SelectValue.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
 export { default as SelectContent } from './SelectContent.vue'
 export { default as SelectGroup } from './SelectGroup.vue'
 export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
 export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
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 79625182..a3606186 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetContent.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
@@ -9,9 +10,8 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { X } from 'lucide-vue-next'
+import { computed, type HTMLAttributes } from 'vue'
 import { type SheetVariants, sheetVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
   class?: HTMLAttributes['class']
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 842cd08a..b515e42a 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetDescription.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+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 2ca0c543..b1029593 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/sheet/SheetTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/sheet/index.ts b/apps/www/src/lib/registry/default/ui/sheet/index.ts
index fae3f08c..4c4e77af 100644
--- a/apps/www/src/lib/registry/default/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/default/ui/sheet/index.ts
@@ -1,13 +1,13 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
 export { default as SheetClose } from './SheetClose.vue'
 export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
 
 export const sheetVariants = cva(
   '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',
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 f2ee993c..49d9af1f 100644
--- a/apps/www/src/lib/registry/default/ui/switch/Switch.vue
+++ b/apps/www/src/lib/registry/default/ui/switch/Switch.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   SwitchRoot,
   type SwitchRootEmits,
@@ -7,7 +7,7 @@ import {
   SwitchThumb,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
index 43fe7e0c..3f6e0ffa 100644
--- a/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
+++ b/apps/www/src/lib/registry/default/ui/table/TableEmpty.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import TableRow from './TableRow.vue'
-import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/table/index.ts b/apps/www/src/lib/registry/default/ui/table/index.ts
index 6fa181be..2b4ce391 100644
--- a/apps/www/src/lib/registry/default/ui/table/index.ts
+++ b/apps/www/src/lib/registry/default/ui/table/index.ts
@@ -1,9 +1,9 @@
 export { default as Table } from './Table.vue'
 export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
 export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
 export { default as TableHead } from './TableHead.vue'
 export { default as TableHeader } from './TableHeader.vue'
-export { default as TableFooter } from './TableFooter.vue'
 export { default as TableRow } from './TableRow.vue'
-export { default as TableCaption } from './TableCaption.vue'
-export { default as TableEmpty } from './TableEmpty.vue'
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 2fa0971f..8feda3f7 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 { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 c0aa0f35..fb59dc96 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tabs/TabsContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/tabs/index.ts b/apps/www/src/lib/registry/default/ui/tabs/index.ts
index fbea0c68..a5e58dc0 100644
--- a/apps/www/src/lib/registry/default/ui/tabs/index.ts
+++ b/apps/www/src/lib/registry/default/ui/tabs/index.ts
@@ -1,4 +1,4 @@
 export { default as Tabs } from './Tabs.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'
-export { default as TabsList } from './TabsList.vue'
 export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
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 acf6bd3c..435b3782 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<TagsInputRootEmits>()
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 ccb08a15..4b1de4e1 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+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 23fae205..54618f65 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
 
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 544eebc4..903d5530 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
-import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+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 91ade8b6..2ce7a6dc 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
index b72cb7e7..1dee55d2 100644
--- a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
   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 b74762cb..53668710 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toast.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toast.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
-import { type ToastProps, toastVariants } from '.'
 import { cn } from '@/lib/utils'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { type ToastProps, toastVariants } from '.'
 
 const props = defineProps<ToastProps>()
 
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 28ca8c8e..1bc77728 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastAction.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastAction, type ToastActionProps } from 'radix-vue'
+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 ab685a51..157eb5c6 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastClose.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastClose, type ToastCloseProps } from 'radix-vue'
-import { X } from 'lucide-vue-next'
 import { cn } from '@/lib/utils'
+import { X } from 'lucide-vue-next'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes['class']
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 58520378..31b2a5a3 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastDescription.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastDescriptionProps & { class?: HTMLAttributes['class'] }>()
 
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 0a1dffbe..a42b9c64 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastTitle.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+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 57deec81..839f1e78 100644
--- a/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/ToastViewport.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastViewportProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/default/ui/toast/Toaster.vue b/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
index f86ce40b..cac5dad0 100644
--- a/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
+++ b/apps/www/src/lib/registry/default/ui/toast/Toaster.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isVNode } from 'vue'
-import { useToast } from './use-toast'
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
+import { useToast } from './use-toast'
 
 const { toasts } = useToast()
 </script>
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 a1949157..5cb3f84f 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -1,17 +1,17 @@
 import type { ToastRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-export { default as Toaster } from './Toaster.vue'
 export { default as Toast } from './Toast.vue'
-export { default as ToastViewport } from './ToastViewport.vue'
 export { default as ToastAction } from './ToastAction.vue'
 export { default as ToastClose } from './ToastClose.vue'
-export { default as ToastTitle } from './ToastTitle.vue'
 export { default as ToastDescription } from './ToastDescription.vue'
+export { default as Toaster } from './Toaster.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
 export { toast, useToast } from './use-toast'
 
-import { type VariantProps, cva } from 'class-variance-authority'
+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',
diff --git a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
index 500e929e..228e5a79 100644
--- a/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/use-toast.ts
@@ -1,6 +1,6 @@
-import { computed, ref } from 'vue'
 import type { Component, VNode } from 'vue'
 import type { ToastProps } from '.'
+import { computed, ref } from 'vue'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
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 4e725137..381465ed 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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, provide } from 'vue'
-import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 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 { 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 79cf4709..f51810f8 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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, inject } from 'vue'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
 import { toggleVariants } from '@/lib/registry/default/ui/toggle'
 import { cn } from '@/lib/utils'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+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 29a69102..30a4e252 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
+++ b/apps/www/src/lib/registry/default/ui/toggle/Toggle.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
-import { type ToggleVariants, toggleVariants } from '.'
 import { cn } from '@/lib/utils'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { type ToggleVariants, toggleVariants } from '.'
 
 const props = withDefaults(defineProps<ToggleProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/default/ui/toggle/index.ts b/apps/www/src/lib/registry/default/ui/toggle/index.ts
index 7e35be2f..75877ad0 100644
--- a/apps/www/src/lib/registry/default/ui/toggle/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toggle/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Toggle } from './Toggle.vue'
 
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 1f12009a..c583a984 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
+++ b/apps/www/src/lib/registry/default/ui/tooltip/TooltipContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/default/ui/tooltip/index.ts b/apps/www/src/lib/registry/default/ui/tooltip/index.ts
index 82049b48..5ab96536 100644
--- a/apps/www/src/lib/registry/default/ui/tooltip/index.ts
+++ b/apps/www/src/lib/registry/default/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
 export { default as Tooltip } from './Tooltip.vue'
 export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
 export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue b/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
index b3670721..be2f2e67 100644
--- a/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import type { Calendar } from 'v-calendar'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { cn } from '@/lib/utils'
 import { useVModel } from '@vueuse/core'
 import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
-import type { Calendar } from 'v-calendar'
 import { DatePicker } from 'v-calendar'
 import { computed, nextTick, onMounted, ref, useSlots } from 'vue'
 import { isVCalendarSlot } from '.'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
diff --git a/apps/www/src/lib/registry/index.ts b/apps/www/src/lib/registry/index.ts
index a65aa9a2..636bfa42 100644
--- a/apps/www/src/lib/registry/index.ts
+++ b/apps/www/src/lib/registry/index.ts
@@ -1,4 +1,4 @@
 export * from './colors'
-export * from './themes'
 export * from './schema'
 export * from './styles'
+export * from './themes'
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard01.vue b/apps/www/src/lib/registry/new-york/block/Dashboard01.vue
index cc4ce497..8e85a9ed 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard01.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard01.vue
@@ -5,7 +5,6 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 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'
@@ -14,6 +13,7 @@ import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel,
 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 { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard02.vue b/apps/www/src/lib/registry/new-york/block/Dashboard02.vue
index 37460ade..1bf8a840 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard02.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard02.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
-
 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 { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard03.vue b/apps/www/src/lib/registry/new-york/block/Dashboard03.vue
index a71c6a66..9ac29295 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard03.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard03.vue
@@ -5,9 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
-
 import { Badge } from '@/lib/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'
@@ -15,6 +14,7 @@ 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 { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard04.vue b/apps/www/src/lib/registry/new-york/block/Dashboard04.vue
index 1f69e9a1..c20dd15b 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard04.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard04.vue
@@ -5,14 +5,14 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
-
 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'
 import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'
 </script>
 
 <template>
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 0fcddcba..8dc46f45 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard05.vue
@@ -5,30 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  CircleUser,
-  Copy,
-  CreditCard,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreVertical,
-  Package,
-  Package2,
-  PanelLeft,
-  Search,
-  Settings,
-  ShoppingCart,
-  Truck,
-  Users2,
-} from 'lucide-vue-next'
-
 import { Badge } from '@/lib/registry/new-york/ui/badge'
-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 {
   Breadcrumb,
   BreadcrumbItem,
@@ -37,7 +15,11 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/lib/registry/new-york/ui/breadcrumb'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+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'
 import {
   Pagination,
   PaginationList,
@@ -46,6 +28,7 @@ import {
 } 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'
 import {
   Table,
   TableBody,
@@ -65,7 +48,24 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import {
+  CircleUser,
+  Copy,
+  CreditCard,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreVertical,
+  Package,
+  Package2,
+  PanelLeft,
+  Search,
+  Settings,
+  ShoppingCart,
+  Truck,
+  Users2,
+} from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
index 9f370213..853623f9 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard06.vue
@@ -5,28 +5,8 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
-import {
-  CircleUser,
-  File,
-  Home,
-  LineChart,
-  ListFilter,
-  MoreHorizontal,
-  Package,
-  Package2,
-  PanelLeft,
-  PlusCircle,
-  Search,
-  Settings,
-  ShoppingCart,
-  Users2,
-} from 'lucide-vue-next'
-
 import { Badge } from '@/lib/registry/new-york/ui/badge'
-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 {
   Breadcrumb,
   BreadcrumbItem,
@@ -35,6 +15,10 @@ import {
   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'
 import {
   Table,
@@ -55,6 +39,22 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
+import {
+  CircleUser,
+  File,
+  Home,
+  LineChart,
+  ListFilter,
+  MoreHorizontal,
+  Package,
+  Package2,
+  PanelLeft,
+  PlusCircle,
+  Search,
+  Settings,
+  ShoppingCart,
+  Users2,
+} from 'lucide-vue-next'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
index 56ad2623..e05e3e0a 100644
--- a/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
+++ b/apps/www/src/lib/registry/new-york/block/Dashboard07.vue
@@ -5,6 +5,44 @@ export const containerClass = 'w-full h-full'
 </script>
 
 <script setup lang="ts">
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  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'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+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 { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/lib/registry/new-york/ui/tooltip'
 import {
   ChevronLeft,
   CircleUser,
@@ -20,44 +58,6 @@ import {
   Upload,
   Users2,
 } from 'lucide-vue-next'
-
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-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 { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from '@/lib/registry/new-york/ui/breadcrumb'
-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 {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/lib/registry/new-york/ui/select'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '@/lib/registry/new-york/ui/tooltip'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
index ebb70284..36085d65 100644
--- a/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AlertDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { RocketIcon } from '@radix-icons/vue'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+import { RocketIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue b/apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue
index 1f541256..42438cf6 100644
--- a/apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ExclamationTriangleIcon } from '@radix-icons/vue'
 import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+import { ExclamationTriangleIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
index 80e76039..5611e631 100644
--- a/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
index 96e557db..edf6c7d7 100644
--- a/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
+++ b/apps/www/src/lib/registry/new-york/example/AreaChartSparkline.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { CurveType } from '@unovis/ts'
 import { AreaChart } from '@/lib/registry/new-york/ui/chart-area'
+import { CurveType } from '@unovis/ts'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue b/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
index 4de304d1..da16622c 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormApi.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h, onMounted, shallowRef } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h, onMounted, shallowRef } from 'vue'
+import * as z from 'zod'
 
 const schema = shallowRef<z.ZodObject< any, any, any > | null>(null)
 
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormArray.vue b/apps/www/src/lib/registry/new-york/example/AutoFormArray.vue
index 833256f4..a83ef2f2 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormArray.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormArray.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   guestListName: z.string(),
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue b/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
index 6c4414f9..272cd3d2 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormBasic.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 enum Sports {
   Football = 'Football/Soccer',
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue b/apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue
index 9f96b908..aa5e17db 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormConfirmPassword.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z
   .object({
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue b/apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue
index eb3b3acb..b7091b9f 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormControlled.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   username: z.string(),
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue b/apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue
index bdd5f505..e6ae0f1c 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormDependencies.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
-import { DependencyType } from '../ui/auto-form/interface'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
+import { DependencyType } from '../ui/auto-form/interface'
 
 const schema = z.object({
   age: z.number(),
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue b/apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue
index 67cad8d0..2eee8b6d 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   username: z.string(),
diff --git a/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue b/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
index a71b7d0d..5e21f0ff 100644
--- a/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
+++ b/apps/www/src/lib/registry/new-york/example/AutoFormSubObject.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import * as z from 'zod'
-import { h } from 'vue'
+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 '@/lib/registry/new-york/ui/auto-form'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const schema = z.object({
   subObject: z.object({
diff --git a/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
index 0e514127..0e19195e 100644
--- a/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/new-york/example/BarChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue
index 47fe7c4e..fef8d10d 100644
--- a/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue
+++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbDropdown.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -14,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue
index 2d1b937a..305b106d 100644
--- a/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue
+++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbResponsive.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { useMediaQuery } from '@vueuse/core'
-import { computed, ref } from 'vue'
 import {
   Breadcrumb,
   BreadcrumbEllipsis,
@@ -27,6 +25,8 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { useMediaQuery } from '@vueuse/core'
+import { computed, ref } from 'vue'
 
 const isDesktop = useMediaQuery('(min-width: 768px)')
 const isOpen = ref(false)
diff --git a/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue
index 157220a8..1ce87d45 100644
--- a/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/BreadcrumbSeparatorDemo.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { SlashIcon } from '@radix-icons/vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -8,6 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from '@/lib/registry/new-york/ui/breadcrumb'
+import { SlashIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
index d1bc3d2d..e587c0e2 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ChevronRightIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { ChevronRightIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
index 6835086e..f17900a6 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ReloadIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { ReloadIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
index 648764a4..df05f939 100644
--- a/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { EnvelopeOpenIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { EnvelopeOpenIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
index 33243667..b25ab14b 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
-import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
 import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { type DateValue, getLocalTimeZone, today } from '@internationalized/date'
+import { type Ref, ref } from 'vue'
 
 const value = ref(today(getLocalTimeZone())) as Ref<DateValue>
 </script>
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 61ab5371..728b9be3 100644
--- a/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/CalendarForm.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
-import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue/date'
-import { CalendarIcon } from '@radix-icons/vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -19,6 +12,13 @@ import {
 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'
+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 { useForm } from 'vee-validate'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
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 a98601dc..367adc90 100644
--- a/apps/www/src/lib/registry/new-york/example/CardChat.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardChat.vue
@@ -1,25 +1,25 @@
 <script setup lang="ts">
-import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
-import { computed, ref } from 'vue'
+import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
   CardFooter,
   CardHeader,
 } from '@/lib/registry/new-york/ui/card'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/lib/registry/new-york/ui/dialog'
 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'
 
-import { Avatar, AvatarFallback, AvatarImage } from '@/lib/registry/new-york/ui/avatar'
+import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Input } from '@/lib/registry/new-york/ui/input'
 import { cn } from '@/lib/utils'
+import { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'
+import { computed, ref } from 'vue'
 
 const input = ref('')
 const inputLength = computed(() => input.value.trim().length)
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
index ad8c0883..01b1f13f 100644
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { BellIcon, CheckIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -11,6 +10,7 @@ import {
 } from '@/lib/registry/new-york/ui/card'
 import { Switch } from '@/lib/registry/new-york/ui/switch'
 import { cn } from '@/lib/utils'
+import { BellIcon, CheckIcon } from '@radix-icons/vue'
 
 const notifications = [
   {
diff --git a/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue b/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
index c80c38dc..787ad2f5 100644
--- a/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardFormDemo.vue
@@ -1,4 +1,5 @@
 <script setup lang='ts'>
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
   CardContent,
@@ -7,6 +8,8 @@ import {
   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 {
   Select,
   SelectContent,
@@ -14,9 +17,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Button } from '@/lib/registry/new-york/ui/button'
 </script>
 
 <template>
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 b70865f4..36fda875 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { VisScatter } from '@unovis/vue'
 import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
-import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
 import { BarChart } from '@/lib/registry/new-york/ui/chart-bar'
+import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import { VisScatter } from '@unovis/vue'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
index f82cbc9c..3eacaa08 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/ActivityGoal.vue
@@ -1,9 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { MinusIcon, PlusIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-
 import {
   Card,
   CardContent,
@@ -12,6 +8,10 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
+import { MinusIcon, PlusIcon } from '@radix-icons/vue'
+import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+
+import { ref } from 'vue'
 
 const goal = ref(350)
 
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 b725a4ac..8da408f5 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
@@ -5,19 +5,8 @@ import type {
   SortingState,
   VisibilityState,
 } from '@tanstack/vue-table'
-import {
-  FlexRender,
-  getCoreRowModel,
-  getFilteredRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useVueTable,
-} from '@tanstack/vue-table'
-import { h, ref } from 'vue'
-import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
-import DropdownAction from '../DataTableDemoColumn.vue'
-
 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 {
   DropdownMenu,
@@ -25,6 +14,7 @@ import {
   DropdownMenuContent,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+
 import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Table,
@@ -34,8 +24,18 @@ import {
   TableHeader,
   TableRow,
 } from '@/lib/registry/new-york/ui/table'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
 import { valueUpdater } from '@/lib/utils'
+import { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'
+import {
+  FlexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useVueTable,
+} from '@tanstack/vue-table'
+import { h, ref } from 'vue'
+import DropdownAction from '../DataTableDemoColumn.vue'
 
 export interface Payment {
   id: string
diff --git a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
index 27bbba8e..1e62c79f 100644
--- a/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
+++ b/apps/www/src/lib/registry/new-york/example/Cards/Metric.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
-import { Line } from '@unovis/ts'
 import {
   Card,
   CardContent,
@@ -8,6 +6,8 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
+import { Line } from '@unovis/ts'
+import { VisCrosshair, VisLine, VisScatter, VisTooltip, VisXYContainer } from '@unovis/vue'
 
 type Data = typeof data[number]
 const data = [
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
index 1bee3504..7d19be8a 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselApi.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
 import type { CarouselApi } from '@/lib/registry/new-york/ui/carousel'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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 { watchOnce } from '@vueuse/core'
+import { ref } from 'vue'
 
 const api = ref<CarouselApi>()
 const totalCount = ref(0)
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
index 53f117c4..b3a19ec4 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
index c4d2ee03..c5193851 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselOrientation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
index 91fdf6fc..b6565596 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselPlugin.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Autoplay from 'embla-carousel-autoplay'
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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 Autoplay from 'embla-carousel-autoplay'
 
 const plugin = Autoplay({
   delay: 2000,
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
index 8d28839e..525a6563 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSize.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
index 7e4603ca..06285016 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselSpacing.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } 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'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue b/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
index 798a4585..5966aea6 100644
--- a/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
+++ b/apps/www/src/lib/registry/new-york/example/CarouselThumbnails.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { watchOnce } from '@vueuse/core'
-import { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/lib/registry/new-york/ui/carousel'
 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 { watchOnce } from '@vueuse/core'
+import { ref } from 'vue'
 
 const emblaMainApi = ref<CarouselApi>()
 const emblaThumbnailApi = ref<CarouselApi>()
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 1debb310..1f42dafe 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormMultiple.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -13,9 +9,13 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const items = [
   {
     id: 'recents',
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 71e0ea55..f887913b 100644
--- a/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
+++ b/apps/www/src/lib/registry/new-york/example/CheckboxFormSingle.vue
@@ -1,10 +1,6 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import {
   FormControl,
   FormDescription,
@@ -13,9 +9,13 @@ import {
   FormLabel,
   FormMessage,
 } from '@/lib/registry/new-york/ui/form'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   mobile: z.boolean().default(false).optional(),
 }))
diff --git a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
index 77868bbf..ad1c0d16 100644
--- a/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CollapsibleDemo.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CaretSortIcon } from '@radix-icons/vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Collapsible,
@@ -9,6 +6,9 @@ import {
   CollapsibleTrigger,
 } from '@/lib/registry/new-york/ui/collapsible'
 
+import { CaretSortIcon } from '@radix-icons/vue'
+import { ref } from 'vue'
+
 const isOpen = ref(false)
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
index 9dbcc6c4..abc7941c 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDemo.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Command,
@@ -12,11 +8,15 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/new-york/ui/command'
+
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+import { cn } from '@/lib/utils'
+import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
index b45b6023..6176ac94 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxDropdownMenu.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Command,
@@ -11,6 +8,7 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/new-york/ui/command'
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -24,6 +22,8 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { ref } from 'vue'
 
 const labels = [
   'feature',
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
index f58cfacd..e3be9aac 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxForm.vue
@@ -1,11 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Command,
@@ -28,7 +21,14 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+
 import { toast } from '@/lib/registry/new-york/ui/toast'
+import { cn } from '@/lib/utils'
+import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const languages = [
   { label: 'English', value: 'en' },
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
index f9423dff..f9e31e43 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxPopover.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
+
 import {
   Command,
   CommandEmpty,
@@ -15,6 +14,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+import { ref } from 'vue'
 
 interface Status {
   value: string
diff --git a/apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue b/apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue
index 393bc877..cb61a111 100644
--- a/apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue
+++ b/apps/www/src/lib/registry/new-york/example/ComboboxResponsive.vue
@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
-import { ref } from 'vue'
 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 { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
 
 interface Status {
   value: string
diff --git a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
index 52067aeb..38db804d 100644
--- a/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CommandDemo.vue
@@ -1,13 +1,4 @@
 <script setup lang="ts">
-import {
-  CalendarIcon,
-  EnvelopeClosedIcon,
-  FaceIcon,
-  GearIcon,
-  PersonIcon,
-  RocketIcon,
-} from '@radix-icons/vue'
-
 import {
   Command,
   CommandEmpty,
@@ -18,6 +9,15 @@ import {
   CommandSeparator,
   CommandShortcut,
 } from '@/lib/registry/new-york/ui/command'
+
+import {
+  CalendarIcon,
+  EnvelopeClosedIcon,
+  FaceIcon,
+  GearIcon,
+  PersonIcon,
+  RocketIcon,
+} from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue b/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
index f5e1beb1..70243537 100644
--- a/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { useMagicKeys } from '@vueuse/core'
-
-import { ref, watch } from 'vue'
 import {
   CommandDialog,
   CommandEmpty,
@@ -12,6 +9,9 @@ import {
   CommandSeparator,
 } from '@/lib/registry/new-york/ui/command'
 
+import { useMagicKeys } from '@vueuse/core'
+import { ref, watch } from 'vue'
+
 const open = ref(false)
 
 const { Meta_J, Ctrl_J } = useMagicKeys({
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
index 8b3dfba1..f9f18dd4 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerDemo.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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 {
   DateFormatter,
   type DateValue,
   getLocalTimeZone,
 } from '@internationalized/date'
-
 import { CalendarIcon } from '@radix-icons/vue'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
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 a027293d..1020bf8d 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerForm.vue
@@ -1,13 +1,6 @@
 <script setup lang="ts">
-import { computed, h, ref } from 'vue'
-import { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'
-import { toDate } from 'radix-vue/date'
-import { CalendarIcon } from '@radix-icons/vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import { z } from 'zod'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import {
   FormControl,
   FormDescription,
@@ -19,6 +12,13 @@ import {
 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'
+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 { useForm } from 'vee-validate'
+import { computed, h, ref } from 'vue'
+import { z } from 'zod'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
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 cf493deb..d6a14006 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
-import { type Ref, ref, watch } from 'vue'
+import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
 
 import {
-  CalendarIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-} from '@radix-icons/vue'
-import {
-  CalendarDate,
-  type DateValue,
-  isEqualMonth,
-} from '@internationalized/date'
-
-import { type DateRange, RangeCalendarRoot, useDateFormatter } from 'radix-vue'
-import { type Grid, createMonth, toDate } from 'radix-vue/date'
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/lib/registry/new-york/ui/popover'
 import {
   RangeCalendarCell,
   RangeCalendarCellTrigger,
@@ -23,13 +15,21 @@ import {
   RangeCalendarGridRow,
   RangeCalendarHeadCell,
 } from '@/lib/registry/new-york/ui/range-calendar'
-import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/lib/registry/new-york/ui/popover'
+
 import { cn } from '@/lib/utils'
+import {
+  CalendarDate,
+  type DateValue,
+  isEqualMonth,
+} from '@internationalized/date'
+import {
+  CalendarIcon,
+  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 Ref, ref, watch } from 'vue'
 
 const value = ref({
   start: new CalendarDate(2022, 1, 20),
diff --git a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
index a903df30..9079621f 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithPresets.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+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 {
   DateFormatter,
   type DateValue,
   getLocalTimeZone,
   today,
 } from '@internationalized/date'
-
 import { CalendarIcon } from '@radix-icons/vue'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-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 { ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'long',
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 21c04aba..ad206003 100644
--- a/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/DatePickerWithRange.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+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 {
   CalendarDate,
   DateFormatter,
   getLocalTimeZone,
 } from '@internationalized/date'
-
 import { CalendarIcon } from '@radix-icons/vue'
-import type { DateRange } from 'radix-vue'
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { cn } from '@/lib/utils'
+import { type Ref, ref } from 'vue'
 
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
diff --git a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
index 03a0695f..751a9a55 100644
--- a/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
+++ b/apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { CopyIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Dialog,
@@ -13,6 +12,7 @@ import {
 } 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'
+import { CopyIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
index 06bca323..d7e721fb 100644
--- a/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/new-york/example/DonutChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { DonutChart } from '@/lib/registry/new-york/ui/chart-donut'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
index 9bb93e5b..877a7d3b 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDemo.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { MinusIcon, PlusIcon } from '@radix-icons/vue'
-import { VisStackedBar, VisXYContainer } from '@unovis/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Drawer,
@@ -13,6 +10,9 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '@/lib/registry/new-york/ui/drawer'
+import { MinusIcon, PlusIcon } from '@radix-icons/vue'
+import { VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { ref } from 'vue'
 
 const goal = ref(350)
 
diff --git a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
index 8f515b51..ada16fed 100644
--- a/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
+++ b/apps/www/src/lib/registry/new-york/example/DrawerDialog.vue
@@ -1,6 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Dialog,
@@ -20,8 +18,10 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from '@/lib/registry/new-york/ui/drawer'
-import { Label } from '@/lib/registry/new-york/ui/label'
 import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { createReusableTemplate, useMediaQuery } from '@vueuse/core'
+import { ref } from 'vue'
 
 // Reuse `form` section
 const [UseTemplate, GridForm] = createReusableTemplate()
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 6b8cde6a..a99a7573 100644
--- a/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuCheckboxes.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { DropdownMenuCheckboxItemProps } from 'radix-vue'
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
@@ -10,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { ref } from 'vue'
 
 type Checked = DropdownMenuCheckboxItemProps['checked']
 
diff --git a/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue b/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
index d0a8e768..0a83cf65 100644
--- a/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
+++ b/apps/www/src/lib/registry/new-york/example/DropdownMenuRadioGroup.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   DropdownMenu,
@@ -10,6 +9,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { ref } from 'vue'
 
 const position = ref('bottom')
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
index 57ea45c8..2ac6a4d5 100644
--- a/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/HoverCardDemo.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { CalendarIcon } from '@radix-icons/vue'
-
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@/lib/registry/new-york/ui/avatar'
+
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   HoverCard,
   HoverCardContent,
   HoverCardTrigger,
 } from '@/lib/registry/new-york/ui/hover-card'
+import { CalendarIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputForm.vue b/apps/www/src/lib/registry/new-york/example/InputForm.vue
index 5a2867b0..d8e139c7 100644
--- a/apps/www/src/lib/registry/new-york/example/InputForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { toast } from '@/lib/registry/new-york/ui/toast/use-toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
 }))
diff --git a/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
index a2fcc5ba..a0997996 100644
--- a/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputFormAutoAnimate.vue
@@ -1,10 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-import { vAutoAnimate } from '@formkit/auto-animate/vue'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -16,6 +10,12 @@ import {
 } 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'
+import { vAutoAnimate } from '@formkit/auto-animate/vue'
+
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
 
 const formSchema = toTypedSchema(z.object({
   username: z.string().min(2).max(50),
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithButton.vue b/apps/www/src/lib/registry/new-york/example/InputWithButton.vue
index 7127cbce..5101ca95 100644
--- a/apps/www/src/lib/registry/new-york/example/InputWithButton.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Input } from '@/lib/registry/new-york/ui/input'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
index 6f61ef7d..d57d6e42 100644
--- a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
+++ b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { MagnifyingGlassIcon } from '@radix-icons/vue'
 import { Input } from '@/lib/registry/new-york/ui/input'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
index 5fd45957..11b023dc 100644
--- a/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
+++ b/apps/www/src/lib/registry/new-york/example/LineChartCustomTooltip.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import CustomChartTooltip from './CustomChartTooltip.vue'
 import { LineChart } from '@/lib/registry/new-york/ui/chart-line'
+import CustomChartTooltip from './CustomChartTooltip.vue'
 
 const data = [
   {
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
index ec078919..4de56b55 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldCurrency.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/new-york/ui/number-field'
-import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
index dc702bdc..33484766 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDecimal.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/new-york/ui/number-field'
-import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
index 0e0d05e0..a6c7345f 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDemo.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/new-york/ui/number-field'
-import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
index 4a54e230..b40d0906 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldDisabled.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/new-york/ui/number-field'
-import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue b/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
index 1f063577..5696b245 100644
--- a/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
+++ b/apps/www/src/lib/registry/new-york/example/NumberFieldPercentage.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Label } from '@/lib/registry/new-york/ui/label'
 import {
   NumberField,
   NumberFieldContent,
@@ -6,7 +7,6 @@ import {
   NumberFieldIncrement,
   NumberFieldInput,
 } from '@/lib/registry/new-york/ui/number-field'
-import { Label } from '@/lib/registry/new-york/ui/label'
 </script>
 
 <template>
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 a87c1a0e..6949ecea 100644
--- a/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PaginationDemo.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import {
+  Button,
+} from '@/lib/registry/new-york/ui/button'
+
 import {
   Pagination,
   PaginationEllipsis,
@@ -9,10 +13,6 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/lib/registry/new-york/ui/pagination'
-
-import {
-  Button,
-} from '@/lib/registry/new-york/ui/button'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue b/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
index c9b14e49..a01ce25d 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputControlled.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/new-york/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>(['1', '2', '3'])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
index 0148bdb7..45dc8d66 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputDemo.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/new-york/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue b/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
index 6d9b19ea..4c238fdb 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputDisabled.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
 } from '@/lib/registry/new-york/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue b/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
index a8b4af24..af28a9a3 100644
--- a/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/PinInputSeparatorDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import {
   PinInput,
   PinInputGroup,
   PinInputInput,
   PinInputSeparator,
 } from '@/lib/registry/new-york/ui/pin-input'
+import { ref } from 'vue'
 
 const value = ref<string[]>([])
 const handleComplete = (e: string[]) => alert(e.join(''))
diff --git a/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue b/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
index 5586ccee..b3ca4a55 100644
--- a/apps/www/src/lib/registry/new-york/example/PopoverDemo.vue
+++ b/apps/www/src/lib/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 {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Input } from '@/lib/registry/new-york/ui/input'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
index 76cb5cfb..478df4ca 100644
--- a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
 import { Progress } from '@/lib/registry/new-york/ui/progress'
+import { ref, watchEffect } from 'vue'
 
 const progress = ref(13)
 
diff --git a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
index 542d19c0..71a6d2c8 100644
--- a/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -15,6 +10,11 @@ import {
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   type: z.enum(['all', 'mentions', 'none'], {
     required_error: 'You need to select a notification type.',
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 2c3d0748..42278e71 100644
--- a/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/RangeCalendarDemo.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type Ref, ref } from 'vue'
-import { getLocalTimeZone, today } from '@internationalized/date'
 import type { DateRange } from 'radix-vue'
 import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
+import { getLocalTimeZone, today } from '@internationalized/date'
+import { type Ref, ref } from 'vue'
 
 const start = today(getLocalTimeZone())
 const end = start.add({ days: 7 })
diff --git a/apps/www/src/lib/registry/new-york/example/SelectForm.vue b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
index f318fe82..4aa99f08 100644
--- a/apps/www/src/lib/registry/new-york/example/SelectForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SelectForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -23,6 +18,11 @@ import {
 } from '@/lib/registry/new-york/ui/select'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   email: z
     .string({
diff --git a/apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue b/apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
index a46ce522..bc44ad69 100644
--- a/apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 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'
@@ -13,6 +12,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from '@/lib/registry/new-york/ui/sheet'
+import { ref } from 'vue'
 
 const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
 
diff --git a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
index a8447351..6a3934e9 100644
--- a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Slider } from '@/lib/registry/new-york/ui/slider'
+import { cn } from '@/lib/utils'
+import { ref } from 'vue'
 
 const modelValue = ref([50])
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/SliderForm.vue b/apps/www/src/lib/registry/new-york/example/SliderForm.vue
index fda83d3c..8d51dbc0 100644
--- a/apps/www/src/lib/registry/new-york/example/SliderForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SliderForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Slider } from '@/lib/registry/new-york/ui/slider'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   duration: z.array(
     z.number().min(0).max(60),
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
index cb5b7415..d8aae57b 100644
--- a/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SonnerDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { toast } from 'vue-sonner'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { toast } from 'vue-sonner'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue b/apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue
index efb1305d..08a23a3e 100644
--- a/apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue
+++ b/apps/www/src/lib/registry/new-york/example/SonnerWithDialog.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { toast } from 'vue-sonner'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Dialog,
@@ -9,6 +8,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/new-york/ui/dialog'
+import { toast } from 'vue-sonner'
 </script>
 
 <template>
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 db5de661..b854bc20 100644
--- a/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/SwitchForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -15,6 +10,11 @@ import {
 import { Switch } from '@/lib/registry/new-york/ui/switch'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   marketing_emails: z.boolean().default(false).optional(),
   security_emails: z.boolean(),
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
index b744bc9a..b745bb51 100644
--- a/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+import { ref } from 'vue'
 
 const modelValue = ref(['Apple', 'Banana'])
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaForm.vue b/apps/www/src/lib/registry/new-york/example/TextareaForm.vue
index cb53f390..3530a97d 100644
--- a/apps/www/src/lib/registry/new-york/example/TextareaForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/TextareaForm.vue
@@ -1,9 +1,4 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   FormControl,
@@ -16,6 +11,11 @@ import {
 import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { h } from 'vue'
+import * as z from 'zod'
+
 const formSchema = toTypedSchema(z.object({
   bio: z
     .string()
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
index 772d5bfd..ff5aec10 100644
--- a/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithButton.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
index 50628fa9..5d8fd580 100644
--- a/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithLabel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 import { Label } from '@/lib/registry/new-york/ui/label'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
index 915a37f9..c3be9935 100644
--- a/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
+++ b/apps/www/src/lib/registry/new-york/example/TextareaWithText.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 import { Label } from '@/lib/registry/new-york/ui/label'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToastDestructive.vue b/apps/www/src/lib/registry/new-york/example/ToastDestructive.vue
index b58f885c..3b94931c 100644
--- a/apps/www/src/lib/registry/new-york/example/ToastDestructive.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToastDestructive.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { h } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
 import { ToastAction } from '@/lib/registry/new-york/ui/toast'
+import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { h } from 'vue'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/ToastWithAction.vue b/apps/www/src/lib/registry/new-york/example/ToastWithAction.vue
index a56e3fba..51b66408 100644
--- a/apps/www/src/lib/registry/new-york/example/ToastWithAction.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToastWithAction.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { h } from 'vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
 import { ToastAction } from '@/lib/registry/new-york/ui/toast'
+import { useToast } from '@/lib/registry/new-york/ui/toast/use-toast'
+import { h } from 'vue'
 
 const { toast } = useToast()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
index 4ef6f4a1..96716941 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FontBoldIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { FontBoldIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue
index 72106472..f73de395 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { UnderlineIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { UnderlineIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue
index ff2e9e60..2ad4828b 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue
index 7e4d9a94..cc4b3f0e 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue
index b3acc8ba..0414e182 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue
index 829d9d02..e742a513 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue
index 71ae8d69..c4e129fe 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue
index 35686889..3b37639b 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
+
 import {
   FontBoldIcon,
   FontItalicIcon,
   UnderlineIcon,
 } from '@radix-icons/vue'
-
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue
index 2501f084..1e1fbb4e 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FontItalicIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { FontItalicIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
index 4bb35909..158e0e9e 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FontItalicIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { FontItalicIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue
index b5e4ea50..a866c5a5 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FontItalicIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { FontItalicIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue b/apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue
index 00cffdf9..18fa9956 100644
--- a/apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { FontItalicIcon } from '@radix-icons/vue'
-
 import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+
+import { FontItalicIcon } from '@radix-icons/vue'
 </script>
 
 <template>
diff --git a/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue b/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
index 2ada5321..d92989d5 100644
--- a/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/VCalendarDemo.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import { ref } from 'vue'
 
 const date = ref(new Date())
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
index 1b0b4472..d326de8f 100644
--- a/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerDemo.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { ref } from 'vue'
-import { CalendarIcon } from '@radix-icons/vue'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 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'
+import { CalendarIcon } from '@radix-icons/vue'
+import { format } from 'date-fns'
+import { ref } from 'vue'
 
 const date = ref<Date>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
index bcb34221..defa9b05 100644
--- a/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerForm.vue
@@ -1,14 +1,5 @@
 <script setup lang="ts">
-import { h } from 'vue'
-import { format } from 'date-fns'
-import { CalendarIcon } from '@radix-icons/vue'
-import { useForm } from 'vee-validate'
-import { toTypedSchema } from '@vee-validate/zod'
-import * as z from 'zod'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 import {
   FormControl,
   FormDescription,
@@ -17,13 +8,22 @@ import {
   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 { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import { cn } from '@/lib/utils'
+
+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({
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
index 2d070262..07587848 100644
--- a/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerWithPresets.vue
@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { CalendarIcon } from '@radix-icons/vue'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
+
 import {
   Select,
   SelectContent,
@@ -18,6 +13,11 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
+import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
+import { cn } from '@/lib/utils'
+import { CalendarIcon } from '@radix-icons/vue'
+import { addDays, format } from 'date-fns'
+import { ref } from 'vue'
 
 const date = ref<Date>()
 </script>
diff --git a/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue b/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
index 77e8db74..2f9240f0 100644
--- a/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDatePickerWithRange.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { ref } from 'vue'
-import { CalendarIcon } from '@radix-icons/vue'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 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'
+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),
diff --git a/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue b/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
index 0c9fd7cc..337a963d 100644
--- a/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/VDateTimePickerDemo.vue
@@ -1,17 +1,17 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
-import { CalendarIcon } from '@radix-icons/vue'
-
-import { ref } from 'vue'
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 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'
+import { CalendarIcon } from '@radix-icons/vue'
+import { format } from 'date-fns'
+import { ref } from 'vue'
+
 const date = ref<Date>()
 </script>
 
diff --git a/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue b/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
index 1eae6e7a..094392e8 100644
--- a/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
+++ b/apps/www/src/lib/registry/new-york/example/VRangePickerWithSlot.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { addDays, format } from 'date-fns'
-import { ref } from 'vue'
-import { CalendarIcon } from '@radix-icons/vue'
-
-import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/v-calendar'
 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'
+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),
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 68632ef4..a354cbc6 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionContent, type AccordionContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionContent, type AccordionContentProps } from 'radix-vue'
+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 9975c238..ca2ed207 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'
+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 6eef10a6..318480e9 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import {
   AccordionHeader,
   AccordionTrigger,
   type AccordionTriggerProps,
 } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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/AlertDialogAction.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogAction.vue
index 985f6447..7cff2871 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+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 c5c2bb48..3eebc841 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+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 afc76e58..a1f7dd52 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -8,7 +8,7 @@ import {
   AlertDialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<AlertDialogContentEmits>()
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 9682cbb1..9f6db432 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 50c583d0..6cd13f93 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/alert-dialog/index.ts
index 91d138ae..448d5198 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
 export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
 export { default as AlertDialogAction } from './AlertDialogAction.vue'
 export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
index b3502d52..964d61d5 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert/Alert.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { type AlertVariants, alertVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type AlertVariants, alertVariants } from '.'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/alert/index.ts b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
index 1ef58723..eab63566 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/alert/index.ts
@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Alert } from './Alert.vue'
-export { default as AlertTitle } from './AlertTitle.vue'
 export { default as AlertDescription } from './AlertDescription.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
 
 export const alertVariants = cva(
   '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',
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
index 5c31d8b4..5c371a86 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormField.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts" generic="U extends ZodAny">
 import type { ZodAny } from 'zod'
-import { computed } from 'vue'
 import type { Config, ConfigItem, Shape } from './interface'
+import { computed } from 'vue'
 import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
 import useDependencies from './dependencies'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
index f044abb7..43b28796 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldArray.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts" generic="T extends z.ZodAny">
-import * as z from 'zod'
-import { computed, provide } from 'vue'
-import { PlusIcon, TrashIcon } from 'lucide-vue-next'
-import { FieldArray, FieldContextKey, useField } from 'vee-validate'
 import type { Config, ConfigItem } from './interface'
-import { beautifyObjectName, getBaseType } from './utils'
-import AutoFormField from './AutoFormField.vue'
-import AutoFormLabel from './AutoFormLabel.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import * as z from 'zod'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseType } from './utils'
 
 const props = defineProps<{
   fieldName: string
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 c7d2cd3b..40fee8cc 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
-import AutoFormLabel from './AutoFormLabel.vue'
+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 '@/lib/registry/new-york/ui/checkbox'
+import { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 const props = defineProps<FieldProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
index d4b1874a..77d1e144 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldDate.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { CalendarIcon } from '@radix-icons/vue'
-import { beautifyObjectName } from './utils'
-import AutoFormLabel from './AutoFormLabel.vue'
 import type { FieldProps } from './interface'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 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 { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { CalendarIcon } from '@radix-icons/vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
+
 defineProps<FieldProps>()
 
 const df = new DateFormatter('en-US', {
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
index ba6c8feb..11df0804 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
 import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
 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 AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineProps<FieldProps & {
   options?: string[]
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
index 316b794f..ac003ee3 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldFile.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import { TrashIcon } from '@radix-icons/vue'
-import { beautifyObjectName } from './utils'
 import type { FieldProps } from './interface'
-import AutoFormLabel from './AutoFormLabel.vue'
+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 '@/lib/registry/new-york/ui/button'
+import { TrashIcon } from '@radix-icons/vue'
+import { ref } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineProps<FieldProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
index 43b00436..2c8676b6 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldInput.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 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 { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 const props = defineProps<FieldProps>()
 const inputComponent = computed(() => props.config?.component === 'textarea' ? Textarea : Input)
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
index 9589ee7d..873f4dba 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldNumber.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import AutoFormLabel from './AutoFormLabel.vue'
-import { beautifyObjectName } from './utils'
 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 AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
index 5d442ba8..aad97a54 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/AutoFormFieldObject.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts" generic="T extends ZodRawShape">
 import type { ZodAny, ZodObject, ZodRawShape } from 'zod'
-import { computed, provide } from 'vue'
-import { FieldContextKey, useField } from 'vee-validate'
-import AutoFormField from './AutoFormField.vue'
 import type { Config, ConfigItem, Shape } from './interface'
-import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
-import AutoFormLabel from './AutoFormLabel.vue'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'
 import { FormItem } from '@/lib/registry/new-york/ui/form'
+import { FieldContextKey, useField } from 'vee-validate'
+import { computed, provide } from 'vue'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
 
 const props = defineProps<{
   fieldName: string
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 ea761633..362cdb0c 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,8 +1,8 @@
-import type * as z from 'zod'
 import type { Ref } from 'vue'
-import { computed, ref, watch } from 'vue'
-import { useFieldValue, useFormValues } from 'vee-validate'
+import type * as z from 'zod'
 import { createContext } from 'radix-vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { computed, ref, watch } from 'vue'
 import { type Dependency, DependencyType, type EnumValues } from './interface'
 import { getFromPath, getIndexIfArray } from './utils'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/index.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/index.ts
index 0fb84384..1874fd19 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/index.ts
@@ -1,15 +1,15 @@
-export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
-export type { Config, ConfigItem, FieldProps } from './interface'
-
 export { default as AutoForm } from './AutoForm.vue'
 export { default as AutoFormField } from './AutoFormField.vue'
-export { default as AutoFormLabel } from './AutoFormLabel.vue'
 
 export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
 export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
 export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+
 export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
 export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
 export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
 export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
 export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
+export type { Config, ConfigItem, FieldProps } from './interface'
+export { getBaseSchema, getBaseType, getObjectFormSchema } from './utils'
diff --git a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
index 4dd8b121..07fe8621 100644
--- a/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/auto-form/interface.ts
@@ -1,5 +1,5 @@
 import type { Component, InputHTMLAttributes } from 'vue'
-import type { ZodAny, z } from 'zod'
+import type { z, ZodAny } from 'zod'
 import type { INPUT_COMPONENTS } from './constant'
 
 export interface FieldProps {
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 5b7b9fbf..ed6ef22a 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,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { AvatarRoot } from 'radix-vue'
-import { type AvatarVariants, avatarVariant } from '.'
 import { cn } from '@/lib/utils'
+import { AvatarRoot } from 'radix-vue'
+import { avatarVariant, type AvatarVariants } from '.'
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts b/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
index c4af1a66..5367952a 100644
--- a/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/avatar/index.ts
@@ -1,8 +1,8 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Avatar } from './Avatar.vue'
-export { default as AvatarImage } from './AvatarImage.vue'
 export { default as AvatarFallback } from './AvatarFallback.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
 
 export const avatarVariant = cva(
   'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue b/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
index 2e8bdffa..9ed80393 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
+++ b/apps/www/src/lib/registry/new-york/ui/badge/Badge.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { type BadgeVariants, badgeVariants } from '.'
 import { cn } from '@/lib/utils'
+import { type BadgeVariants, badgeVariants } from '.'
 
 const props = defineProps<{
   variant?: BadgeVariants['variant']
diff --git a/apps/www/src/lib/registry/new-york/ui/badge/index.ts b/apps/www/src/lib/registry/new-york/ui/badge/index.ts
index 20eda06a..c2ba5fb2 100644
--- a/apps/www/src/lib/registry/new-york/ui/badge/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/badge/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Badge } from './Badge.vue'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
index 4efa9ac7..67c01ac0 100644
--- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 67de3947..df004a13 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 { Primitive, type PrimitiveProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
   as: 'a',
diff --git a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
index 1b03cbcd..61c61d2e 100644
--- a/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/apps/www/src/lib/registry/new-york/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 5cfd668a..d3e3786f 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,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
diff --git a/apps/www/src/lib/registry/new-york/ui/button/index.ts b/apps/www/src/lib/registry/new-york/ui/button/index.ts
index 89f21fea..bad0a49e 100644
--- a/apps/www/src/lib/registry/new-york/ui/button/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/button/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
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 0486e496..6013df29 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,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
-import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
 
 const props = defineProps<CalendarRootProps & { 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 2fe5439a..41c69acb 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+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/CalendarGridRow.vue b/apps/www/src/lib/registry/new-york/ui/calendar/CalendarGridRow.vue
index 47fdb460..15b084c2 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+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 d3b6380a..4e0634fa 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+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 8bfa1969..dbb7ad8d 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+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 7062d3db..2de4ab77 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+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 d624f4a6..1327c0e4 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 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 { 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 b4f92063..34466a17 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
-import { ChevronLeftIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/card/index.ts b/apps/www/src/lib/registry/new-york/ui/card/index.ts
index 8170483c..9ff6d5e7 100644
--- a/apps/www/src/lib/registry/new-york/ui/card/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/card/index.ts
@@ -1,6 +1,6 @@
 export { default as Card } from './Card.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardFooter } from './CardFooter.vue'
 export { default as CardHeader } from './CardHeader.vue'
 export { default as CardTitle } from './CardTitle.vue'
-export { default as CardDescription } from './CardDescription.vue'
-export { default as CardContent } from './CardContent.vue'
-export { default as CardFooter } from './CardFooter.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
index 87f0e308..6b40f14a 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
index 801e5c16..9c168237 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useCarousel } from './useCarousel'
 import type { WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
index 2150afe1..a51b85a8 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselNext.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 import { ArrowRightIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
index f8311fc7..2367d521 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
 import { ArrowLeftIcon } from '@radix-icons/vue'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/lib/registry/new-york/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
index 5ccaad27..58162c02 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/index.ts
@@ -1,10 +1,10 @@
 export { default as Carousel } from './Carousel.vue'
 export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
-export { useCarousel } from './useCarousel'
-
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export type {
   UnwrapRefCarouselApi as CarouselApi,
 } from './interface'
+
+export { useCarousel } from './useCarousel'
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
index 195ff811..e2605be6 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/interface.ts
@@ -1,8 +1,8 @@
-import type { HTMLAttributes, UnwrapRef } from 'vue'
 import type useEmblaCarousel from 'embla-carousel-vue'
 import type {
   EmblaCarouselVueType,
 } from 'embla-carousel-vue'
+import type { HTMLAttributes, UnwrapRef } from 'vue'
 
 type CarouselApi = EmblaCarouselVueType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
diff --git a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
index 012d9434..7d762fdd 100644
--- a/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
+++ b/apps/www/src/lib/registry/new-york/ui/carousel/useCarousel.ts
@@ -1,7 +1,7 @@
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 import { createInjectionState } from '@vueuse/core'
 import emblaCarouselVue from 'embla-carousel-vue'
 import { onMounted, ref } from 'vue'
-import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
   ({
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
index 9b6991e7..060bc254 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-bar/BarChart.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
-import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
index 986d7ead..506c7dd9 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-donut/DonutChart.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { VisDonut, VisSingleContainer } from '@unovis/vue'
-import { Donut } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { Donut } from '@unovis/ts'
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<Pick<BaseChartProps<T>, 'data' | 'colors' | 'index' | 'margin' | 'showLegend' | 'showTooltip' | 'filterOpacity'> & {
   /**
diff --git a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
index 8749d0c6..d9e0d509 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart-line/LineChart.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, any>">
-import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
-import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
-import { Axis, Line } from '@unovis/ts'
-import { type Component, computed, ref } from 'vue'
-import { useMounted } from '@vueuse/core'
 import type { BaseChartProps } from '.'
 import { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'
 import { cn } from '@/lib/utils'
+import { type BulletLegendItemInterface, CurveType } from '@unovis/ts'
+import { Axis, Line } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { useMounted } from '@vueuse/core'
+import { type Component, computed, ref } from 'vue'
 
 const props = withDefaults(defineProps<BaseChartProps<T> & {
   /**
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
index 4c47149e..7d1a6da7 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartCrosshair.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
 import { type Component, createApp } from 'vue'
 import { ChartTooltip } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
index 65cfbb7b..b4e15f83 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartLegend.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { VisBulletLegend } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
-import { BulletLegend } from '@unovis/ts'
-import { nextTick, onMounted, ref } from 'vue'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { BulletLegend } from '@unovis/ts'
+import { VisBulletLegend } from '@unovis/vue'
+import { nextTick, onMounted, ref } from 'vue'
 
 const props = withDefaults(defineProps<{ items: BulletLegendItemInterface[] }>(), {
   items: () => [],
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue b/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
index 49ca011c..b441fbf8 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
+++ b/apps/www/src/lib/registry/new-york/ui/chart/ChartSingleTooltip.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { VisTooltip } from '@unovis/vue'
 import type { BulletLegendItemInterface } from '@unovis/ts'
 import { omit } from '@unovis/ts'
+import { VisTooltip } from '@unovis/vue'
 import { type Component, createApp } from 'vue'
 import { ChartTooltip } from '.'
 
diff --git a/apps/www/src/lib/registry/new-york/ui/chart/index.ts b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
index e2d64c17..d07ad7cc 100644
--- a/apps/www/src/lib/registry/new-york/ui/chart/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/chart/index.ts
@@ -1,7 +1,7 @@
-export { default as ChartTooltip } from './ChartTooltip.vue'
-export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
-export { default as ChartLegend } from './ChartLegend.vue'
 export { default as ChartCrosshair } from './ChartCrosshair.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartTooltip } from './ChartTooltip.vue'
 
 export function defaultColors(count: number = 3) {
   const quotient = Math.floor(count / 2)
@@ -10,8 +10,8 @@ export function defaultColors(count: number = 3) {
   const primaryCount = quotient + remainder
   const secondaryCount = quotient
   return [
-    ...Array.from(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
-    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
+    ...Array.from(new Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),
+    ...Array.from(new Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),
   ]
 }
 
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 486f26ae..9d3d2e46 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,9 +1,9 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
-import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<CheckboxRootEmits>()
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 52bff5f2..fae7919c 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 { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps<CollapsibleRootProps>()
 const emits = defineEmits<CollapsibleRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/collapsible/index.ts b/apps/www/src/lib/registry/new-york/ui/collapsible/index.ts
index 4930f4c6..abab9567 100644
--- a/apps/www/src/lib/registry/new-york/ui/collapsible/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/collapsible/index.ts
@@ -1,3 +1,3 @@
 export { default as Collapsible } from './Collapsible.vue'
-export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
 export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'
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 fe7445c0..d33ab388 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
-import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
   open: true,
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 b4881ee4..a9d08342 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,8 +1,8 @@
 <script setup lang="ts">
-import { useForwardPropsEmits } from 'radix-vue'
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import Command from './Command.vue'
 import { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'
+import { useForwardPropsEmits } from 'radix-vue'
+import Command from './Command.vue'
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()
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 1295d2a0..cd097d78 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxEmptyProps } from 'radix-vue'
-import { ComboboxEmpty } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxEmpty } from 'radix-vue'
+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 ba6433e5..939b78e5 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxGroupProps } from 'radix-vue'
-import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxGroupProps & {
   class?: HTMLAttributes['class']
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 c0a67265..ccdee24e 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { MagnifyingGlassIcon } from '@radix-icons/vue'
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
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 5c6a6ffe..ec9dacff 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
-import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ComboboxItemEmits>()
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 00d1b3a7..889b8d09 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
-import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
   dismissable: false,
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 477799cc..8f0cc1e6 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
 import type { ComboboxSeparatorProps } from 'radix-vue'
-import { ComboboxSeparator } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ComboboxSeparator } from 'radix-vue'
+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 a888b59c..363e9c6b 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 { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
+import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 aca45cd8..5b82d05d 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
 import {
   ContextMenuCheckboxItem,
   type ContextMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   ContextMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuCheckboxItemEmits>()
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 df946223..a7a55cd2 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuContent,
   type ContextMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   ContextMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuContentEmits>()
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 dc2903a6..ab8e077d 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuItem,
   type ContextMenuItemEmits,
   type ContextMenuItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 const emits = defineEmits<ContextMenuItemEmits>()
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 e9a94394..933cdbfd 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
+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/ContextMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuRadioItem.vue
index b1df7802..eb2002e5 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { DotFilledIcon } from '@radix-icons/vue'
 import {
   ContextMenuItemIndicator,
   ContextMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type ContextMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ContextMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<ContextMenuRadioItemEmits>()
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 ae55f3a4..b3a8e4ff 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSeparator,
   type ContextMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index 49cdfff3..0ba68884 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ContextMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
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 89be3db8..8c32509f 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import {
   ContextMenuSubTrigger,
   type ContextMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/context-menu/index.ts
index 157f7b1d..3ed59e63 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/index.ts
@@ -1,14 +1,14 @@
 export { default as ContextMenu } from './ContextMenu.vue'
-export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
+export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
 export { default as ContextMenuContent } from './ContextMenuContent.vue'
 export { default as ContextMenuGroup } from './ContextMenuGroup.vue'
-export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
 export { default as ContextMenuItem } from './ContextMenuItem.vue'
-export { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'
-export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
-export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
-export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
 export { default as ContextMenuLabel } from './ContextMenuLabel.vue'
+export { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'
+export { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'
+export { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'
+export { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'
 export { default as ContextMenuSub } from './ContextMenuSub.vue'
-export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
 export { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'
+export { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'
+export { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'
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 d8699c29..db453767 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Cross2Icon } from '@radix-icons/vue'
 import {
   DialogClose,
   DialogContent,
@@ -9,8 +10,7 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
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 3637b7ec..878ef2bd 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'
+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/DialogTitle.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogTitle.vue
index 1bb40461..1f049e32 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/dialog/index.ts
index 847e999f..ca8cfeae 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/index.ts
@@ -1,9 +1,9 @@
 export { default as Dialog } from './Dialog.vue'
 export { default as DialogClose } from './DialogClose.vue'
-export { default as DialogTrigger } from './DialogTrigger.vue'
-export { default as DialogHeader } from './DialogHeader.vue'
-export { default as DialogTitle } from './DialogTitle.vue'
-export { default as DialogDescription } from './DialogDescription.vue'
 export { default as DialogContent } from './DialogContent.vue'
-export { default as DialogScrollContent } from './DialogScrollContent.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'
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 05624d02..8be66568 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,7 +1,7 @@
 <script lang="ts" setup>
 import type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'
-import { DrawerRoot } from 'vaul-vue'
 import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerRoot } from 'vaul-vue'
 
 const props = withDefaults(defineProps<DrawerRootProps>(), {
   shouldScaleBackground: true,
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 6be17d0b..9639a6f3 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,10 +1,10 @@
 <script lang="ts" setup>
-import { DrawerContent, DrawerPortal } from 'vaul-vue'
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
-import { useForwardPropsEmits } from 'radix-vue'
 import type { HtmlHTMLAttributes } from 'vue'
-import DrawerOverlay from './DrawerOverlay.vue'
 import { cn } from '@/lib/utils'
+import { useForwardPropsEmits } from 'radix-vue'
+import { DrawerContent, DrawerPortal } from 'vaul-vue'
+import DrawerOverlay from './DrawerOverlay.vue'
 
 const props = defineProps<DialogContentProps & { class?: HtmlHTMLAttributes['class'] }>()
 const emits = defineEmits<DialogContentEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue
index 2a446c1e..092dc503 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerDescription.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { DrawerDescriptionProps } from 'vaul-vue'
-import { DrawerDescription } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerDescription } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerDescriptionProps & { class?: HtmlHTMLAttributes['class'] }>()
 
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 c182463c..41c3c523 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,8 +1,8 @@
 <script lang="ts" setup>
-import { DrawerOverlay } from 'vaul-vue'
 import type { DialogOverlayProps } from 'radix-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerOverlay } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DialogOverlayProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue
index f8d77044..475c3ab4 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/DrawerTitle.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { DrawerTitleProps } from 'vaul-vue'
-import { DrawerTitle } from 'vaul-vue'
-import { type HtmlHTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { DrawerTitle } from 'vaul-vue'
+import { computed, type HtmlHTMLAttributes } from 'vue'
 
 const props = defineProps<DrawerTitleProps & { class?: HtmlHTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/index.ts b/apps/www/src/lib/registry/new-york/ui/drawer/index.ts
index b02bd3a6..d41b7928 100644
--- a/apps/www/src/lib/registry/new-york/ui/drawer/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/drawer/index.ts
@@ -1,8 +1,8 @@
-export { DrawerPortal, DrawerTrigger, DrawerClose } from 'vaul-vue'
 export { default as Drawer } from './Drawer.vue'
-export { default as DrawerOverlay } from './DrawerOverlay.vue'
 export { default as DrawerContent } from './DrawerContent.vue'
-export { default as DrawerHeader } from './DrawerHeader.vue'
-export { default as DrawerFooter } from './DrawerFooter.vue'
-export { default as DrawerTitle } from './DrawerTitle.vue'
 export { default as DrawerDescription } from './DrawerDescription.vue'
+export { default as DrawerFooter } from './DrawerFooter.vue'
+export { default as DrawerHeader } from './DrawerHeader.vue'
+export { default as DrawerOverlay } from './DrawerOverlay.vue'
+export { default as DrawerTitle } from './DrawerTitle.vue'
+export { DrawerClose, DrawerPortal, DrawerTrigger } from 'vaul-vue'
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 a6792a7a..5f14d024 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
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 b33d58eb..6523e9ee 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuContent,
   type DropdownMenuContentEmits,
@@ -7,7 +7,7 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
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 04d3d60e..86a30e65 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'
+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 5fa684e1..10494d4d 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'
+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/DropdownMenuRadioItem.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuRadioItem.vue
index a2fef4c9..6f54fd07 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { DotFilledIcon } from '@radix-icons/vue'
 import {
   DropdownMenuItemIndicator,
   DropdownMenuRadioItem,
@@ -7,8 +8,7 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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 fc51205b..dac6a167 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
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSeparator,
   type DropdownMenuSeparatorProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSeparatorProps & {
   class?: HTMLAttributes['class']
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 446f9fb5..92078d9b 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   DropdownMenuSubContent,
   type DropdownMenuSubContentEmits,
   type DropdownMenuSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()
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 00d04e09..6d7dea6b 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
 import {
   DropdownMenuSubTrigger,
   type DropdownMenuSubTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/index.ts
index 6f9446c3..6011f35c 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
@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from 'radix-vue'
-
 export { default as DropdownMenu } from './DropdownMenu.vue'
-export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
 export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
 export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
-export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
 export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
-export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
-export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
-export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
-export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
 export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
 export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
-export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.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'
diff --git a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
index 6085f76c..93000660 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
+++ b/apps/www/src/lib/registry/new-york/ui/form/FormDescription.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from 'vue'
-import { useFormField } from './useFormField'
 import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 444d9013..699724e4 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,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, provide } from 'vue'
-import { useId } from 'radix-vue'
-import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 import { cn } from '@/lib/utils'
+import { useId } from 'radix-vue'
+import { type HTMLAttributes, provide } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 const props = defineProps<{
   class?: HTMLAttributes['class']
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 292eb616..61b39e26 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,9 +1,9 @@
 <script lang="ts" setup>
-import type { HTMLAttributes } from 'vue'
 import type { LabelProps } from 'radix-vue'
-import { useFormField } from './useFormField'
-import { cn } from '@/lib/utils'
+import type { HTMLAttributes } from 'vue'
 import { Label } from '@/lib/registry/new-york/ui/label'
+import { cn } from '@/lib/utils'
+import { useFormField } from './useFormField'
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/form/index.ts b/apps/www/src/lib/registry/new-york/ui/form/index.ts
index 00053cf0..ddbc0b35 100644
--- a/apps/www/src/lib/registry/new-york/ui/form/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/form/index.ts
@@ -1,7 +1,7 @@
-export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormDescription } from './FormDescription.vue'
 export { default as FormItem } from './FormItem.vue'
 export { default as FormLabel } from './FormLabel.vue'
-export { default as FormControl } from './FormControl.vue'
 export { default as FormMessage } from './FormMessage.vue'
-export { default as FormDescription } from './FormDescription.vue'
 export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+export { Field as FormField, FieldArray as FormFieldArray, Form } from 'vee-validate'
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 8affac42..89c92131 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   HoverCardContent,
   type HoverCardContentProps,
   HoverCardPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
diff --git a/apps/www/src/lib/registry/new-york/ui/hover-card/index.ts b/apps/www/src/lib/registry/new-york/ui/hover-card/index.ts
index c7bfd32d..9e4ccc2a 100644
--- a/apps/www/src/lib/registry/new-york/ui/hover-card/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/hover-card/index.ts
@@ -1,3 +1,3 @@
 export { default as HoverCard } from './HoverCard.vue'
-export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
 export { default as HoverCardContent } from './HoverCardContent.vue'
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/input/Input.vue b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
index 54517946..1165ea55 100644
--- a/apps/www/src/lib/registry/new-york/ui/input/Input.vue
+++ b/apps/www/src/lib/registry/new-york/ui/input/Input.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
   defaultValue?: string | number
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 8fba8db4..5ad1568f 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Label, type LabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Label, type LabelProps } from 'radix-vue'
+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 f41f106e..1b8188f1 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarRoot,
   type MenubarRootEmits,
   type MenubarRootProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRootEmits>()
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 e2724bff..d5e56ddd 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
 import {
   MenubarCheckboxItem,
   type MenubarCheckboxItemEmits,
@@ -7,8 +8,7 @@ import {
   MenubarItemIndicator,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarCheckboxItemEmits>()
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 a529f149..ef09e786 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarContent,
   type MenubarContentProps,
   MenubarPortal,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<MenubarContentProps & { class?: HTMLAttributes['class'] }>(),
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 027ff793..685b4bef 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarItem,
   type MenubarItemEmits,
   type MenubarItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 7b3b8fff..574ce496 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 { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarLabel, type MenubarLabelProps } from 'radix-vue'
 
 const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
 </script>
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 c3ddbe3b..270e4d19 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { DotFilledIcon } from '@radix-icons/vue'
 import {
   MenubarItemIndicator,
   MenubarRadioItem,
@@ -7,8 +8,7 @@ import {
   type MenubarRadioItemProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { DotFilledIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<MenubarRadioItemEmits>()
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 ed437697..234334e1 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'
+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/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index 9818d201..8886096a 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   MenubarPortal,
   MenubarSubContent,
@@ -7,7 +7,7 @@ import {
   type MenubarSubContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 18afa012..a6295059 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'
+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 62311578..ac1f825e 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/index.ts b/apps/www/src/lib/registry/new-york/ui/menubar/index.ts
index 808ec4d3..600c23ea 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/index.ts
@@ -1,15 +1,15 @@
 export { default as Menubar } from './Menubar.vue'
-export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarContent } from './MenubarContent.vue'
 export { default as MenubarGroup } from './MenubarGroup.vue'
+export { default as MenubarItem } from './MenubarItem.vue'
+export { default as MenubarLabel } from './MenubarLabel.vue'
 export { default as MenubarMenu } from './MenubarMenu.vue'
 export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue'
 export { default as MenubarRadioItem } from './MenubarRadioItem.vue'
-export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue'
 export { default as MenubarSeparator } from './MenubarSeparator.vue'
+export { default as MenubarShortcut } from './MenubarShortcut.vue'
 export { default as MenubarSub } from './MenubarSub.vue'
 export { default as MenubarSubContent } from './MenubarSubContent.vue'
 export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue'
 export { default as MenubarTrigger } from './MenubarTrigger.vue'
-export { default as MenubarShortcut } from './MenubarShortcut.vue'
-export { default as MenubarLabel } from './MenubarLabel.vue'
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 080d3bb1..a0b5bec8 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuRoot,
   type NavigationMenuRootEmits,
   type NavigationMenuRootProps,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import NavigationMenuViewport from './NavigationMenuViewport.vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuRootProps & { class?: HTMLAttributes['class'] }>()
 
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 03d8fbbc..101f450e 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
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuContent,
   type NavigationMenuContentEmits,
   type NavigationMenuContentProps,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+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 1d53291e..bbf7eb8b 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'
+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/NavigationMenuList.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuList.vue
index 354365c5..4cf0d10e 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'
+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 3c37c3d6..b266d0a0 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { ChevronDownIcon } from '@radix-icons/vue'
 import {
   NavigationMenuTrigger,
   type NavigationMenuTriggerProps,
   useForwardProps,
 } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
+import { computed, type HTMLAttributes } from 'vue'
 import { navigationMenuTriggerStyle } from '.'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>()
 
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 db240ccc..70fae0e0 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   NavigationMenuViewport,
   type NavigationMenuViewportProps,
   useForwardProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts b/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
index 70d4443b..fd0ef971 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/index.ts
@@ -1,11 +1,11 @@
 import { cva } from 'class-variance-authority'
 
 export { default as NavigationMenu } from './NavigationMenu.vue'
-export { default as NavigationMenuList } from './NavigationMenuList.vue'
-export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
-export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 export { default as NavigationMenuContent } from './NavigationMenuContent.vue'
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue'
 export { default as NavigationMenuLink } from './NavigationMenuLink.vue'
+export { default as NavigationMenuList } from './NavigationMenuList.vue'
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 
 export const navigationMenuTriggerStyle = cva(
   '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',
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 c89c06fb..3c7db463 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,8 +1,8 @@
 <script setup lang="ts">
 import type { NumberFieldRootEmits, NumberFieldRootProps } from 'radix-vue'
-import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
-import { type HTMLAttributes, computed } from 'vue'
 import { cn } from '@/lib/utils'
+import { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<NumberFieldRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<NumberFieldRootEmits>()
diff --git a/apps/www/src/lib/registry/new-york/ui/number-field/index.ts b/apps/www/src/lib/registry/new-york/ui/number-field/index.ts
index 45edbe40..5489697d 100644
--- a/apps/www/src/lib/registry/new-york/ui/number-field/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/number-field/index.ts
@@ -1,5 +1,5 @@
 export { default as NumberField } from './NumberField.vue'
-export { default as NumberFieldInput } from './NumberFieldInput.vue'
-export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
-export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
 export { default as NumberFieldContent } from './NumberFieldContent.vue'
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'
+export { default as NumberFieldInput } from './NumberFieldInput.vue'
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 716f690c..b382a5f8 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
-import { DotsHorizontalIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'
+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 ecb8735d..89469336 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationFirst, type PaginationFirstProps } from 'radix-vue'
-import { DoubleArrowLeftIcon } from '@radix-icons/vue'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationFirstProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 d1c06f84..f75282eb 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationLast, type PaginationLastProps } from 'radix-vue'
-import { DoubleArrowRightIcon } from '@radix-icons/vue'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationLastProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 360f5f28..d27b8338 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationNext, type PaginationNextProps } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationNextProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 12d51205..9b269a4c 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PaginationPrev, type PaginationPrevProps } from 'radix-vue'
-import { ChevronLeftIcon } from '@radix-icons/vue'
 import {
   Button,
 } 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 { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PaginationPrevProps & { class?: HTMLAttributes['class'] }>(), {
   asChild: true,
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 183ecbe9..b113cd15 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
@@ -1,10 +1,10 @@
-export {
-  PaginationRoot as Pagination,
-  PaginationList,
-  PaginationListItem,
-} from 'radix-vue'
 export { default as PaginationEllipsis } from './PaginationEllipsis.vue'
 export { default as PaginationFirst } from './PaginationFirst.vue'
 export { default as PaginationLast } from './PaginationLast.vue'
 export { default as PaginationNext } from './PaginationNext.vue'
 export { default as PaginationPrev } from './PaginationPrev.vue'
+export {
+  PaginationList,
+  PaginationListItem,
+  PaginationRoot as Pagination,
+} from 'radix-vue'
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 a79c3af5..49f4277c 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<PinInputRootProps & { class?: HTMLAttributes['class'] }>(), {
   modelValue: () => [],
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 97afadae..8bf50d15 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
 const delegatedProps = computed(() => {
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 dccc77b6..ed7ea728 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'
+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 34b297a2..402a6a42 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 { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 import { DashIcon } from '@radix-icons/vue'
+import { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'
 
 const props = defineProps<PrimitiveProps>()
 const forwardedProps = useForwardProps(props)
diff --git a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
index abec8fce..e645e414 100644
--- a/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/pin-input/index.ts
@@ -1,4 +1,4 @@
 export { default as PinInput } from './PinInput.vue'
 export { default as PinInputGroup } from './PinInputGroup.vue'
-export { default as PinInputSeparator } from './PinInputSeparator.vue'
 export { default as PinInputInput } from './PinInputInput.vue'
+export { default as PinInputSeparator } from './PinInputSeparator.vue'
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 1a5873a3..da5f7096 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 { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 import type { PopoverRootEmits, PopoverRootProps } from 'radix-vue'
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 e691fe82..97580eca 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   PopoverContent,
   type PopoverContentEmits,
@@ -7,7 +7,7 @@ import {
   PopoverPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
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 87f034a1..0384c997 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 { PopoverAnchor } from 'radix-vue'
 export { default as Popover } from './Popover.vue'
-export { default as PopoverTrigger } from './PopoverTrigger.vue'
 export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { PopoverAnchor } from 'radix-vue'
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 872e73e8..63b223f2 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
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ProgressIndicator,
   ProgressRoot,
   type ProgressRootProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
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 9262656e..752468e1 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<RadioGroupRootEmits>()
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 b95b43ae..9b90de59 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
 import {
   RadioGroupIndicator,
   RadioGroupItem,
   type RadioGroupItemProps,
   useForwardProps,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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 3033f05b..ee7a5302 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,8 +1,8 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
-import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 import { cn } from '@/lib/utils'
+import { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'
 
 const props = defineProps<RangeCalendarRootProps & { 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 e346b07d..c9bb72a9 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'
+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/RangeCalendarHeader.vue b/apps/www/src/lib/registry/new-york/ui/range-calendar/RangeCalendarHeader.vue
index 7d98cafa..662a7118 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'
+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 51ee1f8b..f3e55160 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,7 +1,7 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'
+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 fcb4a097..49d0547a 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'
-import { ChevronRightIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 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 { 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 972744df..0b58cdbc 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
@@ -1,9 +1,9 @@
 <script lang="ts" setup>
-import { type HTMLAttributes, computed } from 'vue'
-import { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'
-import { ChevronLeftIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
 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 { 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 2cdaf66d..1f78fb4f 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
-import { DragHandleDots2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
 const emits = defineEmits<SplitterResizeHandleEmits>()
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 6c317fa7..d1449e09 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<SplitterGroupEmits>()
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 22a0a8a8..605e8106 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 ResizablePanelGroup } from './ResizablePanelGroup.vue'
 export { default as ResizableHandle } from './ResizableHandle.vue'
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
 export { SplitterPanel as ResizablePanel } from 'radix-vue'
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 8f501cce..b9a1c59f 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
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   ScrollAreaCorner,
   ScrollAreaRoot,
   type ScrollAreaRootProps,
   ScrollAreaViewport,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import ScrollBar from './ScrollBar.vue'
-import { cn } from '@/lib/utils'
 
 const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
 
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 efaaee2d..8cd4a184 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
   orientation: 'vertical',
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 4fe234b2..f597885d 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   SelectContent,
   type SelectContentEmits,
@@ -8,8 +8,8 @@ import {
   SelectViewport,
   useForwardPropsEmits,
 } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 import { SelectScrollDownButton, SelectScrollUpButton } from '.'
-import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
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 407d8ad3..b0803e13 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectGroup, type SelectGroupProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+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 c9a5cf7b..b3fa7687 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { CheckIcon } from '@radix-icons/vue'
 import {
   SelectItem,
   SelectItemIndicator,
@@ -7,8 +8,7 @@ import {
   SelectItemText,
   useForwardProps,
 } from 'radix-vue'
-import { CheckIcon } from '@radix-icons/vue'
-import { cn } from '@/lib/utils'
+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/SelectLabel.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectLabel.vue
index e2025650..486150e1 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 { SelectLabel, type SelectLabelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
 
 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 846411e4..d7550e5a 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronDownIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+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 308f0bd8..772c44e9 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
-import { ChevronUpIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+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 5ae593d2..cb06b8d1 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/select/index.ts
index b1d89eed..31b92946 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/select/index.ts
@@ -1,11 +1,11 @@
 export { default as Select } from './Select.vue'
-export { default as SelectValue } from './SelectValue.vue'
-export { default as SelectTrigger } from './SelectTrigger.vue'
 export { default as SelectContent } from './SelectContent.vue'
 export { default as SelectGroup } from './SelectGroup.vue'
 export { default as SelectItem } from './SelectItem.vue'
 export { default as SelectItemText } from './SelectItemText.vue'
 export { default as SelectLabel } from './SelectLabel.vue'
-export { default as SelectSeparator } from './SelectSeparator.vue'
-export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
 export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'
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 188b69d7..367e69b1 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
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { Cross2Icon } from '@radix-icons/vue'
 import {
   DialogClose,
   DialogContent,
@@ -9,9 +10,8 @@ import {
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
+import { computed, type HTMLAttributes } from 'vue'
 import { type SheetVariants, sheetVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface SheetContentProps extends DialogContentProps {
   class?: HTMLAttributes['class']
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 842cd08a..b515e42a 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+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 2ca0c543..b1029593 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { DialogTitle, type DialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
index fae3f08c..4c4e77af 100644
--- a/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/sheet/index.ts
@@ -1,13 +1,13 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Sheet } from './Sheet.vue'
-export { default as SheetTrigger } from './SheetTrigger.vue'
 export { default as SheetClose } from './SheetClose.vue'
 export { default as SheetContent } from './SheetContent.vue'
-export { default as SheetHeader } from './SheetHeader.vue'
-export { default as SheetTitle } from './SheetTitle.vue'
 export { default as SheetDescription } from './SheetDescription.vue'
 export { default as SheetFooter } from './SheetFooter.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
 
 export const sheetVariants = cva(
   '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',
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 ae4d13ae..bc2da72f 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
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import {
   SwitchRoot,
   type SwitchRootEmits,
@@ -7,7 +7,7 @@ import {
   SwitchThumb,
   useForwardPropsEmits,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
index 43fe7e0c..3f6e0ffa 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableEmpty.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import TableRow from './TableRow.vue'
-import TableCell from './TableCell.vue'
 import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
+import TableCell from './TableCell.vue'
+import TableRow from './TableRow.vue'
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/table/index.ts b/apps/www/src/lib/registry/new-york/ui/table/index.ts
index 6fa181be..2b4ce391 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/table/index.ts
@@ -1,9 +1,9 @@
 export { default as Table } from './Table.vue'
 export { default as TableBody } from './TableBody.vue'
+export { default as TableCaption } from './TableCaption.vue'
 export { default as TableCell } from './TableCell.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
+export { default as TableFooter } from './TableFooter.vue'
 export { default as TableHead } from './TableHead.vue'
 export { default as TableHeader } from './TableHeader.vue'
-export { default as TableFooter } from './TableFooter.vue'
 export { default as TableRow } from './TableRow.vue'
-export { default as TableCaption } from './TableCaption.vue'
-export { default as TableEmpty } from './TableEmpty.vue'
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 2fa0971f..8feda3f7 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 { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 
 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 c0aa0f35..fb59dc96 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TabsContent, type TabsContentProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+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/index.ts b/apps/www/src/lib/registry/new-york/ui/tabs/index.ts
index fbea0c68..a5e58dc0 100644
--- a/apps/www/src/lib/registry/new-york/ui/tabs/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/tabs/index.ts
@@ -1,4 +1,4 @@
 export { default as Tabs } from './Tabs.vue'
-export { default as TabsTrigger } from './TabsTrigger.vue'
-export { default as TabsList } from './TabsList.vue'
 export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
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 5989dc20..e3fc91b4 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
 const emits = defineEmits<TagsInputRootEmits>()
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 ff8f1dcc..65204793 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+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 c3cc8d40..a6f69396 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
+import { cn } from '@/lib/utils'
 import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
 
-import { cn } from '@/lib/utils'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
 
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 c72ee631..e87275ee 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { Cross2Icon } from '@radix-icons/vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+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 8948bd07..1a450744 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
 
diff --git a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
index e0d07a60..263f8158 100644
--- a/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/new-york/ui/textarea/Textarea.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
-import { useVModel } from '@vueuse/core'
 import { cn } from '@/lib/utils'
+import { useVModel } from '@vueuse/core'
 
 const props = defineProps<{
   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 b74762cb..53668710 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,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
-import { type ToastProps, toastVariants } from '.'
 import { cn } from '@/lib/utils'
+import { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'
+import { computed } from 'vue'
+import { type ToastProps, toastVariants } from '.'
 
 const props = defineProps<ToastProps>()
 
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 ef139a90..b1cf8259 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastAction, type ToastActionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastAction, type ToastActionProps } from 'radix-vue'
+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 782cf184..f1458bfd 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastClose, type ToastCloseProps } from 'radix-vue'
-import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
+import { Cross2Icon } from '@radix-icons/vue'
+import { ToastClose, type ToastCloseProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 const props = defineProps<ToastCloseProps & {
   class?: HTMLAttributes['class']
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 58520378..31b2a5a3 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastDescription, type ToastDescriptionProps } from 'radix-vue'
+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/ToastTitle.vue b/apps/www/src/lib/registry/new-york/ui/toast/ToastTitle.vue
index 57375423..aaca98f9 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastTitle, type ToastTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastTitle, type ToastTitleProps } from 'radix-vue'
+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 57deec81..839f1e78 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { ToastViewport, type ToastViewportProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { ToastViewport, type ToastViewportProps } from 'radix-vue'
+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/Toaster.vue b/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
index f86ce40b..cac5dad0 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
+++ b/apps/www/src/lib/registry/new-york/ui/toast/Toaster.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isVNode } from 'vue'
-import { useToast } from './use-toast'
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'
+import { useToast } from './use-toast'
 
 const { toasts } = useToast()
 </script>
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 8d943b70..dcdbefd5 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,17 +1,17 @@
 import type { ToastRootProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 
-export { default as Toaster } from './Toaster.vue'
 export { default as Toast } from './Toast.vue'
-export { default as ToastViewport } from './ToastViewport.vue'
 export { default as ToastAction } from './ToastAction.vue'
 export { default as ToastClose } from './ToastClose.vue'
-export { default as ToastTitle } from './ToastTitle.vue'
 export { default as ToastDescription } from './ToastDescription.vue'
+export { default as Toaster } from './Toaster.vue'
 export { default as ToastProvider } from './ToastProvider.vue'
+export { default as ToastTitle } from './ToastTitle.vue'
+export { default as ToastViewport } from './ToastViewport.vue'
 export { toast, useToast } from './use-toast'
 
-import { type VariantProps, cva } from 'class-variance-authority'
+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',
diff --git a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
index 500e929e..228e5a79 100644
--- a/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toast/use-toast.ts
@@ -1,6 +1,6 @@
-import { computed, ref } from 'vue'
 import type { Component, VNode } from 'vue'
 import type { ToastProps } from '.'
+import { computed, ref } from 'vue'
 
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
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 b6580c14..0f21b20d 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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, provide } from 'vue'
-import { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'
 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 { 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 a794ff62..6519cfaa 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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { VariantProps } from 'class-variance-authority'
-import { type HTMLAttributes, computed, inject } from 'vue'
-import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
 import { toggleVariants } from '@/lib/registry/new-york/ui/toggle'
 import { cn } from '@/lib/utils'
+import { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'
+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 29a69102..30a4e252 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,8 +1,8 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
-import { type ToggleVariants, toggleVariants } from '.'
 import { cn } from '@/lib/utils'
+import { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { type ToggleVariants, toggleVariants } from '.'
 
 const props = withDefaults(defineProps<ToggleProps & {
   class?: HTMLAttributes['class']
diff --git a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
index b12c2a2e..7bc499fa 100644
--- a/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/toggle/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Toggle } from './Toggle.vue'
 
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 a885caa1..685f03a3 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,7 +1,7 @@
 <script setup lang="ts">
-import { type HTMLAttributes, computed } from 'vue'
-import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/apps/www/src/lib/registry/new-york/ui/tooltip/index.ts b/apps/www/src/lib/registry/new-york/ui/tooltip/index.ts
index 82049b48..5ab96536 100644
--- a/apps/www/src/lib/registry/new-york/ui/tooltip/index.ts
+++ b/apps/www/src/lib/registry/new-york/ui/tooltip/index.ts
@@ -1,4 +1,4 @@
 export { default as Tooltip } from './Tooltip.vue'
 export { default as TooltipContent } from './TooltipContent.vue'
-export { default as TooltipTrigger } from './TooltipTrigger.vue'
 export { default as TooltipProvider } from './TooltipProvider.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
diff --git a/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue b/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
index 4fe2b231..60d72f46 100644
--- a/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core'
-import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'
 import type { Calendar } from 'v-calendar'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { cn } from '@/lib/utils'
+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 '.'
-import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 
 /* Extracted from v-calendar */
 type DatePickerModel = DatePickerDate | DatePickerRangeObject
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index 424c34d9..b4b15611 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -1,9 +1,9 @@
-import { readFile, readdir } from 'node:fs/promises'
-import { join, normalize, resolve } from 'pathe'
-import { compileScript, parse } from 'vue/compiler-sfc'
-import { parseSync } from '@oxc-parser/wasm'
-
 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', []],
diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts
index 821d66fd..4c519923 100644
--- a/apps/www/src/lib/utils.ts
+++ b/apps/www/src/lib/utils.ts
@@ -1,7 +1,7 @@
 import type { Updater } from '@tanstack/vue-table'
+import type { Ref } from 'vue'
 import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
-import type { Ref } from 'vue'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index dea4cc2c..5cffd1d8 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -32,8 +32,8 @@
     "name": "alert-dialog",
     "dependencies": [],
     "registryDependencies": [
-      "utils",
-      "button"
+      "button",
+      "utils"
     ],
     "files": [
       "ui/alert-dialog/AlertDialog.vue",
@@ -71,14 +71,14 @@
       "accordion",
       "button",
       "separator",
-      "switch",
       "checkbox",
+      "switch",
       "calendar",
       "popover",
       "utils",
-      "select",
       "label",
       "radio-group",
+      "select",
       "input",
       "textarea"
     ],
@@ -938,12 +938,12 @@
   {
     "name": "v-calendar",
     "dependencies": [
-      "@vueuse/core",
-      "v-calendar@next"
+      "v-calendar@next",
+      "@vueuse/core"
     ],
     "registryDependencies": [
-      "utils",
-      "button"
+      "button",
+      "utils"
     ],
     "files": [
       "ui/v-calendar/Calendar.vue",
diff --git a/apps/www/src/public/registry/styles/default/accordion.json b/apps/www/src/public/registry/styles/default/accordion.json
index be4913a4..dce6798f 100644
--- a/apps/www/src/public/registry/styles/default/accordion.json
+++ b/apps/www/src/public/registry/styles/default/accordion.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 5b26eb1d..0000a11b 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -2,8 +2,8 @@
   "name": "alert-dialog",
   "dependencies": [],
   "registryDependencies": [
-    "utils",
-    "button"
+    "button",
+    "utils"
   ],
   "files": [
     {
@@ -12,19 +12,19 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogFooter.vue",
@@ -36,7 +36,7 @@
     },
     {
       "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogTrigger.vue",
@@ -44,7 +44,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\n"
+      "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
index 54bb63e9..07789585 100644
--- a/apps/www/src/public/registry/styles/default/alert.json
+++ b/apps/www/src/public/registry/styles/default/alert.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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"
+      "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/auto-form.json b/apps/www/src/public/registry/styles/default/auto-form.json
index ac12c1f7..391e4e85 100644
--- a/apps/www/src/public/registry/styles/default/auto-form.json
+++ b/apps/www/src/public/registry/styles/default/auto-form.json
@@ -10,57 +10,57 @@
     "accordion",
     "button",
     "separator",
-    "switch",
     "checkbox",
+    "switch",
     "calendar",
     "popover",
     "utils",
-    "select",
     "label",
     "radio-group",
+    "select",
     "input",
     "textarea"
   ],
   "files": [
     {
       "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport { computed, toRefs } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { Form } from '@/lib/registry/default/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport { computed } from 'vue'\nimport type { Config, ConfigItem, Shape } from './interface'\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"
+      "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 * as z from 'zod'\nimport { computed, provide } from 'vue'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport type { Config, ConfigItem } from './interface'\nimport { beautifyObjectName, getBaseType } from './utils'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { Separator } from '@/lib/registry/default/ui/separator'\nimport { FormItem, FormMessage } from '@/lib/registry/default/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Switch } from '@/lib/registry/default/ui/switch'\nimport { Checkbox } from '@/lib/registry/default/ui/checkbox'\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              :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"
     },
     {
       "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from 'lucide-vue-next'\nimport { beautifyObjectName } from './utils'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\n\nimport { Calendar } from '@/lib/registry/default/ui/calendar'\nimport { Button } from '@/lib/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/default/ui/popover'\nimport { cn } from '@/lib/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 '@/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"
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/default/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/default/ui/select'\nimport { Label } from '@/lib/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'\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 '@/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"
     },
     {
       "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { TrashIcon } from 'lucide-vue-next'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\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 { Button } from '@/lib/registry/default/ui/button'\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 '@/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"
     },
     {
       "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\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'\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 '@/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"
     },
     {
       "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\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'\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 '@/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"
     },
     {
       "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport { computed, provide } from 'vue'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport AutoFormField from './AutoFormField.vue'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/default/ui/accordion'\nimport { FormItem } from '@/lib/registry/default/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormLabel.vue",
@@ -72,15 +72,15 @@
     },
     {
       "name": "dependencies.ts",
-      "content": "import type * as z from 'zod'\nimport type { Ref } from 'vue'\nimport { computed, ref, watch } from 'vue'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { createContext } from 'radix-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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'\nexport type { Config, ConfigItem, FieldProps } from './interface'\n\nexport { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\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'\n"
+      "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 { ZodAny, z } 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 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/avatar.json b/apps/www/src/public/registry/styles/default/avatar.json
index 4a5c7da8..e4839ca2 100644
--- a/apps/www/src/public/registry/styles/default/avatar.json
+++ b/apps/www/src/public/registry/styles/default/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AvatarFallback.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.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"
+      "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
index 2c7f9d83..36703f6c 100644
--- a/apps/www/src/public/registry/styles/default/badge.json
+++ b/apps/www/src/public/registry/styles/default/badge.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\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"
+      "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 { type VariantProps, cva } 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"
+      "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
index d9baa9cd..e8109cd4 100644
--- a/apps/www/src/public/registry/styles/default/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/default/breadcrumb.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "BreadcrumbList.vue",
@@ -31,7 +31,7 @@
     },
     {
       "name": "BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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"
+      "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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/button.json b/apps/www/src/public/registry/styles/default/button.json
index 6804e1e3..5c197898 100644
--- a/apps/www/src/public/registry/styles/default/button.json
+++ b/apps/www/src/public/registry/styles/default/button.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground 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-10 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ButtonVariants = VariantProps<typeof buttonVariants>\n"
+      "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 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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground hover:bg-destructive/90',\n        outline:\n          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',\n        secondary:\n          'bg-secondary text-secondary-foreground 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-10 px-4 py-2',\n        xs: 'h-7 rounded px-2',\n        sm: 'h-9 rounded-md px-3',\n        lg: 'h-11 rounded-md px-8',\n        icon: 'h-10 w-10',\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
index 8d4ca3f5..7950b083 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarGridBody.vue",
@@ -32,27 +32,27 @@
     },
     {
       "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/card.json b/apps/www/src/public/registry/styles/default/card.json
index 139bac3a..08eb900f 100644
--- a/apps/www/src/public/registry/styles/default/card.json
+++ b/apps/www/src/public/registry/styles/default/card.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardFooter } from './CardFooter.vue'\n"
+      "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
index fd8de7af..042d9103 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -11,35 +11,35 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { ArrowRight } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\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 '@/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"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ArrowLeft } from 'lucide-vue-next'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/default/ui/button'\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 '@/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"
     },
     {
       "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 CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n"
+      "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 { HTMLAttributes, UnwrapRef } from 'vue'\nimport type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-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"
+      "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 { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\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"
+      "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
index 2b8d7092..2768f044 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 BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'radix-vue'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 dfafcf46..95799dc2 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 { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 c0fa5cdf..a6d0a015 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 { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 a4e30ada..fabff73b 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 BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/default/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 a46e4842..8bb95f43 100644
--- a/apps/www/src/public/registry/styles/default/chart.json
+++ b/apps/www/src/public/registry/styles/default/chart.json
@@ -11,15 +11,15 @@
   "files": [
     {
       "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\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"
+      "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 { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '@/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"
     },
     {
       "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\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"
+      "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",
@@ -27,7 +27,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as ChartTooltip } from './ChartTooltip.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartCrosshair } from './ChartCrosshair.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(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/checkbox.json b/apps/www/src/public/registry/styles/default/checkbox.json
index 2efd9229..1a302e16 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 HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 0c8ac927..5d436cc4 100644
--- a/apps/www/src/public/registry/styles/default/collapsible.json
+++ b/apps/www/src/public/registry/styles/default/collapsible.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } 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 '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"
     },
     {
       "name": "CollapsibleContent.vue",
@@ -17,7 +17,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\n"
+      "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
index a0b11cd1..3a372927 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 HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\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 '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"
     },
     {
       "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Search } from 'lucide-vue-next'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 4d2b2cce..37d2bb88 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } 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 '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"
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuPortal.vue",
@@ -39,11 +39,11 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuShortcut.vue",
@@ -55,11 +55,11 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuTrigger.vue",
@@ -67,7 +67,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\n"
+      "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/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index 754ae8e9..b1cbd449 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -15,11 +15,11 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogFooter.vue",
@@ -31,11 +31,11 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogTrigger.vue",
@@ -43,7 +43,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\n"
+      "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
index 8982181d..530c04cf 100644
--- a/apps/www/src/public/registry/styles/default/drawer.json
+++ b/apps/www/src/public/registry/styles/default/drawer.json
@@ -9,15 +9,15 @@
   "files": [
     {
       "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { DrawerRoot } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'radix-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 '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"
     },
     {
       "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport type { DialogContentEmits, DialogContentProps } from 'radix-vue'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { DrawerDescription } from 'vaul-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -29,15 +29,15 @@
     },
     {
       "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerOverlay } from 'vaul-vue'\nimport type { DialogOverlayProps } from 'radix-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { DrawerTitle } from 'vaul-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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"
+      "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 { DrawerPortal, DrawerTrigger, DrawerClose } from 'vaul-vue'\nexport { default as Drawer } from './Drawer.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\n"
+      "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
index 1afc9343..583ab876 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -11,11 +11,11 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 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',\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 '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 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',\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 { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuRadioGroup.vue",
@@ -35,11 +35,11 @@
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuShortcut.vue",
@@ -51,11 +51,11 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuTrigger.vue",
@@ -63,7 +63,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { DropdownMenuPortal } from 'radix-vue'\n\nexport { default as DropdownMenu } from './DropdownMenu.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.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 'radix-vue'\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 03984f25..a692170b 100644
--- a/apps/www/src/public/registry/styles/default/form.json
+++ b/apps/www/src/public/registry/styles/default/form.json
@@ -16,15 +16,15 @@
     },
     {
       "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\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"
+      "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 { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/default/ui/label'\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 '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"
     },
     {
       "name": "FormMessage.vue",
@@ -32,7 +32,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+      "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",
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 7dfb7f47..8d4e0c4e 100644
--- a/apps/www/src/public/registry/styles/default/hover-card.json
+++ b/apps/www/src/public/registry/styles/default/hover-card.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "HoverCardTrigger.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\n"
+      "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
index 249a6657..37d76352 100644
--- a/apps/www/src/public/registry/styles/default/input.json
+++ b/apps/www/src/public/registry/styles/default/input.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/label.json b/apps/www/src/public/registry/styles/default/label.json
index d827d8be..58fc48ec 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 { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 d3a44c54..b3fba4e0 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarMenu.vue",
@@ -39,11 +39,11 @@
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarShortcut.vue",
@@ -55,19 +55,19 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.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 MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.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'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\n"
+      "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
index 501c88c9..27ab4a0c 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuItem.vue",
@@ -27,19 +27,19 @@
     },
     {
       "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.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"
+      "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'\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
index 139358df..f7804efd 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 { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldContent.vue",
@@ -15,19 +15,19 @@
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\n"
+      "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
index 77a558de..6602832a 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 { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { MoreHorizontal } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { ChevronsLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { ChevronsRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport {\n  Button,\n} from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export {\n  PaginationRoot as Pagination,\n  PaginationList,\n  PaginationListItem,\n} from 'radix-vue'\nexport { 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'\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 'radix-vue'\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 973615dc..908bb101 100644
--- a/apps/www/src/public/registry/styles/default/pin-input.json
+++ b/apps/www/src/public/registry/styles/default/pin-input.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { Dot } from 'lucide-vue-next'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+      "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
index 5d8069ce..963992f2 100644
--- a/apps/www/src/public/registry/styles/default/popover.json
+++ b/apps/www/src/public/registry/styles/default/popover.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } 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 '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"
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PopoverTrigger.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.vue'\n"
+      "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
index 65493f42..b7646c32 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 e1bf9019..949af23b 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 { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { Circle } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 b88df9d5..98c580a8 100644
--- a/apps/www/src/public/registry/styles/default/range-calendar.json
+++ b/apps/www/src/public/registry/styles/default/range-calendar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarGridBody.vue",
@@ -32,27 +32,27 @@
     },
     {
       "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRight } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeft } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '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"
     },
     {
       "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 53b405a0..99bc62b4 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 { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { GripVertical } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.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 'radix-vue'\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 2647bf53..4bbdd016 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 07330a42..940c820f 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { Check } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectItemText.vue",
@@ -27,23 +27,23 @@
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUp } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronDown } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectValue.vue",
@@ -51,7 +51,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\n"
+      "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
index c4c8f6e7..1aaecbbf 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 { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 d347764a..be3c4f07 100644
--- a/apps/www/src/public/registry/styles/default/sheet.json
+++ b/apps/www/src/public/registry/styles/default/sheet.json
@@ -15,11 +15,11 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetFooter.vue",
@@ -31,7 +31,7 @@
     },
     {
       "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetTrigger.vue",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.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"
+      "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/slider.json b/apps/www/src/public/registry/styles/default/slider.json
index 036c32f9..010a6b27 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 HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-2 w-full grow overflow-hidden rounded-full bg-secondary\">\n      <SliderRange class=\"absolute h-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 '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"
     },
     {
       "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 d69bb432..dc11e97d 100644
--- a/apps/www/src/public/registry/styles/default/stepper.json
+++ b/apps/www/src/public/registry/styles/default/stepper.json
@@ -7,35 +7,35 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
+      "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
index 006f0b0a..e1ed9cb8 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 data-[state=unchecked]:translate-x-0')\"\n    />\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 '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 data-[state=unchecked]:translate-x-0')\"\n    />\n  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/table.json b/apps/www/src/public/registry/styles/default/table.json
index 06f65b3f..90352697 100644
--- a/apps/www/src/public/registry/styles/default/table.json
+++ b/apps/www/src/public/registry/styles/default/table.json
@@ -23,7 +23,7 @@
     },
     {
       "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -43,7 +43,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableRow } from './TableRow.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\n"
+      "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
index 8e15104d..2e5f77f0 100644
--- a/apps/www/src/public/registry/styles/default/tabs.json
+++ b/apps/www/src/public/registry/styles/default/tabs.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { TabsRootEmits, TabsRootProps } 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 '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"
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsContent } from './TabsContent.vue'\n"
+      "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
index ca31d56c..358edf21 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 { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index cc38a39e..0f8ea314 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "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",
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index d901ad1a..26087aa9 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { X } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastProvider.vue",
@@ -27,23 +27,23 @@
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { useToast } from './use-toast'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\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"
+      "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 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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 '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"
     },
     {
       "name": "use-toast.ts",
-      "content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\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"
+      "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
index 71b4c12a..36b4f55d 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 { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/default/ui/toggle'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 5dca88ac..e9bc7ddc 100644
--- a/apps/www/src/public/registry/styles/default/toggle.json
+++ b/apps/www/src/public/registry/styles/default/toggle.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { type ToggleVariants, toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } 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',\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
index fbafb977..d81cb61e 100644
--- a/apps/www/src/public/registry/styles/default/tooltip.json
+++ b/apps/www/src/public/registry/styles/default/tooltip.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TooltipProvider.vue",
@@ -23,7 +23,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\n"
+      "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
index 1e8245f9..49be6e40 100644
--- a/apps/www/src/public/registry/styles/default/v-calendar.json
+++ b/apps/www/src/public/registry/styles/default/v-calendar.json
@@ -1,17 +1,17 @@
 {
   "name": "v-calendar",
   "dependencies": [
-    "@vueuse/core",
-    "v-calendar@next"
+    "v-calendar@next",
+    "@vueuse/core"
   ],
   "registryDependencies": [
-    "utils",
-    "button"
+    "button",
+    "utils"
   ],
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeft, ChevronRight } from 'lucide-vue-next'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\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 '@/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"
     },
     {
       "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 4d354d57..5389f871 100644
--- a/apps/www/src/public/registry/styles/new-york/accordion.json
+++ b/apps/www/src/public/registry/styles/new-york/accordion.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "AccordionContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionContent, type AccordionContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AccordionItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AccordionItem, type AccordionItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AccordionTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AccordionHeader,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 32fdf4f2..addabc60 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
@@ -2,8 +2,8 @@
   "name": "alert-dialog",
   "dependencies": [],
   "registryDependencies": [
-    "utils",
-    "button"
+    "button",
+    "utils"
   ],
   "files": [
     {
@@ -12,19 +12,19 @@
     },
     {
       "name": "AlertDialogAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "name": "AlertDialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogContent,\n  type AlertDialogContentEmits,\n  type AlertDialogContentProps,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  AlertDialogDescription,\n  type AlertDialogDescriptionProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogFooter.vue",
@@ -36,7 +36,7 @@
     },
     {
       "name": "AlertDialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AlertDialogTrigger.vue",
@@ -44,7 +44,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as AlertDialog } from './AlertDialog.vue'\nexport { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'\nexport { default as AlertDialogContent } from './AlertDialogContent.vue'\nexport { default as AlertDialogHeader } from './AlertDialogHeader.vue'\nexport { default as AlertDialogTitle } from './AlertDialogTitle.vue'\nexport { default as AlertDialogDescription } from './AlertDialogDescription.vue'\nexport { default as AlertDialogFooter } from './AlertDialogFooter.vue'\nexport { default as AlertDialogAction } from './AlertDialogAction.vue'\nexport { default as AlertDialogCancel } from './AlertDialogCancel.vue'\n"
+      "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
index 72872a7a..ccbc207c 100644
--- a/apps/www/src/public/registry/styles/new-york/alert.json
+++ b/apps/www/src/public/registry/styles/new-york/alert.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Alert.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type AlertVariants, alertVariants } from '.'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Alert } from './Alert.vue'\nexport { default as AlertTitle } from './AlertTitle.vue'\nexport { default as AlertDescription } from './AlertDescription.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"
+      "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/auto-form.json b/apps/www/src/public/registry/styles/new-york/auto-form.json
index 63258a21..78a3b4e5 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
@@ -10,57 +10,57 @@
     "accordion",
     "button",
     "separator",
-    "switch",
     "checkbox",
+    "switch",
     "calendar",
     "popover",
     "utils",
-    "select",
     "label",
     "radio-group",
+    "select",
     "input",
     "textarea"
   ],
   "files": [
     {
       "name": "AutoForm.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodObjectOrWrapped\">\nimport { computed, toRefs } from 'vue'\nimport type { ZodAny, z } from 'zod'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport type { FormContext, GenericObject } from 'vee-validate'\nimport { type ZodObjectOrWrapped, getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'\nimport type { Config, ConfigItem, Dependency, Shape } from './interface'\nimport AutoFormField from './AutoFormField.vue'\nimport { provideDependencies } from './dependencies'\nimport { Form } from '@/lib/registry/new-york/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormField.vue",
-      "content": "<script setup lang=\"ts\" generic=\"U extends ZodAny\">\nimport type { ZodAny } from 'zod'\nimport { computed } from 'vue'\nimport type { Config, ConfigItem, Shape } from './interface'\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"
+      "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 * as z from 'zod'\nimport { computed, provide } from 'vue'\nimport { PlusIcon, TrashIcon } from 'lucide-vue-next'\nimport { FieldArray, FieldContextKey, useField } from 'vee-validate'\nimport type { Config, ConfigItem } from './interface'\nimport { beautifyObjectName, getBaseType } from './utils'\nimport AutoFormField from './AutoFormField.vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { Separator } from '@/lib/registry/new-york/ui/separator'\nimport { FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormFieldBoolean.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Switch } from '@/lib/registry/new-york/ui/switch'\nimport { Checkbox } from '@/lib/registry/new-york/ui/checkbox'\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              :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"
     },
     {
       "name": "AutoFormFieldDate.vue",
-      "content": "<script setup lang=\"ts\">\nimport { DateFormatter, getLocalTimeZone } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { beautifyObjectName } from './utils'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\n\nimport { Calendar } from '@/lib/registry/new-york/ui/calendar'\nimport { Button } from '@/lib/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'\nimport { cn } from '@/lib/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 '@/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"
     },
     {
       "name": "AutoFormFieldEnum.vue",
-      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'\nimport { Label } from '@/lib/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/lib/registry/new-york/ui/radio-group'\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 '@/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"
     },
     {
       "name": "AutoFormFieldFile.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { TrashIcon } from '@radix-icons/vue'\nimport { beautifyObjectName } from './utils'\nimport type { FieldProps } from './interface'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/lib/registry/new-york/ui/form'\nimport { Input } from '@/lib/registry/new-york/ui/input'\nimport { Button } from '@/lib/registry/new-york/ui/button'\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 '@/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"
     },
     {
       "name": "AutoFormFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\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'\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 '@/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"
     },
     {
       "name": "AutoFormFieldNumber.vue",
-      "content": "<script setup lang=\"ts\">\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { beautifyObjectName } from './utils'\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'\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 '@/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"
     },
     {
       "name": "AutoFormFieldObject.vue",
-      "content": "<script setup lang=\"ts\" generic=\"T extends ZodRawShape\">\nimport type { ZodAny, ZodObject, ZodRawShape } from 'zod'\nimport { computed, provide } from 'vue'\nimport { FieldContextKey, useField } from 'vee-validate'\nimport AutoFormField from './AutoFormField.vue'\nimport type { Config, ConfigItem, Shape } from './interface'\nimport { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'\nimport AutoFormLabel from './AutoFormLabel.vue'\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/lib/registry/new-york/ui/accordion'\nimport { FormItem } from '@/lib/registry/new-york/ui/form'\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 '@/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"
     },
     {
       "name": "AutoFormLabel.vue",
@@ -72,15 +72,15 @@
     },
     {
       "name": "dependencies.ts",
-      "content": "import type * as z from 'zod'\nimport type { Ref } from 'vue'\nimport { computed, ref, watch } from 'vue'\nimport { useFieldValue, useFormValues } from 'vee-validate'\nimport { createContext } from 'radix-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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'\nexport type { Config, ConfigItem, FieldProps } from './interface'\n\nexport { default as AutoForm } from './AutoForm.vue'\nexport { default as AutoFormField } from './AutoFormField.vue'\nexport { default as AutoFormLabel } from './AutoFormLabel.vue'\n\nexport { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'\nexport { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'\nexport { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'\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'\n"
+      "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 { ZodAny, z } 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 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/avatar.json b/apps/www/src/public/registry/styles/new-york/avatar.json
index 4a5c7da8..e4839ca2 100644
--- a/apps/www/src/public/registry/styles/new-york/avatar.json
+++ b/apps/www/src/public/registry/styles/new-york/avatar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "Avatar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { AvatarRoot } from 'radix-vue'\nimport { type AvatarVariants, avatarVariant } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "AvatarFallback.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Avatar } from './Avatar.vue'\nexport { default as AvatarImage } from './AvatarImage.vue'\nexport { default as AvatarFallback } from './AvatarFallback.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"
+      "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
index d20934b6..e3de8c24 100644
--- a/apps/www/src/public/registry/styles/new-york/badge.json
+++ b/apps/www/src/public/registry/styles/new-york/badge.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Badge.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { type BadgeVariants, badgeVariants } from '.'\nimport { cn } from '@/lib/utils'\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"
+      "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 { type VariantProps, cva } 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"
+      "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
index 094ff22e..232fce91 100644
--- a/apps/www/src/public/registry/styles/new-york/breadcrumb.json
+++ b/apps/www/src/public/registry/styles/new-york/breadcrumb.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "BreadcrumbEllipsis.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { 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",
@@ -19,7 +19,7 @@
     },
     {
       "name": "BreadcrumbLink.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "BreadcrumbList.vue",
@@ -31,7 +31,7 @@
     },
     {
       "name": "BreadcrumbSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 { 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",
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 47aea8e3..f23bffb3 100644
--- a/apps/www/src/public/registry/styles/new-york/button.json
+++ b/apps/www/src/public/registry/styles/new-york/button.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Button.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive, type PrimitiveProps } from 'radix-vue'\nimport { type ButtonVariants, buttonVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Button } from './Button.vue'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center 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',\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"
+      "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 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',\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
index b253bf0d..b1f097d7 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -8,19 +8,19 @@
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarGridBody.vue",
@@ -32,27 +32,27 @@
     },
     {
       "name": "CalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "name": "CalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/card.json b/apps/www/src/public/registry/styles/new-york/card.json
index 8446eff0..050b6fdc 100644
--- a/apps/www/src/public/registry/styles/new-york/card.json
+++ b/apps/www/src/public/registry/styles/new-york/card.json
@@ -31,7 +31,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Card } from './Card.vue'\nexport { default as CardHeader } from './CardHeader.vue'\nexport { default as CardTitle } from './CardTitle.vue'\nexport { default as CardDescription } from './CardDescription.vue'\nexport { default as CardContent } from './CardContent.vue'\nexport { default as CardFooter } from './CardFooter.vue'\n"
+      "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
index d463fc22..a570b8a2 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -11,35 +11,35 @@
   "files": [
     {
       "name": "Carousel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useProvideCarousel } from './useCarousel'\nimport type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\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"
+      "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 { ArrowRightIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\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 '@/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"
     },
     {
       "name": "CarouselPrevious.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ArrowLeftIcon } from '@radix-icons/vue'\nimport { useCarousel } from './useCarousel'\nimport type { WithClassAsProps } from './interface'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/lib/registry/new-york/ui/button'\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 '@/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"
     },
     {
       "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 CarouselPrevious } from './CarouselPrevious.vue'\nexport { default as CarouselNext } from './CarouselNext.vue'\nexport { useCarousel } from './useCarousel'\n\nexport type {\n  UnwrapRefCarouselApi as CarouselApi,\n} from './interface'\n"
+      "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 { HTMLAttributes, UnwrapRef } from 'vue'\nimport type useEmblaCarousel from 'embla-carousel-vue'\nimport type {\n  EmblaCarouselVueType,\n} from 'embla-carousel-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"
+      "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 { createInjectionState } from '@vueuse/core'\nimport emblaCarouselVue from 'embla-carousel-vue'\nimport { onMounted, ref } from 'vue'\nimport type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'\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"
+      "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
index 9d82602a..e3ea0a12 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 BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisArea, VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Area, Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport { useId } from 'radix-vue'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 434a4a65..fed48e18 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 { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Axis, GroupedBar, StackedBar } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 09f3929c..ba3e2515 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 { VisDonut, VisSingleContainer } from '@unovis/vue'\nimport { Donut } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartSingleTooltip, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 b98ca746..aaf0a57f 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 BulletLegendItemInterface, CurveType } from '@unovis/ts'\nimport { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'\nimport { Axis, Line } from '@unovis/ts'\nimport { type Component, computed, ref } from 'vue'\nimport { useMounted } from '@vueuse/core'\nimport type { BaseChartProps } from '.'\nimport { ChartCrosshair, ChartLegend, defaultColors } from '@/lib/registry/new-york/ui/chart'\nimport { cn } from '@/lib/utils'\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 '@/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"
     },
     {
       "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 e7776885..8233cb86 100644
--- a/apps/www/src/public/registry/styles/new-york/chart.json
+++ b/apps/www/src/public/registry/styles/new-york/chart.json
@@ -11,15 +11,15 @@
   "files": [
     {
       "name": "ChartCrosshair.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisCrosshair, VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\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"
+      "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 { VisBulletLegend } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { BulletLegend } from '@unovis/ts'\nimport { nextTick, onMounted, ref } from 'vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '@/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"
     },
     {
       "name": "ChartSingleTooltip.vue",
-      "content": "<script setup lang=\"ts\">\nimport { VisTooltip } from '@unovis/vue'\nimport type { BulletLegendItemInterface } from '@unovis/ts'\nimport { omit } from '@unovis/ts'\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"
+      "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",
@@ -27,7 +27,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as ChartTooltip } from './ChartTooltip.vue'\nexport { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'\nexport { default as ChartLegend } from './ChartLegend.vue'\nexport { default as ChartCrosshair } from './ChartCrosshair.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(Array(primaryCount).keys()).map(i => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`),\n    ...Array.from(Array(secondaryCount).keys()).map(i => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`),\n  ]\n}\n\nexport * from './interface'\n"
+      "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",
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 dc3c2cd0..55292b27 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 HTMLAttributes, computed } from 'vue'\nimport type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'\nimport { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 0c8ac927..5d436cc4 100644
--- a/apps/www/src/public/registry/styles/new-york/collapsible.json
+++ b/apps/www/src/public/registry/styles/new-york/collapsible.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Collapsible.vue",
-      "content": "<script setup lang=\"ts\">\nimport { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { CollapsibleRootEmits, CollapsibleRootProps } 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 '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"
     },
     {
       "name": "CollapsibleContent.vue",
@@ -17,7 +17,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Collapsible } from './Collapsible.vue'\nexport { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'\nexport { default as CollapsibleContent } from './CollapsibleContent.vue'\n"
+      "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
index 9fb64718..27c55efc 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 HTMLAttributes, computed } from 'vue'\nimport type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'\nimport { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/new-york/ui/dialog'\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 '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"
     },
     {
       "name": "CommandEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxEmptyProps } from 'radix-vue'\nimport { ComboboxEmpty } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\nimport { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'\nimport { ComboboxItem, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'\nimport { ComboboxContent, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "CommandSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { ComboboxSeparatorProps } from 'radix-vue'\nimport { ComboboxSeparator } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 38d07d10..6230b6fb 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,15 +7,15 @@
   "files": [
     {
       "name": "ContextMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { ContextMenuRootEmits, ContextMenuRootProps } 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 '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"
     },
     {
       "name": "ContextMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuCheckboxItem,\n  type ContextMenuCheckboxItemEmits,\n  type ContextMenuCheckboxItemProps,\n  ContextMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuContent,\n  type ContextMenuContentEmits,\n  type ContextMenuContentProps,\n  ContextMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "ContextMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItem,\n  type ContextMenuItemEmits,\n  type ContextMenuItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuPortal.vue",
@@ -39,11 +39,11 @@
     },
     {
       "name": "ContextMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuItemIndicator,\n  ContextMenuRadioItem,\n  type ContextMenuRadioItemEmits,\n  type ContextMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSeparator,\n  type ContextMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuShortcut.vue",
@@ -55,11 +55,11 @@
     },
     {
       "name": "ContextMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  ContextMenuSubTrigger,\n  type ContextMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ContextMenuTrigger.vue",
@@ -67,7 +67,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as ContextMenu } from './ContextMenu.vue'\nexport { default as ContextMenuTrigger } from './ContextMenuTrigger.vue'\nexport { default as ContextMenuContent } from './ContextMenuContent.vue'\nexport { default as ContextMenuGroup } from './ContextMenuGroup.vue'\nexport { default as ContextMenuRadioGroup } from './ContextMenuRadioGroup.vue'\nexport { default as ContextMenuItem } from './ContextMenuItem.vue'\nexport { default as ContextMenuCheckboxItem } from './ContextMenuCheckboxItem.vue'\nexport { default as ContextMenuRadioItem } from './ContextMenuRadioItem.vue'\nexport { default as ContextMenuShortcut } from './ContextMenuShortcut.vue'\nexport { default as ContextMenuSeparator } from './ContextMenuSeparator.vue'\nexport { default as ContextMenuLabel } from './ContextMenuLabel.vue'\nexport { default as ContextMenuSub } from './ContextMenuSub.vue'\nexport { default as ContextMenuSubTrigger } from './ContextMenuSubTrigger.vue'\nexport { default as ContextMenuSubContent } from './ContextMenuSubContent.vue'\n"
+      "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
index 9cb2b36b..73791dc0 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -15,11 +15,11 @@
     },
     {
       "name": "DialogContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogFooter.vue",
@@ -31,11 +31,11 @@
     },
     {
       "name": "DialogScrollContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DialogTrigger.vue",
@@ -43,7 +43,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Dialog } from './Dialog.vue'\nexport { default as DialogClose } from './DialogClose.vue'\nexport { default as DialogTrigger } from './DialogTrigger.vue'\nexport { default as DialogHeader } from './DialogHeader.vue'\nexport { default as DialogTitle } from './DialogTitle.vue'\nexport { default as DialogDescription } from './DialogDescription.vue'\nexport { default as DialogContent } from './DialogContent.vue'\nexport { default as DialogScrollContent } from './DialogScrollContent.vue'\nexport { default as DialogFooter } from './DialogFooter.vue'\n"
+      "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
index 8982181d..530c04cf 100644
--- a/apps/www/src/public/registry/styles/new-york/drawer.json
+++ b/apps/www/src/public/registry/styles/new-york/drawer.json
@@ -9,15 +9,15 @@
   "files": [
     {
       "name": "Drawer.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerRootEmits, DrawerRootProps } from 'vaul-vue'\nimport { DrawerRoot } from 'vaul-vue'\nimport { useForwardPropsEmits } from 'radix-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 '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"
     },
     {
       "name": "DrawerContent.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerContent, DrawerPortal } from 'vaul-vue'\nimport type { DialogContentEmits, DialogContentProps } from 'radix-vue'\nimport { useForwardPropsEmits } from 'radix-vue'\nimport type { HtmlHTMLAttributes } from 'vue'\nimport DrawerOverlay from './DrawerOverlay.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DrawerDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerDescriptionProps } from 'vaul-vue'\nimport { DrawerDescription } from 'vaul-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -29,15 +29,15 @@
     },
     {
       "name": "DrawerOverlay.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { DrawerOverlay } from 'vaul-vue'\nimport type { DialogOverlayProps } from 'radix-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DrawerTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { DrawerTitleProps } from 'vaul-vue'\nimport { DrawerTitle } from 'vaul-vue'\nimport { type HtmlHTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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"
+      "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 { DrawerPortal, DrawerTrigger, DrawerClose } from 'vaul-vue'\nexport { default as Drawer } from './Drawer.vue'\nexport { default as DrawerOverlay } from './DrawerOverlay.vue'\nexport { default as DrawerContent } from './DrawerContent.vue'\nexport { default as DrawerHeader } from './DrawerHeader.vue'\nexport { default as DrawerFooter } from './DrawerFooter.vue'\nexport { default as DrawerTitle } from './DrawerTitle.vue'\nexport { default as DrawerDescription } from './DrawerDescription.vue'\n"
+      "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
index 3c2ab614..57284063 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
@@ -11,11 +11,11 @@
     },
     {
       "name": "DropdownMenuCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuCheckboxItem,\n  type DropdownMenuCheckboxItemEmits,\n  type DropdownMenuCheckboxItemProps,\n  DropdownMenuItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuContent,\n  type DropdownMenuContentEmits,\n  type DropdownMenuContentProps,\n  DropdownMenuPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "DropdownMenuItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 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',\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 '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 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',\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 { type HTMLAttributes, computed } from 'vue'\nimport { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuRadioGroup.vue",
@@ -35,11 +35,11 @@
     },
     {
       "name": "DropdownMenuRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuItemIndicator,\n  DropdownMenuRadioItem,\n  type DropdownMenuRadioItemEmits,\n  type DropdownMenuRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSeparator,\n  type DropdownMenuSeparatorProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuShortcut.vue",
@@ -51,11 +51,11 @@
     },
     {
       "name": "DropdownMenuSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubContent,\n  type DropdownMenuSubContentEmits,\n  type DropdownMenuSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DropdownMenuSubTrigger,\n  type DropdownMenuSubTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "DropdownMenuTrigger.vue",
@@ -63,7 +63,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { DropdownMenuPortal } from 'radix-vue'\n\nexport { default as DropdownMenu } from './DropdownMenu.vue'\nexport { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'\nexport { default as DropdownMenuContent } from './DropdownMenuContent.vue'\nexport { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'\nexport { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'\nexport { default as DropdownMenuItem } from './DropdownMenuItem.vue'\nexport { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'\nexport { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'\nexport { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'\nexport { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'\nexport { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'\nexport { default as DropdownMenuSub } from './DropdownMenuSub.vue'\nexport { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'\nexport { default as DropdownMenuSubContent } from './DropdownMenuSubContent.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 'radix-vue'\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 31803b2c..9bf20ecd 100644
--- a/apps/www/src/public/registry/styles/new-york/form.json
+++ b/apps/www/src/public/registry/styles/new-york/form.json
@@ -16,15 +16,15 @@
     },
     {
       "name": "FormDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\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"
+      "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 { type HTMLAttributes, provide } from 'vue'\nimport { useId } from 'radix-vue'\nimport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "FormLabel.vue",
-      "content": "<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue'\nimport type { LabelProps } from 'radix-vue'\nimport { useFormField } from './useFormField'\nimport { cn } from '@/lib/utils'\nimport { Label } from '@/lib/registry/new-york/ui/label'\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 '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"
     },
     {
       "name": "FormMessage.vue",
@@ -32,7 +32,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'\nexport { default as FormItem } from './FormItem.vue'\nexport { default as FormLabel } from './FormLabel.vue'\nexport { default as FormControl } from './FormControl.vue'\nexport { default as FormMessage } from './FormMessage.vue'\nexport { default as FormDescription } from './FormDescription.vue'\nexport { FORM_ITEM_INJECTION_KEY } from './injectionKeys'\n"
+      "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",
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 7dfb7f47..8d4e0c4e 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
@@ -11,7 +11,7 @@
     },
     {
       "name": "HoverCardContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  HoverCardContent,\n  type HoverCardContentProps,\n  HoverCardPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "HoverCardTrigger.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as HoverCard } from './HoverCard.vue'\nexport { default as HoverCardTrigger } from './HoverCardTrigger.vue'\nexport { default as HoverCardContent } from './HoverCardContent.vue'\n"
+      "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
index a7e9c552..d1c59084 100644
--- a/apps/www/src/public/registry/styles/new-york/input.json
+++ b/apps/www/src/public/registry/styles/new-york/input.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Input.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "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",
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 d827d8be..58fc48ec 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 { type HTMLAttributes, computed } from 'vue'\nimport { Label, type LabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 578ebe84..a947be17 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -7,15 +7,15 @@
   "files": [
     {
       "name": "Menubar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarRoot,\n  type MenubarRootEmits,\n  type MenubarRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarCheckboxItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarCheckboxItem,\n  type MenubarCheckboxItemEmits,\n  type MenubarCheckboxItemProps,\n  MenubarItemIndicator,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarContent,\n  type MenubarContentProps,\n  MenubarPortal,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarGroup.vue",
@@ -23,11 +23,11 @@
     },
     {
       "name": "MenubarItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItem,\n  type MenubarItemEmits,\n  type MenubarItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { MenubarLabel, type MenubarLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarMenu.vue",
@@ -39,11 +39,11 @@
     },
     {
       "name": "MenubarRadioItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarItemIndicator,\n  MenubarRadioItem,\n  type MenubarRadioItemEmits,\n  type MenubarRadioItemProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { DotFilledIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSeparator, type MenubarSeparatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarShortcut.vue",
@@ -55,19 +55,19 @@
     },
     {
       "name": "MenubarSubContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  MenubarPortal,\n  MenubarSubContent,\n  type MenubarSubContentEmits,\n  type MenubarSubContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarSubTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarSubTrigger, type MenubarSubTriggerProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "MenubarTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { MenubarTrigger, type MenubarTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Menubar } from './Menubar.vue'\nexport { default as MenubarItem } from './MenubarItem.vue'\nexport { default as MenubarContent } from './MenubarContent.vue'\nexport { default as MenubarGroup } from './MenubarGroup.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 MenubarCheckboxItem } from './MenubarCheckboxItem.vue'\nexport { default as MenubarSeparator } from './MenubarSeparator.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'\nexport { default as MenubarShortcut } from './MenubarShortcut.vue'\nexport { default as MenubarLabel } from './MenubarLabel.vue'\n"
+      "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
index 055569f9..f04b91a2 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,15 +7,15 @@
   "files": [
     {
       "name": "NavigationMenu.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuRoot,\n  type NavigationMenuRootEmits,\n  type NavigationMenuRootProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport NavigationMenuViewport from './NavigationMenuViewport.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuContent,\n  type NavigationMenuContentEmits,\n  type NavigationMenuContentProps,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuIndicator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuIndicator, type NavigationMenuIndicatorProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuItem.vue",
@@ -27,19 +27,19 @@
     },
     {
       "name": "NavigationMenuList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { NavigationMenuList, type NavigationMenuListProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuTrigger,\n  type NavigationMenuTriggerProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { navigationMenuTriggerStyle } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NavigationMenuViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  NavigationMenuViewport,\n  type NavigationMenuViewportProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { cva } from 'class-variance-authority'\n\nexport { default as NavigationMenu } from './NavigationMenu.vue'\nexport { default as NavigationMenuList } from './NavigationMenuList.vue'\nexport { default as NavigationMenuItem } from './NavigationMenuItem.vue'\nexport { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'\nexport { default as NavigationMenuContent } from './NavigationMenuContent.vue'\nexport { default as NavigationMenuLink } from './NavigationMenuLink.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"
+      "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'\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
index 1a88021e..4b8bdf14 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 { NumberFieldRoot, useForwardPropsEmits } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldContent.vue",
@@ -15,19 +15,19 @@
     },
     {
       "name": "NumberFieldDecrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldDecrementProps } from 'radix-vue'\nimport { NumberFieldDecrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Minus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldIncrement.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { NumberFieldIncrementProps } from 'radix-vue'\nimport { NumberFieldIncrement, useForwardProps } from 'radix-vue'\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Plus } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "NumberFieldInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { NumberFieldInput } from 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as NumberField } from './NumberField.vue'\nexport { default as NumberFieldInput } from './NumberFieldInput.vue'\nexport { default as NumberFieldIncrement } from './NumberFieldIncrement.vue'\nexport { default as NumberFieldDecrement } from './NumberFieldDecrement.vue'\nexport { default as NumberFieldContent } from './NumberFieldContent.vue'\n"
+      "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
index 4dd33388..cbb8ff08 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 { type HTMLAttributes, computed } from 'vue'\nimport { PaginationEllipsis, type PaginationEllipsisProps } from 'radix-vue'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationFirst.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationFirst, type PaginationFirstProps } from 'radix-vue'\nimport { DoubleArrowLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationLast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationLast, type PaginationLastProps } from 'radix-vue'\nimport { DoubleArrowRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationNext.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationNext, type PaginationNextProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PaginationPrev.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PaginationPrev, type PaginationPrevProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport {\n  Button,\n} from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export {\n  PaginationRoot as Pagination,\n  PaginationList,\n  PaginationListItem,\n} from 'radix-vue'\nexport { 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'\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 'radix-vue'\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 0a69bac4..d01e3826 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,23 +7,23 @@
   "files": [
     {
       "name": "PinInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputRoot, type PinInputRootEmits, type PinInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { PinInputInput, type PinInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PinInputSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { Primitive, type PrimitiveProps, useForwardProps } from 'radix-vue'\nimport { DashIcon } from '@radix-icons/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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as PinInput } from './PinInput.vue'\nexport { default as PinInputGroup } from './PinInputGroup.vue'\nexport { default as PinInputSeparator } from './PinInputSeparator.vue'\nexport { default as PinInputInput } from './PinInputInput.vue'\n"
+      "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
index 00f53e9c..f7b51da7 100644
--- a/apps/www/src/public/registry/styles/new-york/popover.json
+++ b/apps/www/src/public/registry/styles/new-york/popover.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Popover.vue",
-      "content": "<script setup lang=\"ts\">\nimport { PopoverRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { PopoverRootEmits, PopoverRootProps } 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 '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"
     },
     {
       "name": "PopoverContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  PopoverContent,\n  type PopoverContentEmits,\n  type PopoverContentProps,\n  PopoverPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "PopoverTrigger.vue",
@@ -19,7 +19,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { PopoverAnchor } from 'radix-vue'\nexport { default as Popover } from './Popover.vue'\nexport { default as PopoverTrigger } from './PopoverTrigger.vue'\nexport { default as PopoverContent } from './PopoverContent.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 'radix-vue'\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 0df36278..8abd5c92 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  ProgressIndicator,\n  ProgressRoot,\n  type ProgressRootProps,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 1a415d84..4533f35e 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 { type HTMLAttributes, computed } from 'vue'\nimport { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RadioGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  RadioGroupIndicator,\n  RadioGroupItem,\n  type RadioGroupItemProps,\n  useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 f940ddca..72403c2b 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,19 +8,19 @@
   "files": [
     {
       "name": "RangeCalendar.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarRoot, type RangeCalendarRootEmits, type RangeCalendarRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { RangeCalendarCell, RangeCalendarCellTrigger, RangeCalendarGrid, RangeCalendarGridBody, RangeCalendarGridHead, RangeCalendarGridRow, RangeCalendarHeadCell, RangeCalendarHeader, RangeCalendarHeading, RangeCalendarNextButton, RangeCalendarPrevButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCell, type RangeCalendarCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarCellTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarCellTrigger, type RangeCalendarCellTriggerProps, useForwardProps } from 'radix-vue'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarGrid.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGrid, type RangeCalendarGridProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarGridBody.vue",
@@ -32,27 +32,27 @@
     },
     {
       "name": "RangeCalendarGridRow.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarGridRow, type RangeCalendarGridRowProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeadCell.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeadCell, type RangeCalendarHeadCellProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeader.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeader, type RangeCalendarHeaderProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarHeading.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarHeading, type RangeCalendarHeadingProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "RangeCalendarNextButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarNext, type RangeCalendarNextProps, useForwardProps } from 'radix-vue'\nimport { ChevronRightIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "name": "RangeCalendarPrevButton.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport { RangeCalendarPrev, type RangeCalendarPrevProps, useForwardProps } from 'radix-vue'\nimport { ChevronLeftIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '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"
     },
     {
       "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 eb2ccc2b..25ec6541 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 { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ResizablePanelGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.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 'radix-vue'\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 2647bf53..4bbdd016 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  ScrollAreaCorner,\n  ScrollAreaRoot,\n  type ScrollAreaRootProps,\n  ScrollAreaViewport,\n} from 'radix-vue'\nimport ScrollBar from './ScrollBar.vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ScrollBar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 839aca6d..48093cd2 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -11,15 +11,15 @@
     },
     {
       "name": "SelectContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectContent,\n  type SelectContentEmits,\n  type SelectContentProps,\n  SelectPortal,\n  SelectViewport,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { SelectScrollDownButton, SelectScrollUpButton } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectGroup, type SelectGroupProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  SelectItem,\n  SelectItemIndicator,\n  type SelectItemProps,\n  SelectItemText,\n  useForwardProps,\n} from 'radix-vue'\nimport { CheckIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectItemText.vue",
@@ -27,23 +27,23 @@
     },
     {
       "name": "SelectLabel.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { SelectLabel, type SelectLabelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectScrollDownButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronDownIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectScrollUpButton.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'\nimport { ChevronUpIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectSeparator.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SelectValue.vue",
@@ -51,7 +51,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Select } from './Select.vue'\nexport { default as SelectValue } from './SelectValue.vue'\nexport { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'\nexport { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'\nexport { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'\n"
+      "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
index ae3a482a..42e55b44 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 { type HTMLAttributes, computed } from 'vue'\nimport { Separator, type SeparatorProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 8fd739e1..343dd583 100644
--- a/apps/www/src/public/registry/styles/new-york/sheet.json
+++ b/apps/www/src/public/registry/styles/new-york/sheet.json
@@ -15,11 +15,11 @@
     },
     {
       "name": "SheetContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport {\n  DialogClose,\n  DialogContent,\n  type DialogContentEmits,\n  type DialogContentProps,\n  DialogOverlay,\n  DialogPortal,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { type SheetVariants, sheetVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogDescription, type DialogDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetFooter.vue",
@@ -31,7 +31,7 @@
     },
     {
       "name": "SheetTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { DialogTitle, type DialogTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "SheetTrigger.vue",
@@ -39,7 +39,7 @@
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } from 'class-variance-authority'\n\nexport { default as Sheet } from './Sheet.vue'\nexport { default as SheetTrigger } from './SheetTrigger.vue'\nexport { default as SheetClose } from './SheetClose.vue'\nexport { default as SheetContent } from './SheetContent.vue'\nexport { default as SheetHeader } from './SheetHeader.vue'\nexport { default as SheetTitle } from './SheetTitle.vue'\nexport { default as SheetDescription } from './SheetDescription.vue'\nexport { default as SheetFooter } from './SheetFooter.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"
+      "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/slider.json b/apps/www/src/public/registry/styles/new-york/slider.json
index 6f1c60fd..9e96b13a 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 HTMLAttributes, computed } from 'vue'\nimport type { SliderRootEmits, SliderRootProps } from 'radix-vue'\nimport { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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',\n      props.class,\n    )\"\n    v-bind=\"forwarded\"\n  >\n    <SliderTrack class=\"relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\">\n      <SliderRange class=\"absolute h-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 '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"
     },
     {
       "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 4924703d..1ed6f5ea 100644
--- a/apps/www/src/public/registry/styles/new-york/stepper.json
+++ b/apps/www/src/public/registry/styles/new-york/stepper.json
@@ -7,35 +7,35 @@
   "files": [
     {
       "name": "Stepper.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperRootEmits, StepperRootProps } from 'radix-vue'\nimport { StepperRoot, useForwardPropsEmits } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperDescription.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperDescriptionProps } from 'radix-vue'\nimport { StepperDescription, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperIndicator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperIndicatorProps } from 'radix-vue'\nimport { StepperIndicator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperItem.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperItemProps } from 'radix-vue'\nimport { StepperItem, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperSeparator.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperSeparatorProps } from 'radix-vue'\nimport { StepperSeparator, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperTitle.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTitleProps } from 'radix-vue'\nimport { StepperTitle, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "StepperTrigger.vue",
-      "content": "<script lang=\"ts\" setup>\nimport { type HTMLAttributes, computed } from 'vue'\nimport type { StepperTriggerProps } from 'radix-vue'\nimport { StepperTrigger, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Stepper } from './Stepper.vue'\nexport { default as StepperItem } from './StepperItem.vue'\nexport { default as StepperIndicator } from './StepperIndicator.vue'\nexport { default as StepperTrigger } from './StepperTrigger.vue'\nexport { default as StepperTitle } from './StepperTitle.vue'\nexport { default as StepperDescription } from './StepperDescription.vue'\nexport { default as StepperSeparator } from './StepperSeparator.vue'\n"
+      "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
index 14e290e0..2ba8f895 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 { type HTMLAttributes, computed } from 'vue'\nimport {\n  SwitchRoot,\n  type SwitchRootEmits,\n  type SwitchRootProps,\n  SwitchThumb,\n  useForwardPropsEmits,\n} from 'radix-vue'\nimport { cn } from '@/lib/utils'\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  </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 '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  </SwitchRoot>\n</template>\n"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index 3246e5ba..dbed5219 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -23,7 +23,7 @@
     },
     {
       "name": "TableEmpty.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport TableRow from './TableRow.vue'\nimport TableCell from './TableCell.vue'\nimport { cn } from '@/lib/utils'\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"
+      "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",
@@ -43,7 +43,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Table } from './Table.vue'\nexport { default as TableBody } from './TableBody.vue'\nexport { default as TableCell } from './TableCell.vue'\nexport { default as TableHead } from './TableHead.vue'\nexport { default as TableHeader } from './TableHeader.vue'\nexport { default as TableFooter } from './TableFooter.vue'\nexport { default as TableRow } from './TableRow.vue'\nexport { default as TableCaption } from './TableCaption.vue'\nexport { default as TableEmpty } from './TableEmpty.vue'\n"
+      "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
index e997c9bd..b976e985 100644
--- a/apps/www/src/public/registry/styles/new-york/tabs.json
+++ b/apps/www/src/public/registry/styles/new-york/tabs.json
@@ -7,23 +7,23 @@
   "files": [
     {
       "name": "Tabs.vue",
-      "content": "<script setup lang=\"ts\">\nimport { TabsRoot, useForwardPropsEmits } from 'radix-vue'\nimport type { TabsRootEmits, TabsRootProps } 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 '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"
     },
     {
       "name": "TabsContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsContent, type TabsContentProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TabsList.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsList, type TabsListProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TabsTrigger.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "export { default as Tabs } from './Tabs.vue'\nexport { default as TabsTrigger } from './TabsTrigger.vue'\nexport { default as TabsList } from './TabsList.vue'\nexport { default as TabsContent } from './TabsContent.vue'\n"
+      "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
index 247c32ce..14a6c8e8 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 { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputInput.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'\n\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItemDelete.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TagsInputItemText.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/public/registry/styles/new-york/textarea.json b/apps/www/src/public/registry/styles/new-york/textarea.json
index 72d2929a..edd75819 100644
--- a/apps/www/src/public/registry/styles/new-york/textarea.json
+++ b/apps/www/src/public/registry/styles/new-york/textarea.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Textarea.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { useVModel } from '@vueuse/core'\nimport { cn } from '@/lib/utils'\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"
+      "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",
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 185a083e..43193b17 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -7,19 +7,19 @@
   "files": [
     {
       "name": "Toast.vue",
-      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { ToastRoot, type ToastRootEmits, useForwardPropsEmits } from 'radix-vue'\nimport { type ToastProps, toastVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastAction.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastAction, type ToastActionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastClose, type ToastCloseProps } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastDescription.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastDescription, type ToastDescriptionProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastProvider.vue",
@@ -27,23 +27,23 @@
     },
     {
       "name": "ToastTitle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastTitle, type ToastTitleProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToastViewport.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { ToastViewport, type ToastViewportProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "Toaster.vue",
-      "content": "<script setup lang=\"ts\">\nimport { isVNode } from 'vue'\nimport { useToast } from './use-toast'\nimport { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from '.'\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"
+      "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 'radix-vue'\nimport type { HTMLAttributes } from 'vue'\n\nexport { default as Toaster } from './Toaster.vue'\nexport { default as Toast } from './Toast.vue'\nexport { default as ToastViewport } from './ToastViewport.vue'\nexport { default as ToastAction } from './ToastAction.vue'\nexport { default as ToastClose } from './ToastClose.vue'\nexport { default as ToastTitle } from './ToastTitle.vue'\nexport { default as ToastDescription } from './ToastDescription.vue'\nexport { default as ToastProvider } from './ToastProvider.vue'\nexport { toast, useToast } from './use-toast'\n\nimport { type VariantProps, cva } 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 '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"
     },
     {
       "name": "use-toast.ts",
-      "content": "import { computed, ref } from 'vue'\nimport type { Component, VNode } from 'vue'\nimport type { ToastProps } from '.'\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"
+      "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
index 7d1e77a8..2912324e 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 { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, provide } from 'vue'\nimport { ToggleGroupRoot, type ToggleGroupRootEmits, type ToggleGroupRootProps, useForwardPropsEmits } from 'radix-vue'\nimport type { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "ToggleGroupItem.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { VariantProps } from 'class-variance-authority'\nimport { type HTMLAttributes, computed, inject } from 'vue'\nimport { ToggleGroupItem, type ToggleGroupItemProps, useForwardProps } from 'radix-vue'\nimport { toggleVariants } from '@/lib/registry/new-york/ui/toggle'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "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 52151f2d..6f92df82 100644
--- a/apps/www/src/public/registry/styles/new-york/toggle.json
+++ b/apps/www/src/public/registry/styles/new-york/toggle.json
@@ -7,11 +7,11 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { Toggle, type ToggleEmits, type ToggleProps, useForwardPropsEmits } from 'radix-vue'\nimport { type ToggleVariants, toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "index.ts",
-      "content": "import { type VariantProps, cva } 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 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
index 5b08bfaf..d1c08164 100644
--- a/apps/www/src/public/registry/styles/new-york/tooltip.json
+++ b/apps/www/src/public/registry/styles/new-york/tooltip.json
@@ -11,7 +11,7 @@
     },
     {
       "name": "TooltipContent.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\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 '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"
     },
     {
       "name": "TooltipProvider.vue",
@@ -23,7 +23,7 @@
     },
     {
       "name": "index.ts",
-      "content": "export { default as Tooltip } from './Tooltip.vue'\nexport { default as TooltipContent } from './TooltipContent.vue'\nexport { default as TooltipTrigger } from './TooltipTrigger.vue'\nexport { default as TooltipProvider } from './TooltipProvider.vue'\n"
+      "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
index dcaaeab9..2de91d87 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
@@ -1,17 +1,17 @@
 {
   "name": "v-calendar",
   "dependencies": [
-    "@vueuse/core",
-    "v-calendar@next"
+    "v-calendar@next",
+    "@vueuse/core"
   ],
   "registryDependencies": [
-    "utils",
-    "button"
+    "button",
+    "utils"
   ],
   "files": [
     {
       "name": "Calendar.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useVModel } from '@vueuse/core'\nimport { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue'\nimport type { Calendar } from 'v-calendar'\nimport { DatePicker } from 'v-calendar'\nimport { computed, nextTick, onMounted, ref, useSlots } from 'vue'\nimport { isVCalendarSlot } from '.'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\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 '@/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"
     },
     {
       "name": "index.ts",
diff --git a/apps/www/src/stores/config.ts b/apps/www/src/stores/config.ts
index c8649388..caf97c31 100644
--- a/apps/www/src/stores/config.ts
+++ b/apps/www/src/stores/config.ts
@@ -1,8 +1,8 @@
-import { computed } from 'vue'
+import { type Style, styles } from '@/lib/registry/styles'
 import { useStorage } from '@vueuse/core'
 import { useData } from 'vitepress'
+import { computed } from 'vue'
 import { type Theme, themes } from './../lib/registry/themes'
-import { type Style, styles } from '@/lib/registry/styles'
 
 interface Config {
   theme?: Theme['name']
diff --git a/eslint.config.js b/eslint.config.js
index cab497d2..5306f571 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -32,6 +32,8 @@ export default antfu(
       'import/first': 0,
       'node/prefer-global/process': 0,
       'style/no-tabs': 0,
+      'unused-imports/no-unused-vars': 0,
+      'unicorn/no-new-array': 0,
     },
   },
 )
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index 6b331006..c0944827 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -1,14 +1,5 @@
 import { existsSync, promises as fs, rmSync } from 'node:fs'
 import process from 'node:process'
-import path from 'pathe'
-import { consola } from 'consola'
-import { colors } from 'consola/utils'
-import { Command } from 'commander'
-import ora from 'ora'
-import prompts from 'prompts'
-import { z } from 'zod'
-import { addDependency, addDevDependency } from 'nypm'
-import { transform } from '@/src/utils/transformers'
 import { getConfig } from '@/src/utils/get-config'
 import { handleError } from '@/src/utils/handle-error'
 import {
@@ -18,6 +9,15 @@ import {
   getRegistryIndex,
   resolveTree,
 } from '@/src/utils/registry'
+import { transform } from '@/src/utils/transformers'
+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({
   components: z.array(z.string()).optional(),
diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts
index 8bf17aa9..ccea7540 100644
--- a/packages/cli/src/commands/diff.ts
+++ b/packages/cli/src/commands/diff.ts
@@ -1,12 +1,7 @@
+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 'pathe'
-import { consola } from 'consola'
-import { colors } from 'consola/utils'
-import { Command } from 'commander'
-import { type Change, diffLines } from 'diff'
-import { z } from 'zod'
-import type { Config } from '@/src/utils/get-config'
 import { getConfig } from '@/src/utils/get-config'
 import { handleError } from '@/src/utils/handle-error'
 import {
@@ -15,8 +10,13 @@ import {
   getRegistryBaseColor,
   getRegistryIndex,
 } from '@/src/utils/registry'
-import type { registryIndexSchema } from '@/src/utils/registry/schema'
 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({
   component: z.string().optional(),
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index ec86a742..dd13aed0 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -1,35 +1,35 @@
 import { existsSync, promises as fs } from 'node:fs'
 import process from 'node:process'
-import path from 'pathe'
 import { Command } from 'commander'
-import { template } from 'lodash-es'
-import ora from 'ora'
-import prompts from 'prompts'
-import { z } from 'zod'
-import { addDependency, addDevDependency } from 'nypm'
 import { consola } from 'consola'
 import { colors } from 'consola/utils'
+import { template } from 'lodash-es'
+import { addDependency, addDevDependency } from 'nypm'
+import ora from 'ora'
+import path from 'pathe'
+import prompts from 'prompts'
 import { gte } from 'semver'
-import { getProjectInfo } from '../utils/get-project-info'
-import * as templates from '../utils/templates'
-import {
-  getRegistryBaseColor,
-  getRegistryBaseColors,
-  getRegistryStyles,
-} from '../utils/registry'
-import { handleError } from '../utils/handle-error'
-import { transformByDetype } from '../utils/transformers/transform-sfc'
+import { z } from 'zod'
 import {
   type Config,
   DEFAULT_COMPONENTS,
   DEFAULT_TAILWIND_CONFIG,
   DEFAULT_UTILS,
-  TAILWIND_CSS_PATH,
   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 = {
diff --git a/packages/cli/src/index.ts b/packages/cli/src/index.ts
index ab24ad04..89a45574 100644
--- a/packages/cli/src/index.ts
+++ b/packages/cli/src/index.ts
@@ -1,12 +1,12 @@
 #!/usr/bin/env node
 import process from 'node:process'
 
-import { Command } from 'commander'
-
 import { add } from '@/src/commands/add'
+
 import { diff } from '@/src/commands/diff'
 import { init } from '@/src/commands/init'
 import { getPackageInfo } from '@/src/utils/get-package-info'
+import { Command } from 'commander'
 
 process.on('SIGINT', () => process.exit(0))
 process.on('SIGTERM', () => process.exit(0))
diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts
index cfd9a65c..7902e779 100644
--- a/packages/cli/src/utils/get-config.ts
+++ b/packages/cli/src/utils/get-config.ts
@@ -1,10 +1,10 @@
-import { existsSync } from 'node:fs'
-import path from 'pathe'
-import { loadConfig as c12LoadConfig } from 'c12'
 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'
 import { loadConfig } from 'tsconfig-paths'
 import { z } from 'zod'
-import { resolveImport } from '@/src/utils/resolve-import'
 
 export const DEFAULT_STYLE = 'default'
 export const DEFAULT_COMPONENTS = '@/components'
@@ -90,7 +90,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   }
   if (tsConfig.resultType === 'failed') {
     throw new Error(
-        `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),
+      `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),
     )
   }
 
diff --git a/packages/cli/src/utils/get-package-info.ts b/packages/cli/src/utils/get-package-info.ts
index 83a5a177..a6394d42 100644
--- a/packages/cli/src/utils/get-package-info.ts
+++ b/packages/cli/src/utils/get-package-info.ts
@@ -1,7 +1,7 @@
-import { fileURLToPath } from 'node:url'
-import path from 'pathe'
-import fs from 'fs-extra'
 import type { PackageJson } from 'type-fest'
+import { fileURLToPath } from 'node:url'
+import fs from 'fs-extra'
+import path from 'pathe'
 
 export function getPackageInfo() {
   const packageJsonPath = getPackageFilePath('../package.json')
diff --git a/packages/cli/src/utils/get-project-info.ts b/packages/cli/src/utils/get-project-info.ts
index 3877957d..dab52ce2 100644
--- a/packages/cli/src/utils/get-project-info.ts
+++ b/packages/cli/src/utils/get-project-info.ts
@@ -1,8 +1,8 @@
-import { existsSync } from 'node:fs'
-import path from 'pathe'
-import fs from 'fs-extra'
-import { readPackageJSON } from 'pkg-types'
 import type { PackageJson } from 'pkg-types'
+import { existsSync } from 'node:fs'
+import fs from 'fs-extra'
+import path from 'pathe'
+import { readPackageJSON } from 'pkg-types'
 
 export async function getProjectInfo() {
   const info = {
diff --git a/packages/cli/src/utils/registry/index.ts b/packages/cli/src/utils/registry/index.ts
index bb1f9f8b..39fa27cd 100644
--- a/packages/cli/src/utils/registry/index.ts
+++ b/packages/cli/src/utils/registry/index.ts
@@ -1,17 +1,17 @@
-import process from 'node:process'
-import path from 'pathe'
-import { HttpsProxyAgent } from 'https-proxy-agent'
-import { ofetch } from 'ofetch'
+import type { Config } from '@/src/utils/get-config'
+import type { registryItemWithContentSchema } from '@/src/utils/registry/schema'
 import type * as z from 'zod'
-import consola from 'consola'
+import process from 'node:process'
 import {
   registryBaseColorSchema,
   registryIndexSchema,
   registryWithContentSchema,
   stylesSchema,
 } from '@/src/utils/registry/schema'
-import type { registryItemWithContentSchema } from '@/src/utils/registry/schema'
-import type { Config } from '@/src/utils/get-config'
+import consola from 'consola'
+import { HttpsProxyAgent } from 'https-proxy-agent'
+import { ofetch } from 'ofetch'
+import path from 'pathe'
 
 const baseUrl = process.env.COMPONENTS_REGISTRY_URL ?? 'https://www.shadcn-vue.com'
 const agent = process.env.https_proxy
diff --git a/packages/cli/src/utils/transformers/index.ts b/packages/cli/src/utils/transformers/index.ts
index 8e680a17..98ffcd01 100644
--- a/packages/cli/src/utils/transformers/index.ts
+++ b/packages/cli/src/utils/transformers/index.ts
@@ -1,11 +1,11 @@
-import type * as z from 'zod'
-import { transform as metaTransform } from 'vue-metamorph'
 import type { Config } from '@/src/utils/get-config'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
+import type * as z from 'zod'
 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'
 
 export interface TransformOpts {
   filename: string
diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
index 79b90ae9..fc35f8cb 100644
--- a/packages/cli/src/utils/transformers/transform-css-vars.ts
+++ b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -1,7 +1,7 @@
-import type * as z from 'zod'
-import type { CodemodPlugin } from 'vue-metamorph'
-import type { TransformOpts } from '.'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
+import type { CodemodPlugin } from 'vue-metamorph'
+import type * as z from 'zod'
+import type { TransformOpts } from '.'
 
 export function transformCssVars(opts: TransformOpts): CodemodPlugin {
   return {
diff --git a/packages/cli/src/utils/transformers/transform-import.ts b/packages/cli/src/utils/transformers/transform-import.ts
index 3eae709f..ecafa575 100644
--- a/packages/cli/src/utils/transformers/transform-import.ts
+++ b/packages/cli/src/utils/transformers/transform-import.ts
@@ -1,6 +1,5 @@
 import type { CodemodPlugin } from 'vue-metamorph'
 import type { TransformOpts } from '.'
-import type { Config } from '@/src/utils/get-config'
 
 export function transformImport(opts: TransformOpts): CodemodPlugin {
   return {
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
index 937cd4d0..0345652f 100644
--- a/packages/cli/test/commands/init.test.ts
+++ b/packages/cli/test/commands/init.test.ts
@@ -1,6 +1,6 @@
 import fs from 'node:fs'
-import path from 'pathe'
 import { addDependency } from 'nypm'
+import path from 'pathe'
 import { afterEach, expect, it, vi } from 'vitest'
 
 import { runInit } from '../../src/commands/init'
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 b7eda12b..4d3bc6c4 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 { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
 import { useEmitAsProps } from '@/lib/utils'
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
 
 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 f82508fc..12eb7cf3 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 { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
 
 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 bbbd5a31..18df8639 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 { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
-import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 
 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 974f825a..77f4c2d0 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
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn, useEmitAsProps } from '@/lib/utils'
 import {
   AlertDialogContent,
   type AlertDialogContentEmits,
@@ -6,7 +7,6 @@ import {
   AlertDialogOverlay,
   AlertDialogPortal,
 } from 'radix-vue'
-import { cn, useEmitAsProps } from '@/lib/utils'
 
 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 7ff155e6..7fb9eb3b 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
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
 import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from 'radix-vue'
-import { cn } from '@/lib/utils'
 
 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 9b6491f2..7509deb9 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 { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
 
 const props = defineProps<AlertDialogTitleProps & { class?: string }>()
 </script>
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts
index 91d138ae..448d5198 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts
@@ -1,9 +1,9 @@
 export { default as AlertDialog } from './AlertDialog.vue'
-export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
-export { default as AlertDialogContent } from './AlertDialogContent.vue'
-export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
-export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
-export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
-export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
 export { default as AlertDialogAction } from './AlertDialogAction.vue'
 export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue b/packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue
index d721b1ab..9088f838 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { buttonVariants } from '.'
 import { cn } from '@/lib/utils'
+import { buttonVariants } from '.'
 
 interface Props {
   variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
diff --git a/packages/module/playground/components/ui/button/Button.vue b/packages/module/playground/components/ui/button/Button.vue
index 5cfd668a..d3e3786f 100644
--- a/packages/module/playground/components/ui/button/Button.vue
+++ b/packages/module/playground/components/ui/button/Button.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
 import { Primitive, type PrimitiveProps } from 'radix-vue'
 import { type ButtonVariants, buttonVariants } from '.'
-import { cn } from '@/lib/utils'
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
diff --git a/packages/module/playground/components/ui/button/index.ts b/packages/module/playground/components/ui/button/index.ts
index 1b00c326..2ed708eb 100644
--- a/packages/module/playground/components/ui/button/index.ts
+++ b/packages/module/playground/components/ui/button/index.ts
@@ -1,4 +1,4 @@
-import { type VariantProps, cva } from 'class-variance-authority'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 export { default as Button } from './Button.vue'
 
diff --git a/packages/module/playground/components/ui/carousel/Carousel.vue b/packages/module/playground/components/ui/carousel/Carousel.vue
index b6147c27..0a5551f1 100644
--- a/packages/module/playground/components/ui/carousel/Carousel.vue
+++ b/packages/module/playground/components/ui/carousel/Carousel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
+import { useProvideCarousel } from './useCarousel'
 
 const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
   orientation: 'horizontal',
diff --git a/packages/module/playground/components/ui/carousel/CarouselContent.vue b/packages/module/playground/components/ui/carousel/CarouselContent.vue
index f432d015..6b40f14a 100644
--- a/packages/module/playground/components/ui/carousel/CarouselContent.vue
+++ b/packages/module/playground/components/ui/carousel/CarouselContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 defineOptions({
   inheritAttrs: false,
diff --git a/packages/module/playground/components/ui/carousel/CarouselItem.vue b/packages/module/playground/components/ui/carousel/CarouselItem.vue
index 53ea50da..9c168237 100644
--- a/packages/module/playground/components/ui/carousel/CarouselItem.vue
+++ b/packages/module/playground/components/ui/carousel/CarouselItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { WithClassAsProps } from './interface'
-import { useCarousel } from './useCarousel'
 import { cn } from '@/lib/utils'
+import { useCarousel } from './useCarousel'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/packages/module/playground/components/ui/carousel/CarouselNext.vue b/packages/module/playground/components/ui/carousel/CarouselNext.vue
index ca65f8d1..3d73467e 100644
--- a/packages/module/playground/components/ui/carousel/CarouselNext.vue
+++ b/packages/module/playground/components/ui/carousel/CarouselNext.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import { ChevronRight } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/packages/module/playground/components/ui/carousel/CarouselPrevious.vue b/packages/module/playground/components/ui/carousel/CarouselPrevious.vue
index 331522b7..0d5c45b4 100644
--- a/packages/module/playground/components/ui/carousel/CarouselPrevious.vue
+++ b/packages/module/playground/components/ui/carousel/CarouselPrevious.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 import { ChevronLeft } from 'lucide-vue-next'
 import { useCarousel } from './useCarousel'
-import type { WithClassAsProps } from './interface'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
 
 const props = defineProps<WithClassAsProps>()
 
diff --git a/packages/module/playground/components/ui/carousel/index.ts b/packages/module/playground/components/ui/carousel/index.ts
index addfe036..c37ad02d 100644
--- a/packages/module/playground/components/ui/carousel/index.ts
+++ b/packages/module/playground/components/ui/carousel/index.ts
@@ -1,8 +1,8 @@
 export { default as Carousel } from './Carousel.vue'
 export { default as CarouselContent } from './CarouselContent.vue'
 export { default as CarouselItem } from './CarouselItem.vue'
-export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
 export { useCarousel } from './useCarousel'
 
 export type {
diff --git a/packages/module/playground/components/ui/carousel/useCarousel.ts b/packages/module/playground/components/ui/carousel/useCarousel.ts
index 16be25c8..4fb58ddd 100644
--- a/packages/module/playground/components/ui/carousel/useCarousel.ts
+++ b/packages/module/playground/components/ui/carousel/useCarousel.ts
@@ -1,10 +1,10 @@
-import { createInjectionState } from '@vueuse/core'
-import emblaCarouselVue from 'embla-carousel-vue'
-import { onMounted, ref } from 'vue'
 import type {
   EmblaCarouselType as CarouselApi,
 } from 'embla-carousel'
 import type { CarouselEmits, CarouselProps } from './interface'
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
 
 const [useProvideCarousel, useInjectCarousel] = createInjectionState(
   ({
diff --git a/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index fc815348..69934709 100644
--- a/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/packages/module/playground/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
 import {
   DropdownMenuCheckboxItem,
   type DropdownMenuCheckboxItemEmits,
@@ -6,8 +8,6 @@ import {
   DropdownMenuItemIndicator,
   useEmitAsProps,
 } from 'radix-vue'
-import { Check } from 'lucide-vue-next'
-import { cn } from '@/lib/utils'
 
 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 5d59760e..b7d471b1 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 { DropdownMenuPortal } from 'radix-vue'
-
 export { default as DropdownMenu } from './DropdownMenu.vue'
+
 export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { DropdownMenuPortal } from 'radix-vue'
diff --git a/packages/module/test/basic.test.ts b/packages/module/test/basic.test.ts
index 16115dc1..43de8897 100644
--- a/packages/module/test/basic.test.ts
+++ b/packages/module/test/basic.test.ts
@@ -1,6 +1,6 @@
 import { fileURLToPath } from 'node:url'
-import { describe, expect, it } from 'vitest'
 import { $fetch, setup } from '@nuxt/test-utils'
+import { describe, expect, it } from 'vitest'
 
 describe('ssr', async () => {
   await setup({