diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 7432c50a..34d2cd20 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -326,6 +326,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/tabs',
           items: [],
         },
+        {
+          title: 'Tags Input',
+          href: '/docs/components/tags-input',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Textarea',
           href: '/docs/components/textarea',
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index fb2c967a..7cbb2e09 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -2,808 +2,829 @@
 // This file is autogenerated by scripts/build-registry.ts
 // Do not edit this file directly.
 export const Index = {
-  "default": {
-    "AccordionDemo": {
-      name: "AccordionDemo",
-      type: "components:example",
-      registryDependencies: ["accordion"],
-      component: () => import("../src/lib/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AccordionDemo.vue"],
-    },
-    "AlertDemo": {
-      name: "AlertDemo",
-      type: "components:example",
-      registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDemo.vue"],
-    },
-    "AlertDestructiveDemo": {
-      name: "AlertDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDestructiveDemo.vue"],
-    },
-    "AlertDialogDemo": {
-      name: "AlertDialogDemo",
-      type: "components:example",
-      registryDependencies: ["alert-dialog","button"],
-      component: () => import("../src/lib/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AlertDialogDemo.vue"],
-    },
-    "AspectRatioDemo": {
-      name: "AspectRatioDemo",
-      type: "components:example",
-      registryDependencies: ["aspect-ratio"],
-      component: () => import("../src/lib/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AspectRatioDemo.vue"],
-    },
-    "AvatarDemo": {
-      name: "AvatarDemo",
-      type: "components:example",
-      registryDependencies: ["avatar"],
-      component: () => import("../src/lib/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/AvatarDemo.vue"],
-    },
-    "BadgeDemo": {
-      name: "BadgeDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeDemo.vue"],
-    },
-    "BadgeDestructiveDemo": {
-      name: "BadgeDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeDestructiveDemo.vue"],
-    },
-    "BadgeOutlineDemo": {
-      name: "BadgeOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeOutlineDemo.vue"],
-    },
-    "BadgeSecondaryDemo": {
-      name: "BadgeSecondaryDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/BadgeSecondaryDemo.vue"],
-    },
-    "ButtonAsChildDemo": {
-      name: "ButtonAsChildDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonAsChildDemo.vue"],
-    },
-    "ButtonDemo": {
-      name: "ButtonDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonDemo.vue"],
-    },
-    "ButtonDestructiveDemo": {
-      name: "ButtonDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonDestructiveDemo.vue"],
-    },
-    "ButtonGhostDemo": {
-      name: "ButtonGhostDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonGhostDemo.vue"],
-    },
-    "ButtonIconDemo": {
-      name: "ButtonIconDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonIconDemo.vue"],
-    },
-    "ButtonLinkDemo": {
-      name: "ButtonLinkDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonLinkDemo.vue"],
-    },
-    "ButtonLoadingDemo": {
-      name: "ButtonLoadingDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonLoadingDemo.vue"],
-    },
-    "ButtonOutlineDemo": {
-      name: "ButtonOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonOutlineDemo.vue"],
-    },
-    "ButtonSecondaryDemo": {
-      name: "ButtonSecondaryDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonSecondaryDemo.vue"],
-    },
-    "ButtonWithIconDemo": {
-      name: "ButtonWithIconDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ButtonWithIconDemo.vue"],
-    },
-    "CalendarDemo": {
-      name: "CalendarDemo",
-      type: "components:example",
-      registryDependencies: ["calendar"],
-      component: () => import("../src/lib/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CalendarDemo.vue"],
-    },
-    "CardChat": {
-      name: "CardChat",
-      type: "components:example",
-      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
-      component: () => import("../src/lib/registry/default/example/CardChat.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardChat.vue"],
-    },
-    "CardDemo": {
-      name: "CardDemo",
-      type: "components:example",
-      registryDependencies: ["button","card","switch","utils"],
-      component: () => import("../src/lib/registry/default/example/CardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardDemo.vue"],
-    },
-    "CardFormDemo": {
-      name: "CardFormDemo",
-      type: "components:example",
-      registryDependencies: ["card","select","input","label","button"],
-      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"],
-      component: () => import("../src/lib/registry/default/example/CardStats.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardStats.vue"],
-    },
-    "CardWithForm": {
-      name: "CardWithForm",
-      type: "components:example",
-      registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CardWithForm.vue"],
-    },
-    "CarouselApi": {
-      name: "CarouselApi",
-      type: "components:example",
-      registryDependencies: ["carousel","card"],
-      component: () => import("../src/lib/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselApi.vue"],
-    },
-    "CarouselDemo": {
-      name: "CarouselDemo",
-      type: "components:example",
-      registryDependencies: ["carousel","card"],
-      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"],
-      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"],
-      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"],
-      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"],
-      component: () => import("../src/lib/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CarouselSpacing.vue"],
-    },
-    "CheckboxDemo": {
-      name: "CheckboxDemo",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxDemo.vue"],
-    },
-    "CheckboxDisabled": {
-      name: "CheckboxDisabled",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxDisabled.vue"],
-    },
-    "CheckboxFormMultiple": {
-      name: "CheckboxFormMultiple",
-      type: "components:example",
-      registryDependencies: ["button","form","checkbox","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"],
-      component: () => import("../src/lib/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxFormSingle.vue"],
-    },
-    "CheckboxWithText": {
-      name: "CheckboxWithText",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CheckboxWithText.vue"],
-    },
-    "CollapsibleDemo": {
-      name: "CollapsibleDemo",
-      type: "components:example",
-      registryDependencies: ["button","collapsible"],
-      component: () => import("../src/lib/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CollapsibleDemo.vue"],
-    },
-    "ComboboxDemo": {
-      name: "ComboboxDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
-      component: () => import("../src/lib/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxDemo.vue"],
-    },
-    "ComboboxDropdownMenu": {
-      name: "ComboboxDropdownMenu",
-      type: "components:example",
-      registryDependencies: ["button","command","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxDropdownMenu.vue"],
-    },
-    "ComboboxForm": {
-      name: "ComboboxForm",
-      type: "components:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
-      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"],
-      component: () => import("../src/lib/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ComboboxPopover.vue"],
-    },
-    "CommandDemo": {
-      name: "CommandDemo",
-      type: "components:example",
-      registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CommandDemo.vue"],
-    },
-    "CommandDialogDemo": {
-      name: "CommandDialogDemo",
-      type: "components:example",
-      registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/CommandDialogDemo.vue"],
-    },
-    "ContextMenuDemo": {
-      name: "ContextMenuDemo",
-      type: "components:example",
-      registryDependencies: ["context-menu"],
-      component: () => import("../src/lib/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ContextMenuDemo.vue"],
-    },
-    "DataTableColumnPinningDemo": {
-      name: "DataTableColumnPinningDemo",
-      type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableColumnPinningDemo.vue"],
-    },
-    "DataTableDemo": {
-      name: "DataTableDemo",
-      type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableDemo.vue"],
-    },
-    "DataTableDemoColumn": {
-      name: "DataTableDemoColumn",
-      type: "components:example",
-      registryDependencies: ["dropdown-menu","button"],
-      component: () => import("../src/lib/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DataTableDemoColumn.vue"],
-    },
-    "DatePickerDemo": {
-      name: "DatePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      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: ["utils","button","calendar","form","popover","toast"],
-      component: () => import("../src/lib/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerForm.vue"],
-    },
-    "DatePickerWithPresets": {
-      name: "DatePickerWithPresets",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover","select"],
-      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: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DatePickerWithRange.vue"],
-    },
-    "DateTimePickerDemo": {
-      name: "DateTimePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/default/example/DateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DateTimePickerDemo.vue"],
-    },
-    "DialogCustomCloseButton": {
-      name: "DialogCustomCloseButton",
-      type: "components:example",
-      registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogCustomCloseButton.vue"],
-    },
-    "DialogDemo": {
-      name: "DialogDemo",
-      type: "components:example",
-      registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DialogDemo.vue"],
-    },
-    "DropdownMenuDemo": {
-      name: "DropdownMenuDemo",
-      type: "components:example",
-      registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/DropdownMenuDemo.vue"],
-    },
-    "HoverCardDemo": {
-      name: "HoverCardDemo",
-      type: "components:example",
-      registryDependencies: ["avatar","button","hover-card"],
-      component: () => import("../src/lib/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/HoverCardDemo.vue"],
-    },
-    "InputDemo": {
-      name: "InputDemo",
-      type: "components:example",
-      registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/default/example/InputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputDemo.vue"],
-    },
-    "InputDisabled": {
-      name: "InputDisabled",
-      type: "components:example",
-      registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputDisabled.vue"],
-    },
-    "InputFile": {
-      name: "InputFile",
-      type: "components:example",
-      registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/default/example/InputFile.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputFile.vue"],
-    },
-    "InputForm": {
-      name: "InputForm",
-      type: "components:example",
-      registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/default/example/InputForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputForm.vue"],
-    },
-    "InputFormAutoAnimate": {
-      name: "InputFormAutoAnimate",
-      type: "components:example",
-      registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputFormAutoAnimate.vue"],
-    },
-    "InputWithButton": {
-      name: "InputWithButton",
-      type: "components:example",
-      registryDependencies: ["input","button"],
-      component: () => import("../src/lib/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputWithButton.vue"],
-    },
-    "InputWithLabel": {
-      name: "InputWithLabel",
-      type: "components:example",
-      registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/InputWithLabel.vue"],
-    },
-    "LabelDemo": {
-      name: "LabelDemo",
-      type: "components:example",
-      registryDependencies: ["checkbox","label"],
-      component: () => import("../src/lib/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/LabelDemo.vue"],
-    },
-    "MenubarDemo": {
-      name: "MenubarDemo",
-      type: "components:example",
-      registryDependencies: ["menubar"],
-      component: () => import("../src/lib/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/MenubarDemo.vue"],
-    },
-    "NavigationMenuDemo": {
-      name: "NavigationMenuDemo",
-      type: "components:example",
-      registryDependencies: ["navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemo.vue"],
-    },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/default/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/NavigationMenuDemoItem.vue"],
-    },
-    "PaginationDemo": {
-      name: "PaginationDemo",
-      type: "components:example",
-      registryDependencies: ["pagination","button"],
-      component: () => import("../src/lib/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PaginationDemo.vue"],
-    },
-    "PinInputDemo": {
-      name: "PinInputDemo",
-      type: "components:example",
-      registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputDemo.vue"],
-    },
-    "PinInputFormDemo": {
-      name: "PinInputFormDemo",
-      type: "components:example",
-      registryDependencies: ["pin-input","button","form","toast"],
-      component: () => import("../src/lib/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PinInputFormDemo.vue"],
-    },
-    "PopoverDemo": {
-      name: "PopoverDemo",
-      type: "components:example",
-      registryDependencies: ["popover","button","label","input"],
-      component: () => import("../src/lib/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/PopoverDemo.vue"],
-    },
-    "ProgressDemo": {
-      name: "ProgressDemo",
-      type: "components:example",
-      registryDependencies: ["progress"],
-      component: () => import("../src/lib/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ProgressDemo.vue"],
-    },
-    "RadioGroupDemo": {
-      name: "RadioGroupDemo",
-      type: "components:example",
-      registryDependencies: ["label","radio-group"],
-      component: () => import("../src/lib/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RadioGroupDemo.vue"],
-    },
-    "RadioGroupForm": {
-      name: "RadioGroupForm",
-      type: "components:example",
-      registryDependencies: ["button","form","radio-group","toast"],
-      component: () => import("../src/lib/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RadioGroupForm.vue"],
-    },
-    "RangePickerWithSlot": {
-      name: "RangePickerWithSlot",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/default/example/RangePickerWithSlot.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/RangePickerWithSlot.vue"],
-    },
-    "ScrollAreaDemo": {
-      name: "ScrollAreaDemo",
-      type: "components:example",
-      registryDependencies: ["scroll-area","separator"],
-      component: () => import("../src/lib/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ScrollAreaDemo.vue"],
-    },
-    "ScrollAreaHorizontalDemo": {
-      name: "ScrollAreaHorizontalDemo",
-      type: "components:example",
-      registryDependencies: ["scroll-area"],
-      component: () => import("../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue"],
-    },
-    "SelectDemo": {
-      name: "SelectDemo",
-      type: "components:example",
-      registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SelectDemo.vue"],
-    },
-    "SelectForm": {
-      name: "SelectForm",
-      type: "components:example",
-      registryDependencies: ["button","form","select","toast"],
-      component: () => import("../src/lib/registry/default/example/SelectForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SelectForm.vue"],
-    },
-    "SeparatorDemo": {
-      name: "SeparatorDemo",
-      type: "components:example",
-      registryDependencies: ["separator"],
-      component: () => import("../src/lib/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SeparatorDemo.vue"],
-    },
-    "SheetDemo": {
-      name: "SheetDemo",
-      type: "components:example",
-      registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SheetDemo.vue"],
-    },
-    "SheetSideDemo": {
-      name: "SheetSideDemo",
-      type: "components:example",
-      registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SheetSideDemo.vue"],
-    },
-    "SkeletonDemo": {
-      name: "SkeletonDemo",
-      type: "components:example",
-      registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SkeletonDemo.vue"],
-    },
-    "SliderDemo": {
-      name: "SliderDemo",
-      type: "components:example",
-      registryDependencies: ["utils","slider"],
-      component: () => import("../src/lib/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SliderDemo.vue"],
-    },
-    "SonnerDemo": {
-      name: "SonnerDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SonnerDemo.vue"],
-    },
-    "SwitchDemo": {
-      name: "SwitchDemo",
-      type: "components:example",
-      registryDependencies: ["label","switch"],
-      component: () => import("../src/lib/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SwitchDemo.vue"],
-    },
-    "SwitchForm": {
-      name: "SwitchForm",
-      type: "components:example",
-      registryDependencies: ["button","form","switch","toast"],
-      component: () => import("../src/lib/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/SwitchForm.vue"],
-    },
-    "TableDemo": {
-      name: "TableDemo",
-      type: "components:example",
-      registryDependencies: ["table"],
-      component: () => import("../src/lib/registry/default/example/TableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TableDemo.vue"],
-    },
-    "TabsDemo": {
-      name: "TabsDemo",
-      type: "components:example",
-      registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TabsDemo.vue"],
-    },
-    "TextareaDemo": {
-      name: "TextareaDemo",
-      type: "components:example",
-      registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaDemo.vue"],
-    },
-    "TextareaDisabled": {
-      name: "TextareaDisabled",
-      type: "components:example",
-      registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaDisabled.vue"],
-    },
-    "TextareaForm": {
-      name: "TextareaForm",
-      type: "components:example",
-      registryDependencies: ["button","form","textarea","toast"],
-      component: () => import("../src/lib/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaForm.vue"],
-    },
-    "TextareaWithButton": {
-      name: "TextareaWithButton",
-      type: "components:example",
-      registryDependencies: ["textarea","button"],
-      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"],
-      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"],
-      component: () => import("../src/lib/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TextareaWithText.vue"],
-    },
-    "ToastDemo": {
-      name: "ToastDemo",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastDemo.vue"],
-    },
-    "ToastDestructive": {
-      name: "ToastDestructive",
-      type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
-      component: () => import("../src/lib/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastDestructive.vue"],
-    },
-    "ToastSimple": {
-      name: "ToastSimple",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastSimple.vue"],
-    },
-    "ToastWithAction": {
-      name: "ToastWithAction",
-      type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
-      component: () => import("../src/lib/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastWithAction.vue"],
-    },
-    "ToastWithTitle": {
-      name: "ToastWithTitle",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToastWithTitle.vue"],
-    },
-    "ToggleDemo": {
-      name: "ToggleDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleDemo.vue"],
-    },
-    "ToggleDisabledDemo": {
-      name: "ToggleDisabledDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleDisabledDemo.vue"],
-    },
-    "ToggleGroupDemo": {
-      name: "ToggleGroupDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupDemo.vue"],
-    },
-    "ToggleGroupDisabledDemo": {
-      name: "ToggleGroupDisabledDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue"],
-    },
-    "ToggleGroupLargeDemo": {
-      name: "ToggleGroupLargeDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupLargeDemo.vue"],
-    },
-    "ToggleGroupOutlineDemo": {
-      name: "ToggleGroupOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue"],
-    },
-    "ToggleGroupSingleDemo": {
-      name: "ToggleGroupSingleDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupSingleDemo.vue"],
-    },
-    "ToggleGroupSmallDemo": {
-      name: "ToggleGroupSmallDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleGroupSmallDemo.vue"],
-    },
-    "ToggleItalicDemo": {
-      name: "ToggleItalicDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleItalicDemo.vue"],
-    },
-    "ToggleItalicWithTextDemo": {
-      name: "ToggleItalicWithTextDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue"],
-    },
-    "ToggleLargeDemo": {
-      name: "ToggleLargeDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleLargeDemo.vue"],
-    },
-    "ToggleSmallDemo": {
-      name: "ToggleSmallDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/ToggleSmallDemo.vue"],
-    },
-    "TooltipDemo": {
-      name: "TooltipDemo",
-      type: "components:example",
-      registryDependencies: ["button","tooltip"],
-      component: () => import("../src/lib/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TooltipDemo.vue"],
-    },
-    "TypographyBlockquote": {
-      name: "TypographyBlockquote",
-      type: "components:example",
+  'default': {
+    AccordionDemo: {
+      name: 'AccordionDemo',
+      type: 'components:example',
+      registryDependencies: ['accordion'],
+      component: () => import('../src/lib/registry/default/example/AccordionDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AccordionDemo.vue'],
+    },
+    AlertDemo: {
+      name: 'AlertDemo',
+      type: 'components:example',
+      registryDependencies: ['alert'],
+      component: () => import('../src/lib/registry/default/example/AlertDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AlertDemo.vue'],
+    },
+    AlertDestructiveDemo: {
+      name: 'AlertDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['alert'],
+      component: () => import('../src/lib/registry/default/example/AlertDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AlertDestructiveDemo.vue'],
+    },
+    AlertDialogDemo: {
+      name: 'AlertDialogDemo',
+      type: 'components:example',
+      registryDependencies: ['alert-dialog', 'button'],
+      component: () => import('../src/lib/registry/default/example/AlertDialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AlertDialogDemo.vue'],
+    },
+    AspectRatioDemo: {
+      name: 'AspectRatioDemo',
+      type: 'components:example',
+      registryDependencies: ['aspect-ratio'],
+      component: () => import('../src/lib/registry/default/example/AspectRatioDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AspectRatioDemo.vue'],
+    },
+    AvatarDemo: {
+      name: 'AvatarDemo',
+      type: 'components:example',
+      registryDependencies: ['avatar'],
+      component: () => import('../src/lib/registry/default/example/AvatarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/AvatarDemo.vue'],
+    },
+    BadgeDemo: {
+      name: 'BadgeDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeDemo.vue'],
+    },
+    BadgeDestructiveDemo: {
+      name: 'BadgeDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeDestructiveDemo.vue'],
+    },
+    BadgeOutlineDemo: {
+      name: 'BadgeOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeOutlineDemo.vue'],
+    },
+    BadgeSecondaryDemo: {
+      name: 'BadgeSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/default/example/BadgeSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/BadgeSecondaryDemo.vue'],
+    },
+    ButtonAsChildDemo: {
+      name: 'ButtonAsChildDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonAsChildDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonAsChildDemo.vue'],
+    },
+    ButtonDemo: {
+      name: 'ButtonDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonDemo.vue'],
+    },
+    ButtonDestructiveDemo: {
+      name: 'ButtonDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonDestructiveDemo.vue'],
+    },
+    ButtonGhostDemo: {
+      name: 'ButtonGhostDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonGhostDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonGhostDemo.vue'],
+    },
+    ButtonIconDemo: {
+      name: 'ButtonIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonIconDemo.vue'],
+    },
+    ButtonLinkDemo: {
+      name: 'ButtonLinkDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonLinkDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonLinkDemo.vue'],
+    },
+    ButtonLoadingDemo: {
+      name: 'ButtonLoadingDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonLoadingDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonLoadingDemo.vue'],
+    },
+    ButtonOutlineDemo: {
+      name: 'ButtonOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonOutlineDemo.vue'],
+    },
+    ButtonSecondaryDemo: {
+      name: 'ButtonSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonSecondaryDemo.vue'],
+    },
+    ButtonWithIconDemo: {
+      name: 'ButtonWithIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/ButtonWithIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ButtonWithIconDemo.vue'],
+    },
+    CalendarDemo: {
+      name: 'CalendarDemo',
+      type: 'components:example',
+      registryDependencies: ['calendar'],
+      component: () => import('../src/lib/registry/default/example/CalendarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CalendarDemo.vue'],
+    },
+    CardChat: {
+      name: 'CardChat',
+      type: 'components:example',
+      registryDependencies: ['card', 'dialog', 'command', 'avatar', 'tooltip', 'button', 'input', 'utils'],
+      component: () => import('../src/lib/registry/default/example/CardChat.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardChat.vue'],
+    },
+    CardDemo: {
+      name: 'CardDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'switch', 'utils'],
+      component: () => import('../src/lib/registry/default/example/CardDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardDemo.vue'],
+    },
+    CardFormDemo: {
+      name: 'CardFormDemo',
+      type: 'components:example',
+      registryDependencies: ['card', 'select', 'input', 'label', 'button'],
+      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'],
+      component: () => import('../src/lib/registry/default/example/CardStats.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardStats.vue'],
+    },
+    CardWithForm: {
+      name: 'CardWithForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'input', 'label', 'select'],
+      component: () => import('../src/lib/registry/default/example/CardWithForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CardWithForm.vue'],
+    },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/default/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselApi.vue'],
+    },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      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'],
+      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'],
+      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'],
+      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'],
+      component: () => import('../src/lib/registry/default/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CarouselSpacing.vue'],
+    },
+    CheckboxDemo: {
+      name: 'CheckboxDemo',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/default/example/CheckboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CheckboxDemo.vue'],
+    },
+    CheckboxDisabled: {
+      name: 'CheckboxDisabled',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/default/example/CheckboxDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CheckboxDisabled.vue'],
+    },
+    CheckboxFormMultiple: {
+      name: 'CheckboxFormMultiple',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'checkbox', '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'],
+      component: () => import('../src/lib/registry/default/example/CheckboxFormSingle.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CheckboxFormSingle.vue'],
+    },
+    CheckboxWithText: {
+      name: 'CheckboxWithText',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/default/example/CheckboxWithText.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CheckboxWithText.vue'],
+    },
+    CollapsibleDemo: {
+      name: 'CollapsibleDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'collapsible'],
+      component: () => import('../src/lib/registry/default/example/CollapsibleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CollapsibleDemo.vue'],
+    },
+    ComboboxDemo: {
+      name: 'ComboboxDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'popover'],
+      component: () => import('../src/lib/registry/default/example/ComboboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ComboboxDemo.vue'],
+    },
+    ComboboxDropdownMenu: {
+      name: 'ComboboxDropdownMenu',
+      type: 'components:example',
+      registryDependencies: ['button', 'command', 'dropdown-menu'],
+      component: () => import('../src/lib/registry/default/example/ComboboxDropdownMenu.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ComboboxDropdownMenu.vue'],
+    },
+    ComboboxForm: {
+      name: 'ComboboxForm',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'form', 'popover', 'toast'],
+      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'],
+      component: () => import('../src/lib/registry/default/example/ComboboxPopover.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ComboboxPopover.vue'],
+    },
+    CommandDemo: {
+      name: 'CommandDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/default/example/CommandDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CommandDemo.vue'],
+    },
+    CommandDialogDemo: {
+      name: 'CommandDialogDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/default/example/CommandDialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/CommandDialogDemo.vue'],
+    },
+    ContextMenuDemo: {
+      name: 'ContextMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['context-menu'],
+      component: () => import('../src/lib/registry/default/example/ContextMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ContextMenuDemo.vue'],
+    },
+    DataTableColumnPinningDemo: {
+      name: 'DataTableColumnPinningDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/default/example/DataTableColumnPinningDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTableColumnPinningDemo.vue'],
+    },
+    DataTableDemo: {
+      name: 'DataTableDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/default/example/DataTableDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTableDemo.vue'],
+    },
+    DataTableDemoColumn: {
+      name: 'DataTableDemoColumn',
+      type: 'components:example',
+      registryDependencies: ['dropdown-menu', 'button'],
+      component: () => import('../src/lib/registry/default/example/DataTableDemoColumn.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DataTableDemoColumn.vue'],
+    },
+    DatePickerDemo: {
+      name: 'DatePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      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: ['utils', 'button', 'calendar', 'form', 'popover', 'toast'],
+      component: () => import('../src/lib/registry/default/example/DatePickerForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DatePickerForm.vue'],
+    },
+    DatePickerWithPresets: {
+      name: 'DatePickerWithPresets',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover', 'select'],
+      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: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DatePickerWithRange.vue'],
+    },
+    DateTimePickerDemo: {
+      name: 'DateTimePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/DateTimePickerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DateTimePickerDemo.vue'],
+    },
+    DialogCustomCloseButton: {
+      name: 'DialogCustomCloseButton',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/default/example/DialogCustomCloseButton.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DialogCustomCloseButton.vue'],
+    },
+    DialogDemo: {
+      name: 'DialogDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/default/example/DialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DialogDemo.vue'],
+    },
+    DropdownMenuDemo: {
+      name: 'DropdownMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dropdown-menu'],
+      component: () => import('../src/lib/registry/default/example/DropdownMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/DropdownMenuDemo.vue'],
+    },
+    HoverCardDemo: {
+      name: 'HoverCardDemo',
+      type: 'components:example',
+      registryDependencies: ['avatar', 'button', 'hover-card'],
+      component: () => import('../src/lib/registry/default/example/HoverCardDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/HoverCardDemo.vue'],
+    },
+    InputDemo: {
+      name: 'InputDemo',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/default/example/InputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputDemo.vue'],
+    },
+    InputDisabled: {
+      name: 'InputDisabled',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/default/example/InputDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputDisabled.vue'],
+    },
+    InputFile: {
+      name: 'InputFile',
+      type: 'components:example',
+      registryDependencies: ['input', 'label'],
+      component: () => import('../src/lib/registry/default/example/InputFile.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputFile.vue'],
+    },
+    InputForm: {
+      name: 'InputForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input', 'toast'],
+      component: () => import('../src/lib/registry/default/example/InputForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputForm.vue'],
+    },
+    InputFormAutoAnimate: {
+      name: 'InputFormAutoAnimate',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input', 'toast'],
+      component: () => import('../src/lib/registry/default/example/InputFormAutoAnimate.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputFormAutoAnimate.vue'],
+    },
+    InputWithButton: {
+      name: 'InputWithButton',
+      type: 'components:example',
+      registryDependencies: ['input', 'button'],
+      component: () => import('../src/lib/registry/default/example/InputWithButton.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputWithButton.vue'],
+    },
+    InputWithIcon: {
+      name: 'InputWithIcon',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/default/example/InputWithIcon.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputWithIcon.vue'],
+    },
+    InputWithLabel: {
+      name: 'InputWithLabel',
+      type: 'components:example',
+      registryDependencies: ['input', 'label'],
+      component: () => import('../src/lib/registry/default/example/InputWithLabel.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/InputWithLabel.vue'],
+    },
+    LabelDemo: {
+      name: 'LabelDemo',
+      type: 'components:example',
+      registryDependencies: ['checkbox', 'label'],
+      component: () => import('../src/lib/registry/default/example/LabelDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/LabelDemo.vue'],
+    },
+    MenubarDemo: {
+      name: 'MenubarDemo',
+      type: 'components:example',
+      registryDependencies: ['menubar'],
+      component: () => import('../src/lib/registry/default/example/MenubarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/MenubarDemo.vue'],
+    },
+    NavigationMenuDemo: {
+      name: 'NavigationMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['navigation-menu'],
+      component: () => import('../src/lib/registry/default/example/NavigationMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/NavigationMenuDemo.vue'],
+    },
+    NavigationMenuDemoItem: {
+      name: 'NavigationMenuDemoItem',
+      type: 'components:example',
+      registryDependencies: ['utils', 'navigation-menu'],
+      component: () => import('../src/lib/registry/default/example/NavigationMenuDemoItem.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/NavigationMenuDemoItem.vue'],
+    },
+    PaginationDemo: {
+      name: 'PaginationDemo',
+      type: 'components:example',
+      registryDependencies: ['pagination', 'button'],
+      component: () => import('../src/lib/registry/default/example/PaginationDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PaginationDemo.vue'],
+    },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/default/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/default/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PinInputFormDemo.vue'],
+    },
+    PopoverDemo: {
+      name: 'PopoverDemo',
+      type: 'components:example',
+      registryDependencies: ['popover', 'button', 'label', 'input'],
+      component: () => import('../src/lib/registry/default/example/PopoverDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/PopoverDemo.vue'],
+    },
+    ProgressDemo: {
+      name: 'ProgressDemo',
+      type: 'components:example',
+      registryDependencies: ['progress'],
+      component: () => import('../src/lib/registry/default/example/ProgressDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ProgressDemo.vue'],
+    },
+    RadioGroupDemo: {
+      name: 'RadioGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['label', 'radio-group'],
+      component: () => import('../src/lib/registry/default/example/RadioGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/RadioGroupDemo.vue'],
+    },
+    RadioGroupForm: {
+      name: 'RadioGroupForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'radio-group', 'toast'],
+      component: () => import('../src/lib/registry/default/example/RadioGroupForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/RadioGroupForm.vue'],
+    },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/default/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/RangePickerWithSlot.vue'],
+    },
+    ScrollAreaDemo: {
+      name: 'ScrollAreaDemo',
+      type: 'components:example',
+      registryDependencies: ['scroll-area', 'separator'],
+      component: () => import('../src/lib/registry/default/example/ScrollAreaDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ScrollAreaDemo.vue'],
+    },
+    ScrollAreaHorizontalDemo: {
+      name: 'ScrollAreaHorizontalDemo',
+      type: 'components:example',
+      registryDependencies: ['scroll-area'],
+      component: () => import('../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue'],
+    },
+    SelectDemo: {
+      name: 'SelectDemo',
+      type: 'components:example',
+      registryDependencies: ['select'],
+      component: () => import('../src/lib/registry/default/example/SelectDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SelectDemo.vue'],
+    },
+    SelectForm: {
+      name: 'SelectForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'select', 'toast'],
+      component: () => import('../src/lib/registry/default/example/SelectForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SelectForm.vue'],
+    },
+    SeparatorDemo: {
+      name: 'SeparatorDemo',
+      type: 'components:example',
+      registryDependencies: ['separator'],
+      component: () => import('../src/lib/registry/default/example/SeparatorDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SeparatorDemo.vue'],
+    },
+    SheetDemo: {
+      name: 'SheetDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'input', 'label', 'sheet'],
+      component: () => import('../src/lib/registry/default/example/SheetDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SheetDemo.vue'],
+    },
+    SheetSideDemo: {
+      name: 'SheetSideDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'input', 'label', 'sheet'],
+      component: () => import('../src/lib/registry/default/example/SheetSideDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SheetSideDemo.vue'],
+    },
+    SkeletonDemo: {
+      name: 'SkeletonDemo',
+      type: 'components:example',
+      registryDependencies: ['skeleton'],
+      component: () => import('../src/lib/registry/default/example/SkeletonDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SkeletonDemo.vue'],
+    },
+    SliderDemo: {
+      name: 'SliderDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'slider'],
+      component: () => import('../src/lib/registry/default/example/SliderDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SliderDemo.vue'],
+    },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/default/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SonnerDemo.vue'],
+    },
+    SwitchDemo: {
+      name: 'SwitchDemo',
+      type: 'components:example',
+      registryDependencies: ['label', 'switch'],
+      component: () => import('../src/lib/registry/default/example/SwitchDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SwitchDemo.vue'],
+    },
+    SwitchForm: {
+      name: 'SwitchForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'switch', 'toast'],
+      component: () => import('../src/lib/registry/default/example/SwitchForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/SwitchForm.vue'],
+    },
+    TableDemo: {
+      name: 'TableDemo',
+      type: 'components:example',
+      registryDependencies: ['table'],
+      component: () => import('../src/lib/registry/default/example/TableDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TableDemo.vue'],
+    },
+    TabsDemo: {
+      name: 'TabsDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'input', 'label', 'tabs'],
+      component: () => import('../src/lib/registry/default/example/TabsDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TabsDemo.vue'],
+    },
+    TagsInputComboboxDemo: {
+      name: 'TagsInputComboboxDemo',
+      type: 'components:example',
+      registryDependencies: ['command', 'tags-input'],
+      component: () => import('../src/lib/registry/default/example/TagsInputComboboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TagsInputComboboxDemo.vue'],
+    },
+    TagsInputDemo: {
+      name: 'TagsInputDemo',
+      type: 'components:example',
+      registryDependencies: ['tags-input'],
+      component: () => import('../src/lib/registry/default/example/TagsInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TagsInputDemo.vue'],
+    },
+    TextareaDemo: {
+      name: 'TextareaDemo',
+      type: 'components:example',
+      registryDependencies: ['textarea'],
+      component: () => import('../src/lib/registry/default/example/TextareaDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TextareaDemo.vue'],
+    },
+    TextareaDisabled: {
+      name: 'TextareaDisabled',
+      type: 'components:example',
+      registryDependencies: ['textarea'],
+      component: () => import('../src/lib/registry/default/example/TextareaDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TextareaDisabled.vue'],
+    },
+    TextareaForm: {
+      name: 'TextareaForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'textarea', 'toast'],
+      component: () => import('../src/lib/registry/default/example/TextareaForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TextareaForm.vue'],
+    },
+    TextareaWithButton: {
+      name: 'TextareaWithButton',
+      type: 'components:example',
+      registryDependencies: ['textarea', 'button'],
+      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'],
+      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'],
+      component: () => import('../src/lib/registry/default/example/TextareaWithText.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TextareaWithText.vue'],
+    },
+    ToastDemo: {
+      name: 'ToastDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/default/example/ToastDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToastDemo.vue'],
+    },
+    ToastDestructive: {
+      name: 'ToastDestructive',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast', 'toast'],
+      component: () => import('../src/lib/registry/default/example/ToastDestructive.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToastDestructive.vue'],
+    },
+    ToastSimple: {
+      name: 'ToastSimple',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/default/example/ToastSimple.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToastSimple.vue'],
+    },
+    ToastWithAction: {
+      name: 'ToastWithAction',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast', 'toast'],
+      component: () => import('../src/lib/registry/default/example/ToastWithAction.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToastWithAction.vue'],
+    },
+    ToastWithTitle: {
+      name: 'ToastWithTitle',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/default/example/ToastWithTitle.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToastWithTitle.vue'],
+    },
+    ToggleDemo: {
+      name: 'ToggleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleDemo.vue'],
+    },
+    ToggleDisabledDemo: {
+      name: 'ToggleDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleDisabledDemo.vue'],
+    },
+    ToggleGroupDemo: {
+      name: 'ToggleGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupDemo.vue'],
+    },
+    ToggleGroupDisabledDemo: {
+      name: 'ToggleGroupDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupDisabledDemo.vue'],
+    },
+    ToggleGroupLargeDemo: {
+      name: 'ToggleGroupLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupLargeDemo.vue'],
+    },
+    ToggleGroupOutlineDemo: {
+      name: 'ToggleGroupOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupOutlineDemo.vue'],
+    },
+    ToggleGroupSingleDemo: {
+      name: 'ToggleGroupSingleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupSingleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupSingleDemo.vue'],
+    },
+    ToggleGroupSmallDemo: {
+      name: 'ToggleGroupSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/default/example/ToggleGroupSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleGroupSmallDemo.vue'],
+    },
+    ToggleItalicDemo: {
+      name: 'ToggleItalicDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicDemo.vue'],
+    },
+    ToggleItalicWithTextDemo: {
+      name: 'ToggleItalicWithTextDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleItalicWithTextDemo.vue'],
+    },
+    ToggleLargeDemo: {
+      name: 'ToggleLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleLargeDemo.vue'],
+    },
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/default/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/ToggleSmallDemo.vue'],
+    },
+    TooltipDemo: {
+      name: 'TooltipDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'tooltip'],
+      component: () => import('../src/lib/registry/default/example/TooltipDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TooltipDemo.vue'],
+    },
+    TypographyBlockquote: {
+      name: 'TypographyBlockquote',
+      type: 'components:example',
       registryDependencies: [],
       component: () => import("../src/lib/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TypographyBlockquote.vue"],
@@ -896,832 +917,854 @@ export const Index = {
       name: "TypographyTable",
       type: "components:example",
       registryDependencies: [],
-      component: () => import("../src/lib/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/TypographyTable.vue"],
-    },
-    "ActivityGoal": {
-      name: "ActivityGoal",
-      type: "components:example",
-      registryDependencies: ["button","card","themes","config"],
-      component: () => import("../src/lib/registry/default/example/Cards/ActivityGoal.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/ActivityGoal.vue"],
-    },
-    "DataTable": {
-      name: "DataTable",
-      type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","card","utils"],
-      component: () => import("../src/lib/registry/default/example/Cards/DataTable.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/DataTable.vue"],
-    },
-    "Metric": {
-      name: "Metric",
-      type: "components:example",
-      registryDependencies: ["card","config"],
-      component: () => import("../src/lib/registry/default/example/Cards/Metric.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/example/Cards/Metric.vue"],
-    },
-  },  "new-york": {
-    "AccordionDemo": {
-      name: "AccordionDemo",
-      type: "components:example",
-      registryDependencies: ["accordion"],
-      component: () => import("../src/lib/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AccordionDemo.vue"],
-    },
-    "AlertDemo": {
-      name: "AlertDemo",
-      type: "components:example",
-      registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDemo.vue"],
-    },
-    "AlertDestructiveDemo": {
-      name: "AlertDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["alert"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDestructiveDemo.vue"],
-    },
-    "AlertDialogDemo": {
-      name: "AlertDialogDemo",
-      type: "components:example",
-      registryDependencies: ["alert-dialog","button"],
-      component: () => import("../src/lib/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AlertDialogDemo.vue"],
-    },
-    "AspectRatioDemo": {
-      name: "AspectRatioDemo",
-      type: "components:example",
-      registryDependencies: ["aspect-ratio"],
-      component: () => import("../src/lib/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AspectRatioDemo.vue"],
-    },
-    "AvatarDemo": {
-      name: "AvatarDemo",
-      type: "components:example",
-      registryDependencies: ["avatar"],
-      component: () => import("../src/lib/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/AvatarDemo.vue"],
-    },
-    "BadgeDemo": {
-      name: "BadgeDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeDemo.vue"],
-    },
-    "BadgeDestructiveDemo": {
-      name: "BadgeDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue"],
-    },
-    "BadgeOutlineDemo": {
-      name: "BadgeOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeOutlineDemo.vue"],
-    },
-    "BadgeSecondaryDemo": {
-      name: "BadgeSecondaryDemo",
-      type: "components:example",
-      registryDependencies: ["badge"],
-      component: () => import("../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue"],
-    },
-    "ButtonAsChildDemo": {
-      name: "ButtonAsChildDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonAsChildDemo.vue"],
-    },
-    "ButtonDemo": {
-      name: "ButtonDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonDemo.vue"],
-    },
-    "ButtonDestructiveDemo": {
-      name: "ButtonDestructiveDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue"],
-    },
-    "ButtonGhostDemo": {
-      name: "ButtonGhostDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonGhostDemo.vue"],
-    },
-    "ButtonIconDemo": {
-      name: "ButtonIconDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonIconDemo.vue"],
-    },
-    "ButtonLinkDemo": {
-      name: "ButtonLinkDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonLinkDemo.vue"],
-    },
-    "ButtonLoadingDemo": {
-      name: "ButtonLoadingDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonLoadingDemo.vue"],
-    },
-    "ButtonOutlineDemo": {
-      name: "ButtonOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonOutlineDemo.vue"],
-    },
-    "ButtonSecondaryDemo": {
-      name: "ButtonSecondaryDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue"],
-    },
-    "ButtonWithIconDemo": {
-      name: "ButtonWithIconDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ButtonWithIconDemo.vue"],
-    },
-    "CalendarDemo": {
-      name: "CalendarDemo",
-      type: "components:example",
-      registryDependencies: ["calendar"],
-      component: () => import("../src/lib/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CalendarDemo.vue"],
-    },
-    "CardChat": {
-      name: "CardChat",
-      type: "components:example",
-      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardChat.vue"],
-    },
-    "CardDemo": {
-      name: "CardDemo",
-      type: "components:example",
-      registryDependencies: ["button","card","switch","utils"],
-      component: () => import("../src/lib/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardDemo.vue"],
-    },
-    "CardFormDemo": {
-      name: "CardFormDemo",
-      type: "components:example",
-      registryDependencies: ["card","select","input","label","button"],
-      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"],
-      component: () => import("../src/lib/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardStats.vue"],
-    },
-    "CardWithForm": {
-      name: "CardWithForm",
-      type: "components:example",
-      registryDependencies: ["button","card","input","label","select"],
-      component: () => import("../src/lib/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CardWithForm.vue"],
-    },
-    "CarouselApi": {
-      name: "CarouselApi",
-      type: "components:example",
-      registryDependencies: ["carousel","card"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselApi.vue"],
-    },
-    "CarouselDemo": {
-      name: "CarouselDemo",
-      type: "components:example",
-      registryDependencies: ["carousel","card"],
-      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"],
-      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"],
-      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"],
-      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"],
-      component: () => import("../src/lib/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CarouselSpacing.vue"],
-    },
-    "CheckboxDemo": {
-      name: "CheckboxDemo",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxDemo.vue"],
-    },
-    "CheckboxDisabled": {
-      name: "CheckboxDisabled",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxDisabled.vue"],
-    },
-    "CheckboxFormMultiple": {
-      name: "CheckboxFormMultiple",
-      type: "components:example",
-      registryDependencies: ["button","form","checkbox","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"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxFormSingle.vue"],
-    },
-    "CheckboxWithText": {
-      name: "CheckboxWithText",
-      type: "components:example",
-      registryDependencies: ["checkbox"],
-      component: () => import("../src/lib/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CheckboxWithText.vue"],
-    },
-    "CollapsibleDemo": {
-      name: "CollapsibleDemo",
-      type: "components:example",
-      registryDependencies: ["button","collapsible"],
-      component: () => import("../src/lib/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CollapsibleDemo.vue"],
-    },
-    "ComboboxDemo": {
-      name: "ComboboxDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","command","popover"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxDemo.vue"],
-    },
-    "ComboboxDropdownMenu": {
-      name: "ComboboxDropdownMenu",
-      type: "components:example",
-      registryDependencies: ["button","command","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue"],
-    },
-    "ComboboxForm": {
-      name: "ComboboxForm",
-      type: "components:example",
-      registryDependencies: ["utils","button","command","form","popover","toast"],
-      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"],
-      component: () => import("../src/lib/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ComboboxPopover.vue"],
-    },
-    "CommandDemo": {
-      name: "CommandDemo",
-      type: "components:example",
-      registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CommandDemo.vue"],
-    },
-    "CommandDialogDemo": {
-      name: "CommandDialogDemo",
-      type: "components:example",
-      registryDependencies: ["command"],
-      component: () => import("../src/lib/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/CommandDialogDemo.vue"],
-    },
-    "ContextMenuDemo": {
-      name: "ContextMenuDemo",
-      type: "components:example",
-      registryDependencies: ["context-menu"],
-      component: () => import("../src/lib/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ContextMenuDemo.vue"],
-    },
-    "DataTableColumnPinningDemo": {
-      name: "DataTableColumnPinningDemo",
-      type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue"],
-    },
-    "DataTableDemo": {
-      name: "DataTableDemo",
-      type: "components:example",
-      registryDependencies: ["button","checkbox","dropdown-menu","input","table","utils"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableDemo.vue"],
-    },
-    "DataTableDemoColumn": {
-      name: "DataTableDemoColumn",
-      type: "components:example",
-      registryDependencies: ["dropdown-menu","button"],
-      component: () => import("../src/lib/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DataTableDemoColumn.vue"],
-    },
-    "DatePickerDemo": {
-      name: "DatePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      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: ["utils","button","calendar","form","popover","toast"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerForm.vue"],
-    },
-    "DatePickerWithPresets": {
-      name: "DatePickerWithPresets",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover","select"],
-      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: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DatePickerWithRange.vue"],
-    },
-    "DateTimePickerDemo": {
-      name: "DateTimePickerDemo",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/new-york/example/DateTimePickerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DateTimePickerDemo.vue"],
-    },
-    "DialogCustomCloseButton": {
-      name: "DialogCustomCloseButton",
-      type: "components:example",
-      registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogCustomCloseButton.vue"],
-    },
-    "DialogDemo": {
-      name: "DialogDemo",
-      type: "components:example",
-      registryDependencies: ["button","dialog","input","label"],
-      component: () => import("../src/lib/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DialogDemo.vue"],
-    },
-    "DropdownMenuDemo": {
-      name: "DropdownMenuDemo",
-      type: "components:example",
-      registryDependencies: ["button","dropdown-menu"],
-      component: () => import("../src/lib/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/DropdownMenuDemo.vue"],
-    },
-    "HoverCardDemo": {
-      name: "HoverCardDemo",
-      type: "components:example",
-      registryDependencies: ["avatar","button","hover-card"],
-      component: () => import("../src/lib/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/HoverCardDemo.vue"],
-    },
-    "InputDemo": {
-      name: "InputDemo",
-      type: "components:example",
-      registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputDemo.vue"],
-    },
-    "InputDisabled": {
-      name: "InputDisabled",
-      type: "components:example",
-      registryDependencies: ["input"],
-      component: () => import("../src/lib/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputDisabled.vue"],
-    },
-    "InputFile": {
-      name: "InputFile",
-      type: "components:example",
-      registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputFile.vue"],
-    },
-    "InputForm": {
-      name: "InputForm",
-      type: "components:example",
-      registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputForm.vue"],
-    },
-    "InputFormAutoAnimate": {
-      name: "InputFormAutoAnimate",
-      type: "components:example",
-      registryDependencies: ["button","form","input","toast"],
-      component: () => import("../src/lib/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputFormAutoAnimate.vue"],
-    },
-    "InputWithButton": {
-      name: "InputWithButton",
-      type: "components:example",
-      registryDependencies: ["input","button"],
-      component: () => import("../src/lib/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputWithButton.vue"],
-    },
-    "InputWithLabel": {
-      name: "InputWithLabel",
-      type: "components:example",
-      registryDependencies: ["input","label"],
-      component: () => import("../src/lib/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/InputWithLabel.vue"],
-    },
-    "LabelDemo": {
-      name: "LabelDemo",
-      type: "components:example",
-      registryDependencies: ["checkbox","label"],
-      component: () => import("../src/lib/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/LabelDemo.vue"],
-    },
-    "MenubarDemo": {
-      name: "MenubarDemo",
-      type: "components:example",
-      registryDependencies: ["menubar"],
-      component: () => import("../src/lib/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/MenubarDemo.vue"],
-    },
-    "NavigationMenuDemo": {
-      name: "NavigationMenuDemo",
-      type: "components:example",
-      registryDependencies: ["navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemo.vue"],
-    },
-    "NavigationMenuDemoItem": {
-      name: "NavigationMenuDemoItem",
-      type: "components:example",
-      registryDependencies: ["utils","navigation-menu"],
-      component: () => import("../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue"],
-    },
-    "PaginationDemo": {
-      name: "PaginationDemo",
-      type: "components:example",
-      registryDependencies: ["pagination","button"],
-      component: () => import("../src/lib/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PaginationDemo.vue"],
-    },
-    "PinInputDemo": {
-      name: "PinInputDemo",
-      type: "components:example",
-      registryDependencies: ["pin-input"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputDemo.vue"],
-    },
-    "PinInputFormDemo": {
-      name: "PinInputFormDemo",
-      type: "components:example",
-      registryDependencies: ["pin-input","button","form","toast"],
-      component: () => import("../src/lib/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PinInputFormDemo.vue"],
-    },
-    "PopoverDemo": {
-      name: "PopoverDemo",
-      type: "components:example",
-      registryDependencies: ["popover","button","label","input"],
-      component: () => import("../src/lib/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/PopoverDemo.vue"],
-    },
-    "ProgressDemo": {
-      name: "ProgressDemo",
-      type: "components:example",
-      registryDependencies: ["progress"],
-      component: () => import("../src/lib/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ProgressDemo.vue"],
-    },
-    "RadioGroupDemo": {
-      name: "RadioGroupDemo",
-      type: "components:example",
-      registryDependencies: ["label","radio-group"],
-      component: () => import("../src/lib/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RadioGroupDemo.vue"],
-    },
-    "RadioGroupForm": {
-      name: "RadioGroupForm",
-      type: "components:example",
-      registryDependencies: ["button","form","radio-group","toast"],
-      component: () => import("../src/lib/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RadioGroupForm.vue"],
-    },
-    "RangePickerWithSlot": {
-      name: "RangePickerWithSlot",
-      type: "components:example",
-      registryDependencies: ["utils","button","calendar","popover"],
-      component: () => import("../src/lib/registry/new-york/example/RangePickerWithSlot.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/RangePickerWithSlot.vue"],
-    },
-    "ScrollAreaDemo": {
-      name: "ScrollAreaDemo",
-      type: "components:example",
-      registryDependencies: ["scroll-area","separator"],
-      component: () => import("../src/lib/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ScrollAreaDemo.vue"],
-    },
-    "ScrollAreaHorizontalDemo": {
-      name: "ScrollAreaHorizontalDemo",
-      type: "components:example",
-      registryDependencies: ["scroll-area"],
-      component: () => import("../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue"],
-    },
-    "SelectDemo": {
-      name: "SelectDemo",
-      type: "components:example",
-      registryDependencies: ["select"],
-      component: () => import("../src/lib/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SelectDemo.vue"],
-    },
-    "SelectForm": {
-      name: "SelectForm",
-      type: "components:example",
-      registryDependencies: ["button","form","select","toast"],
-      component: () => import("../src/lib/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SelectForm.vue"],
-    },
-    "SeparatorDemo": {
-      name: "SeparatorDemo",
-      type: "components:example",
-      registryDependencies: ["separator"],
-      component: () => import("../src/lib/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SeparatorDemo.vue"],
-    },
-    "SheetDemo": {
-      name: "SheetDemo",
-      type: "components:example",
-      registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SheetDemo.vue"],
-    },
-    "SheetSideDemo": {
-      name: "SheetSideDemo",
-      type: "components:example",
-      registryDependencies: ["button","input","label","sheet"],
-      component: () => import("../src/lib/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SheetSideDemo.vue"],
-    },
-    "SkeletonDemo": {
-      name: "SkeletonDemo",
-      type: "components:example",
-      registryDependencies: ["skeleton"],
-      component: () => import("../src/lib/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SkeletonDemo.vue"],
-    },
-    "SliderDemo": {
-      name: "SliderDemo",
-      type: "components:example",
-      registryDependencies: ["utils","slider"],
-      component: () => import("../src/lib/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SliderDemo.vue"],
-    },
-    "SonnerDemo": {
-      name: "SonnerDemo",
-      type: "components:example",
-      registryDependencies: ["button"],
-      component: () => import("../src/lib/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SonnerDemo.vue"],
-    },
-    "SwitchDemo": {
-      name: "SwitchDemo",
-      type: "components:example",
-      registryDependencies: ["label","switch"],
-      component: () => import("../src/lib/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SwitchDemo.vue"],
-    },
-    "SwitchForm": {
-      name: "SwitchForm",
-      type: "components:example",
-      registryDependencies: ["button","form","switch","toast"],
-      component: () => import("../src/lib/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/SwitchForm.vue"],
-    },
-    "TableDemo": {
-      name: "TableDemo",
-      type: "components:example",
-      registryDependencies: ["table"],
-      component: () => import("../src/lib/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TableDemo.vue"],
-    },
-    "TabsDemo": {
-      name: "TabsDemo",
-      type: "components:example",
-      registryDependencies: ["button","card","input","label","tabs"],
-      component: () => import("../src/lib/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TabsDemo.vue"],
-    },
-    "TextareaDemo": {
-      name: "TextareaDemo",
-      type: "components:example",
-      registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaDemo.vue"],
-    },
-    "TextareaDisabled": {
-      name: "TextareaDisabled",
-      type: "components:example",
-      registryDependencies: ["textarea"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaDisabled.vue"],
-    },
-    "TextareaForm": {
-      name: "TextareaForm",
-      type: "components:example",
-      registryDependencies: ["button","form","textarea","toast"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaForm.vue"],
-    },
-    "TextareaWithButton": {
-      name: "TextareaWithButton",
-      type: "components:example",
-      registryDependencies: ["textarea","button"],
-      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"],
-      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"],
-      component: () => import("../src/lib/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TextareaWithText.vue"],
-    },
-    "ToastDemo": {
-      name: "ToastDemo",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastDemo.vue"],
-    },
-    "ToastDestructive": {
-      name: "ToastDestructive",
-      type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastDestructive.vue"],
-    },
-    "ToastSimple": {
-      name: "ToastSimple",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastSimple.vue"],
-    },
-    "ToastWithAction": {
-      name: "ToastWithAction",
-      type: "components:example",
-      registryDependencies: ["button","use-toast","toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastWithAction.vue"],
-    },
-    "ToastWithTitle": {
-      name: "ToastWithTitle",
-      type: "components:example",
-      registryDependencies: ["button","use-toast"],
-      component: () => import("../src/lib/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToastWithTitle.vue"],
-    },
-    "ToggleDemo": {
-      name: "ToggleDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleDemo.vue"],
-    },
-    "ToggleDisabledDemo": {
-      name: "ToggleDisabledDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleDisabledDemo.vue"],
-    },
-    "ToggleGroupDemo": {
-      name: "ToggleGroupDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupDemo.vue"],
-    },
-    "ToggleGroupDisabledDemo": {
-      name: "ToggleGroupDisabledDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue"],
-    },
-    "ToggleGroupLargeDemo": {
-      name: "ToggleGroupLargeDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue"],
-    },
-    "ToggleGroupOutlineDemo": {
-      name: "ToggleGroupOutlineDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue"],
-    },
-    "ToggleGroupSingleDemo": {
-      name: "ToggleGroupSingleDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue"],
-    },
-    "ToggleGroupSmallDemo": {
-      name: "ToggleGroupSmallDemo",
-      type: "components:example",
-      registryDependencies: ["toggle-group"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue"],
-    },
-    "ToggleItalicDemo": {
-      name: "ToggleItalicDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleItalicDemo.vue"],
-    },
-    "ToggleItalicWithTextDemo": {
-      name: "ToggleItalicWithTextDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue"],
-    },
-    "ToggleLargeDemo": {
-      name: "ToggleLargeDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleLargeDemo.vue"],
-    },
-    "ToggleSmallDemo": {
-      name: "ToggleSmallDemo",
-      type: "components:example",
-      registryDependencies: ["toggle"],
-      component: () => import("../src/lib/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/ToggleSmallDemo.vue"],
-    },
-    "TooltipDemo": {
-      name: "TooltipDemo",
-      type: "components:example",
-      registryDependencies: ["button","tooltip"],
-      component: () => import("../src/lib/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/example/TooltipDemo.vue"],
-    },
-    "TypographyBlockquote": {
-      name: "TypographyBlockquote",
-      type: "components:example",
+      component: () => import('../src/lib/registry/default/example/TypographyTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/TypographyTable.vue'],
+    },
+    ActivityGoal: {
+      name: 'ActivityGoal',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'themes', 'config'],
+      component: () => import('../src/lib/registry/default/example/Cards/ActivityGoal.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/Cards/ActivityGoal.vue'],
+    },
+    DataTable: {
+      name: 'DataTable',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'card', 'utils'],
+      component: () => import('../src/lib/registry/default/example/Cards/DataTable.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/Cards/DataTable.vue'],
+    },
+    Metric: {
+      name: 'Metric',
+      type: 'components:example',
+      registryDependencies: ['card', 'config'],
+      component: () => import('../src/lib/registry/default/example/Cards/Metric.vue').then(m => m.default),
+      files: ['../src/lib/registry/default/example/Cards/Metric.vue'],
+    },
+  },
+  'new-york': {
+    AccordionDemo: {
+      name: 'AccordionDemo',
+      type: 'components:example',
+      registryDependencies: ['accordion'],
+      component: () => import('../src/lib/registry/new-york/example/AccordionDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AccordionDemo.vue'],
+    },
+    AlertDemo: {
+      name: 'AlertDemo',
+      type: 'components:example',
+      registryDependencies: ['alert'],
+      component: () => import('../src/lib/registry/new-york/example/AlertDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AlertDemo.vue'],
+    },
+    AlertDestructiveDemo: {
+      name: 'AlertDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['alert'],
+      component: () => import('../src/lib/registry/new-york/example/AlertDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AlertDestructiveDemo.vue'],
+    },
+    AlertDialogDemo: {
+      name: 'AlertDialogDemo',
+      type: 'components:example',
+      registryDependencies: ['alert-dialog', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/AlertDialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AlertDialogDemo.vue'],
+    },
+    AspectRatioDemo: {
+      name: 'AspectRatioDemo',
+      type: 'components:example',
+      registryDependencies: ['aspect-ratio'],
+      component: () => import('../src/lib/registry/new-york/example/AspectRatioDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AspectRatioDemo.vue'],
+    },
+    AvatarDemo: {
+      name: 'AvatarDemo',
+      type: 'components:example',
+      registryDependencies: ['avatar'],
+      component: () => import('../src/lib/registry/new-york/example/AvatarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/AvatarDemo.vue'],
+    },
+    BadgeDemo: {
+      name: 'BadgeDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/new-york/example/BadgeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/BadgeDemo.vue'],
+    },
+    BadgeDestructiveDemo: {
+      name: 'BadgeDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/BadgeDestructiveDemo.vue'],
+    },
+    BadgeOutlineDemo: {
+      name: 'BadgeOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/new-york/example/BadgeOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/BadgeOutlineDemo.vue'],
+    },
+    BadgeSecondaryDemo: {
+      name: 'BadgeSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['badge'],
+      component: () => import('../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/BadgeSecondaryDemo.vue'],
+    },
+    ButtonAsChildDemo: {
+      name: 'ButtonAsChildDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonAsChildDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonAsChildDemo.vue'],
+    },
+    ButtonDemo: {
+      name: 'ButtonDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonDemo.vue'],
+    },
+    ButtonDestructiveDemo: {
+      name: 'ButtonDestructiveDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonDestructiveDemo.vue'],
+    },
+    ButtonGhostDemo: {
+      name: 'ButtonGhostDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonGhostDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonGhostDemo.vue'],
+    },
+    ButtonIconDemo: {
+      name: 'ButtonIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonIconDemo.vue'],
+    },
+    ButtonLinkDemo: {
+      name: 'ButtonLinkDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonLinkDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonLinkDemo.vue'],
+    },
+    ButtonLoadingDemo: {
+      name: 'ButtonLoadingDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonLoadingDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonLoadingDemo.vue'],
+    },
+    ButtonOutlineDemo: {
+      name: 'ButtonOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonOutlineDemo.vue'],
+    },
+    ButtonSecondaryDemo: {
+      name: 'ButtonSecondaryDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonSecondaryDemo.vue'],
+    },
+    ButtonWithIconDemo: {
+      name: 'ButtonWithIconDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/ButtonWithIconDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ButtonWithIconDemo.vue'],
+    },
+    CalendarDemo: {
+      name: 'CalendarDemo',
+      type: 'components:example',
+      registryDependencies: ['calendar'],
+      component: () => import('../src/lib/registry/new-york/example/CalendarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CalendarDemo.vue'],
+    },
+    CardChat: {
+      name: 'CardChat',
+      type: 'components:example',
+      registryDependencies: ['card', 'dialog', 'command', 'avatar', 'tooltip', 'button', 'input', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/CardChat.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardChat.vue'],
+    },
+    CardDemo: {
+      name: 'CardDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'switch', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/CardDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardDemo.vue'],
+    },
+    CardFormDemo: {
+      name: 'CardFormDemo',
+      type: 'components:example',
+      registryDependencies: ['card', 'select', 'input', 'label', 'button'],
+      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'],
+      component: () => import('../src/lib/registry/new-york/example/CardStats.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardStats.vue'],
+    },
+    CardWithForm: {
+      name: 'CardWithForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'input', 'label', 'select'],
+      component: () => import('../src/lib/registry/new-york/example/CardWithForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CardWithForm.vue'],
+    },
+    CarouselApi: {
+      name: 'CarouselApi',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselApi.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselApi.vue'],
+    },
+    CarouselDemo: {
+      name: 'CarouselDemo',
+      type: 'components:example',
+      registryDependencies: ['carousel', 'card'],
+      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'],
+      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'],
+      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'],
+      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'],
+      component: () => import('../src/lib/registry/new-york/example/CarouselSpacing.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CarouselSpacing.vue'],
+    },
+    CheckboxDemo: {
+      name: 'CheckboxDemo',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/new-york/example/CheckboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CheckboxDemo.vue'],
+    },
+    CheckboxDisabled: {
+      name: 'CheckboxDisabled',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/new-york/example/CheckboxDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CheckboxDisabled.vue'],
+    },
+    CheckboxFormMultiple: {
+      name: 'CheckboxFormMultiple',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'checkbox', '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'],
+      component: () => import('../src/lib/registry/new-york/example/CheckboxFormSingle.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CheckboxFormSingle.vue'],
+    },
+    CheckboxWithText: {
+      name: 'CheckboxWithText',
+      type: 'components:example',
+      registryDependencies: ['checkbox'],
+      component: () => import('../src/lib/registry/new-york/example/CheckboxWithText.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CheckboxWithText.vue'],
+    },
+    CollapsibleDemo: {
+      name: 'CollapsibleDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'collapsible'],
+      component: () => import('../src/lib/registry/new-york/example/CollapsibleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CollapsibleDemo.vue'],
+    },
+    ComboboxDemo: {
+      name: 'ComboboxDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/ComboboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ComboboxDemo.vue'],
+    },
+    ComboboxDropdownMenu: {
+      name: 'ComboboxDropdownMenu',
+      type: 'components:example',
+      registryDependencies: ['button', 'command', 'dropdown-menu'],
+      component: () => import('../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ComboboxDropdownMenu.vue'],
+    },
+    ComboboxForm: {
+      name: 'ComboboxForm',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'command', 'form', 'popover', 'toast'],
+      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'],
+      component: () => import('../src/lib/registry/new-york/example/ComboboxPopover.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ComboboxPopover.vue'],
+    },
+    CommandDemo: {
+      name: 'CommandDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/new-york/example/CommandDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CommandDemo.vue'],
+    },
+    CommandDialogDemo: {
+      name: 'CommandDialogDemo',
+      type: 'components:example',
+      registryDependencies: ['command'],
+      component: () => import('../src/lib/registry/new-york/example/CommandDialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/CommandDialogDemo.vue'],
+    },
+    ContextMenuDemo: {
+      name: 'ContextMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['context-menu'],
+      component: () => import('../src/lib/registry/new-york/example/ContextMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ContextMenuDemo.vue'],
+    },
+    DataTableColumnPinningDemo: {
+      name: 'DataTableColumnPinningDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTableColumnPinningDemo.vue'],
+    },
+    DataTableDemo: {
+      name: 'DataTableDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'checkbox', 'dropdown-menu', 'input', 'table', 'utils'],
+      component: () => import('../src/lib/registry/new-york/example/DataTableDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTableDemo.vue'],
+    },
+    DataTableDemoColumn: {
+      name: 'DataTableDemoColumn',
+      type: 'components:example',
+      registryDependencies: ['dropdown-menu', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/DataTableDemoColumn.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DataTableDemoColumn.vue'],
+    },
+    DatePickerDemo: {
+      name: 'DatePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      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: ['utils', 'button', 'calendar', 'form', 'popover', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/DatePickerForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DatePickerForm.vue'],
+    },
+    DatePickerWithPresets: {
+      name: 'DatePickerWithPresets',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover', 'select'],
+      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: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DatePickerWithRange.vue'],
+    },
+    DateTimePickerDemo: {
+      name: 'DateTimePickerDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/DateTimePickerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DateTimePickerDemo.vue'],
+    },
+    DialogCustomCloseButton: {
+      name: 'DialogCustomCloseButton',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/DialogCustomCloseButton.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DialogCustomCloseButton.vue'],
+    },
+    DialogDemo: {
+      name: 'DialogDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dialog', 'input', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/DialogDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DialogDemo.vue'],
+    },
+    DropdownMenuDemo: {
+      name: 'DropdownMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'dropdown-menu'],
+      component: () => import('../src/lib/registry/new-york/example/DropdownMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/DropdownMenuDemo.vue'],
+    },
+    HoverCardDemo: {
+      name: 'HoverCardDemo',
+      type: 'components:example',
+      registryDependencies: ['avatar', 'button', 'hover-card'],
+      component: () => import('../src/lib/registry/new-york/example/HoverCardDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/HoverCardDemo.vue'],
+    },
+    InputDemo: {
+      name: 'InputDemo',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/new-york/example/InputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputDemo.vue'],
+    },
+    InputDisabled: {
+      name: 'InputDisabled',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/new-york/example/InputDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputDisabled.vue'],
+    },
+    InputFile: {
+      name: 'InputFile',
+      type: 'components:example',
+      registryDependencies: ['input', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/InputFile.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputFile.vue'],
+    },
+    InputForm: {
+      name: 'InputForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/InputForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputForm.vue'],
+    },
+    InputFormAutoAnimate: {
+      name: 'InputFormAutoAnimate',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'input', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/InputFormAutoAnimate.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputFormAutoAnimate.vue'],
+    },
+    InputWithButton: {
+      name: 'InputWithButton',
+      type: 'components:example',
+      registryDependencies: ['input', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/InputWithButton.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputWithButton.vue'],
+    },
+    InputWithIcon: {
+      name: 'InputWithIcon',
+      type: 'components:example',
+      registryDependencies: ['input'],
+      component: () => import('../src/lib/registry/new-york/example/InputWithIcon.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputWithIcon.vue'],
+    },
+    InputWithLabel: {
+      name: 'InputWithLabel',
+      type: 'components:example',
+      registryDependencies: ['input', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/InputWithLabel.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/InputWithLabel.vue'],
+    },
+    LabelDemo: {
+      name: 'LabelDemo',
+      type: 'components:example',
+      registryDependencies: ['checkbox', 'label'],
+      component: () => import('../src/lib/registry/new-york/example/LabelDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/LabelDemo.vue'],
+    },
+    MenubarDemo: {
+      name: 'MenubarDemo',
+      type: 'components:example',
+      registryDependencies: ['menubar'],
+      component: () => import('../src/lib/registry/new-york/example/MenubarDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/MenubarDemo.vue'],
+    },
+    NavigationMenuDemo: {
+      name: 'NavigationMenuDemo',
+      type: 'components:example',
+      registryDependencies: ['navigation-menu'],
+      component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/NavigationMenuDemo.vue'],
+    },
+    NavigationMenuDemoItem: {
+      name: 'NavigationMenuDemoItem',
+      type: 'components:example',
+      registryDependencies: ['utils', 'navigation-menu'],
+      component: () => import('../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/NavigationMenuDemoItem.vue'],
+    },
+    PaginationDemo: {
+      name: 'PaginationDemo',
+      type: 'components:example',
+      registryDependencies: ['pagination', 'button'],
+      component: () => import('../src/lib/registry/new-york/example/PaginationDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PaginationDemo.vue'],
+    },
+    PinInputDemo: {
+      name: 'PinInputDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputDemo.vue'],
+    },
+    PinInputFormDemo: {
+      name: 'PinInputFormDemo',
+      type: 'components:example',
+      registryDependencies: ['pin-input', 'button', 'form', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/PinInputFormDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PinInputFormDemo.vue'],
+    },
+    PopoverDemo: {
+      name: 'PopoverDemo',
+      type: 'components:example',
+      registryDependencies: ['popover', 'button', 'label', 'input'],
+      component: () => import('../src/lib/registry/new-york/example/PopoverDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/PopoverDemo.vue'],
+    },
+    ProgressDemo: {
+      name: 'ProgressDemo',
+      type: 'components:example',
+      registryDependencies: ['progress'],
+      component: () => import('../src/lib/registry/new-york/example/ProgressDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ProgressDemo.vue'],
+    },
+    RadioGroupDemo: {
+      name: 'RadioGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['label', 'radio-group'],
+      component: () => import('../src/lib/registry/new-york/example/RadioGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/RadioGroupDemo.vue'],
+    },
+    RadioGroupForm: {
+      name: 'RadioGroupForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'radio-group', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/RadioGroupForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/RadioGroupForm.vue'],
+    },
+    RangePickerWithSlot: {
+      name: 'RangePickerWithSlot',
+      type: 'components:example',
+      registryDependencies: ['utils', 'button', 'calendar', 'popover'],
+      component: () => import('../src/lib/registry/new-york/example/RangePickerWithSlot.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/RangePickerWithSlot.vue'],
+    },
+    ScrollAreaDemo: {
+      name: 'ScrollAreaDemo',
+      type: 'components:example',
+      registryDependencies: ['scroll-area', 'separator'],
+      component: () => import('../src/lib/registry/new-york/example/ScrollAreaDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ScrollAreaDemo.vue'],
+    },
+    ScrollAreaHorizontalDemo: {
+      name: 'ScrollAreaHorizontalDemo',
+      type: 'components:example',
+      registryDependencies: ['scroll-area'],
+      component: () => import('../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue'],
+    },
+    SelectDemo: {
+      name: 'SelectDemo',
+      type: 'components:example',
+      registryDependencies: ['select'],
+      component: () => import('../src/lib/registry/new-york/example/SelectDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SelectDemo.vue'],
+    },
+    SelectForm: {
+      name: 'SelectForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'select', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/SelectForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SelectForm.vue'],
+    },
+    SeparatorDemo: {
+      name: 'SeparatorDemo',
+      type: 'components:example',
+      registryDependencies: ['separator'],
+      component: () => import('../src/lib/registry/new-york/example/SeparatorDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SeparatorDemo.vue'],
+    },
+    SheetDemo: {
+      name: 'SheetDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'input', 'label', 'sheet'],
+      component: () => import('../src/lib/registry/new-york/example/SheetDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SheetDemo.vue'],
+    },
+    SheetSideDemo: {
+      name: 'SheetSideDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'input', 'label', 'sheet'],
+      component: () => import('../src/lib/registry/new-york/example/SheetSideDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SheetSideDemo.vue'],
+    },
+    SkeletonDemo: {
+      name: 'SkeletonDemo',
+      type: 'components:example',
+      registryDependencies: ['skeleton'],
+      component: () => import('../src/lib/registry/new-york/example/SkeletonDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SkeletonDemo.vue'],
+    },
+    SliderDemo: {
+      name: 'SliderDemo',
+      type: 'components:example',
+      registryDependencies: ['utils', 'slider'],
+      component: () => import('../src/lib/registry/new-york/example/SliderDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SliderDemo.vue'],
+    },
+    SonnerDemo: {
+      name: 'SonnerDemo',
+      type: 'components:example',
+      registryDependencies: ['button'],
+      component: () => import('../src/lib/registry/new-york/example/SonnerDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SonnerDemo.vue'],
+    },
+    SwitchDemo: {
+      name: 'SwitchDemo',
+      type: 'components:example',
+      registryDependencies: ['label', 'switch'],
+      component: () => import('../src/lib/registry/new-york/example/SwitchDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SwitchDemo.vue'],
+    },
+    SwitchForm: {
+      name: 'SwitchForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'switch', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/SwitchForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/SwitchForm.vue'],
+    },
+    TableDemo: {
+      name: 'TableDemo',
+      type: 'components:example',
+      registryDependencies: ['table'],
+      component: () => import('../src/lib/registry/new-york/example/TableDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TableDemo.vue'],
+    },
+    TabsDemo: {
+      name: 'TabsDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'card', 'input', 'label', 'tabs'],
+      component: () => import('../src/lib/registry/new-york/example/TabsDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TabsDemo.vue'],
+    },
+    TagsInputComboboxDemo: {
+      name: 'TagsInputComboboxDemo',
+      type: 'components:example',
+      registryDependencies: ['command', 'tags-input'],
+      component: () => import('../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TagsInputComboboxDemo.vue'],
+    },
+    TagsInputDemo: {
+      name: 'TagsInputDemo',
+      type: 'components:example',
+      registryDependencies: ['tags-input'],
+      component: () => import('../src/lib/registry/new-york/example/TagsInputDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TagsInputDemo.vue'],
+    },
+    TextareaDemo: {
+      name: 'TextareaDemo',
+      type: 'components:example',
+      registryDependencies: ['textarea'],
+      component: () => import('../src/lib/registry/new-york/example/TextareaDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TextareaDemo.vue'],
+    },
+    TextareaDisabled: {
+      name: 'TextareaDisabled',
+      type: 'components:example',
+      registryDependencies: ['textarea'],
+      component: () => import('../src/lib/registry/new-york/example/TextareaDisabled.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TextareaDisabled.vue'],
+    },
+    TextareaForm: {
+      name: 'TextareaForm',
+      type: 'components:example',
+      registryDependencies: ['button', 'form', 'textarea', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/TextareaForm.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TextareaForm.vue'],
+    },
+    TextareaWithButton: {
+      name: 'TextareaWithButton',
+      type: 'components:example',
+      registryDependencies: ['textarea', 'button'],
+      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'],
+      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'],
+      component: () => import('../src/lib/registry/new-york/example/TextareaWithText.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TextareaWithText.vue'],
+    },
+    ToastDemo: {
+      name: 'ToastDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/new-york/example/ToastDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToastDemo.vue'],
+    },
+    ToastDestructive: {
+      name: 'ToastDestructive',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/ToastDestructive.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToastDestructive.vue'],
+    },
+    ToastSimple: {
+      name: 'ToastSimple',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/new-york/example/ToastSimple.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToastSimple.vue'],
+    },
+    ToastWithAction: {
+      name: 'ToastWithAction',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast', 'toast'],
+      component: () => import('../src/lib/registry/new-york/example/ToastWithAction.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToastWithAction.vue'],
+    },
+    ToastWithTitle: {
+      name: 'ToastWithTitle',
+      type: 'components:example',
+      registryDependencies: ['button', 'use-toast'],
+      component: () => import('../src/lib/registry/new-york/example/ToastWithTitle.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToastWithTitle.vue'],
+    },
+    ToggleDemo: {
+      name: 'ToggleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleDemo.vue'],
+    },
+    ToggleDisabledDemo: {
+      name: 'ToggleDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleDisabledDemo.vue'],
+    },
+    ToggleGroupDemo: {
+      name: 'ToggleGroupDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupDemo.vue'],
+    },
+    ToggleGroupDisabledDemo: {
+      name: 'ToggleGroupDisabledDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupDisabledDemo.vue'],
+    },
+    ToggleGroupLargeDemo: {
+      name: 'ToggleGroupLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupLargeDemo.vue'],
+    },
+    ToggleGroupOutlineDemo: {
+      name: 'ToggleGroupOutlineDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupOutlineDemo.vue'],
+    },
+    ToggleGroupSingleDemo: {
+      name: 'ToggleGroupSingleDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupSingleDemo.vue'],
+    },
+    ToggleGroupSmallDemo: {
+      name: 'ToggleGroupSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle-group'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleGroupSmallDemo.vue'],
+    },
+    ToggleItalicDemo: {
+      name: 'ToggleItalicDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleItalicDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleItalicDemo.vue'],
+    },
+    ToggleItalicWithTextDemo: {
+      name: 'ToggleItalicWithTextDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue'],
+    },
+    ToggleLargeDemo: {
+      name: 'ToggleLargeDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleLargeDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleLargeDemo.vue'],
+    },
+    ToggleSmallDemo: {
+      name: 'ToggleSmallDemo',
+      type: 'components:example',
+      registryDependencies: ['toggle'],
+      component: () => import('../src/lib/registry/new-york/example/ToggleSmallDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/ToggleSmallDemo.vue'],
+    },
+    TooltipDemo: {
+      name: 'TooltipDemo',
+      type: 'components:example',
+      registryDependencies: ['button', 'tooltip'],
+      component: () => import('../src/lib/registry/new-york/example/TooltipDemo.vue').then(m => m.default),
+      files: ['../src/lib/registry/new-york/example/TooltipDemo.vue'],
+    },
+    TypographyBlockquote: {
+      name: 'TypographyBlockquote',
+      type: 'components:example',
       registryDependencies: [],
       component: () => import("../src/lib/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TypographyBlockquote.vue"],
diff --git a/apps/www/package.json b/apps/www/package.json
index 97e9415a..29385c7d 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -32,7 +32,7 @@
     "embla-carousel-autoplay": "^8.0.0-rc22",
     "embla-carousel-vue": "^8.0.0-rc22",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.4.1",
+    "radix-vue": "^1.4.6",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vee-validate": "4.12.5",
diff --git a/apps/www/src/content/docs/components/input.md b/apps/www/src/content/docs/components/input.md
index d1614790..ae55f1d9 100644
--- a/apps/www/src/content/docs/components/input.md
+++ b/apps/www/src/content/docs/components/input.md
@@ -63,6 +63,10 @@ import { Input } from '@/components/ui/input'
 
 <ComponentPreview name="InputWithButton" class="max-w-xs" />
 
+### With Icon
+
+<ComponentPreview name="InputWithIcon" class="max-w-xs" />
+
 ### Form
 
 <ComponentPreview name="InputForm" />
diff --git a/apps/www/src/content/docs/components/tags-input.md b/apps/www/src/content/docs/components/tags-input.md
new file mode 100644
index 00000000..4833e967
--- /dev/null
+++ b/apps/www/src/content/docs/components/tags-input.md
@@ -0,0 +1,21 @@
+---
+title: Tags Input
+description: Tag inputs render tags inside an input, followed by an actual text input.
+source: apps/www/src/lib/registry/default/ui/tags-input
+primitive: https://www.radix-vue.com/components/tags-input.html
+---
+
+<ComponentPreview name="TagsInputDemo" /> 
+
+## Installation
+
+```bash
+npx shadcn-vue@latest add tags-input
+```
+
+
+## Usage
+
+### Tags with Combobox
+
+<ComponentPreview name="TagsInputComboboxDemo" /> 
diff --git a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
index 8261aefc..4ee0ff54 100644
--- a/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
+++ b/apps/www/src/examples/tasks/components/DataTableFacetedFilter.vue
@@ -84,7 +84,8 @@ const selectedValues = computed(() => new Set(props.column?.getFilterValue() as
               v-for="option in options"
               :key="option.value"
               :value="option"
-              @select="() => {
+              @select="(e) => {
+                console.log(e.detail.value)
                 const isSelected = selectedValues.has(option.value)
                 if (isSelected) {
                   selectedValues.delete(option.value)
diff --git a/apps/www/src/lib/registry/default/example/InputWithIcon.vue b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
new file mode 100644
index 00000000..04d295ff
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/InputWithIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Input } from '@/lib/registry/default/ui/input'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
new file mode 100644
index 00000000..23427ba1
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TagsInputComboboxDemo.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/default/ui/command'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const modelValue = ref<string[]>([])
+const open = ref(false)
+const searchTerm = ref('')
+
+const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
+</script>
+
+<template>
+  <TagsInput class="px-0 gap-0 w-80" :model-value="modelValue">
+    <div class="flex gap-2 flex-wrap items-center px-3">
+      <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+        <TagsInputItemText />
+        <TagsInputItemDelete />
+      </TagsInputItem>
+    </div>
+
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+      <ComboboxAnchor as-child>
+        <ComboboxInput placeholder="Framework..." as-child>
+          <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
+        </ComboboxInput>
+      </ComboboxAnchor>
+
+      <ComboboxPortal>
+        <CommandList
+          position="popper"
+          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        >
+          <CommandEmpty />
+          <CommandGroup>
+            <CommandItem
+              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
+              @select.prevent="(ev) => {
+                if (typeof ev.detail.value === 'string') {
+                  searchTerm = ''
+                  modelValue.push(ev.detail.value)
+                }
+
+                if (filteredFrameworks.length === 0) {
+                  open = false
+                }
+              }"
+            >
+              {{ framework.label }}
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </ComboboxPortal>
+    </ComboboxRoot>
+  </TagsInput>
+</template>
diff --git a/apps/www/src/lib/registry/default/example/TagsInputDemo.vue b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
new file mode 100644
index 00000000..260005b6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/example/TagsInputDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/default/ui/tags-input'
+
+const modelValue = ref(['Apple', 'Banana'])
+</script>
+
+<template>
+  <TagsInput v-model="modelValue">
+    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <TagsInputItemText />
+      <TagsInputItemDelete />
+    </TagsInputItem>
+
+    <TagsInputInput placeholder="Fruits..." />
+  </TagsInput>
+</template>
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 e44796a1..b8c60f3d 100644
--- a/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
+++ b/apps/www/src/lib/registry/default/ui/calendar/Calendar.vue
@@ -147,16 +147,10 @@ const vCalendarSlots = computed(() => {
   @apply mt-4;
 }
 .calendar .vc-weekdays {
-  @apply flex;
+  @apply justify-items-center;
 }
 .calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
-}
-.calendar .vc-weekday-1 {
-	@apply pr-3;
-}
-.calendar .vc-weekday-7 {
-	@apply pl-3;
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
 }
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
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
new file mode 100644
index 00000000..acf6bd3c
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<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'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <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)">
+    <slot />
+  </TagsInputRoot>
+</template>
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
new file mode 100644
index 00000000..ccb08a15
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-6 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
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
new file mode 100644
index 00000000..23fae205
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <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)">
+    <slot />
+  </TagsInputItem>
+</template>
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
new file mode 100644
index 00000000..544eebc4
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<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'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <X class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
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
new file mode 100644
index 00000000..91ade8b6
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-1 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/default/ui/tags-input/index.ts b/apps/www/src/lib/registry/default/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/apps/www/src/lib/registry/default/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
new file mode 100644
index 00000000..6f61ef7d
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/InputWithIcon.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { Input } from '@/lib/registry/new-york/ui/input'
+</script>
+
+<template>
+  <div class="relative w-full max-w-sm items-center">
+    <Input id="search" type="text" placeholder="Search..." class="pl-10" />
+    <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
+      <MagnifyingGlassIcon class="size-6 text-muted-foreground" />
+    </span>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
new file mode 100644
index 00000000..00a53697
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputComboboxDemo.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/lib/registry/new-york/ui/command'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+
+const frameworks = [
+  { value: 'next.js', label: 'Next.js' },
+  { value: 'sveltekit', label: 'SvelteKit' },
+  { value: 'nuxt.js', label: 'Nuxt.js' },
+  { value: 'remix', label: 'Remix' },
+  { value: 'astro', label: 'Astro' },
+]
+
+const modelValue = ref<string[]>([])
+const open = ref(false)
+const searchTerm = ref('')
+
+const filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))
+</script>
+
+<template>
+  <TagsInput class="px-0 gap-0 w-80" :model-value="modelValue">
+    <div class="flex gap-2 flex-wrap items-center px-3">
+      <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+        <TagsInputItemText />
+        <TagsInputItemDelete />
+      </TagsInputItem>
+    </div>
+
+    <ComboboxRoot v-model="modelValue" v-model:open="open" v-model:searchTerm="searchTerm" class="w-full">
+      <ComboboxAnchor as-child>
+        <ComboboxInput placeholder="Framework..." as-child>
+          <TagsInputInput class="w-full px-3" :class="modelValue.length > 0 ? 'mt-2' : ''" @keydown.enter.prevent />
+        </ComboboxInput>
+      </ComboboxAnchor>
+
+      <ComboboxPortal>
+        <CommandList
+          position="popper"
+          class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        >
+          <CommandEmpty />
+          <CommandGroup>
+            <CommandItem
+              v-for="framework in filteredFrameworks" :key="framework.value" :value="framework.label"
+              @select.prevent="(ev) => {
+                if (typeof ev.detail.value === 'string') {
+                  searchTerm = ''
+                  modelValue.push(ev.detail.value)
+                }
+
+                if (filteredFrameworks.length === 0) {
+                  open = false
+                }
+              }"
+            >
+              {{ framework.label }}
+            </CommandItem>
+          </CommandGroup>
+        </CommandList>
+      </ComboboxPortal>
+    </ComboboxRoot>
+  </TagsInput>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
new file mode 100644
index 00000000..b744bc9a
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/example/TagsInputDemo.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/lib/registry/new-york/ui/tags-input'
+
+const modelValue = ref(['Apple', 'Banana'])
+</script>
+
+<template>
+  <TagsInput v-model="modelValue">
+    <TagsInputItem v-for="item in modelValue" :key="item" :value="item">
+      <TagsInputItemText />
+      <TagsInputItemDelete />
+    </TagsInputItem>
+
+    <TagsInputInput placeholder="Fruits..." />
+  </TagsInput>
+</template>
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 6fadd9d1..bada5b22 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
@@ -148,16 +148,10 @@ const vCalendarSlots = computed(() => {
   @apply mt-4;
 }
 .calendar .vc-weekdays {
-  @apply flex;
+  @apply justify-items-center;
 }
 .calendar .vc-weekday {
-  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];
-}
-.calendar .vc-weekday-1 {
-	@apply pr-3;
-}
-.calendar .vc-weekday-7 {
-	@apply pl-3;
+  @apply text-muted-foreground rounded-md font-normal text-[0.8rem];
 }
 .calendar .vc-weeks {
   @apply w-full space-y-2 flex flex-col [&>_div]:grid [&>_div]:grid-cols-7;
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
new file mode 100644
index 00000000..5989dc20
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<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'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <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)">
+    <slot />
+  </TagsInputRoot>
+</template>
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
new file mode 100644
index 00000000..ff8f1dcc
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
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
new file mode 100644
index 00000000..c3cc8d40
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <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)">
+    <slot />
+  </TagsInputItem>
+</template>
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
new file mode 100644
index 00000000..c72ee631
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<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'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Cross2Icon class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
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
new file mode 100644
index 00000000..8948bd07
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts b/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index de3369a8..834c92eb 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -593,6 +593,22 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "tags-input",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/tags-input/TagsInput.vue",
+      "ui/tags-input/TagsInputInput.vue",
+      "ui/tags-input/TagsInputItem.vue",
+      "ui/tags-input/TagsInputItemDelete.vue",
+      "ui/tags-input/TagsInputItemText.vue",
+      "ui/tags-input/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "textarea",
     "dependencies": [
diff --git a/apps/www/src/public/registry/styles/default/calendar.json b/apps/www/src/public/registry/styles/default/calendar.json
index f2c24d22..40b158fb 100644
--- a/apps/www/src/public/registry/styles/default/calendar.json
+++ b/apps/www/src/public/registry/styles/default/calendar.json
@@ -11,7 +11,7 @@
   "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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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 { 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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeft class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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;\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/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index 0989daf9..6883d4ae 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -19,7 +19,7 @@
     },
     {
       "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 right-2 flex h-3.5 w-3.5 items-center justify-center\">\n      <SelectItemIndicator>\n        <Check class=\"h-4 w-4\" />\n      </SelectItemIndicator>\n    </span>\n\n    <SelectItemText>\n      <slot />\n    </SelectItemText>\n  </SelectItem>\n</template>\n"
+      "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"
     },
     {
       "name": "SelectItemText.vue",
diff --git a/apps/www/src/public/registry/styles/default/tags-input.json b/apps/www/src/public/registry/styles/default/tags-input.json
new file mode 100644
index 00000000..01060323
--- /dev/null
+++ b/apps/www/src/public/registry/styles/default/tags-input.json
@@ -0,0 +1,34 @@
+{
+  "name": "tags-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
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 13324253..5b6b65d4 100644
--- a/apps/www/src/public/registry/styles/new-york/calendar.json
+++ b/apps/www/src/public/registry/styles/new-york/calendar.json
@@ -11,7 +11,7 @@
   "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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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        <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;\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 flex;\n}\n.calendar .vc-weekday {\n  @apply text-muted-foreground rounded-md w-full font-normal text-[0.8rem];\n}\n.calendar .vc-weekday-1 {\n\t@apply pr-3;\n}\n.calendar .vc-weekday-7 {\n\t@apply pl-3;\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 { 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 :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('prev')\">\n        <ChevronLeftIcon class=\"w-4 h-4\" />\n      </button>\n      <button :class=\"cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')\" @click=\"handleNav('next')\">\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        <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;\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/public/registry/styles/new-york/tags-input.json b/apps/www/src/public/registry/styles/new-york/tags-input.json
new file mode 100644
index 00000000..3eaa3f7e
--- /dev/null
+++ b/apps/www/src/public/registry/styles/new-york/tags-input.json
@@ -0,0 +1,34 @@
+{
+  "name": "tags-input",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "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"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as TagsInput } from './TagsInput.vue'\nexport { default as TagsInputInput } from './TagsInputInput.vue'\nexport { default as TagsInputItem } from './TagsInputItem.vue'\nexport { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'\nexport { default as TagsInputItemText } from './TagsInputItemText.vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}
\ No newline at end of file
diff --git a/packages/cli/package.json b/packages/cli/package.json
index 837c6939..2b91137b 100644
--- a/packages/cli/package.json
+++ b/packages/cli/package.json
@@ -63,7 +63,7 @@
     "node-fetch": "^3.3.2",
     "ora": "^7.0.1",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.4.1",
+    "radix-vue": "^1.4.6",
     "recast": "^0.23.4",
     "rimraf": "^5.0.1",
     "ts-morph": "^19.0.0",
diff --git a/packages/cli/test/fixtures/nuxt/package.json b/packages/cli/test/fixtures/nuxt/package.json
index 9b4ee1f9..ae302b89 100644
--- a/packages/cli/test/fixtures/nuxt/package.json
+++ b/packages/cli/test/fixtures/nuxt/package.json
@@ -13,7 +13,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.4.1",
+    "radix-vue": "^1.4.6",
     "tailwind-merge": "^1.14.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/packages/module/playground/package.json b/packages/module/playground/package.json
index b8012a53..fd6b3ce3 100644
--- a/packages/module/playground/package.json
+++ b/packages/module/playground/package.json
@@ -14,7 +14,7 @@
     "embla-carousel": "8.0.0-rc19",
     "embla-carousel-vue": "8.0.0-rc19",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.4.1",
+    "radix-vue": "^1.4.6",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e643f6f7..fbf1a0ef 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -93,8 +93,8 @@ importers:
         specifier: ^0.276.0
         version: 0.276.0(vue@3.4.15)
       radix-vue:
-        specifier: ^1.4.1
-        version: 1.4.1(vue@3.4.15)
+        specifier: ^1.4.6
+        version: 1.4.6(vue@3.4.15)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.1)
@@ -253,8 +253,8 @@ importers:
         specifier: ^2.4.2
         version: 2.4.2
       radix-vue:
-        specifier: ^1.4.1
-        version: 1.4.1(vue@3.4.15)
+        specifier: ^1.4.6
+        version: 1.4.6(vue@3.4.15)
       recast:
         specifier: ^0.23.4
         version: 0.23.4
@@ -10904,8 +10904,8 @@ packages:
     resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
     dev: false
 
-  /radix-vue@1.4.1(vue@3.4.15):
-    resolution: {integrity: sha512-eJsyIHDZPfIdH0iqrfTODuklPqDXfO0iNDNI1isOYIr+ejmeCjP6Yw1LA7LtDryPnjsSkqj0t04DF7eBn2wtMQ==}
+  /radix-vue@1.4.6(vue@3.4.15):
+    resolution: {integrity: sha512-PWM4A0xyQV4bu8R+DfAGGEN4zRTM0Qer5rH+gLnQjjsz0kjteZhVOS0KUkpyrKVPprWFYRNqyzpjjkcYBDrlfQ==}
     dependencies:
       '@floating-ui/dom': 1.6.1
       '@floating-ui/vue': 1.0.6(vue@3.4.15)