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

apps/www/__registry__/index.ts

@@ -809,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',
@@ -837,6 +844,29 @@ 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'],
+    },
     ButtonDemo: {
       name: 'ButtonDemo',
       type: 'components:example',
@@ -844,6 +874,74 @@ 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'],
     },
+    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'],
+    },
+    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',
@@ -865,6 +963,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: ['button', 'card', 'switch', 'utils'],
+      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',
@@ -956,6 +1061,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',
@@ -1005,6 +1117,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',
@@ -1145,6 +1264,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', 'separator'],
+      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',
@@ -1173,6 +1299,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',
@@ -1299,6 +1432,43 @@ 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/dropdown-menu.md

@@ -40,9 +40,4 @@ import {
     </DropdownMenuContent>
   </DropdownMenu>
 </template>
-```
+```
-
-## Examples
-
-### Checkboxes
-

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

@@ -57,7 +57,7 @@ Use the `side` property to `<SheetContent />` to indicate the edge of the screen
 
 You can adjust the size of the sheet using CSS classes:
 
-```vue:showLineNumbers{4}
+```vue:line-numbers showLineNumbers{4}
 <template>
   <Sheet>
     <SheetTrigger>Open</SheetTrigger>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { AlertCircle } from 'lucide-vue-next'
-import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/new-york/ui/alert'
+import { Alert, AlertDescription, AlertTitle } from '@/lib/registry/default/ui/alert'
 </script>
 
 <template>

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

@@ -22,7 +22,7 @@ const username = ref('')
 <template>
   <div class="grid grid-cols-2 gap-2">
     <Sheet v-for="side in SHEET_SIDES" :key="side">
-      <SheetTrigger v-slot="{ isOpen }" @click="isOpen = !isOpen">
+      <SheetTrigger as-child>
         <Button variant="outline">
           {{ side }}
         </Button>
@@ -37,7 +37,7 @@ const username = ref('')
         <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="name" class="col-span-3" />
+            <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>
@@ -45,8 +45,8 @@ const username = ref('')
           </div>
         </div>
         <SheetFooter>
-          <SheetClose v-slot="{ close }">
+          <SheetClose as-child>
-            <Button @click="close">
+            <Button type="submit">
               Save changes
             </Button>
           </SheetClose>

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/new-york/example/AlertDestructiveDemo.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { AlertTriangle } from 'lucide-vue-next'
+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 { ChevronRight } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button variant="outline" size="icon">
+    <ChevronRight 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 { Loader2 } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/new-york/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/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 { Mail } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/new-york/ui/button'
+</script>
+
+<template>
+  <Button>
+    <Mail 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,56 @@
+<script setup lang="ts">
+import { Copy } from 'lucide-vue-next'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import {
+  Dialog,
+  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>
+          <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/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/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/ToggleDisabledDemo.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Underline } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle aria-label="Toggle italic" disabled>
+    <Underline 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 { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/new-york/ui/toggle'
+</script>
+
+<template>
+  <Toggle variant="outline" aria-label="Toggle italic">
+    <Italic 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 { Italic } from 'lucide-vue-next'
+
+import { Toggle } from '@/lib/registry/new-york/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/new-york/example/ToggleLargeDemo.vue

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