docs: Improve the API reference of all the components (#152)

* docs: improve the api reference of all the components

* docs(app): #152 add new-york theme

This pull request is intended to add the new-york theme for the newly created component examples.

Closes: #152

* chore: build registry

* chore: change usage of lucide icon in new-york

---------

Co-authored-by: zernonia <zernonia@gmail.com>

apps/www/__registry__/index.ts

@@ -16,6 +16,13 @@ export const Index = {
       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',
@@ -44,6 +51,34 @@ export const Index = {
       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',
@@ -51,6 +86,62 @@ export const Index = {
       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',
@@ -72,6 +163,13 @@ export const Index = {
       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',
@@ -163,6 +261,13 @@ export const Index = {
       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',
@@ -212,6 +317,13 @@ export const Index = {
       component: () => import('../src/lib/registry/default/example/DatePickerWithRange.vue').then(m => m.default),
       files: ['../src/lib/registry/default/example/DatePickerWithRange.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',
@@ -352,6 +464,13 @@ export const Index = {
       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',
@@ -380,6 +499,13 @@ export const Index = {
       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',
@@ -506,6 +632,41 @@ export const Index = {
       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'],
+    },
+    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',
@@ -648,6 +809,13 @@ export const Index = {
       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',
@@ -676,6 +844,34 @@ export const Index = {
       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',
@@ -683,6 +879,62 @@ export const Index = {
       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',
@@ -704,6 +956,13 @@ export const Index = {
       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',
@@ -795,6 +1054,13 @@ export const Index = {
       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',
@@ -844,6 +1110,13 @@ export const Index = {
       component: () => import('../src/lib/registry/new-york/example/DatePickerWithRange.vue').then(m => m.default),
       files: ['../src/lib/registry/new-york/example/DatePickerWithRange.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',
@@ -984,6 +1257,13 @@ export const Index = {
       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',
@@ -1012,6 +1292,13 @@ export const Index = {
       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',
@@ -1138,6 +1425,41 @@ export const Index = {
       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'],
+    },
+    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',

apps/www/src/content/docs/components/alert.md

@@ -29,3 +29,16 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
   </Alert>
 </template>
 ```
+
+## Examples
+
+### Default
+
+<ComponentPreview name="AlertDemo"  /> 
+
+
+### Destructive
+
+<ComponentPreview name="AlertDestructiveDemo"  /> 
+
+

apps/www/src/content/docs/components/badge.md

@@ -79,3 +79,23 @@ import { Badge } from '@/components/ui/badge'
   <Badge>Badge</Badge>
 </template>
 ```
+
+
+## Examples
+
+### Default
+
+<ComponentPreview name="BadgeDemo"  /> 
+
+
+### Secondary
+
+<ComponentPreview name="BadgeSecondaryDemo" />
+
+### Outline
+
+<ComponentPreview name="BadgeOutlineDemo" />
+
+### Destructive
+
+<ComponentPreview name="BadgeDestructiveDemo" />

apps/www/src/content/docs/components/button.md

@@ -93,3 +93,49 @@ import { Button } from '@/components/ui/button'
   <Button>Button</Button>
 </template>
 ```
+
+
+## Examples
+
+### Primary
+
+<ComponentPreview name="ButtonDemo"  /> 
+
+
+### Secondary
+
+<ComponentPreview name="ButtonSecondaryDemo" />
+
+
+### Destructive
+
+<ComponentPreview name="ButtonDestructiveDemo" />
+
+
+### Outline
+
+<ComponentPreview name="ButtonOutlineDemo" />
+
+### Ghost
+
+<ComponentPreview name="ButtonGhostDemo" />
+
+### Link
+
+<ComponentPreview name="ButtonLinkDemo" />
+
+### Icon
+
+<ComponentPreview name="ButtonIconDemo" />
+
+### With Icon
+
+<ComponentPreview name="ButtonWithIconDemo" />
+
+### Loading
+
+<ComponentPreview name="ButtonLoadingDemo" />
+
+### As Child
+
+<ComponentPreview name="ButtonAsChildDemo" />

apps/www/src/content/docs/components/calendar.md

@@ -53,3 +53,6 @@ import { Calendar } from '@/components/ui/calendar'
   <Calendar />
 </template>
 ```
+
+See the [VCalendar](https://vcalendar.io/getting-started/installation.html) documentation for more information.
+

apps/www/src/content/docs/components/card.md

@@ -4,7 +4,7 @@ description: Displays a card with header, content, and footer.
 ---
 
 
-<ComponentPreview name="CardDemo"  /> 
+<ComponentPreview name="CardFormDemo"  /> 
 
 ## Installation
 
@@ -43,3 +43,7 @@ import {
   </Card>
 </template>
 ```
+
+## Examples
+
+<ComponentPreview name="CardDemo"  /> 

apps/www/src/content/docs/components/command.md

@@ -39,16 +39,105 @@ import {
     <CommandList>
       <CommandEmpty>No results found.</CommandEmpty>
       <CommandGroup heading="Suggestions">
-        <CommandItem>Calendar</CommandItem>
+        <CommandItem value="calendar">
-        <CommandItem>Search Emoji</CommandItem>
+          Calendar
-        <CommandItem>Calculator</CommandItem>
+        </CommandItem>
+        <CommandItem value="search-emoji">
+          Search Emoji
+        </CommandItem>
+        <CommandItem value="calculator">
+          Calculator
+        </CommandItem>
       </CommandGroup>
       <CommandSeparator />
       <CommandGroup heading="Settings">
-        <CommandItem>Profile</CommandItem>
+        <CommandItem value="profile">
-        <CommandItem>Billing</CommandItem>
+          Profile
-        <CommandItem>Settings</CommandItem>
+        </CommandItem>
+        <CommandItem value="billing">
+          Billing
+        </CommandItem>
+        <CommandItem value="settings">
+          Settings
+        </CommandItem>
       </CommandGroup>
     </CommandList>
   </Command>
-</template>```
+</template>
+```
+
+## Examples 
+
+### Dialog 
+
+<ComponentPreview name="CommandDialogDemo" />
+
+To show the command menu in a dialog, use the `<CommandDialog />` component.
+
+```vue
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+
+const open = ref(false)
+
+const keys = useMagicKeys()
+const CmdJ = keys['Cmd+J']
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch(CmdJ, (v) => {
+  if (v)
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>J
+      </kbd>
+    </p>
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>
+```
+
+### Combobox
+
+You can use the `<Command />` component as a combobox. See the [Combobox](/docs/components/combobox) page for more information.

apps/www/src/content/docs/components/dialog.md

@@ -48,3 +48,43 @@ import {
   </Dialog>
 </template>
 ```
+
+## Examples 
+
+### Custom close button
+
+<ComponentPreview name="DialogCustomCloseButton" /> 
+
+## Notes
+
+To activate the `Dialog` component from within a `Context Menu` or `Dropdown Menu`, you must encase the `Context Menu` or `Dropdown Menu` component in the `Dialog` component. For more information, refer to the linked issue [here](https://github.com/radix-ui/primitives/issues/1836).
+
+
+```js:line-numbers showLineNumber{14-25}
+<Dialog>
+  <ContextMenu>
+    <ContextMenuTrigger>Right click</ContextMenuTrigger>
+    <ContextMenuContent>
+      <ContextMenuItem>Open</ContextMenuItem>
+      <ContextMenuItem>Download</ContextMenuItem>
+      <DialogTrigger asChild>
+        <ContextMenuItem>
+          <span>Delete</span>
+        </ContextMenuItem>
+      </DialogTrigger>
+    </ContextMenuContent>
+  </ContextMenu>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Are you sure absolutely sure?</DialogTitle>
+      <DialogDescription>
+        This action cannot be undone. Are you sure you want to permanently
+        delete this file from our servers?
+      </DialogDescription>
+    </DialogHeader>
+    <DialogFooter>
+      <Button type="submit">Confirm</Button>
+    </DialogFooter>
+  </DialogContent>
+</Dialog>
+```

apps/www/src/content/docs/components/navigation-menu.md

@@ -42,3 +42,26 @@ import {
   </NavigationMenu>
 </template>
 ```
+
+## Examples 
+
+### Link Component
+
+When using the Nuxt.js <NuxtLink /> component, you can use `navigationMenuTriggerStyle()` to apply the correct styles to the trigger.
+
+```ts
+import { navigationMenuTriggerStyle } from '@/components/ui/navigation-menu'
+```
+
+```vue
+<template>
+  <NavigationMenuItem>
+    <NuxtLink to="/docs">
+      <NavigationMenuLink :class="navigationMenuTriggerStyle()">
+        Documentation
+      </NavigationMenuLink>
+    </NuxtLink>
+  </NavigationMenuItem>
+</template>
+```
+

apps/www/src/content/docs/components/scroll-area.md

@@ -31,3 +31,10 @@ import { ScrollArea } from '@/components/ui/scroll-area'
   </ScrollArea>
 </template>
 ```
+
+## Examples
+
+### Horizontal Scrolling
+
+<ComponentPreview name="ScrollAreaHorizontalDemo" />
+

apps/www/src/content/docs/components/sheet.md

@@ -43,3 +43,33 @@ import {
   </Sheet>
 </template>
 ```
+
+## Examples
+
+### Side
+
+Use the `side` property to `<SheetContent />` to indicate the edge of the screen where the component will appear. The values can be `top`, `right`, `bottom` or `left`.
+
+<ComponentPreview name="SheetSideDemo" /> 
+
+
+### Size
+
+You can adjust the size of the sheet using CSS classes:
+
+```vue:line-numbers showLineNumbers{4}
+<template>
+  <Sheet>
+    <SheetTrigger>Open</SheetTrigger>
+    <SheetContent class="w-[400px] sm:w-[540px]">
+      <SheetHeader>
+        <SheetTitle>Are you sure absolutely sure?</SheetTitle>
+        <SheetDescription>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        </SheetDescription>
+      </SheetHeader>
+    </SheetContent>
+  </Sheet>
+</template>
+```

apps/www/src/content/docs/components/table.md

@@ -57,3 +57,11 @@ import {
   </Table>
 </template>
 ```
+
+## Data Table
+
+You can use the `<Table />` component to build more complex data tables. Combine it with [@tanstack/vue-table](https://tanstack.com/table/v8) to create tables with sorting, filtering and pagination.
+
+See the [Data Table](/docs/components/data-table) documentation for more information.
+
+You can also see an example of a data table in the [Tasks](/examples/tasks) demo.

apps/www/src/content/docs/components/toggle.md

@@ -49,3 +49,37 @@ import { Toggle } from '@/components/ui/toggle'
   <Toggle>Toggle</Toggle>
 </template>
 ```
+
+## Examples
+
+### Default 
+
+<ComponentPreview name="ToggleDemo" /> 
+
+
+### Outline
+
+<ComponentPreview name="ToggleItalicDemo" /> 
+
+
+### With Text
+
+<ComponentPreview name="ToggleItalicWithTextDemo" />
+
+
+### Small
+
+<ComponentPreview name="ToggleSmallDemo" />
+
+
+### Large
+
+<ComponentPreview name="ToggleLargeDemo" />
+
+
+### Disabled
+
+<ComponentPreview name="ToggleDisabledDemo" />
+
+
+

apps/www/src/lib/registry/default/example/AlertDestructiveDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AlertCircle } from 'lucide-vue-next'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
+</script>
+
+<template>
+  <Alert variant="destructive">
+    <AlertCircle class="w-4 h-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</template>

apps/www/src/lib/registry/default/example/BadgeDestructiveDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="destructive">
+    Destructive
+  </Badge>
+</template>

apps/www/src/lib/registry/default/example/BadgeOutlineDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="outline">
+    Outline
+  </Badge>
+</template>

apps/www/src/lib/registry/default/example/BadgeSecondaryDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/default/ui/badge'
+</script>
+
+<template>
+  <Badge variant="secondary">
+    Secondary
+  </Badge>
+</template>

apps/www/src/lib/registry/default/example/ButtonAsChildDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button as-child>
+    <NuxtLink to="/login">
+      Login
+    </NuxtLink>
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonDestructiveDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="destructive">
+    Destructive
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonGhostDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="ghost">
+    Ghost
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonIconDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ChevronRight } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="outline" size="icon">
+    <ChevronRight class="w-4 h-4" />
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonLinkDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="link">
+    Link
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonLoadingDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Loader2 } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button disabled>
+    <Loader2 class="w-4 h-4 mr-2 animate-spin" />
+    Please wait
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonOutlineDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="outline">
+    Outline
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonSecondaryDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button variant="secondary">
+    Secondary
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/ButtonWithIconDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { Mail } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Button>
+    <Mail class="w-4 h-4 mr-2" /> Login with Email
+  </Button>
+</template>

apps/www/src/lib/registry/default/example/CardFormDemo.vue

@@ -0,0 +1,60 @@
+<script setup lang='ts'>
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/default/ui/select'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import { Button } from '@/lib/registry/default/ui/button'
+</script>
+
+<template>
+  <Card class="w-[350px]">
+    <CardHeader>
+      <CardTitle>Create project</CardTitle>
+      <CardDescription>Deploy your new project in one-click.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form>
+        <div class="grid items-center w-full gap-4">
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="name">Name</Label>
+            <Input id="name" placeholder="Name of your project" />
+          </div>
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="framework">Framework</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="nuxt">
+                  Nuxt.js
+                </SelectItem>
+                <SelectItem value="next">
+                  Next.js
+                </SelectItem>
+                <SelectItem value="sveltekit">
+                  SvelteKit
+                </SelectItem>
+                <SelectItem value="astro">
+                  Astro
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </form>
+    </CardContent>
+    <CardFooter class="flex justify-between px-6 pb-6">
+      <Button variant="outline">
+        Cancel
+      </Button>
+      <Button>Deploy</Button>
+    </CardFooter>
+  </Card>
+</template>

apps/www/src/lib/registry/default/example/CommandDialogDemo.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/default/ui/command'
+
+const open = ref(false)
+
+const keys = useMagicKeys()
+const CmdJ = keys['Cmd+J']
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch(CmdJ, (v) => {
+  if (v)
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>J
+      </kbd>
+    </p>
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>

apps/www/src/lib/registry/default/example/DialogCustomCloseButton.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { Copy } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/default/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/default/ui/dialog'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Share
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Share link</DialogTitle>
+        <DialogDescription>
+          Anyone who has this link will be able to view this.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="flex items-center space-x-2">
+        <div class="grid flex-1 gap-2">
+          <Label html-for="link" class="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            default-value="https://shadcn-vue.com/docs/installation"
+            read-only
+          />
+        </div>
+        <Button type="submit" size="sm" class="px-3">
+          <span class="sr-only">Copy</span>
+          <Copy class="w-4 h-4" />
+        </Button>
+      </div>
+      <DialogFooter class="sm:justify-start">
+        <DialogClose as-child>
+          <Button type="button" variant="secondary">
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

apps/www/src/lib/registry/default/example/RadioGroupForm.vue

@@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
             class="flex flex-col space-y-1"
             v-bind="componentField"
           >
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="all" />
               </FormControl>
@@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
                 All new messages
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="mentions" />
               </FormControl>
@@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
                 Direct messages and mentions
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="none" />
               </FormControl>

apps/www/src/lib/registry/default/example/ScrollAreaHorizontalDemo.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
+
+interface Artwork {
+  artist: string
+  art: string
+}
+
+const works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+</script>
+
+<template>
+  <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
+    <div class="flex p-4 space-x-4 w-max">
+      <div v-for="artwork in works" :key="artwork.id">
+        <figure class="shrink-0">
+          <div class="overflow-hidden rounded-md">
+            <img
+              :src="artwork.art"
+              :alt="`Photo by ${artwork.name}`"
+              class="aspect-[3/4] w-36 h-56 object-cover"
+            >
+          </div>
+          <figcaption class="pt-2 text-xs text-muted-foreground">
+            Photo by
+            <span class="font-semibold text-foreground">
+              {{ artwork.artist }}
+            </span>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+</template>

apps/www/src/lib/registry/default/example/SelectForm.vue

@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="email">
       <FormItem>
         <FormLabel>Email</FormLabel>

apps/www/src/lib/registry/default/example/SheetSideDemo.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/lib/registry/default/ui/sheet'
+
+const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
+
+const username = ref('')
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <Sheet v-for="side in SHEET_SIDES" :key="side">
+      <SheetTrigger as-child>
+        <Button variant="outline">
+          {{ side }}
+        </Button>
+      </SheetTrigger>
+      <SheetContent :side="side">
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div class="grid gap-4 py-4">
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="name" class="text-right">Name</Label>
+            <Input id="name" v-model="username" class="col-span-3" />
+          </div>
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="username" class="text-right">Username</Label>
+            <Input id="username" v-model="username" class="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose as-child>
+            <Button type="submit">
+              Save changes
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>

apps/www/src/lib/registry/default/example/TextareaWithText.vue

@@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/default/ui/label'
   <div class="grid w-full gap-1.5">
     <Label for="message-2">Your message</Label>
     <Textarea id="message-2" placeholder="Type your message here." />
-    <p className="text-sm text-muted-foreground">
+    <p class="text-sm text-muted-foreground">
       Your message will be copied to the support team.
     </p>
   </div>

apps/www/src/lib/registry/default/example/ToggleDisabledDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Underline } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic" disabled>
+    <Underline class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/default/example/ToggleItalicDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle variant="outline" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/default/example/ToggleItalicWithTextDemo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic">
+    <Italic class="w-4 h-4 mr-2" />
+    Italic
+  </Toggle>
+</template>

apps/www/src/lib/registry/default/example/ToggleLargeDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="lg" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/default/example/ToggleSmallDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/default/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="sm" aria-label="Toggle italic">
+    <Italic class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/default/ui/command/CommandDialog.vue

@@ -12,7 +12,7 @@ const emitsAsProps = useEmitAsProps(emits)
 
 <template>
   <Dialog v-bind="{ ...props, ...emitsAsProps }">
-    <DialogContent class="overflow-hidden p-0 shadow-lg">
+    <DialogContent class="p-0 overflow-hidden shadow-lg">
       <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
         <slot />
       </Command>

apps/www/src/lib/registry/default/ui/toggle/Toggle.vue

@@ -11,16 +11,18 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
 interface Props extends ToggleProps {
   variant?: ToggleVariantProps['variant']
   size?: ToggleVariantProps['size']
+  disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
+  disabled: false,
 })
 const emits = defineEmits<ToggleEmits>()
 
 const toggleProps = computed(() => {
   // eslint-disable-next-line unused-imports/no-unused-vars
-  const { variant, size, ...otherProps } = props
+  const { variant, size, disabled, ...otherProps } = props
   return otherProps
 })
 
@@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
   <Toggle
     v-bind="forwarded"
     :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    :disabled="props.disabled"
   >
     <slot />
   </Toggle>

apps/www/src/lib/registry/new-york/example/AlertDestructiveDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AlertTriangle } from '@radix-icons/vue'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+</script>
+
+<template>
+  <Alert variant="destructive">
+    <AlertTriangle class="w-4 h-4" />
+    <AlertTitle>Error</AlertTitle>
+    <AlertDescription>
+      Your session has expired. Please log in again.
+    </AlertDescription>
+  </Alert>
+</template>

apps/www/src/lib/registry/new-york/example/BadgeDestructiveDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+</script>
+
+<template>
+  <Badge variant="destructive">
+    Destructive
+  </Badge>
+</template>

apps/www/src/lib/registry/new-york/example/BadgeOutlineDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+</script>
+
+<template>
+  <Badge variant="outline">
+    Outline
+  </Badge>
+</template>

apps/www/src/lib/registry/new-york/example/BadgeSecondaryDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+</script>
+
+<template>
+  <Badge variant="secondary">
+    Secondary
+  </Badge>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonAsChildDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button as-child>
+    <NuxtLink to="/login">
+      Login
+    </NuxtLink>
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonDestructiveDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="destructive">
+    Destructive
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonGhostDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="ghost">
+    Ghost
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonIconDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="outline" size="icon">
+    <ChevronRightIcon class="w-4 h-4" />
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonLinkDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="link">
+    Link
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonLoadingDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { ReloadIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button disabled>
+    <ReloadIcon class="w-4 h-4 mr-2 animate-spin" />
+    Please wait
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonOutlineDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="outline">
+    Outline
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonSecondaryDemo.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="secondary">
+    Secondary
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/ButtonWithIconDemo.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { EnvelopeOpenIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button>
+    <EnvelopeOpenIcon class="w-4 h-4 mr-2" /> Login with Email
+  </Button>
+</template>

apps/www/src/lib/registry/new-york/example/CardFormDemo.vue

@@ -0,0 +1,60 @@
+<script setup lang='ts'>
+import { Card, CardContent, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/lib/registry/new-york/ui/select'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Card class="w-[350px]">
+    <CardHeader>
+      <CardTitle>Create project</CardTitle>
+      <CardDescription>Deploy your new project in one-click.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <form>
+        <div class="grid items-center w-full gap-4">
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="name">Name</Label>
+            <Input id="name" placeholder="Name of your project" />
+          </div>
+          <div class="flex flex-col space-y-1.5">
+            <Label html-for="framework">Framework</Label>
+            <Select>
+              <SelectTrigger id="framework">
+                <SelectValue placeholder="Select" />
+              </SelectTrigger>
+              <SelectContent position="popper">
+                <SelectItem value="nuxt">
+                  Nuxt.js
+                </SelectItem>
+                <SelectItem value="next">
+                  Next.js
+                </SelectItem>
+                <SelectItem value="sveltekit">
+                  SvelteKit
+                </SelectItem>
+                <SelectItem value="astro">
+                  Astro
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </form>
+    </CardContent>
+    <CardFooter class="flex justify-between px-6 pb-6">
+      <Button variant="outline">
+        Cancel
+      </Button>
+      <Button>Deploy</Button>
+    </CardFooter>
+  </Card>
+</template>

apps/www/src/lib/registry/new-york/example/CommandDialogDemo.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { useMagicKeys } from '@vueuse/core'
+
+import { ref, watch } from 'vue'
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '@/lib/registry/new-york/ui/command'
+
+const open = ref(false)
+
+const keys = useMagicKeys()
+const CmdJ = keys['Cmd+J']
+
+function handleOpenChange() {
+  open.value = !open.value
+}
+
+watch(CmdJ, (v) => {
+  if (v)
+    handleOpenChange()
+})
+</script>
+
+<template>
+  <div>
+    <p class="text-sm text-muted-foreground">
+      Press
+      <kbd
+        class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
+      >
+        <span class="text-xs">⌘</span>J
+      </kbd>
+    </p>
+    <CommandDialog :open="open" :on-open-change="handleOpenChange">
+      <CommandInput placeholder="Type a command or search..." />
+      <CommandList>
+        <CommandEmpty>No results found.</CommandEmpty>
+        <CommandGroup heading="Suggestions">
+          <CommandItem value="calendar">
+            Calendar
+          </CommandItem>
+          <CommandItem value="search-emoji">
+            Search Emoji
+          </CommandItem>
+          <CommandItem value="calculator">
+            Calculator
+          </CommandItem>
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup heading="Settings">
+          <CommandItem value="profile">
+            Profile
+          </CommandItem>
+          <CommandItem value="billing">
+            Billing
+          </CommandItem>
+          <CommandItem value="settings">
+            Settings
+          </CommandItem>
+        </CommandGroup>
+      </CommandList>
+    </CommandDialog>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/DialogCustomCloseButton.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { CopyIcon } from '@radix-icons/vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/lib/registry/new-york/ui/dialog'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Dialog>
+    <DialogTrigger as-child>
+      <Button variant="outline">
+        Share
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-md">
+      <DialogHeader>
+        <DialogTitle>Share link</DialogTitle>
+        <DialogDescription>
+          Anyone who has this link will be able to view this.
+        </DialogDescription>
+      </DialogHeader>
+      <div class="flex items-center space-x-2">
+        <div class="grid flex-1 gap-2">
+          <Label html-for="link" class="sr-only">
+            Link
+          </Label>
+          <Input
+            id="link"
+            default-value="https://shadcn-vue.com/docs/installation"
+            read-only
+          />
+        </div>
+        <Button type="submit" size="sm" class="px-3">
+          <span class="sr-only">Copy</span>
+          <CopyIcon class="w-4 h-4" />
+        </Button>
+      </div>
+      <DialogFooter class="sm:justify-start">
+        <DialogClose as-child>
+          <Button type="button" variant="secondary">
+            Close
+          </Button>
+        </DialogClose>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

apps/www/src/lib/registry/new-york/example/RadioGroupForm.vue

@@ -34,7 +34,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="type">
       <FormItem class="space-y-3">
         <FormLabel>Notify me about...</FormLabel>
@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
             class="flex flex-col space-y-1"
             v-bind="componentField"
           >
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="all" />
               </FormControl>
@@ -52,7 +52,7 @@ const onSubmit = handleSubmit((values) => {
                 All new messages
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="mentions" />
               </FormControl>
@@ -60,7 +60,7 @@ const onSubmit = handleSubmit((values) => {
                 Direct messages and mentions
               </FormLabel>
             </FormItem>
-            <FormItem class="flex items-center gap-x-3 space-y-0">
+            <FormItem class="flex items-center space-y-0 gap-x-3">
               <FormControl>
                 <RadioGroupItem value="none" />
               </FormControl>

apps/www/src/lib/registry/new-york/example/ScrollAreaHorizontalDemo.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
+
+interface Artwork {
+  artist: string
+  art: string
+}
+
+const works: Artwork[] = [
+  {
+    artist: 'Ornella Binni',
+    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Tom Byrom',
+    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',
+  },
+  {
+    artist: 'Vladimir Malyavko',
+    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',
+  },
+]
+</script>
+
+<template>
+  <ScrollArea class="border rounded-md w-96 whitespace-nowrap">
+    <div class="flex p-4 space-x-4 w-max">
+      <div v-for="artwork in works" :key="artwork.id">
+        <figure class="shrink-0">
+          <div class="overflow-hidden rounded-md">
+            <img
+              :src="artwork.art"
+              :alt="`Photo by ${artwork.name}`"
+              class="aspect-[3/4] w-36 h-56 object-cover"
+            >
+          </div>
+          <figcaption class="pt-2 text-xs text-muted-foreground">
+            Photo by
+            <span class="font-semibold text-foreground">
+              {{ artwork.artist }}
+            </span>
+          </figcaption>
+        </figure>
+      </div>
+    </div>
+    <ScrollBar orientation="horizontal" />
+  </ScrollArea>
+</template>

apps/www/src/lib/registry/new-york/example/SelectForm.vue

@@ -44,7 +44,7 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <form className="w-2/3 space-y-6" @submit="onSubmit">
+  <form class="w-2/3 space-y-6" @submit="onSubmit">
     <FormField v-slot="{ componentField }" name="email">
       <FormItem>
         <FormLabel>Email</FormLabel>

apps/www/src/lib/registry/new-york/example/SheetSideDemo.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/lib/registry/new-york/ui/sheet'
+
+const SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const
+
+const username = ref('')
+</script>
+
+<template>
+  <div class="grid grid-cols-2 gap-2">
+    <Sheet v-for="side in SHEET_SIDES" :key="side">
+      <SheetTrigger as-child>
+        <Button variant="outline">
+          {{ side }}
+        </Button>
+      </SheetTrigger>
+      <SheetContent :side="side">
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>
+            Make changes to your profile here. Click save when you're done.
+          </SheetDescription>
+        </SheetHeader>
+        <div class="grid gap-4 py-4">
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="name" class="text-right">Name</Label>
+            <Input id="name" v-model="username" class="col-span-3" />
+          </div>
+          <div class="grid items-center grid-cols-4 gap-4">
+            <Label for="username" class="text-right">Username</Label>
+            <Input id="username" v-model="username" class="col-span-3" />
+          </div>
+        </div>
+        <SheetFooter>
+          <SheetClose as-child>
+            <Button type="submit">
+              Save changes
+            </Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  </div>
+</template>

apps/www/src/lib/registry/new-york/example/TextareaWithText.vue

@@ -7,7 +7,7 @@ import { Label } from '@/lib/registry/new-york/ui/label'
   <div class="grid w-full gap-1.5">
     <Label for="message-2">Your message</Label>
     <Textarea id="message-2" placeholder="Type your message here." />
-    <p className="text-sm text-muted-foreground">
+    <p class="text-sm text-muted-foreground">
       Your message will be copied to the support team.
     </p>
   </div>

apps/www/src/lib/registry/new-york/example/ToggleDisabledDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { UnderlineIcon } from '@radix-icons/vue'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic" disabled>
+    <UnderlineIcon class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/new-york/example/ToggleItalicDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { FontItalicIcon } from '@radix-icons/vue'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle variant="outline" aria-label="Toggle italic">
+    <FontItalicIcon class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/new-york/example/ToggleItalicWithTextDemo.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { FontItalicIcon } from '@radix-icons/vue'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic">
+    <FontItalicIcon class="w-4 h-4 mr-2" />
+    Italic
+  </Toggle>
+</template>

apps/www/src/lib/registry/new-york/example/ToggleLargeDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { FontItalicIcon } from '@radix-icons/vue'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="lg" aria-label="Toggle italic">
+    <FontItalicIcon class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/new-york/example/ToggleSmallDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { FontItalicIcon } from '@radix-icons/vue'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle size="sm" aria-label="Toggle italic">
+    <FontItalicIcon class="w-4 h-4" />
+  </Toggle>
+</template>

apps/www/src/lib/registry/new-york/ui/toast/ToastClose.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ToastClose } from 'radix-vue'
-import { XIcon } from 'lucide-vue-next'
+import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
@@ -10,6 +10,6 @@ const props = defineProps<{
 
 <template>
   <ToastClose v-bind="props" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
-    <XIcon class="h-4 w-4" />
+    <Cross2Icon class="h-4 w-4" />
   </ToastClose>
 </template>

apps/www/src/lib/registry/new-york/ui/toggle/Toggle.vue

@@ -11,10 +11,12 @@ interface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}
 interface Props extends ToggleProps {
   variant?: ToggleVariantProps['variant']
   size?: ToggleVariantProps['size']
+  disabled?: boolean
 }
 const props = withDefaults(defineProps<Props>(), {
   variant: 'default',
   size: 'default',
+  disabled: false,
 })
 const emits = defineEmits<ToggleEmits>()
 
@@ -31,6 +33,7 @@ const forwarded = useForwardPropsEmits(toggleProps, emits)
   <Toggle
     v-bind="forwarded"
     :class="cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))"
+    :disabled="props.disabled"
   >
     <slot />
   </Toggle>

apps/www/src/public/registry/styles/default/command.json

@@ -14,7 +14,7 @@
     },
     {
       "name": "CommandDialog.vue",
-      "content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n    <DialogContent class=\"overflow-hidden p-0 shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { useEmitAsProps } from 'radix-vue'\nimport type { DialogRootEmits, DialogRootProps } from 'radix-vue'\nimport Command from './Command.vue'\nimport { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'\n\nconst props = defineProps<DialogRootProps>()\nconst emits = defineEmits<DialogRootEmits>()\n\nconst emitsAsProps = useEmitAsProps(emits)\n</script>\n\n<template>\n  <Dialog v-bind=\"{ ...props, ...emitsAsProps }\">\n    <DialogContent class=\"p-0 overflow-hidden shadow-lg\">\n      <Command class=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5\">\n        <slot />\n      </Command>\n    </DialogContent>\n  </Dialog>\n</template>\n"
     },
     {
       "name": "CommandEmpty.vue",

apps/www/src/public/registry/styles/default/toggle.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, disabled, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",

apps/www/src/public/registry/styles/new-york/toast.json

@@ -17,7 +17,7 @@
     },
     {
       "name": "ToastClose.vue",
-      "content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { XIcon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <XIcon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { ToastClose } from 'radix-vue'\nimport { Cross2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<{\n  class?: string\n}>()\n</script>\n\n<template>\n  <ToastClose v-bind=\"props\" :class=\"cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)\">\n    <Cross2Icon class=\"h-4 w-4\" />\n  </ToastClose>\n</template>\n"
     },
     {
       "name": "ToastDescription.vue",

apps/www/src/public/registry/styles/new-york/toggle.json

@@ -9,7 +9,7 @@
   "files": [
     {
       "name": "Toggle.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ToggleEmits, ToggleProps } from 'radix-vue'\nimport { Toggle, useForwardPropsEmits } from 'radix-vue'\nimport type { VariantProps } from 'class-variance-authority'\nimport { computed } from 'vue'\nimport { toggleVariants } from '.'\nimport { cn } from '@/lib/utils'\n\ninterface ToggleVariantProps extends VariantProps<typeof toggleVariants> {}\n\ninterface Props extends ToggleProps {\n  variant?: ToggleVariantProps['variant']\n  size?: ToggleVariantProps['size']\n  disabled?: boolean\n}\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'default',\n  size: 'default',\n  disabled: false,\n})\nconst emits = defineEmits<ToggleEmits>()\n\nconst toggleProps = computed(() => {\n  // eslint-disable-next-line unused-imports/no-unused-vars\n  const { variant, size, ...otherProps } = props\n  return otherProps\n})\n\nconst forwarded = useForwardPropsEmits(toggleProps, emits)\n</script>\n\n<template>\n  <Toggle\n    v-bind=\"forwarded\"\n    :class=\"cn(toggleVariants({ variant, size, class: $attrs.class ?? '' }))\"\n    :disabled=\"props.disabled\"\n  >\n    <slot />\n  </Toggle>\n</template>\n"
     },
     {
       "name": "index.ts",