diff --git a/apps/www/.vitepress/theme/components/BlockContainer.vue b/apps/www/.vitepress/theme/components/BlockContainer.vue
index 4fcf5885..358b2b19 100644
--- a/apps/www/.vitepress/theme/components/BlockContainer.vue
+++ b/apps/www/.vitepress/theme/components/BlockContainer.vue
@@ -1,31 +1,33 @@
 <script setup lang="ts">
-import { Badge } from '@/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'
+import type { Block } from '@/registry/schema'
+import Button from '@/registry/new-york/ui/button/Button.vue'
 import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/registry/new-york/ui/resizable'
 import { Separator } from '@/registry/new-york/ui/separator'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/registry/new-york/ui/tabs'
 import { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'
 import { useConfigStore } from '@/stores/config'
-import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
-import MagicString from 'magic-string'
 
-import { reactive, ref, watch } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { Check, Fullscreen, Monitor, Smartphone, Tablet, Terminal } from 'lucide-vue-next'
+import MagicString from 'magic-string'
+import { computed, reactive, ref, watch } from 'vue'
 import { compileScript, parse, walk } from 'vue/compiler-sfc'
-import { Index } from '../../../__registry__'
+import { Index } from '../../../__registry__/block'
 import { highlight } from '../config/shiki'
-import BlockCopyButton from './BlockCopyButton.vue'
 import BlockPreview from './BlockPreview.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
+import BlockViewerCode from './BlockViewerCode.vue'
 
 const props = defineProps<{
   name: string
 }>()
 
 const { style, codeConfig } = useConfigStore()
+const { copied, copy } = useClipboard()
 
 const isLoading = ref(true)
 const tabValue = ref('preview')
 const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
+const componentRegistry = ref<Block>()
 
 const rawString = ref('')
 const codeHtml = ref('')
@@ -35,6 +37,19 @@ const metadata = reactive({
   containerClass: null as string | null,
 })
 
+const iframeURL = computed(() => {
+  // @ts-expect-error env available in import.meta
+  if (import.meta.env.SSR)
+    return ''
+
+  const url = new URL(`${window.location.origin}/blocks/renderer`)
+  url.searchParams.append('name', props.name)
+  url.searchParams.append('styles', 'new-york')
+  url.searchParams.append('containerClass', metadata.containerClass ?? '')
+
+  return url.href
+})
+
 function removeScript(code: string) {
   const s = new MagicString(code)
   const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
@@ -58,9 +73,11 @@ function transformImportPath(code: string) {
 watch([style, codeConfig], async () => {
   try {
     const styleIndex = Index[style.value]
-    const componentRegistry = styleIndex[props.name]
+    componentRegistry.value = styleIndex[props.name]
+    if (!componentRegistry.value)
+      return
 
-    const rawString = await componentRegistry.raw()
+    const rawString = await componentRegistry.value.raw()
     if (!metadata.description) {
       const { descriptor } = parse(rawString)
       const ast = compileScript(descriptor, { id: '' })
@@ -91,48 +108,47 @@ watch([style, codeConfig], async () => {
   <Tabs
     :id="name"
     v-model="tabValue"
-    class="relative grid w-full scroll-m-20 gap-4"
+    class="group/block-view-wrapper flex min-w-0 flex-col items-stretch gap-4"
     :style=" {
-      '--container-height': metadata.iframeHeight ?? '600px',
+      '--height': metadata.iframeHeight ?? '600px',
     }"
   >
     <div class="flex flex-col items-center gap-4 sm:flex-row">
-      <div class="flex items-center gap-2">
-        <TabsList class="hidden sm:flex">
-          <TabsTrigger value="preview">
+      <div class="hidden items-center gap-2 sm:flex">
+        <TabsList class="h-7 items-center rounded-md p-0 px-[calc(theme(spacing.1)_-_2px)] py-[theme(spacing.1)]">
+          <TabsTrigger class="h-[1.45rem] rounded-sm px-2 text-xs" value="preview">
             Preview
           </TabsTrigger>
-          <TabsTrigger value="code">
+          <TabsTrigger class="h-[1.45rem] rounded-sm px-2 text-xs" value="code">
             Code
           </TabsTrigger>
         </TabsList>
-        <div class="hidden items-center gap-2 sm:flex">
-          <Separator
-            orientation="vertical"
-            class="mx-2 hidden h-4 md:flex"
-          />
-          <div class="flex items-center gap-2">
-            <a :href="`#${name}`">
-              <Badge variant="outline">{{ name }}</Badge>
-            </a>
-            <Popover>
-              <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-                <Info class="h-3.5 w-3.5" />
-                <span class="sr-only">Block description</span>
-              </PopoverTrigger>
-              <PopoverContent
-                side="right"
-                :side-offset="10"
-                class="text-sm"
-              >
-                {{ metadata.description }}
-              </PopoverContent>
-            </Popover>
-          </div>
+
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <div class="text-sm font-medium underline-offset-2 hover:underline">
+          <a :href="`#${name}`">{{ metadata.description }}</a>
         </div>
       </div>
+
       <div class="flex items-center gap-2 pr-[14px] sm:ml-auto">
-        <div class="hidden h-[28px] items-center gap-1.5 rounded-md border p-[2px] shadow-sm md:flex">
+        <Button
+          variant="ghost"
+          class="hidden h-7 w-7 rounded-md border bg-transparent shadow-none md:flex lg:w-auto"
+          size="sm"
+          @click="copy(`npx shadcn-vue@latest add ${name}`)"
+        >
+          <Check v-if="copied" />
+          <Terminal v-else />
+          <span class="hidden lg:inline">npx shadcn-vue add {{ name }}</span>
+        </Button>
+        <Separator
+          orientation="vertical"
+          class="mx-2 hidden h-4 md:flex"
+        />
+        <div class="hidden h-7 items-center gap-1.5 rounded-md border p-[2px] shadow-none lg:flex">
           <ToggleGroup
             type="single"
             default-value="100"
@@ -158,44 +174,22 @@ watch([style, codeConfig], async () => {
             >
               <Smartphone class="h-3.5 w-3.5" />
             </ToggleGroupItem>
+            <Separator orientation="vertical" class="h-4" />
+            <Button
+              size="icon"
+              variant="ghost"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+              as-child
+              title="Open in New Tab"
+            >
+              <a :href="iframeURL" target="_blank">
+                <span class="sr-only">Open in New Tab</span>
+                <Fullscreen class="h-3.5 w-3.5" />
+              </a>
+            </Button>
           </ToggleGroup>
         </div>
-        <Separator
-          orientation="vertical"
-          class="mx-2 hidden h-4 md:flex"
-        />
-        <StyleSwitcher class="h-7" />
-        <Popover>
-          <PopoverTrigger class="hidden text-muted-foreground hover:text-foreground sm:flex">
-            <CircleHelp class="h-3.5 w-3.5" />
-            <span class="sr-only">Block description</span>
-          </PopoverTrigger>
-          <PopoverContent
-            side="top"
-            :side-offset="20"
-            class="space-y-3 rounded-[0.5rem] text-sm"
-          >
-            <p class="font-medium">
-              What is the difference between the New York and Default style?
-            </p>
-            <p>
-              A style comes with its own set of components, animations,
-              icons and more.
-            </p>
-            <p>
-              The <span class="font-medium">Default</span> style has
-              larger inputs, uses lucide-vue-next for icons and
-              tailwindcss-animate for animations.
-            </p>
-            <p>
-              The <span class="font-medium">New York</span> style ships
-              with smaller buttons and inputs. It also uses shadows on cards
-              and buttons.
-            </p>
-          </PopoverContent>
-        </Popover>
-        <Separator orientation="vertical" class="mx-2 h-4" />
-        <BlockCopyButton :code="rawString" />
+        <!-- <BlockCopyButton :code="rawString" /> -->
         <!-- <V0Button
           name="{block.name}"
           description="{block.description" || "Edit in v0"}
@@ -208,7 +202,7 @@ watch([style, codeConfig], async () => {
       v-show="tabValue === 'preview'"
       force-mount
       value="preview"
-      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
+      class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--height] px-0"
     >
       <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
         <ResizablePanel
@@ -218,17 +212,18 @@ watch([style, codeConfig], async () => {
           :min-size="30"
           :as-child="true"
         >
-          <BlockPreview :name="name" styles="default" :container-class="metadata.containerClass ?? ''" container />
+          <BlockPreview :url="iframeURL" container />
         </ResizablePanel>
         <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
         <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
       </ResizablePanelGroup>
     </TabsContent>
-    <TabsContent value="code" class="h-[--container-height]">
-      <div
+    <TabsContent value="code" class="h-[--height]">
+      <BlockViewerCode v-if="componentRegistry" :item="componentRegistry" />
+      <!-- <div
         class="language-vue !h-full !max-h-[none] !mt-0"
         v-html="codeHtml"
-      />
+      /> -->
     </TabsContent>
   </Tabs>
 </template>
diff --git a/apps/www/.vitepress/theme/components/BlockCopyButton.vue b/apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
similarity index 100%
rename from apps/www/.vitepress/theme/components/BlockCopyButton.vue
rename to apps/www/.vitepress/theme/components/BlockCopyCodeButton.vue
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 93dfecee..6aee8eb0 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -1,28 +1,13 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref } from 'vue'
 import Spinner from './Spinner.vue'
 
 const props = defineProps<{
-  name: string
-  styles?: string
-  containerClass?: string
   container?: boolean
+  url: string
 }>()
 
 const isLoading = ref(true)
-
-const iframeURL = computed(() => {
-  // @ts-expect-error env available in import.meta
-  if (import.meta.env.SSR)
-    return ''
-
-  const url = new URL(`${window.location.origin}/blocks/renderer`)
-  Object.entries(props).forEach(([key, value]) => {
-    if (value)
-      url.searchParams.append(key, value as string)
-  })
-  return url.href
-})
 </script>
 
 <template>
@@ -35,8 +20,8 @@ const iframeURL = computed(() => {
     >
       <iframe
         v-show="!isLoading"
-        :src="iframeURL"
-        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
+        :src="url"
+        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--height]' : 'size-full']"
         @load="isLoading = false"
       />
     </div>
diff --git a/apps/www/.vitepress/theme/components/BlockViewerCode.vue b/apps/www/.vitepress/theme/components/BlockViewerCode.vue
new file mode 100644
index 00000000..0285b37c
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockViewerCode.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { Block } from '@/registry/schema'
+import { File } from 'lucide-vue-next'
+import { computed, onBeforeMount, ref } from 'vue'
+import { highlight } from '../config/shiki'
+import BlockCopyCodeButton from './BlockCopyCodeButton.vue'
+import BlockViewerFileTree, { type FileTree } from './BlockViewerFileTree.vue'
+
+const props = defineProps<{
+  item: Block
+}>()
+
+const activeFile = ref<FileTree>()
+
+const cacheCodes = ref<Map<string, string>>(new Map<string, string>())
+const activeCode = computed(() => cacheCodes.value.get(activeFile.value?.path ?? ''))
+
+onBeforeMount(async () => {
+  for (const file of (props.item.files ?? [])) {
+    const raw = await file.raw()
+    const highlighted = highlight(raw, 'vue')
+    cacheCodes.value.set(file.target || file.path.split(`${props.item.name}/`)[1], highlighted)
+  }
+})
+</script>
+
+<template>
+  <div class="mr-[14px] flex h-[--height] overflow-hidden rounded-xl bg-zinc-950 text-white group-data-[view=preview]/block-view-wrapper:hidden">
+    <div class="w-[280px]">
+      <BlockViewerFileTree v-model="activeFile" :item />
+    </div>
+    <div class="flex min-w-0 flex-1 flex-col">
+      <div class="flex h-12 flex-shrink-0 items-center gap-2 border-b border-zinc-700 bg-zinc-900 px-4 text-sm font-medium">
+        <File class="size-4" />
+        {{ activeFile?.path }}
+        <div class="ml-auto flex items-center gap-2">
+          <BlockCopyCodeButton :code="activeCode" />
+        </div>
+      </div>
+      <div :key="activeFile?.path" data-line-codeblock class="relative flex-1 overflow-hidden after:absolute after:inset-y-0 after:left-0 after:w-10 after:bg-zinc-950 [&_.line:before]:sticky [&_.line:before]:left-2 [&_.line:before]:z-10 [&_.line:before]:translate-y-[-1px] [&_.line:before]:pr-1 [&_pre]:h-[--height] [&_pre]:overflow-auto [&_pre]:!bg-transparent [&_pre]:pb-20 [&_pre]:pt-4 [&_pre]:font-mono [&_pre]:text-sm [&_pre]:leading-relaxed" v-html="activeCode" />
+    </div>
+  </div>
+</template>
+
+<style>
+[data-line-codeblock] code {
+    display: grid;
+    min-width: 100%;
+    overflow-wrap: break-word;
+    border-radius: 0;
+    border-width: 0;
+    background-color: transparent;
+    padding: 0;
+    counter-reset: line;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+
+[data-line-codeblock] .line:before {
+    font-size: .75rem;
+    line-height: 1rem;
+    color: hsla(0, 0%, 98%, .4);
+    counter-increment: line;
+    content: counter(line);
+    display: inline-block;
+    width: 1.8rem;
+    margin-right: 1.4rem;
+    text-align: right;
+}
+</style>
diff --git a/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
new file mode 100644
index 00000000..f1703726
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockViewerFileTree.vue
@@ -0,0 +1,150 @@
+<script lang="ts">
+export interface FileTree {
+  name: string
+  path?: string
+  children?: FileTree[]
+}
+</script>
+
+<script setup lang="ts">
+import type { Block } from '@/registry/schema'
+import Button from '@/registry/new-york/ui/button/Button.vue'
+import { ChevronRight, File, Folder } from 'lucide-vue-next'
+import { TreeItem, TreeRoot } from 'reka-ui'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps<{
+  item: Block
+}>()
+
+const activeFile = defineModel<FileTree>()
+
+// TODO: Improve the getter logics
+const flattenFiles = computed(() => {
+  const root: FileTree[] = []
+
+  for (const file of props.item.files ?? []) {
+    const path = file.target || file.path.split(`${props.item.name}/`)[1]
+    const parts = path.split('/')
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const newNode: FileTree = isFile
+        ? { name: part, path }
+        : { name: part, children: [] }
+
+      root.push(newNode)
+    }
+  }
+  return root
+})
+
+const treeItem = computed(() => {
+  return createFileTreeForRegistryItemFiles([...(props.item.files ?? [])])
+})
+
+const expandedKeys = ref<string[]>([])
+
+function createFileTreeForRegistryItemFiles(
+  files: Array<{ path: string, target?: string }>,
+) {
+  const root: FileTree[] = []
+
+  for (const file of files) {
+    const path = file.target || file.path.split(`${props.item.name}/`)[1]
+    const parts = path.split('/')
+    let currentLevel = root
+
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i]
+      const isFile = i === parts.length - 1
+      const existingNode = currentLevel.find(node => node.name === part)
+
+      if (existingNode) {
+        if (isFile) {
+          // Update existing file node with full path
+          existingNode.path = path
+        }
+        else {
+          // Move to next level in the tree
+          currentLevel = existingNode.children!
+        }
+      }
+      else {
+        const newNode: FileTree = isFile
+          ? { name: part, path }
+          : { name: part, children: [] }
+
+        currentLevel.push(newNode)
+
+        if (!isFile) {
+          currentLevel = newNode.children!
+        }
+      }
+    }
+  }
+  return root
+}
+
+watch(flattenFiles, (n) => {
+  activeFile.value = n.filter(i => i.path)[0]
+  expandedKeys.value = n.map(i => i.name)
+}, { immediate: true })
+</script>
+
+<template>
+  <div class="min-h-full w-full has-[[data-variant=inset]]:bg-sidebar flex   flex-col">
+    <div class="flex h-full flex-col w-full flex-1 border-r border-zinc-700 bg-zinc-900 text-white">
+      <div class="duration-200 flex shrink-0 items-center font-medium outline-none ease-linear h-12 rounded-none border-b border-zinc-700 px-4 text-sm text-white">
+        Files
+      </div>
+      <TreeRoot
+        v-slot="{ flattenItems }"
+        v-model="activeFile"
+        v-model:expanded="expandedKeys"
+        class="list-none select-none"
+        :items="treeItem"
+        :get-key="(item) => item.name"
+      >
+        <TreeItem
+          v-for="item in flattenItems"
+          :key="item._id"
+          v-slot="{ isSelected, isExpanded }"
+          v-bind="item.bind"
+          as-child
+          @select="(ev) => {
+            if (item.hasChildren)
+              ev.preventDefault()
+          }"
+        >
+          <Button
+            variant="ghost"
+            :data-active="isSelected"
+            class="flex w-full justify-start whitespace-nowrap rounded-none pl-[--index] hover:bg-zinc-700 hover:text-white focus-visible:bg-zinc-700 focus-visible:text-white active:bg-zinc-700 active:text-white data-[active=true]:bg-zinc-700 data-[active=true]:text-white"
+            :style="{ 'padding-left': `${(item.level - 0.25) * 1.5}rem` }"
+          >
+            <template v-if="item.hasChildren">
+              <ChevronRight
+                icon="lucide:folder"
+                class="h-4 w-4 transition-transform"
+                :class="{ 'rotate-90': isExpanded } "
+              />
+              <Folder class="h-4 w-4" />
+            </template>
+            <template v-else>
+              <ChevronRight
+                icon="lucide:folder"
+                class="invisible"
+              />
+              <File class="h-4 w-4" />
+            </template>
+            <div>
+              {{ item.value.name }}
+            </div>
+          </Button>
+        </TreeItem>
+      </TreeRoot>
+    </div>
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 64592b50..0e498e38 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -12,6 +12,7 @@ import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 import BlockContainer from './BlockContainer.vue'
 
+// const blocks = ['Sidebar01', 'Sidebar02', 'Sidebar03', 'Sidebar04', 'Sidebar05', 'Sidebar06', 'Sidebar07', 'Sidebar08', 'Sidebar09', 'Sidebar10', 'Sidebar11', 'Sidebar12', 'Sidebar13', 'Sidebar14', 'Sidebar15', 'Login01']
 const blocks = Object.values(Index['new-york']).filter((i: any) => i.type === 'registry:block').map((i: any) => i.name)
 </script>
 
diff --git a/apps/www/__registry__/block.ts b/apps/www/__registry__/block.ts
new file mode 100644
index 00000000..ea878ec1
--- /dev/null
+++ b/apps/www/__registry__/block.ts
@@ -0,0 +1,1022 @@
+// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+
+export const Index: Record<string, any> = {
+  "new-york": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/new-york/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/new-york/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/new-york/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/new-york/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/new-york/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },  "default": {
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication01": {
+      name: "Authentication01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication02": {
+      name: "Authentication02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","input","label"],
+      files: [{
+        path: "registry/default/block/Authentication04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard01": {
+      name: "Dashboard01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","badge","button","card","dropdown-menu","input","sheet","table"],
+      files: [{
+        path: "registry/default/block/Dashboard01.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard02": {
+      name: "Dashboard02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","card","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard02.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard03": {
+      name: "Dashboard03",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","button","drawer","input","label","select","textarea","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard03.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard04": {
+      name: "Dashboard04",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["button","card","checkbox","dropdown-menu","input","sheet"],
+      files: [{
+        path: "registry/default/block/Dashboard04.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard05": {
+      name: "Dashboard05",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard05.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard06": {
+      name: "Dashboard06",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard06.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Dashboard07": {
+      name: "Dashboard07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      files: [{
+        path: "registry/default/block/Dashboard07.vue",
+        type: "registry:block",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar01": {
+      name: "Sidebar01",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar01/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/AppSidebar.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/SearchForm.vue?raw").then((m) => m.default)
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: "",
+        raw: () => import("@/registry/default/block/Sidebar02/components/VersionSwitcher.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar02/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar07": {
+      name: "Sidebar07",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
+      files: [{
+        path: "registry/default/block/Sidebar07/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue",
+        raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default)
+      }],
+      component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
+      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+  },
+}
+
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 93ed8fec..8d0b2358 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -15,7 +15,6 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/new-york/lib/utils.ts").then((m) => m.default),
-      raw: () => import("@/registry/new-york/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -47,7 +46,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -75,7 +73,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -127,7 +124,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -147,7 +143,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -223,7 +218,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -251,7 +245,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -271,7 +264,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -315,7 +307,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -335,7 +326,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -399,7 +389,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -439,7 +428,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -483,7 +471,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -519,7 +506,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -539,7 +525,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -559,7 +544,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -579,7 +563,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -599,7 +582,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -619,7 +601,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -647,7 +628,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -699,7 +679,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -775,7 +754,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -827,7 +805,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -871,7 +848,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -943,7 +919,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -987,7 +962,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1015,7 +989,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1035,7 +1008,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1055,7 +1027,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1131,7 +1102,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1179,7 +1149,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1215,7 +1184,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1251,7 +1219,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1283,7 +1250,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1311,7 +1277,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1331,7 +1296,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1355,7 +1319,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1419,7 +1382,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1443,7 +1405,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1467,7 +1428,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1527,7 +1487,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1547,7 +1506,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1595,7 +1553,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1711,7 +1668,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1731,7 +1687,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1751,7 +1706,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1771,7 +1725,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1815,7 +1768,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1835,7 +1787,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1887,7 +1838,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1919,7 +1869,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1955,7 +1904,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -1975,7 +1923,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2027,7 +1974,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2047,7 +1993,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2071,7 +2016,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2103,7 +2047,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2123,7 +2066,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2136,10 +2078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2152,10 +2093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2168,10 +2108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2184,10 +2123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2200,10 +2138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2216,10 +2153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2232,10 +2168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2248,10 +2183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2264,10 +2198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2280,10 +2213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2296,10 +2228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2312,10 +2243,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2328,10 +2258,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2344,10 +2273,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2360,10 +2288,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2376,10 +2303,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2392,10 +2318,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2408,10 +2333,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2424,10 +2348,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2440,10 +2363,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2456,10 +2378,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2472,10 +2393,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2488,10 +2408,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2504,10 +2423,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2520,10 +2438,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2536,10 +2453,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2552,10 +2468,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2568,10 +2483,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2584,10 +2498,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2600,10 +2513,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2616,10 +2528,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2632,10 +2543,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2648,10 +2558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2664,10 +2573,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2680,10 +2588,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2696,10 +2603,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2712,10 +2618,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2728,10 +2633,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2744,10 +2648,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2760,10 +2663,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2776,10 +2678,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2792,10 +2693,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2808,10 +2708,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2824,10 +2723,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2840,10 +2738,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2856,10 +2753,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2872,10 +2768,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2888,10 +2783,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2904,10 +2798,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2920,10 +2813,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2936,10 +2828,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2952,10 +2843,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2968,10 +2858,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -2984,10 +2873,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3000,10 +2888,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3016,10 +2903,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3032,10 +2918,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3048,10 +2933,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3064,10 +2948,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3080,10 +2963,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3096,10 +2978,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3112,10 +2993,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3128,10 +3008,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3144,10 +3023,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3160,10 +3038,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3176,10 +3053,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3192,10 +3068,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3208,10 +3083,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3224,10 +3098,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3240,10 +3113,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3256,10 +3128,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3272,10 +3143,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3288,10 +3158,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3304,10 +3173,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3320,10 +3188,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3336,10 +3203,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3352,10 +3218,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3368,10 +3233,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3384,10 +3248,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3400,10 +3263,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3416,10 +3278,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3432,10 +3293,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3448,10 +3308,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3464,10 +3323,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3480,10 +3338,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3496,10 +3353,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3512,10 +3368,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3528,10 +3383,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3544,10 +3398,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3560,10 +3413,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3576,10 +3428,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3592,10 +3443,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3608,10 +3458,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3624,10 +3473,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3640,10 +3488,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3656,10 +3503,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3672,10 +3518,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3688,10 +3533,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3704,10 +3548,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3720,10 +3563,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3736,10 +3578,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3752,10 +3593,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3768,10 +3608,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3784,10 +3623,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3800,10 +3638,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3816,10 +3653,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3832,10 +3668,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3848,10 +3683,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3864,10 +3698,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3880,10 +3713,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3896,10 +3728,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3912,10 +3743,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3928,10 +3758,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3944,10 +3773,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3960,10 +3788,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3976,10 +3803,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -3992,10 +3818,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4008,10 +3833,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4024,10 +3848,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4040,10 +3863,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4056,10 +3878,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4072,10 +3893,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4088,10 +3908,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4104,10 +3923,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4120,10 +3938,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4136,10 +3953,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4152,10 +3968,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4168,10 +3983,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4184,10 +3998,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4200,10 +4013,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4216,10 +4028,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4232,10 +4043,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4248,10 +4058,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4264,10 +4073,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4280,10 +4088,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4296,10 +4103,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4312,10 +4118,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4328,10 +4133,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4344,10 +4148,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4360,10 +4163,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4376,10 +4178,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4392,10 +4193,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4408,10 +4208,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4424,10 +4223,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4440,10 +4238,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4456,10 +4253,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4472,10 +4268,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4488,10 +4283,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4504,10 +4298,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4520,10 +4313,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4536,10 +4328,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4552,10 +4343,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4568,10 +4358,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4584,10 +4373,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4600,10 +4388,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4616,10 +4403,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4632,10 +4418,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4648,10 +4433,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4664,10 +4448,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4680,10 +4463,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4696,10 +4478,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4712,10 +4493,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4728,10 +4508,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4744,10 +4523,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4760,10 +4538,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4776,10 +4553,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4792,10 +4568,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4808,10 +4583,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4824,10 +4598,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4840,10 +4613,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4856,10 +4628,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4872,10 +4643,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4888,10 +4658,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4904,10 +4673,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4920,10 +4688,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4936,10 +4703,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4952,10 +4718,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4968,10 +4733,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -4984,10 +4748,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5000,10 +4763,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5016,10 +4778,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5032,10 +4793,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5048,10 +4808,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5064,10 +4823,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5080,10 +4838,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5096,10 +4853,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5112,10 +4868,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5128,10 +4883,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5144,10 +4898,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5160,10 +4913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5176,10 +4928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5192,10 +4943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5208,10 +4958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5224,10 +4973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5240,10 +4988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5256,10 +5003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5272,10 +5018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5288,10 +5033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5304,10 +5048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5320,10 +5063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5336,10 +5078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5352,10 +5093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5368,10 +5108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5384,10 +5123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5400,10 +5138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5416,10 +5153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5432,10 +5168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5448,10 +5183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5464,10 +5198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5480,10 +5213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5496,10 +5228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5512,10 +5243,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5528,10 +5285,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5563,7 +5319,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5591,7 +5346,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5643,7 +5397,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5663,7 +5416,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5739,7 +5491,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5767,7 +5518,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5787,7 +5537,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5831,7 +5580,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5851,7 +5599,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5915,7 +5662,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5955,7 +5701,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -5999,7 +5744,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/new-york/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6035,7 +5779,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6055,7 +5798,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6075,7 +5817,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6095,7 +5836,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6115,7 +5855,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6135,7 +5874,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6163,7 +5901,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6215,7 +5952,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6291,7 +6027,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6343,7 +6078,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6387,7 +6121,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6459,7 +6192,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6503,7 +6235,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/new-york/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6531,7 +6262,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6551,7 +6281,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6571,7 +6300,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6647,7 +6375,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6695,7 +6422,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6731,7 +6457,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6767,7 +6492,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6799,7 +6523,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6827,7 +6550,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6847,7 +6569,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6871,7 +6592,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6935,7 +6655,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6959,7 +6678,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -6983,7 +6701,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7043,7 +6760,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7063,7 +6779,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7111,7 +6826,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7227,7 +6941,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7247,7 +6960,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7267,7 +6979,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7287,7 +6998,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7331,7 +7041,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7351,7 +7060,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7403,7 +7111,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7435,7 +7142,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7471,7 +7177,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7491,7 +7196,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7543,7 +7247,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/new-york/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7563,7 +7266,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7587,7 +7289,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7619,7 +7320,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7639,7 +7339,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7652,10 +7351,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7668,10 +7366,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7684,10 +7381,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7700,10 +7396,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7716,10 +7411,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7732,10 +7426,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7748,10 +7441,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7764,10 +7456,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7780,10 +7471,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7796,10 +7486,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7812,10 +7501,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7828,10 +7516,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7844,10 +7531,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7860,10 +7546,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7876,10 +7561,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7892,10 +7576,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7908,10 +7591,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7924,10 +7606,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7940,10 +7621,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7956,10 +7636,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7972,10 +7651,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -7988,10 +7666,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8004,10 +7681,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8020,10 +7696,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8036,10 +7711,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8052,10 +7726,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8068,10 +7741,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8084,10 +7756,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8100,10 +7771,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8116,10 +7786,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8132,10 +7801,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8148,10 +7816,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8164,10 +7831,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8180,10 +7846,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8196,10 +7861,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8212,10 +7876,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8228,10 +7891,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8244,10 +7906,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8260,10 +7921,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8276,10 +7936,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8292,10 +7951,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8308,10 +7966,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8324,10 +7981,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8340,10 +7996,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8356,10 +8011,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8372,10 +8026,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8388,10 +8041,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8404,10 +8056,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8420,10 +8071,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8436,10 +8086,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8452,10 +8101,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8468,10 +8116,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8484,10 +8131,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8500,10 +8146,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8516,10 +8161,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8532,10 +8176,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8548,10 +8191,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8564,10 +8206,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8580,10 +8221,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8596,10 +8236,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8612,10 +8251,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8628,10 +8266,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8644,10 +8281,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8660,10 +8296,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8676,10 +8311,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8692,10 +8326,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8708,10 +8341,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8724,10 +8356,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8740,10 +8371,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8756,10 +8386,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8772,10 +8401,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8788,10 +8416,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8804,10 +8431,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8820,10 +8446,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8836,10 +8461,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8852,10 +8476,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8868,10 +8491,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8884,10 +8506,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8900,10 +8521,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8916,10 +8536,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8932,10 +8551,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8948,10 +8566,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8964,10 +8581,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8980,10 +8596,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -8996,10 +8611,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9012,10 +8626,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9028,10 +8641,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9044,10 +8656,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9060,10 +8671,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9076,10 +8686,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9092,10 +8701,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9108,10 +8716,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9124,10 +8731,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9140,10 +8746,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9156,10 +8761,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9172,10 +8776,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9188,10 +8791,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9204,10 +8806,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9220,10 +8821,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9236,10 +8836,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9252,10 +8851,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9268,10 +8866,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9284,10 +8881,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9300,10 +8896,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9316,10 +8911,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9332,10 +8926,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9348,10 +8941,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9364,10 +8956,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9380,10 +8971,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9396,10 +8986,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9412,10 +9001,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9428,10 +9016,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9444,10 +9031,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9460,10 +9046,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9476,10 +9061,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9492,10 +9076,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9508,10 +9091,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9524,10 +9106,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9540,10 +9121,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9556,10 +9136,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9572,10 +9151,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9588,10 +9166,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9604,10 +9181,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9620,10 +9196,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9636,10 +9211,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9652,10 +9226,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9668,10 +9241,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9684,10 +9256,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9700,10 +9271,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9716,10 +9286,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9732,10 +9301,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9748,10 +9316,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9764,10 +9331,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9780,10 +9346,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9796,10 +9361,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9812,10 +9376,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9828,10 +9391,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9844,10 +9406,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9860,10 +9421,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9876,10 +9436,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9892,10 +9451,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9908,10 +9466,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9924,10 +9481,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9940,10 +9496,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9956,10 +9511,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9972,10 +9526,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -9988,10 +9541,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10004,10 +9556,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10020,10 +9571,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10036,10 +9586,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10052,10 +9601,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10068,10 +9616,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10084,10 +9631,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10100,10 +9646,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10116,10 +9661,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10132,10 +9676,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10148,10 +9691,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10164,10 +9706,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10180,10 +9721,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10196,10 +9736,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10212,10 +9751,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10228,10 +9766,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10244,10 +9781,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10260,10 +9796,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10276,10 +9811,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10292,10 +9826,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10308,10 +9841,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10324,10 +9856,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10340,10 +9871,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10356,10 +9886,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10372,10 +9901,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10388,10 +9916,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10404,10 +9931,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10420,10 +9946,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10436,10 +9961,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10452,10 +9976,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10468,10 +9991,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10484,10 +10006,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10500,10 +10021,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10516,10 +10036,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10532,10 +10051,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10548,10 +10066,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10564,10 +10081,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10580,10 +10096,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10596,10 +10111,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10612,10 +10126,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10628,10 +10141,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10644,10 +10156,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10660,10 +10171,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10676,10 +10186,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10692,10 +10201,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10708,10 +10216,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10724,10 +10231,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10740,10 +10246,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10756,10 +10261,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10772,10 +10276,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10788,10 +10291,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10804,10 +10306,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10820,10 +10321,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10836,10 +10336,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10852,10 +10351,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10868,10 +10366,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10884,10 +10381,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10900,10 +10396,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10916,10 +10411,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10932,10 +10426,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10948,10 +10441,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10964,10 +10456,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10980,10 +10471,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -10996,10 +10486,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11012,10 +10501,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11028,10 +10516,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/new-york/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/new-york/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/new-york/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/new-york/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11044,10 +10558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/new-york/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/new-york/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/new-york/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11064,7 +10577,6 @@ export const Index: Record<string, any> = {
         target: ""
       }],
       component: () => import("@/registry/default/lib/utils.ts").then((m) => m.default),
-      raw: () => import("@/registry/default/lib/utils.ts?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11096,7 +10608,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11124,7 +10635,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11176,7 +10686,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11196,7 +10705,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11272,7 +10780,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11300,7 +10807,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11320,7 +10826,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11364,7 +10869,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11384,7 +10888,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11448,7 +10951,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11488,7 +10990,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11532,7 +11033,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11568,7 +11068,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11588,7 +11087,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11608,7 +11106,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11628,7 +11125,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11648,7 +11144,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11668,7 +11163,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11696,7 +11190,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11748,7 +11241,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11824,7 +11316,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11876,7 +11367,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11920,7 +11410,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -11992,7 +11481,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12036,7 +11524,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12064,7 +11551,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12084,7 +11570,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12104,7 +11589,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12180,7 +11664,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12228,7 +11711,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12264,7 +11746,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12300,7 +11781,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12332,7 +11812,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12360,7 +11839,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12380,7 +11858,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12404,7 +11881,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12468,7 +11944,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12492,7 +11967,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12516,7 +11990,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12576,7 +12049,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12596,7 +12068,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12644,7 +12115,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12760,7 +12230,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12780,7 +12249,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12800,7 +12268,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12820,7 +12287,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12864,7 +12330,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12884,7 +12349,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12936,7 +12400,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -12968,7 +12431,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13004,7 +12466,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13024,7 +12485,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13076,7 +12536,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13096,7 +12555,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13120,7 +12578,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13152,7 +12609,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13172,7 +12628,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13185,10 +12640,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13201,10 +12655,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13217,10 +12670,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13233,10 +12685,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13249,10 +12700,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13265,10 +12715,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13281,10 +12730,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13297,10 +12745,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13313,10 +12760,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13329,10 +12775,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13345,10 +12790,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13361,10 +12805,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13377,10 +12820,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13393,10 +12835,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13409,10 +12850,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13425,10 +12865,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13441,10 +12880,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13457,10 +12895,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13473,10 +12910,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13489,10 +12925,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13505,10 +12940,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13521,10 +12955,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13537,10 +12970,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13553,10 +12985,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13569,10 +13000,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13585,10 +13015,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13601,10 +13030,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13617,10 +13045,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13633,10 +13060,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13649,10 +13075,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13665,10 +13090,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13681,10 +13105,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13697,10 +13120,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13713,10 +13135,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13729,10 +13150,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13745,10 +13165,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13761,10 +13180,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13777,10 +13195,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13793,10 +13210,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13809,10 +13225,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13825,10 +13240,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13841,10 +13255,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13857,10 +13270,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13873,10 +13285,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13889,10 +13300,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13905,10 +13315,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13921,10 +13330,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13937,10 +13345,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13953,10 +13360,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13969,10 +13375,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -13985,10 +13390,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14001,10 +13405,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14017,10 +13420,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14033,10 +13435,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14049,10 +13450,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14065,10 +13465,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14081,10 +13480,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14097,10 +13495,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14113,10 +13510,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14129,10 +13525,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14145,10 +13540,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14161,10 +13555,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14177,10 +13570,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14193,10 +13585,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14209,10 +13600,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14225,10 +13615,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14241,10 +13630,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14257,10 +13645,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14273,10 +13660,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14289,10 +13675,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14305,10 +13690,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14321,10 +13705,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14337,10 +13720,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14353,10 +13735,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14369,10 +13750,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14385,10 +13765,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14401,10 +13780,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14417,10 +13795,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14433,10 +13810,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14449,10 +13825,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14465,10 +13840,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14481,10 +13855,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14497,10 +13870,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14513,10 +13885,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14529,10 +13900,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14545,10 +13915,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14561,10 +13930,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14577,10 +13945,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14593,10 +13960,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14609,10 +13975,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14625,10 +13990,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14641,10 +14005,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14657,10 +14020,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14673,10 +14035,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14689,10 +14050,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14705,10 +14065,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14721,10 +14080,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14737,10 +14095,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14753,10 +14110,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14769,10 +14125,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14785,10 +14140,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14801,10 +14155,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14817,10 +14170,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14833,10 +14185,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14849,10 +14200,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14865,10 +14215,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14881,10 +14230,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14897,10 +14245,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14913,10 +14260,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14929,10 +14275,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14945,10 +14290,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14961,10 +14305,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14977,10 +14320,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -14993,10 +14335,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15009,10 +14350,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15025,10 +14365,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15041,10 +14380,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15057,10 +14395,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15073,10 +14410,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15089,10 +14425,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15105,10 +14440,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15121,10 +14455,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15137,10 +14470,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15153,10 +14485,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15169,10 +14500,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15185,10 +14515,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15201,10 +14530,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15217,10 +14545,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15233,10 +14560,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15249,10 +14575,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15265,10 +14590,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15281,10 +14605,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15297,10 +14620,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15313,10 +14635,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15329,10 +14650,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15345,10 +14665,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15361,10 +14680,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15377,10 +14695,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15393,10 +14710,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15409,10 +14725,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15425,10 +14740,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15441,10 +14755,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15457,10 +14770,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15473,10 +14785,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15489,10 +14800,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15505,10 +14815,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15521,10 +14830,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15537,10 +14845,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15553,10 +14860,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15569,10 +14875,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15585,10 +14890,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15601,10 +14905,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15617,10 +14920,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15633,10 +14935,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15649,10 +14950,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15665,10 +14965,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15681,10 +14980,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15697,10 +14995,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15713,10 +15010,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15729,10 +15025,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15745,10 +15040,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15761,10 +15055,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15777,10 +15070,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15793,10 +15085,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15809,10 +15100,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15825,10 +15115,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15841,10 +15130,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15857,10 +15145,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15873,10 +15160,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15889,10 +15175,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15905,10 +15190,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15921,10 +15205,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15937,10 +15220,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15953,10 +15235,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15969,10 +15250,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -15985,10 +15265,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16001,10 +15280,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16017,10 +15295,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16033,10 +15310,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16049,10 +15325,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16065,10 +15340,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16081,10 +15355,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16097,10 +15370,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16113,10 +15385,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16129,10 +15400,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16145,10 +15415,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16161,10 +15430,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16177,10 +15445,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16193,10 +15460,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16209,10 +15475,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16225,10 +15490,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16241,10 +15505,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16257,10 +15520,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16273,10 +15535,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16289,10 +15550,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16305,10 +15565,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16321,10 +15580,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16337,10 +15595,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16353,10 +15610,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16369,10 +15625,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16385,10 +15640,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16401,10 +15655,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16417,10 +15670,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16433,10 +15685,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16449,10 +15700,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16465,10 +15715,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16481,10 +15730,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16497,10 +15745,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16513,10 +15760,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16529,10 +15775,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16545,10 +15790,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16561,10 +15805,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16577,10 +15847,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16612,7 +15881,6 @@ export const Index: Record<string, any> = {
         target: "accordion/index.ts"
       }],
       component: () => import("@/registry/default/ui/accordion/Accordion.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/accordion/Accordion.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16640,7 +15908,6 @@ export const Index: Record<string, any> = {
         target: "alert/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert/Alert.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert/Alert.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16692,7 +15959,6 @@ export const Index: Record<string, any> = {
         target: "alert-dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/alert-dialog/AlertDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16712,7 +15978,6 @@ export const Index: Record<string, any> = {
         target: "aspect-ratio/index.ts"
       }],
       component: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/aspect-ratio/AspectRatio.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16788,7 +16053,6 @@ export const Index: Record<string, any> = {
         target: "auto-form/utils.ts"
       }],
       component: () => import("@/registry/default/ui/auto-form/AutoForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/auto-form/AutoForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16816,7 +16080,6 @@ export const Index: Record<string, any> = {
         target: "avatar/index.ts"
       }],
       component: () => import("@/registry/default/ui/avatar/Avatar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/avatar/Avatar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16836,7 +16099,6 @@ export const Index: Record<string, any> = {
         target: "badge/index.ts"
       }],
       component: () => import("@/registry/default/ui/badge/Badge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/badge/Badge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16880,7 +16142,6 @@ export const Index: Record<string, any> = {
         target: "breadcrumb/index.ts"
       }],
       component: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/breadcrumb/Breadcrumb.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16900,7 +16161,6 @@ export const Index: Record<string, any> = {
         target: "button/index.ts"
       }],
       component: () => import("@/registry/default/ui/button/Button.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/button/Button.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -16964,7 +16224,6 @@ export const Index: Record<string, any> = {
         target: "calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17004,7 +16263,6 @@ export const Index: Record<string, any> = {
         target: "card/index.ts"
       }],
       component: () => import("@/registry/default/ui/card/Card.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/card/Card.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17048,7 +16306,6 @@ export const Index: Record<string, any> = {
         target: "carousel/useCarousel.ts"
       }],
       component: () => import("@/registry/default/ui/carousel/Carousel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/carousel/Carousel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17084,7 +16341,6 @@ export const Index: Record<string, any> = {
         target: "chart/interface.ts"
       }],
       component: () => import("@/registry/default/ui/chart/ChartCrosshair.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart/ChartCrosshair.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17104,7 +16360,6 @@ export const Index: Record<string, any> = {
         target: "chart-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-area/AreaChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-area/AreaChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17124,7 +16379,6 @@ export const Index: Record<string, any> = {
         target: "chart-bar/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-bar/BarChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-bar/BarChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17144,7 +16398,6 @@ export const Index: Record<string, any> = {
         target: "chart-donut/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-donut/DonutChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-donut/DonutChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17164,7 +16417,6 @@ export const Index: Record<string, any> = {
         target: "chart-line/index.ts"
       }],
       component: () => import("@/registry/default/ui/chart-line/LineChart.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/chart-line/LineChart.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17184,7 +16436,6 @@ export const Index: Record<string, any> = {
         target: "checkbox/index.ts"
       }],
       component: () => import("@/registry/default/ui/checkbox/Checkbox.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/checkbox/Checkbox.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17212,7 +16463,6 @@ export const Index: Record<string, any> = {
         target: "collapsible/index.ts"
       }],
       component: () => import("@/registry/default/ui/collapsible/Collapsible.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/collapsible/Collapsible.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17264,7 +16514,6 @@ export const Index: Record<string, any> = {
         target: "command/index.ts"
       }],
       component: () => import("@/registry/default/ui/command/Command.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/command/Command.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17340,7 +16589,6 @@ export const Index: Record<string, any> = {
         target: "context-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/context-menu/ContextMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/context-menu/ContextMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17392,7 +16640,6 @@ export const Index: Record<string, any> = {
         target: "dialog/index.ts"
       }],
       component: () => import("@/registry/default/ui/dialog/Dialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dialog/Dialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17436,7 +16683,6 @@ export const Index: Record<string, any> = {
         target: "drawer/index.ts"
       }],
       component: () => import("@/registry/default/ui/drawer/Drawer.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/drawer/Drawer.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17508,7 +16754,6 @@ export const Index: Record<string, any> = {
         target: "dropdown-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/dropdown-menu/DropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17552,7 +16797,6 @@ export const Index: Record<string, any> = {
         target: "form/useFormField.ts"
       }],
       component: () => import("@/registry/default/ui/form/FormControl.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/form/FormControl.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17580,7 +16824,6 @@ export const Index: Record<string, any> = {
         target: "hover-card/index.ts"
       }],
       component: () => import("@/registry/default/ui/hover-card/HoverCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/hover-card/HoverCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17600,7 +16843,6 @@ export const Index: Record<string, any> = {
         target: "input/index.ts"
       }],
       component: () => import("@/registry/default/ui/input/Input.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/input/Input.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17620,7 +16862,6 @@ export const Index: Record<string, any> = {
         target: "label/index.ts"
       }],
       component: () => import("@/registry/default/ui/label/Label.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/label/Label.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17696,7 +16937,6 @@ export const Index: Record<string, any> = {
         target: "menubar/index.ts"
       }],
       component: () => import("@/registry/default/ui/menubar/Menubar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/menubar/Menubar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17744,7 +16984,6 @@ export const Index: Record<string, any> = {
         target: "navigation-menu/index.ts"
       }],
       component: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/navigation-menu/NavigationMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17780,7 +17019,6 @@ export const Index: Record<string, any> = {
         target: "number-field/index.ts"
       }],
       component: () => import("@/registry/default/ui/number-field/NumberField.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/number-field/NumberField.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17816,7 +17054,6 @@ export const Index: Record<string, any> = {
         target: "pagination/index.ts"
       }],
       component: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pagination/PaginationEllipsis.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17848,7 +17085,6 @@ export const Index: Record<string, any> = {
         target: "pin-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/pin-input/PinInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/pin-input/PinInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17876,7 +17112,6 @@ export const Index: Record<string, any> = {
         target: "popover/index.ts"
       }],
       component: () => import("@/registry/default/ui/popover/Popover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/popover/Popover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17896,7 +17131,6 @@ export const Index: Record<string, any> = {
         target: "progress/index.ts"
       }],
       component: () => import("@/registry/default/ui/progress/Progress.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/progress/Progress.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17920,7 +17154,6 @@ export const Index: Record<string, any> = {
         target: "radio-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/radio-group/RadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/radio-group/RadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -17984,7 +17217,6 @@ export const Index: Record<string, any> = {
         target: "range-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/range-calendar/RangeCalendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18008,7 +17240,6 @@ export const Index: Record<string, any> = {
         target: "resizable/index.ts"
       }],
       component: () => import("@/registry/default/ui/resizable/ResizableHandle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/resizable/ResizableHandle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18032,7 +17263,6 @@ export const Index: Record<string, any> = {
         target: "scroll-area/index.ts"
       }],
       component: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/scroll-area/ScrollArea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18092,7 +17322,6 @@ export const Index: Record<string, any> = {
         target: "select/index.ts"
       }],
       component: () => import("@/registry/default/ui/select/Select.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/select/Select.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18112,7 +17341,6 @@ export const Index: Record<string, any> = {
         target: "separator/index.ts"
       }],
       component: () => import("@/registry/default/ui/separator/Separator.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/separator/Separator.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18160,7 +17388,6 @@ export const Index: Record<string, any> = {
         target: "sheet/index.ts"
       }],
       component: () => import("@/registry/default/ui/sheet/Sheet.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sheet/Sheet.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18276,7 +17503,6 @@ export const Index: Record<string, any> = {
         target: "sidebar/utils.ts"
       }],
       component: () => import("@/registry/default/ui/sidebar/Sidebar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sidebar/Sidebar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18296,7 +17522,6 @@ export const Index: Record<string, any> = {
         target: "skeleton/index.ts"
       }],
       component: () => import("@/registry/default/ui/skeleton/Skeleton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/skeleton/Skeleton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18316,7 +17541,6 @@ export const Index: Record<string, any> = {
         target: "slider/index.ts"
       }],
       component: () => import("@/registry/default/ui/slider/Slider.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/slider/Slider.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18336,7 +17560,6 @@ export const Index: Record<string, any> = {
         target: "sonner/index.ts"
       }],
       component: () => import("@/registry/default/ui/sonner/Sonner.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/sonner/Sonner.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18380,7 +17603,6 @@ export const Index: Record<string, any> = {
         target: "stepper/index.ts"
       }],
       component: () => import("@/registry/default/ui/stepper/Stepper.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/stepper/Stepper.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18400,7 +17622,6 @@ export const Index: Record<string, any> = {
         target: "switch/index.ts"
       }],
       component: () => import("@/registry/default/ui/switch/Switch.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/switch/Switch.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18452,7 +17673,6 @@ export const Index: Record<string, any> = {
         target: "table/index.ts"
       }],
       component: () => import("@/registry/default/ui/table/Table.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/table/Table.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18484,7 +17704,6 @@ export const Index: Record<string, any> = {
         target: "tabs/index.ts"
       }],
       component: () => import("@/registry/default/ui/tabs/Tabs.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tabs/Tabs.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18520,7 +17739,6 @@ export const Index: Record<string, any> = {
         target: "tags-input/index.ts"
       }],
       component: () => import("@/registry/default/ui/tags-input/TagsInput.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tags-input/TagsInput.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18540,7 +17758,6 @@ export const Index: Record<string, any> = {
         target: "textarea/index.ts"
       }],
       component: () => import("@/registry/default/ui/textarea/Textarea.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/textarea/Textarea.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18592,7 +17809,6 @@ export const Index: Record<string, any> = {
         target: "toast/use-toast.ts"
       }],
       component: () => import("@/registry/default/ui/toast/Toast.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toast/Toast.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18612,7 +17828,6 @@ export const Index: Record<string, any> = {
         target: "toggle/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle/Toggle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle/Toggle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18636,7 +17851,6 @@ export const Index: Record<string, any> = {
         target: "toggle-group/index.ts"
       }],
       component: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/toggle-group/ToggleGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18668,7 +17882,6 @@ export const Index: Record<string, any> = {
         target: "tooltip/index.ts"
       }],
       component: () => import("@/registry/default/ui/tooltip/Tooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/tooltip/Tooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18688,7 +17901,6 @@ export const Index: Record<string, any> = {
         target: "v-calendar/index.ts"
       }],
       component: () => import("@/registry/default/ui/v-calendar/Calendar.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/ui/v-calendar/Calendar.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18701,10 +17913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AccordionDemo.vue",
         type: "registry:example",
-        target: "AccordionDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AccordionDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AccordionDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18717,10 +17928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDemo.vue",
         type: "registry:example",
-        target: "AlertDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18733,10 +17943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDestructiveDemo.vue",
         type: "registry:example",
-        target: "AlertDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18749,10 +17958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AlertDialogDemo.vue",
         type: "registry:example",
-        target: "AlertDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AlertDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AlertDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18765,10 +17973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartCustomTooltip.vue",
         type: "registry:example",
-        target: "AreaChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18781,10 +17988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartDemo.vue",
         type: "registry:example",
-        target: "AreaChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18797,10 +18003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AreaChartSparkline.vue",
         type: "registry:example",
-        target: "AreaChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AreaChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AreaChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18813,10 +18018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AspectRatioDemo.vue",
         type: "registry:example",
-        target: "AspectRatioDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AspectRatioDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AspectRatioDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18829,10 +18033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormApi.vue",
         type: "registry:example",
-        target: "AutoFormApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18845,10 +18048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormArray.vue",
         type: "registry:example",
-        target: "AutoFormArray.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormArray.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormArray.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18861,10 +18063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormBasic.vue",
         type: "registry:example",
-        target: "AutoFormBasic.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormBasic.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18877,10 +18078,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormConfirmPassword.vue",
         type: "registry:example",
-        target: "AutoFormConfirmPassword.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormConfirmPassword.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18893,10 +18093,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormControlled.vue",
         type: "registry:example",
-        target: "AutoFormControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18909,10 +18108,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormDependencies.vue",
         type: "registry:example",
-        target: "AutoFormDependencies.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormDependencies.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18925,10 +18123,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormInputWithoutLabel.vue",
         type: "registry:example",
-        target: "AutoFormInputWithoutLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormInputWithoutLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18941,10 +18138,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AutoFormSubObject.vue",
         type: "registry:example",
-        target: "AutoFormSubObject.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AutoFormSubObject.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18957,10 +18153,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/AvatarDemo.vue",
         type: "registry:example",
-        target: "AvatarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/AvatarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/AvatarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18973,10 +18168,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDemo.vue",
         type: "registry:example",
-        target: "BadgeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -18989,10 +18183,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeDestructiveDemo.vue",
         type: "registry:example",
-        target: "BadgeDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19005,10 +18198,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeOutlineDemo.vue",
         type: "registry:example",
-        target: "BadgeOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19021,10 +18213,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BadgeSecondaryDemo.vue",
         type: "registry:example",
-        target: "BadgeSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BadgeSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BadgeSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19037,10 +18228,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartCustomTooltip.vue",
         type: "registry:example",
-        target: "BarChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19053,10 +18243,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartDemo.vue",
         type: "registry:example",
-        target: "BarChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19069,10 +18258,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartRounded.vue",
         type: "registry:example",
-        target: "BarChartRounded.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartRounded.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartRounded.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19085,10 +18273,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BarChartStacked.vue",
         type: "registry:example",
-        target: "BarChartStacked.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BarChartStacked.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BarChartStacked.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19101,10 +18288,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19117,10 +18303,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbDropdown.vue",
         type: "registry:example",
-        target: "BreadcrumbDropdown.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbDropdown.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbDropdown.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19133,10 +18318,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbEllipsisDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbEllipsisDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbEllipsisDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19149,10 +18333,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbLinkDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19165,10 +18348,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbResponsive.vue",
         type: "registry:example",
-        target: "BreadcrumbResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19181,10 +18363,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/BreadcrumbSeparatorDemo.vue",
         type: "registry:example",
-        target: "BreadcrumbSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/BreadcrumbSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19197,10 +18378,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonAsChildDemo.vue",
         type: "registry:example",
-        target: "ButtonAsChildDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonAsChildDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonAsChildDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19213,10 +18393,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDemo.vue",
         type: "registry:example",
-        target: "ButtonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19229,10 +18408,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonDestructiveDemo.vue",
         type: "registry:example",
-        target: "ButtonDestructiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonDestructiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonDestructiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19245,10 +18423,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonGhostDemo.vue",
         type: "registry:example",
-        target: "ButtonGhostDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonGhostDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonGhostDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19261,10 +18438,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonIconDemo.vue",
         type: "registry:example",
-        target: "ButtonIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19277,10 +18453,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLinkDemo.vue",
         type: "registry:example",
-        target: "ButtonLinkDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLinkDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLinkDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19293,10 +18468,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonLoadingDemo.vue",
         type: "registry:example",
-        target: "ButtonLoadingDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonLoadingDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonLoadingDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19309,10 +18483,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonOutlineDemo.vue",
         type: "registry:example",
-        target: "ButtonOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19325,10 +18498,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonSecondaryDemo.vue",
         type: "registry:example",
-        target: "ButtonSecondaryDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonSecondaryDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonSecondaryDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19341,10 +18513,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ButtonWithIconDemo.vue",
         type: "registry:example",
-        target: "ButtonWithIconDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ButtonWithIconDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ButtonWithIconDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19357,10 +18528,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarDemo.vue",
         type: "registry:example",
-        target: "CalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19373,10 +18543,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarForm.vue",
         type: "registry:example",
-        target: "CalendarForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19389,10 +18558,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CalendarWithSelect.vue",
         type: "registry:example",
-        target: "CalendarWithSelect.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CalendarWithSelect.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CalendarWithSelect.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19405,10 +18573,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardChat.vue",
         type: "registry:example",
-        target: "CardChat.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardChat.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardChat.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19421,10 +18588,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardDemo.vue",
         type: "registry:example",
-        target: "CardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19437,10 +18603,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardFormDemo.vue",
         type: "registry:example",
-        target: "CardFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19453,10 +18618,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardStats.vue",
         type: "registry:example",
-        target: "CardStats.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardStats.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardStats.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19469,10 +18633,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CardWithForm.vue",
         type: "registry:example",
-        target: "CardWithForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CardWithForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CardWithForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19485,10 +18648,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselApi.vue",
         type: "registry:example",
-        target: "CarouselApi.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselApi.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselApi.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19501,10 +18663,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselDemo.vue",
         type: "registry:example",
-        target: "CarouselDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19517,10 +18678,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselOrientation.vue",
         type: "registry:example",
-        target: "CarouselOrientation.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselOrientation.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19533,10 +18693,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselPlugin.vue",
         type: "registry:example",
-        target: "CarouselPlugin.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselPlugin.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19549,10 +18708,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSize.vue",
         type: "registry:example",
-        target: "CarouselSize.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSize.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSize.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19565,10 +18723,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselSpacing.vue",
         type: "registry:example",
-        target: "CarouselSpacing.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselSpacing.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19581,10 +18738,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CarouselThumbnails.vue",
         type: "registry:example",
-        target: "CarouselThumbnails.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CarouselThumbnails.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19597,10 +18753,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDemo.vue",
         type: "registry:example",
-        target: "CheckboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19613,10 +18768,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxDisabled.vue",
         type: "registry:example",
-        target: "CheckboxDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19629,10 +18783,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormMultiple.vue",
         type: "registry:example",
-        target: "CheckboxFormMultiple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormMultiple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19645,10 +18798,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxFormSingle.vue",
         type: "registry:example",
-        target: "CheckboxFormSingle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxFormSingle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19661,10 +18813,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CheckboxWithText.vue",
         type: "registry:example",
-        target: "CheckboxWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CheckboxWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CheckboxWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19677,10 +18828,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CollapsibleDemo.vue",
         type: "registry:example",
-        target: "CollapsibleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CollapsibleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CollapsibleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19693,10 +18843,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDemo.vue",
         type: "registry:example",
-        target: "ComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19709,10 +18858,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxDropdownMenu.vue",
         type: "registry:example",
-        target: "ComboboxDropdownMenu.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxDropdownMenu.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxDropdownMenu.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19725,10 +18873,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxForm.vue",
         type: "registry:example",
-        target: "ComboboxForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19741,10 +18888,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxPopover.vue",
         type: "registry:example",
-        target: "ComboboxPopover.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxPopover.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19757,10 +18903,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ComboboxResponsive.vue",
         type: "registry:example",
-        target: "ComboboxResponsive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ComboboxResponsive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ComboboxResponsive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19773,10 +18918,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDemo.vue",
         type: "registry:example",
-        target: "CommandDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19789,10 +18933,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CommandDialogDemo.vue",
         type: "registry:example",
-        target: "CommandDialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CommandDialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CommandDialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19805,10 +18948,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ContextMenuDemo.vue",
         type: "registry:example",
-        target: "ContextMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ContextMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ContextMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19821,10 +18963,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/CustomChartTooltip.vue",
         type: "registry:example",
-        target: "CustomChartTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/CustomChartTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/CustomChartTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19837,10 +18978,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableColumnPinningDemo.vue",
         type: "registry:example",
-        target: "DataTableColumnPinningDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableColumnPinningDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19853,10 +18993,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemo.vue",
         type: "registry:example",
-        target: "DataTableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19869,10 +19008,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableDemoColumn.vue",
         type: "registry:example",
-        target: "DataTableDemoColumn.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableDemoColumn.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19885,10 +19023,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DataTableReactiveDemo.vue",
         type: "registry:example",
-        target: "DataTableReactiveDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DataTableReactiveDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DataTableReactiveDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19901,10 +19038,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerDemo.vue",
         type: "registry:example",
-        target: "DatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19917,10 +19053,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerForm.vue",
         type: "registry:example",
-        target: "DatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19933,10 +19068,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithIndependentMonths.vue",
         type: "registry:example",
-        target: "DatePickerWithIndependentMonths.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithIndependentMonths.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19949,10 +19083,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithPresets.vue",
         type: "registry:example",
-        target: "DatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19965,10 +19098,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DatePickerWithRange.vue",
         type: "registry:example",
-        target: "DatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19981,10 +19113,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogCustomCloseButton.vue",
         type: "registry:example",
-        target: "DialogCustomCloseButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogCustomCloseButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogCustomCloseButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -19997,10 +19128,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogDemo.vue",
         type: "registry:example",
-        target: "DialogDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20013,10 +19143,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogForm.vue",
         type: "registry:example",
-        target: "DialogForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20029,10 +19158,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollBodyDemo.vue",
         type: "registry:example",
-        target: "DialogScrollBodyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollBodyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollBodyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20045,10 +19173,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DialogScrollOverlayDemo.vue",
         type: "registry:example",
-        target: "DialogScrollOverlayDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DialogScrollOverlayDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20061,10 +19188,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartColor.vue",
         type: "registry:example",
-        target: "DonutChartColor.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartColor.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartColor.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20077,10 +19203,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartCustomTooltip.vue",
         type: "registry:example",
-        target: "DonutChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20093,10 +19218,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartDemo.vue",
         type: "registry:example",
-        target: "DonutChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20109,10 +19233,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DonutChartPie.vue",
         type: "registry:example",
-        target: "DonutChartPie.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DonutChartPie.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DonutChartPie.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20125,10 +19248,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDemo.vue",
         type: "registry:example",
-        target: "DrawerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20141,10 +19263,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DrawerDialog.vue",
         type: "registry:example",
-        target: "DrawerDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DrawerDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DrawerDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20157,10 +19278,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuCheckboxes.vue",
         type: "registry:example",
-        target: "DropdownMenuCheckboxes.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuCheckboxes.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20173,10 +19293,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuDemo.vue",
         type: "registry:example",
-        target: "DropdownMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20189,10 +19308,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/DropdownMenuRadioGroup.vue",
         type: "registry:example",
-        target: "DropdownMenuRadioGroup.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/DropdownMenuRadioGroup.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20205,10 +19323,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/HoverCardDemo.vue",
         type: "registry:example",
-        target: "HoverCardDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/HoverCardDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/HoverCardDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20221,10 +19338,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDemo.vue",
         type: "registry:example",
-        target: "InputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20237,10 +19353,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputDisabled.vue",
         type: "registry:example",
-        target: "InputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20253,10 +19368,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFile.vue",
         type: "registry:example",
-        target: "InputFile.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFile.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFile.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20269,10 +19383,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputForm.vue",
         type: "registry:example",
-        target: "InputForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20285,10 +19398,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputFormAutoAnimate.vue",
         type: "registry:example",
-        target: "InputFormAutoAnimate.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputFormAutoAnimate.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputFormAutoAnimate.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20301,10 +19413,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithButton.vue",
         type: "registry:example",
-        target: "InputWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20317,10 +19428,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithIcon.vue",
         type: "registry:example",
-        target: "InputWithIcon.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithIcon.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithIcon.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20333,10 +19443,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/InputWithLabel.vue",
         type: "registry:example",
-        target: "InputWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/InputWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/InputWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20349,10 +19458,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LabelDemo.vue",
         type: "registry:example",
-        target: "LabelDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LabelDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LabelDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20365,10 +19473,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartCustomTooltip.vue",
         type: "registry:example",
-        target: "LineChartCustomTooltip.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartCustomTooltip.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartCustomTooltip.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20381,10 +19488,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartDemo.vue",
         type: "registry:example",
-        target: "LineChartDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20397,10 +19503,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/LineChartSparkline.vue",
         type: "registry:example",
-        target: "LineChartSparkline.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/LineChartSparkline.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/LineChartSparkline.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20413,10 +19518,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/MenubarDemo.vue",
         type: "registry:example",
-        target: "MenubarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/MenubarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/MenubarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20429,10 +19533,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NavigationMenuDemo.vue",
         type: "registry:example",
-        target: "NavigationMenuDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NavigationMenuDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NavigationMenuDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20445,10 +19548,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldCurrency.vue",
         type: "registry:example",
-        target: "NumberFieldCurrency.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldCurrency.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20461,10 +19563,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDecimal.vue",
         type: "registry:example",
-        target: "NumberFieldDecimal.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDecimal.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20477,10 +19578,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDemo.vue",
         type: "registry:example",
-        target: "NumberFieldDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20493,10 +19593,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldDisabled.vue",
         type: "registry:example",
-        target: "NumberFieldDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20509,10 +19608,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldForm.vue",
         type: "registry:example",
-        target: "NumberFieldForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20525,10 +19623,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/NumberFieldPercentage.vue",
         type: "registry:example",
-        target: "NumberFieldPercentage.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/NumberFieldPercentage.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20541,10 +19638,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PaginationDemo.vue",
         type: "registry:example",
-        target: "PaginationDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PaginationDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PaginationDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20557,10 +19653,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputControlled.vue",
         type: "registry:example",
-        target: "PinInputControlled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputControlled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputControlled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20573,10 +19668,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDemo.vue",
         type: "registry:example",
-        target: "PinInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20589,10 +19683,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputDisabled.vue",
         type: "registry:example",
-        target: "PinInputDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20605,10 +19698,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputFormDemo.vue",
         type: "registry:example",
-        target: "PinInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20621,10 +19713,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PinInputSeparatorDemo.vue",
         type: "registry:example",
-        target: "PinInputSeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PinInputSeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PinInputSeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20637,10 +19728,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/PopoverDemo.vue",
         type: "registry:example",
-        target: "PopoverDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/PopoverDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/PopoverDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20653,10 +19743,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ProgressDemo.vue",
         type: "registry:example",
-        target: "ProgressDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ProgressDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ProgressDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20669,10 +19758,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupDemo.vue",
         type: "registry:example",
-        target: "RadioGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20685,10 +19773,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RadioGroupForm.vue",
         type: "registry:example",
-        target: "RadioGroupForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RadioGroupForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RadioGroupForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20701,10 +19788,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/RangeCalendarDemo.vue",
         type: "registry:example",
-        target: "RangeCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/RangeCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/RangeCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20717,10 +19803,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableDemo.vue",
         type: "registry:example",
-        target: "ResizableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20733,10 +19818,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableHandleDemo.vue",
         type: "registry:example",
-        target: "ResizableHandleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableHandleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20749,10 +19833,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ResizableVerticalDemo.vue",
         type: "registry:example",
-        target: "ResizableVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ResizableVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20765,10 +19848,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20781,10 +19863,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ScrollAreaHorizontalDemo.vue",
         type: "registry:example",
-        target: "ScrollAreaHorizontalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ScrollAreaHorizontalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20797,10 +19878,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectDemo.vue",
         type: "registry:example",
-        target: "SelectDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20813,10 +19893,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectForm.vue",
         type: "registry:example",
-        target: "SelectForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20829,10 +19908,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SelectScrollable.vue",
         type: "registry:example",
-        target: "SelectScrollable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SelectScrollable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SelectScrollable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20845,10 +19923,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SeparatorDemo.vue",
         type: "registry:example",
-        target: "SeparatorDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SeparatorDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SeparatorDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20861,10 +19938,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetDemo.vue",
         type: "registry:example",
-        target: "SheetDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20877,10 +19953,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SheetSideDemo.vue",
         type: "registry:example",
-        target: "SheetSideDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SheetSideDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SheetSideDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20893,10 +19968,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonCard.vue",
         type: "registry:example",
-        target: "SkeletonCard.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonCard.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonCard.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20909,10 +19983,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SkeletonDemo.vue",
         type: "registry:example",
-        target: "SkeletonDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SkeletonDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SkeletonDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20925,10 +19998,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderDemo.vue",
         type: "registry:example",
-        target: "SliderDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20941,10 +20013,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SliderForm.vue",
         type: "registry:example",
-        target: "SliderForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SliderForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SliderForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20957,10 +20028,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerDemo.vue",
         type: "registry:example",
-        target: "SonnerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20973,10 +20043,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SonnerWithDialog.vue",
         type: "registry:example",
-        target: "SonnerWithDialog.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SonnerWithDialog.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SonnerWithDialog.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -20989,10 +20058,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperDemo.vue",
         type: "registry:example",
-        target: "StepperDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21005,10 +20073,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperForm.vue",
         type: "registry:example",
-        target: "StepperForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21021,10 +20088,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperHorizental.vue",
         type: "registry:example",
-        target: "StepperHorizental.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperHorizental.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperHorizental.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21037,10 +20103,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/StepperVertical.vue",
         type: "registry:example",
-        target: "StepperVertical.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/StepperVertical.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/StepperVertical.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21053,10 +20118,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchDemo.vue",
         type: "registry:example",
-        target: "SwitchDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21069,10 +20133,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/SwitchForm.vue",
         type: "registry:example",
-        target: "SwitchForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/SwitchForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/SwitchForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21085,10 +20148,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TableDemo.vue",
         type: "registry:example",
-        target: "TableDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TableDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TableDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21101,10 +20163,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsDemo.vue",
         type: "registry:example",
-        target: "TabsDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21117,10 +20178,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TabsVerticalDemo.vue",
         type: "registry:example",
-        target: "TabsVerticalDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TabsVerticalDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TabsVerticalDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21133,10 +20193,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputComboboxDemo.vue",
         type: "registry:example",
-        target: "TagsInputComboboxDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputComboboxDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputComboboxDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21149,10 +20208,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputDemo.vue",
         type: "registry:example",
-        target: "TagsInputDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21165,10 +20223,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TagsInputFormDemo.vue",
         type: "registry:example",
-        target: "TagsInputFormDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TagsInputFormDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21181,10 +20238,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDemo.vue",
         type: "registry:example",
-        target: "TextareaDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21197,10 +20253,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaDisabled.vue",
         type: "registry:example",
-        target: "TextareaDisabled.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaDisabled.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaDisabled.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21213,10 +20268,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaForm.vue",
         type: "registry:example",
-        target: "TextareaForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21229,10 +20283,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithButton.vue",
         type: "registry:example",
-        target: "TextareaWithButton.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithButton.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21245,10 +20298,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithLabel.vue",
         type: "registry:example",
-        target: "TextareaWithLabel.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithLabel.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21261,10 +20313,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TextareaWithText.vue",
         type: "registry:example",
-        target: "TextareaWithText.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TextareaWithText.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TextareaWithText.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21277,10 +20328,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDemo.vue",
         type: "registry:example",
-        target: "ToastDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21293,10 +20343,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastDestructive.vue",
         type: "registry:example",
-        target: "ToastDestructive.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastDestructive.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastDestructive.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21309,10 +20358,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastSimple.vue",
         type: "registry:example",
-        target: "ToastSimple.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastSimple.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastSimple.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21325,10 +20373,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithAction.vue",
         type: "registry:example",
-        target: "ToastWithAction.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithAction.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithAction.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21341,10 +20388,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToastWithTitle.vue",
         type: "registry:example",
-        target: "ToastWithTitle.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToastWithTitle.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToastWithTitle.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21357,10 +20403,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDemo.vue",
         type: "registry:example",
-        target: "ToggleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21373,10 +20418,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21389,10 +20433,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21405,10 +20448,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupDisabledDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupDisabledDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupDisabledDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21421,10 +20463,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21437,10 +20478,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupOutlineDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupOutlineDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupOutlineDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21453,10 +20493,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSingleDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSingleDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSingleDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21469,10 +20508,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleGroupSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleGroupSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleGroupSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21485,10 +20523,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21501,10 +20538,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleItalicWithTextDemo.vue",
         type: "registry:example",
-        target: "ToggleItalicWithTextDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleItalicWithTextDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21517,10 +20553,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleLargeDemo.vue",
         type: "registry:example",
-        target: "ToggleLargeDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleLargeDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleLargeDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21533,10 +20568,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/ToggleSmallDemo.vue",
         type: "registry:example",
-        target: "ToggleSmallDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/ToggleSmallDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/ToggleSmallDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21549,10 +20583,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TooltipDemo.vue",
         type: "registry:example",
-        target: "TooltipDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TooltipDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TooltipDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21565,10 +20598,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyBlockquote.vue",
         type: "registry:example",
-        target: "TypographyBlockquote.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyBlockquote.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyBlockquote.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21581,10 +20613,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyDemo.vue",
         type: "registry:example",
-        target: "TypographyDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21597,10 +20628,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH1.vue",
         type: "registry:example",
-        target: "TypographyH1.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH1.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH1.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21613,10 +20643,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH2.vue",
         type: "registry:example",
-        target: "TypographyH2.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH2.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH2.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21629,10 +20658,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH3.vue",
         type: "registry:example",
-        target: "TypographyH3.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH3.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH3.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21645,10 +20673,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyH4.vue",
         type: "registry:example",
-        target: "TypographyH4.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyH4.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyH4.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21661,10 +20688,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyInlineCode.vue",
         type: "registry:example",
-        target: "TypographyInlineCode.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyInlineCode.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyInlineCode.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21677,10 +20703,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLarge.vue",
         type: "registry:example",
-        target: "TypographyLarge.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLarge.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLarge.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21693,10 +20718,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyLead.vue",
         type: "registry:example",
-        target: "TypographyLead.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyLead.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyLead.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21709,10 +20733,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyList.vue",
         type: "registry:example",
-        target: "TypographyList.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyList.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyList.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21725,10 +20748,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyMuted.vue",
         type: "registry:example",
-        target: "TypographyMuted.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyMuted.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyMuted.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21741,10 +20763,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyP.vue",
         type: "registry:example",
-        target: "TypographyP.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyP.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyP.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21757,10 +20778,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographySmall.vue",
         type: "registry:example",
-        target: "TypographySmall.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographySmall.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographySmall.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21773,10 +20793,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/TypographyTable.vue",
         type: "registry:example",
-        target: "TypographyTable.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/TypographyTable.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/TypographyTable.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21789,10 +20808,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VCalendarDemo.vue",
         type: "registry:example",
-        target: "VCalendarDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VCalendarDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VCalendarDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21805,10 +20823,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerDemo.vue",
         type: "registry:example",
-        target: "VDatePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21821,10 +20838,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerForm.vue",
         type: "registry:example",
-        target: "VDatePickerForm.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerForm.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21837,10 +20853,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithPresets.vue",
         type: "registry:example",
-        target: "VDatePickerWithPresets.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithPresets.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21853,10 +20868,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDatePickerWithRange.vue",
         type: "registry:example",
-        target: "VDatePickerWithRange.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDatePickerWithRange.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21869,10 +20883,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VDateTimePickerDemo.vue",
         type: "registry:example",
-        target: "VDateTimePickerDemo.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VDateTimePickerDemo.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21885,10 +20898,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/example/VRangePickerWithSlot.vue",
         type: "registry:example",
-        target: "VRangePickerWithSlot.vue"
+        target: ""
       }],
       component: () => import("@/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/example/VRangePickerWithSlot.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21901,10 +20913,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication01.vue",
         type: "registry:block",
-        target: "Authentication01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21917,10 +20928,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication02.vue",
         type: "registry:block",
-        target: "Authentication02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21933,10 +20943,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication03.vue",
         type: "registry:block",
-        target: "Authentication03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21949,10 +20958,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Authentication04.vue",
         type: "registry:block",
-        target: "Authentication04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Authentication04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Authentication04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21965,10 +20973,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard01.vue",
         type: "registry:block",
-        target: "Dashboard01.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard01.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard01.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21981,10 +20988,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard02.vue",
         type: "registry:block",
-        target: "Dashboard02.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard02.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard02.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -21997,10 +21003,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard03.vue",
         type: "registry:block",
-        target: "Dashboard03.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard03.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard03.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22013,10 +21018,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard04.vue",
         type: "registry:block",
-        target: "Dashboard04.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard04.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard04.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22029,10 +21033,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard05.vue",
         type: "registry:block",
-        target: "Dashboard05.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard05.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard05.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22045,10 +21048,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard06.vue",
         type: "registry:block",
-        target: "Dashboard06.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard06.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard06.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22061,10 +21063,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Dashboard07.vue",
         type: "registry:block",
-        target: "Dashboard07.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Dashboard07.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Dashboard07.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22077,10 +21078,36 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar01/page.vue",
         type: "registry:page",
-        target: "Sidebar01Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar01/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar01/page.vue?raw").then((m) => m.default),
+      source: "",
+      category: "",
+      subcategory: ""
+    },
+    "Sidebar02": {
+      name: "Sidebar02",
+      description: "",
+      type: "registry:block",
+      registryDependencies: ["AppSidebar.vue","breadcrumb","separator","sidebar","SearchForm.vue","VersionSwitcher.vue","collapsible","label","dropdown-menu"],
+      files: [{
+        path: "registry/default/block/Sidebar02/page.vue",
+        type: "registry:page",
+        target: "pages/dashboard/index.vue"
+      },{
+        path: "registry/default/block/Sidebar02/components/AppSidebar.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/SearchForm.vue",
+        type: "registry:component",
+        target: ""
+      },{
+        path: "registry/default/block/Sidebar02/components/VersionSwitcher.vue",
+        type: "registry:component",
+        target: ""
+      }],
+      component: () => import("@/registry/default/block/Sidebar02/page.vue").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
@@ -22093,10 +21120,9 @@ export const Index: Record<string, any> = {
       files: [{
         path: "registry/default/block/Sidebar07/page.vue",
         type: "registry:page",
-        target: "Sidebar07Page.vue"
+        target: "pages/dashboard/index.vue"
       }],
       component: () => import("@/registry/default/block/Sidebar07/page.vue").then((m) => m.default),
-      raw: () => import("@/registry/default/block/Sidebar07/page.vue?raw").then((m) => m.default),
       source: "",
       category: "",
       subcategory: ""
diff --git a/apps/www/scripts/build-registry.ts b/apps/www/scripts/build-registry.ts
index 576f7c8d..1b8de6f4 100644
--- a/apps/www/scripts/build-registry.ts
+++ b/apps/www/scripts/build-registry.ts
@@ -303,7 +303,6 @@ export const Index: Record<string, any> = {
       }`
       })}],
       component: () => import("${componentPath}").then((m) => m.default),
-      raw: () => import("${componentPath}?raw").then((m) => m.default),
       source: "${sourceFilename}",
       category: "${item.category ?? ''}",
       subcategory: "${item.subcategory ?? ''}"
@@ -357,6 +356,91 @@ export const Index: Record<string, any> = {
   await writeFile(path.join(process.cwd(), '__registry__/index.ts'), index)
 }
 
+// ----------------------------------------------------------------------------
+// Build __registry__/block.ts.
+// ----------------------------------------------------------------------------
+async function buildBlockRegistry(registry: Registry) {
+  let index = `// @ts-nocheck
+// This file is autogenerated by scripts/build-registry.ts
+// Do not edit this file directly.
+
+export const Index: Record<string, any> = {
+`
+
+  for (const style of styles) {
+    index += `  "${style.name}": {`
+
+    // Build style index.
+    for (const item of registry) {
+      if (item.type !== 'registry:block')
+        continue
+
+      const resolveFiles = item.files?.map(
+        file =>
+          `registry/${style.name}/${
+            typeof file === 'string' ? file : file.path
+          }`,
+      )
+      if (!resolveFiles) {
+        continue
+      }
+
+      const type = item.type.split(':')[1]
+
+      let componentPath = `@/registry/${style.name}/${type}/${item.name}`
+
+      if (item.files) {
+        const files = item.files.map(file =>
+          typeof file === 'string'
+            ? { type: 'registry:page', path: file }
+            : file,
+        )
+        if (files?.length) {
+          componentPath = `@/registry/${style.name}/${files[0].path}`
+        }
+      }
+
+      index += `
+    "${item.name}": {
+      name: "${item.name}",
+      description: "${item.description ?? ''}",
+      type: "${item.type}",
+      registryDependencies: ${JSON.stringify(item.registryDependencies)},
+      files: [${item.files?.map((file) => {
+        const filePath = `registry/${style.name}/${
+          typeof file === 'string' ? file : file.path
+        }`
+        const resolvedFilePath = path.resolve(filePath)
+        return typeof file === 'string'
+          ? `"${resolvedFilePath}"`
+          : `{
+        path: "${filePath}",
+        type: "${file.type}",
+        target: "${file.target ?? ''}",
+        raw: () => import("@/${filePath}?raw").then((m) => m.default)
+      }`
+      })}],
+      component: () => import("${componentPath}").then((m) => m.default),
+      raw: () => import("${componentPath}?raw").then((m) => m.default),
+      source: "",
+      category: "${item.category ?? ''}",
+      subcategory: "${item.subcategory ?? ''}"
+    },`
+    }
+
+    index += `
+  },`
+  }
+
+  index += `
+}
+`
+
+  // Write style block.
+  rimraf.sync(path.join(process.cwd(), '__registry__/block.ts'))
+  await writeFile(path.join(process.cwd(), '__registry__/block.ts'), index)
+}
+
 // ----------------------------------------------------------------------------
 // Build registry/styles/[style]/[name].json.
 // ----------------------------------------------------------------------------
@@ -886,6 +970,7 @@ try {
   }
 
   await buildRegistry(result.data)
+  await buildBlockRegistry(result.data)
   await buildStyles(result.data)
   await buildStylesIndex()
   await buildThemes()
diff --git a/apps/www/src/content/docs/components/sidebar.md b/apps/www/src/content/docs/components/sidebar.md
index c1946a6a..41157d56 100644
--- a/apps/www/src/content/docs/components/sidebar.md
+++ b/apps/www/src/content/docs/components/sidebar.md
@@ -3,7 +3,7 @@ title: Sidebar
 description: A composable, themeable and customizable sidebar component.
 ---
 
-<BlockPreview name="Sidebar07" ></BlockPreview>
+<BlockPreview url="/blocks/renderer?name=Sidebar07&styles=new-york" ></BlockPreview>
 
 ## Installation
 
diff --git a/apps/www/src/public/android-chrome-192x192.png b/apps/www/src/public/android-chrome-192x192.png
index c680359b..c2b7ac1c 100644
Binary files a/apps/www/src/public/android-chrome-192x192.png and b/apps/www/src/public/android-chrome-192x192.png differ
diff --git a/apps/www/src/public/android-chrome-512x512.png b/apps/www/src/public/android-chrome-512x512.png
index 0c9941f6..727fab6a 100644
Binary files a/apps/www/src/public/android-chrome-512x512.png and b/apps/www/src/public/android-chrome-512x512.png differ
diff --git a/apps/www/src/public/apple-touch-icon.png b/apps/www/src/public/apple-touch-icon.png
index 34970519..91d492a5 100644
Binary files a/apps/www/src/public/apple-touch-icon.png and b/apps/www/src/public/apple-touch-icon.png differ
diff --git a/apps/www/src/public/favicon-16x16.png b/apps/www/src/public/favicon-16x16.png
index eeac46f1..4d6cbd4c 100644
Binary files a/apps/www/src/public/favicon-16x16.png and b/apps/www/src/public/favicon-16x16.png differ
diff --git a/apps/www/src/public/favicon-32x32.png b/apps/www/src/public/favicon-32x32.png
index e67cc623..f56303d2 100644
Binary files a/apps/www/src/public/favicon-32x32.png and b/apps/www/src/public/favicon-32x32.png differ
diff --git a/apps/www/src/public/favicon.ico b/apps/www/src/public/favicon.ico
index a90c54f7..4c402d87 100644
Binary files a/apps/www/src/public/favicon.ico and b/apps/www/src/public/favicon.ico differ
diff --git a/apps/www/src/public/r/styles/default/AccordionDemo.json b/apps/www/src/public/r/styles/default/AccordionDemo.json
index 30f64874..28a61763 100644
--- a/apps/www/src/public/r/styles/default/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/default/AccordionDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AccordionDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
       "type": "registry:example",
-      "target": "AccordionDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDemo.json b/apps/www/src/public/r/styles/default/AlertDemo.json
index ea1a6bdc..d848e19a 100644
--- a/apps/www/src/public/r/styles/default/AlertDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
index ecc3f1ef..860ef509 100644
--- a/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AlertDialogDemo.json b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
index 4d0e2f78..2301962a 100644
--- a/apps/www/src/public/r/styles/default/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/AlertDialogDemo.json
@@ -11,7 +11,7 @@
       "path": "example/AlertDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
index 76e16a90..8612efca 100644
--- a/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/AreaChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartDemo.json b/apps/www/src/public/r/styles/default/AreaChartDemo.json
index abcde043..f791f43b 100644
--- a/apps/www/src/public/r/styles/default/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/default/AreaChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AreaChartSparkline.json b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
index 6323eb4a..3521777e 100644
--- a/apps/www/src/public/r/styles/default/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/AreaChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AspectRatioDemo.json b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
index d51a0f2a..5bb0799d 100644
--- a/apps/www/src/public/r/styles/default/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/default/AspectRatioDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AspectRatioDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
       "type": "registry:example",
-      "target": "AspectRatioDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication01.json b/apps/www/src/public/r/styles/default/Authentication01.json
index edf4db2a..7dbad5a5 100644
--- a/apps/www/src/public/r/styles/default/Authentication01.json
+++ b/apps/www/src/public/r/styles/default/Authentication01.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication01.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication02.json b/apps/www/src/public/r/styles/default/Authentication02.json
index 87e76db2..fc2b34de 100644
--- a/apps/www/src/public/r/styles/default/Authentication02.json
+++ b/apps/www/src/public/r/styles/default/Authentication02.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication02.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication03.json b/apps/www/src/public/r/styles/default/Authentication03.json
index 8126e15f..86281b39 100644
--- a/apps/www/src/public/r/styles/default/Authentication03.json
+++ b/apps/www/src/public/r/styles/default/Authentication03.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication03.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Authentication04.json b/apps/www/src/public/r/styles/default/Authentication04.json
index e7c319e0..85d7b3a6 100644
--- a/apps/www/src/public/r/styles/default/Authentication04.json
+++ b/apps/www/src/public/r/styles/default/Authentication04.json
@@ -12,7 +12,7 @@
       "path": "block/Authentication04.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormApi.json b/apps/www/src/public/r/styles/default/AutoFormApi.json
index f79b6ce9..7e8ebb32 100644
--- a/apps/www/src/public/r/styles/default/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/default/AutoFormApi.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormApi.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormArray.json b/apps/www/src/public/r/styles/default/AutoFormArray.json
index af6b41bf..c8444a8d 100644
--- a/apps/www/src/public/r/styles/default/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/default/AutoFormArray.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormArray.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormArray.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormBasic.json b/apps/www/src/public/r/styles/default/AutoFormBasic.json
index 3a1dbcde..f99c677a 100644
--- a/apps/www/src/public/r/styles/default/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/default/AutoFormBasic.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormBasic.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormBasic.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
index 69d0d870..1952aaaf 100644
--- a/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/default/AutoFormConfirmPassword.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormConfirmPassword.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormConfirmPassword.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormControlled.json b/apps/www/src/public/r/styles/default/AutoFormControlled.json
index 98366a02..08ca19bc 100644
--- a/apps/www/src/public/r/styles/default/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/default/AutoFormControlled.json
@@ -16,7 +16,7 @@
       "path": "example/AutoFormControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormDependencies.json b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
index 0b4241de..bf552b14 100644
--- a/apps/www/src/public/r/styles/default/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/default/AutoFormDependencies.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormDependencies.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormDependencies.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
index 86bf84c5..b3f298e0 100644
--- a/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/default/AutoFormInputWithoutLabel.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormInputWithoutLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormInputWithoutLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AutoFormSubObject.json b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
index 2f9102b9..88ed9204 100644
--- a/apps/www/src/public/r/styles/default/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/default/AutoFormSubObject.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormSubObject.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormSubObject.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/AvatarDemo.json b/apps/www/src/public/r/styles/default/AvatarDemo.json
index 5e532206..a30c5e23 100644
--- a/apps/www/src/public/r/styles/default/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/default/AvatarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AvatarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
       "type": "registry:example",
-      "target": "AvatarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeDemo.json b/apps/www/src/public/r/styles/default/BadgeDemo.json
index dbe0cdb7..3d8f80a8 100644
--- a/apps/www/src/public/r/styles/default/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
index e88da1bb..e19555ac 100644
--- a/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
index 1fc9b59b..63714ca5 100644
--- a/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
index e372282b..6e617db9 100644
--- a/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/BadgeSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
index 9c1c212b..f8cedac6 100644
--- a/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/BarChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartDemo.json b/apps/www/src/public/r/styles/default/BarChartDemo.json
index 667b0307..396ece36 100644
--- a/apps/www/src/public/r/styles/default/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/default/BarChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartRounded.json b/apps/www/src/public/r/styles/default/BarChartRounded.json
index 07486456..02b461c1 100644
--- a/apps/www/src/public/r/styles/default/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/default/BarChartRounded.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartRounded.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartRounded.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BarChartStacked.json b/apps/www/src/public/r/styles/default/BarChartStacked.json
index 777742fc..f6071b90 100644
--- a/apps/www/src/public/r/styles/default/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/default/BarChartStacked.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartStacked.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartStacked.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
index e7f70f85..9cefcf23 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDemo.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
index a81ec962..1a4f47ca 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbDropdown.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDropdown.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDropdown.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
index a38486a1..c82bdef2 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbEllipsisDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbEllipsisDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbEllipsisDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
index 18f3f2b2..1190c713 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbLinkDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
index c6b62757..d9054cf6 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/BreadcrumbResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
index 09f25656..9d84cb35 100644
--- a/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/BreadcrumbSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbSeparatorDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
index 910b831e..7b0217fa 100644
--- a/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonAsChildDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonAsChildDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonAsChildDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonDemo.json b/apps/www/src/public/r/styles/default/ButtonDemo.json
index b4c93640..462b3792 100644
--- a/apps/www/src/public/r/styles/default/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
index 0b7164e6..97dd7134 100644
--- a/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
index d91d6888..bd2bc670 100644
--- a/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonGhostDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonGhostDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonGhostDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonIconDemo.json b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
index 94e4a7c2..01fabb12 100644
--- a/apps/www/src/public/r/styles/default/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
index f82645a6..73694178 100644
--- a/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLinkDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
index 6e2b9607..21a1770f 100644
--- a/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonLoadingDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLoadingDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLoadingDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
index f423b53c..8f6ce2b9 100644
--- a/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
index 492bb196..b3b54245 100644
--- a/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
index 8e2fde09..1e8a9515 100644
--- a/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/default/ButtonWithIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonWithIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonWithIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarDemo.json b/apps/www/src/public/r/styles/default/CalendarDemo.json
index 3ef88356..8ee9af6d 100644
--- a/apps/www/src/public/r/styles/default/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/CalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarForm.json b/apps/www/src/public/r/styles/default/CalendarForm.json
index a8f77ad1..091dfabb 100644
--- a/apps/www/src/public/r/styles/default/CalendarForm.json
+++ b/apps/www/src/public/r/styles/default/CalendarForm.json
@@ -19,7 +19,7 @@
       "path": "example/CalendarForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CalendarWithSelect.json b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
index 20969c44..814e3c6e 100644
--- a/apps/www/src/public/r/styles/default/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/default/CalendarWithSelect.json
@@ -14,7 +14,7 @@
       "path": "example/CalendarWithSelect.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarWithSelect.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardChat.json b/apps/www/src/public/r/styles/default/CardChat.json
index d1ea45bd..126f83f0 100644
--- a/apps/www/src/public/r/styles/default/CardChat.json
+++ b/apps/www/src/public/r/styles/default/CardChat.json
@@ -17,7 +17,7 @@
       "path": "example/CardChat.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "CardChat.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardDemo.json b/apps/www/src/public/r/styles/default/CardDemo.json
index 8219b097..92410edb 100644
--- a/apps/www/src/public/r/styles/default/CardDemo.json
+++ b/apps/www/src/public/r/styles/default/CardDemo.json
@@ -13,7 +13,7 @@
       "path": "example/CardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardFormDemo.json b/apps/www/src/public/r/styles/default/CardFormDemo.json
index eb128e85..3794fd72 100644
--- a/apps/www/src/public/r/styles/default/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/default/CardFormDemo.json
@@ -14,7 +14,7 @@
       "path": "example/CardFormDemo.vue",
       "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardStats.json b/apps/www/src/public/r/styles/default/CardStats.json
index 047952af..60f72014 100644
--- a/apps/www/src/public/r/styles/default/CardStats.json
+++ b/apps/www/src/public/r/styles/default/CardStats.json
@@ -15,7 +15,7 @@
       "path": "example/CardStats.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CardStats.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CardWithForm.json b/apps/www/src/public/r/styles/default/CardWithForm.json
index faa6d479..21fdff0e 100644
--- a/apps/www/src/public/r/styles/default/CardWithForm.json
+++ b/apps/www/src/public/r/styles/default/CardWithForm.json
@@ -14,7 +14,7 @@
       "path": "example/CardWithForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardWithForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselApi.json b/apps/www/src/public/r/styles/default/CarouselApi.json
index 986e2b38..b79b33d2 100644
--- a/apps/www/src/public/r/styles/default/CarouselApi.json
+++ b/apps/www/src/public/r/styles/default/CarouselApi.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselApi.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselDemo.json b/apps/www/src/public/r/styles/default/CarouselDemo.json
index 820beb49..d60fe1c1 100644
--- a/apps/www/src/public/r/styles/default/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/default/CarouselDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselOrientation.json b/apps/www/src/public/r/styles/default/CarouselOrientation.json
index 508e815b..2ee15aeb 100644
--- a/apps/www/src/public/r/styles/default/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/default/CarouselOrientation.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselOrientation.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselOrientation.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselPlugin.json b/apps/www/src/public/r/styles/default/CarouselPlugin.json
index 79b0f5be..e0dba231 100644
--- a/apps/www/src/public/r/styles/default/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/default/CarouselPlugin.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselPlugin.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselPlugin.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselSize.json b/apps/www/src/public/r/styles/default/CarouselSize.json
index c9eb7f2a..4a84ffb4 100644
--- a/apps/www/src/public/r/styles/default/CarouselSize.json
+++ b/apps/www/src/public/r/styles/default/CarouselSize.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSize.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSize.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselSpacing.json b/apps/www/src/public/r/styles/default/CarouselSpacing.json
index 60395701..0f9661aa 100644
--- a/apps/www/src/public/r/styles/default/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/default/CarouselSpacing.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSpacing.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSpacing.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CarouselThumbnails.json b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
index 32091f87..3d1b9672 100644
--- a/apps/www/src/public/r/styles/default/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/default/CarouselThumbnails.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselThumbnails.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselThumbnails.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxDemo.json b/apps/www/src/public/r/styles/default/CheckboxDemo.json
index 834710e2..aa7798d5 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxDisabled.json b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
index 2fb5b64e..f0031d5b 100644
--- a/apps/www/src/public/r/styles/default/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/default/CheckboxDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
index d0c9a81f..cfab7a04 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormMultiple.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormMultiple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormMultiple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
index 8a5761e3..05f4a8f5 100644
--- a/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/default/CheckboxFormSingle.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormSingle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormSingle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CheckboxWithText.json b/apps/www/src/public/r/styles/default/CheckboxWithText.json
index 597eee29..9d2d1429 100644
--- a/apps/www/src/public/r/styles/default/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/default/CheckboxWithText.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CollapsibleDemo.json b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
index 5adf1791..244831b2 100644
--- a/apps/www/src/public/r/styles/default/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/default/CollapsibleDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CollapsibleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
-      "target": "CollapsibleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxDemo.json b/apps/www/src/public/r/styles/default/ComboboxDemo.json
index d368b6c3..74c9b166 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDemo.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
index 2ab1f2a5..b02cf3a4 100644
--- a/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/default/ComboboxDropdownMenu.json
@@ -12,7 +12,7 @@
       "path": "example/ComboboxDropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDropdownMenu.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxForm.json b/apps/www/src/public/r/styles/default/ComboboxForm.json
index 34505223..18d52e4a 100644
--- a/apps/www/src/public/r/styles/default/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/default/ComboboxForm.json
@@ -19,7 +19,7 @@
       "path": "example/ComboboxForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxPopover.json b/apps/www/src/public/r/styles/default/ComboboxPopover.json
index d9b721df..2c3333c8 100644
--- a/apps/www/src/public/r/styles/default/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/default/ComboboxPopover.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxPopover.vue",
       "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxPopover.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ComboboxResponsive.json b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
index 327d2960..63e4b22d 100644
--- a/apps/www/src/public/r/styles/default/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/default/ComboboxResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/ComboboxResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CommandDemo.json b/apps/www/src/public/r/styles/default/CommandDemo.json
index d9f2bcba..e930af49 100644
--- a/apps/www/src/public/r/styles/default/CommandDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CommandDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CommandDialogDemo.json b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
index 98f56eef..3fb39ea9 100644
--- a/apps/www/src/public/r/styles/default/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/default/CommandDialogDemo.json
@@ -12,7 +12,7 @@
       "path": "example/CommandDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ContextMenuDemo.json b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
index a6e1efbe..3ccbddeb 100644
--- a/apps/www/src/public/r/styles/default/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/ContextMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ContextMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "ContextMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/CustomChartTooltip.json b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
index d49c4c2d..59c2107a 100644
--- a/apps/www/src/public/r/styles/default/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/default/CustomChartTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/CustomChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CustomChartTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard01.json b/apps/www/src/public/r/styles/default/Dashboard01.json
index c4e1a968..8d2c58ed 100644
--- a/apps/www/src/public/r/styles/default/Dashboard01.json
+++ b/apps/www/src/public/r/styles/default/Dashboard01.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard01.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard02.json b/apps/www/src/public/r/styles/default/Dashboard02.json
index 039890f6..61918c28 100644
--- a/apps/www/src/public/r/styles/default/Dashboard02.json
+++ b/apps/www/src/public/r/styles/default/Dashboard02.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard02.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard03.json b/apps/www/src/public/r/styles/default/Dashboard03.json
index 4c3e8edb..a1ee4c35 100644
--- a/apps/www/src/public/r/styles/default/Dashboard03.json
+++ b/apps/www/src/public/r/styles/default/Dashboard03.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard03.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard04.json b/apps/www/src/public/r/styles/default/Dashboard04.json
index 022aaa53..bbd42a9a 100644
--- a/apps/www/src/public/r/styles/default/Dashboard04.json
+++ b/apps/www/src/public/r/styles/default/Dashboard04.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard04.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard05.json b/apps/www/src/public/r/styles/default/Dashboard05.json
index 07b58be2..d7c3a4b4 100644
--- a/apps/www/src/public/r/styles/default/Dashboard05.json
+++ b/apps/www/src/public/r/styles/default/Dashboard05.json
@@ -23,7 +23,7 @@
       "path": "block/Dashboard05.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard05.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard06.json b/apps/www/src/public/r/styles/default/Dashboard06.json
index 657a7df1..4a469011 100644
--- a/apps/www/src/public/r/styles/default/Dashboard06.json
+++ b/apps/www/src/public/r/styles/default/Dashboard06.json
@@ -19,7 +19,7 @@
       "path": "block/Dashboard06.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard06.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Dashboard07.json b/apps/www/src/public/r/styles/default/Dashboard07.json
index 74bc669f..a3d83d82 100644
--- a/apps/www/src/public/r/styles/default/Dashboard07.json
+++ b/apps/www/src/public/r/styles/default/Dashboard07.json
@@ -22,7 +22,7 @@
       "path": "block/Dashboard07.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard07.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
index ab6d0f6d..9371c138 100644
--- a/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableColumnPinningDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableColumnPinningDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableColumnPinningDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableDemo.json b/apps/www/src/public/r/styles/default/DataTableDemo.json
index 71d6cc8a..0d587ec6 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
index e7f683c6..17411fff 100644
--- a/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/default/DataTableDemoColumn.json
@@ -11,7 +11,7 @@
       "path": "example/DataTableDemoColumn.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemoColumn.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
index 50b3eb3c..e90db363 100644
--- a/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/default/DataTableReactiveDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableReactiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableReactiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerDemo.json b/apps/www/src/public/r/styles/default/DatePickerDemo.json
index 85470af7..e06aabd5 100644
--- a/apps/www/src/public/r/styles/default/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/DatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerForm.json b/apps/www/src/public/r/styles/default/DatePickerForm.json
index 76ddb647..8b04dfcf 100644
--- a/apps/www/src/public/r/styles/default/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/DatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/DatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
index 7765660c..b2869b04 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithIndependentMonths.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithIndependentMonths.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithIndependentMonths.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
index 3a8e5685..71929b96 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/DatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DatePickerWithRange.json b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
index 3b56fa62..14c882b8 100644
--- a/apps/www/src/public/r/styles/default/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/DatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
index 476b8373..83fef6b3 100644
--- a/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/default/DialogCustomCloseButton.json
@@ -13,7 +13,7 @@
       "path": "example/DialogCustomCloseButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogCustomCloseButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogDemo.json b/apps/www/src/public/r/styles/default/DialogDemo.json
index 049e7d7a..de033e76 100644
--- a/apps/www/src/public/r/styles/default/DialogDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogForm.json b/apps/www/src/public/r/styles/default/DialogForm.json
index f65b731e..620c9dd5 100644
--- a/apps/www/src/public/r/styles/default/DialogForm.json
+++ b/apps/www/src/public/r/styles/default/DialogForm.json
@@ -14,7 +14,7 @@
       "path": "example/DialogForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
index 4de85950..f007ca2a 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollBodyDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollBodyDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollBodyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
index d3eee610..993f7548 100644
--- a/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/default/DialogScrollOverlayDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollOverlayDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollOverlayDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartColor.json b/apps/www/src/public/r/styles/default/DonutChartColor.json
index 35e13fbc..f6ed6475 100644
--- a/apps/www/src/public/r/styles/default/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/default/DonutChartColor.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartColor.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartColor.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
index bad06ce8..5615cad0 100644
--- a/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/DonutChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartDemo.json b/apps/www/src/public/r/styles/default/DonutChartDemo.json
index daf21911..00cf5d32 100644
--- a/apps/www/src/public/r/styles/default/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/default/DonutChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DonutChartPie.json b/apps/www/src/public/r/styles/default/DonutChartPie.json
index 8c45b965..a5067f43 100644
--- a/apps/www/src/public/r/styles/default/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/default/DonutChartPie.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartPie.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartPie.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DrawerDemo.json b/apps/www/src/public/r/styles/default/DrawerDemo.json
index 2215cd6f..6aac7efe 100644
--- a/apps/www/src/public/r/styles/default/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/default/DrawerDemo.json
@@ -14,7 +14,7 @@
       "path": "example/DrawerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DrawerDialog.json b/apps/www/src/public/r/styles/default/DrawerDialog.json
index 56c2dd8a..88761fc3 100644
--- a/apps/www/src/public/r/styles/default/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/default/DrawerDialog.json
@@ -16,7 +16,7 @@
       "path": "example/DrawerDialog.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
index 30de381a..73ba0c2d 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuCheckboxes.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuCheckboxes.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuCheckboxes.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
index 7c35a7ad..9573cbdb 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
index 615f8d9f..1a84703b 100644
--- a/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/default/DropdownMenuRadioGroup.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuRadioGroup.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuRadioGroup.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/HoverCardDemo.json b/apps/www/src/public/r/styles/default/HoverCardDemo.json
index e2516653..6e841aed 100644
--- a/apps/www/src/public/r/styles/default/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/default/HoverCardDemo.json
@@ -12,7 +12,7 @@
       "path": "example/HoverCardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
-      "target": "HoverCardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputDemo.json b/apps/www/src/public/r/styles/default/InputDemo.json
index b0ef33a4..3e71866b 100644
--- a/apps/www/src/public/r/styles/default/InputDemo.json
+++ b/apps/www/src/public/r/styles/default/InputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/InputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputDisabled.json b/apps/www/src/public/r/styles/default/InputDisabled.json
index 88b9242e..8cc1ab58 100644
--- a/apps/www/src/public/r/styles/default/InputDisabled.json
+++ b/apps/www/src/public/r/styles/default/InputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/InputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputFile.json b/apps/www/src/public/r/styles/default/InputFile.json
index e62cc6bf..70a7d0ae 100644
--- a/apps/www/src/public/r/styles/default/InputFile.json
+++ b/apps/www/src/public/r/styles/default/InputFile.json
@@ -11,7 +11,7 @@
       "path": "example/InputFile.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFile.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputForm.json b/apps/www/src/public/r/styles/default/InputForm.json
index 5236e7a3..541ecaf0 100644
--- a/apps/www/src/public/r/styles/default/InputForm.json
+++ b/apps/www/src/public/r/styles/default/InputForm.json
@@ -17,7 +17,7 @@
       "path": "example/InputForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
index 35bcc0bf..9530a7a9 100644
--- a/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/default/InputFormAutoAnimate.json
@@ -17,7 +17,7 @@
       "path": "example/InputFormAutoAnimate.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFormAutoAnimate.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithButton.json b/apps/www/src/public/r/styles/default/InputWithButton.json
index 11fb5020..e59c4a67 100644
--- a/apps/www/src/public/r/styles/default/InputWithButton.json
+++ b/apps/www/src/public/r/styles/default/InputWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithIcon.json b/apps/www/src/public/r/styles/default/InputWithIcon.json
index 491e07bd..639a1108 100644
--- a/apps/www/src/public/r/styles/default/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/default/InputWithIcon.json
@@ -10,7 +10,7 @@
       "path": "example/InputWithIcon.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithIcon.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/InputWithLabel.json b/apps/www/src/public/r/styles/default/InputWithLabel.json
index c59c8056..cce82493 100644
--- a/apps/www/src/public/r/styles/default/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/default/InputWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LabelDemo.json b/apps/www/src/public/r/styles/default/LabelDemo.json
index 63bfd3e6..e04232fc 100644
--- a/apps/www/src/public/r/styles/default/LabelDemo.json
+++ b/apps/www/src/public/r/styles/default/LabelDemo.json
@@ -11,7 +11,7 @@
       "path": "example/LabelDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "LabelDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
index ade69861..fb6d997f 100644
--- a/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/default/LineChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartDemo.json b/apps/www/src/public/r/styles/default/LineChartDemo.json
index a1fa6593..f2a7a8ae 100644
--- a/apps/www/src/public/r/styles/default/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/default/LineChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/LineChartSparkline.json b/apps/www/src/public/r/styles/default/LineChartSparkline.json
index 66647eff..9ff0d5c5 100644
--- a/apps/www/src/public/r/styles/default/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/default/LineChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/MenubarDemo.json b/apps/www/src/public/r/styles/default/MenubarDemo.json
index a57e2699..090f8a9f 100644
--- a/apps/www/src/public/r/styles/default/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/default/MenubarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/MenubarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
       "type": "registry:example",
-      "target": "MenubarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
index bfd71b47..c5b86966 100644
--- a/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/default/NavigationMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/NavigationMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "NavigationMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
index d1de70ed..05ce454c 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldCurrency.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldCurrency.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldCurrency.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
index ec09bd0a..94be9aa3 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDecimal.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDecimal.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDecimal.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDemo.json b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
index b7541ef6..985bbc90 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDemo.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
index 7245d982..bebed162 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldDisabled.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldForm.json b/apps/www/src/public/r/styles/default/NumberFieldForm.json
index 6b892e24..86a2185c 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldForm.json
@@ -17,7 +17,7 @@
       "path": "example/NumberFieldForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
index 0e46c128..76b05a24 100644
--- a/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/default/NumberFieldPercentage.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldPercentage.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldPercentage.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PaginationDemo.json b/apps/www/src/public/r/styles/default/PaginationDemo.json
index cf93fa3b..016ef9bb 100644
--- a/apps/www/src/public/r/styles/default/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/default/PaginationDemo.json
@@ -11,7 +11,7 @@
       "path": "example/PaginationDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
       "type": "registry:example",
-      "target": "PaginationDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputControlled.json b/apps/www/src/public/r/styles/default/PinInputControlled.json
index a36cb4ef..5d35da06 100644
--- a/apps/www/src/public/r/styles/default/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/default/PinInputControlled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputDemo.json b/apps/www/src/public/r/styles/default/PinInputDemo.json
index c9a51184..34fa68dd 100644
--- a/apps/www/src/public/r/styles/default/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputDisabled.json b/apps/www/src/public/r/styles/default/PinInputDisabled.json
index cbf0f58e..56afd9f6 100644
--- a/apps/www/src/public/r/styles/default/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/default/PinInputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputFormDemo.json b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
index 44d9ecac..3851b2f1 100644
--- a/apps/www/src/public/r/styles/default/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/PinInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
index e8904dcd..33cec89b 100644
--- a/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/PinInputSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputSeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/PopoverDemo.json b/apps/www/src/public/r/styles/default/PopoverDemo.json
index 92d00fdb..a745bf74 100644
--- a/apps/www/src/public/r/styles/default/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/default/PopoverDemo.json
@@ -13,7 +13,7 @@
       "path": "example/PopoverDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "PopoverDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ProgressDemo.json b/apps/www/src/public/r/styles/default/ProgressDemo.json
index 36ba4d3c..9b2062f5 100644
--- a/apps/www/src/public/r/styles/default/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/default/ProgressDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ProgressDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
       "type": "registry:example",
-      "target": "ProgressDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RadioGroupDemo.json b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
index 5c1b7840..45900986 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupDemo.json
@@ -11,7 +11,7 @@
       "path": "example/RadioGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RadioGroupForm.json b/apps/www/src/public/r/styles/default/RadioGroupForm.json
index 2fd26b17..d3b27bd8 100644
--- a/apps/www/src/public/r/styles/default/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/default/RadioGroupForm.json
@@ -17,7 +17,7 @@
       "path": "example/RadioGroupForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
index f453ce69..17b8b537 100644
--- a/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/RangeCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/RangeCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "RangeCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableDemo.json b/apps/www/src/public/r/styles/default/ResizableDemo.json
index eb3e006c..330e49e7 100644
--- a/apps/www/src/public/r/styles/default/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
index a33b84e2..89031a09 100644
--- a/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableHandleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableHandleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableHandleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
index 42b64006..e91b1b6a 100644
--- a/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/ResizableVerticalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
index e8b2fa4b..58af39cf 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ScrollAreaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
index 57109bf0..c4c759b5 100644
--- a/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/default/ScrollAreaHorizontalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ScrollAreaHorizontalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaHorizontalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectDemo.json b/apps/www/src/public/r/styles/default/SelectDemo.json
index 4d4b699d..35fd8c80 100644
--- a/apps/www/src/public/r/styles/default/SelectDemo.json
+++ b/apps/www/src/public/r/styles/default/SelectDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SelectDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectForm.json b/apps/www/src/public/r/styles/default/SelectForm.json
index 464a8c0e..3a86c578 100644
--- a/apps/www/src/public/r/styles/default/SelectForm.json
+++ b/apps/www/src/public/r/styles/default/SelectForm.json
@@ -17,7 +17,7 @@
       "path": "example/SelectForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SelectScrollable.json b/apps/www/src/public/r/styles/default/SelectScrollable.json
index a5da63a6..dcc7d595 100644
--- a/apps/www/src/public/r/styles/default/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/default/SelectScrollable.json
@@ -10,7 +10,7 @@
       "path": "example/SelectScrollable.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectScrollable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SeparatorDemo.json b/apps/www/src/public/r/styles/default/SeparatorDemo.json
index 07e30543..322fc830 100644
--- a/apps/www/src/public/r/styles/default/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/default/SeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SheetDemo.json b/apps/www/src/public/r/styles/default/SheetDemo.json
index 609a9a92..45da1cf1 100644
--- a/apps/www/src/public/r/styles/default/SheetDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SheetSideDemo.json b/apps/www/src/public/r/styles/default/SheetSideDemo.json
index 8f889869..6905e23b 100644
--- a/apps/www/src/public/r/styles/default/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/default/SheetSideDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetSideDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetSideDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar01.json b/apps/www/src/public/r/styles/default/Sidebar01.json
index 85af6529..b6f9f397 100644
--- a/apps/www/src/public/r/styles/default/Sidebar01.json
+++ b/apps/www/src/public/r/styles/default/Sidebar01.json
@@ -14,7 +14,7 @@
       "path": "block/Sidebar01/page.vue",
       "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar01Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/Sidebar02.json b/apps/www/src/public/r/styles/default/Sidebar02.json
new file mode 100644
index 00000000..d95cc144
--- /dev/null
+++ b/apps/www/src/public/r/styles/default/Sidebar02.json
@@ -0,0 +1,42 @@
+{
+  "name": "Sidebar02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar02/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar02/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/default/Sidebar07.json b/apps/www/src/public/r/styles/default/Sidebar07.json
index aa8255a9..9c720dde 100644
--- a/apps/www/src/public/r/styles/default/Sidebar07.json
+++ b/apps/www/src/public/r/styles/default/Sidebar07.json
@@ -13,9 +13,9 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar07Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SkeletonCard.json b/apps/www/src/public/r/styles/default/SkeletonCard.json
index b4abdfe3..950bcd71 100644
--- a/apps/www/src/public/r/styles/default/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/default/SkeletonCard.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonCard.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonCard.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SkeletonDemo.json b/apps/www/src/public/r/styles/default/SkeletonDemo.json
index 613f32bd..c8ebb815 100644
--- a/apps/www/src/public/r/styles/default/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/default/SkeletonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SliderDemo.json b/apps/www/src/public/r/styles/default/SliderDemo.json
index 0f6ed816..486f75ba 100644
--- a/apps/www/src/public/r/styles/default/SliderDemo.json
+++ b/apps/www/src/public/r/styles/default/SliderDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SliderDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "SliderDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SliderForm.json b/apps/www/src/public/r/styles/default/SliderForm.json
index 82cd0de8..f40b7f8b 100644
--- a/apps/www/src/public/r/styles/default/SliderForm.json
+++ b/apps/www/src/public/r/styles/default/SliderForm.json
@@ -17,7 +17,7 @@
       "path": "example/SliderForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SliderForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SonnerDemo.json b/apps/www/src/public/r/styles/default/SonnerDemo.json
index 7bc35117..c844c3ea 100644
--- a/apps/www/src/public/r/styles/default/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/default/SonnerDemo.json
@@ -12,7 +12,7 @@
       "path": "example/SonnerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SonnerWithDialog.json b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
index 86ff9b27..546f03a3 100644
--- a/apps/www/src/public/r/styles/default/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/default/SonnerWithDialog.json
@@ -13,7 +13,7 @@
       "path": "example/SonnerWithDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerWithDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperDemo.json b/apps/www/src/public/r/styles/default/StepperDemo.json
index 958abd0c..8aafe28c 100644
--- a/apps/www/src/public/r/styles/default/StepperDemo.json
+++ b/apps/www/src/public/r/styles/default/StepperDemo.json
@@ -10,7 +10,7 @@
       "path": "example/StepperDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperForm.json b/apps/www/src/public/r/styles/default/StepperForm.json
index c010bc1c..d5b93b57 100644
--- a/apps/www/src/public/r/styles/default/StepperForm.json
+++ b/apps/www/src/public/r/styles/default/StepperForm.json
@@ -15,7 +15,7 @@
       "path": "example/StepperForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperHorizental.json b/apps/www/src/public/r/styles/default/StepperHorizental.json
index 2484332e..09816e68 100644
--- a/apps/www/src/public/r/styles/default/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/default/StepperHorizental.json
@@ -11,7 +11,7 @@
       "path": "example/StepperHorizental.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperHorizental.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/StepperVertical.json b/apps/www/src/public/r/styles/default/StepperVertical.json
index 93709f5f..c39bfc63 100644
--- a/apps/www/src/public/r/styles/default/StepperVertical.json
+++ b/apps/www/src/public/r/styles/default/StepperVertical.json
@@ -11,7 +11,7 @@
       "path": "example/StepperVertical.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperVertical.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SwitchDemo.json b/apps/www/src/public/r/styles/default/SwitchDemo.json
index b78f675b..bf72681b 100644
--- a/apps/www/src/public/r/styles/default/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/default/SwitchDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SwitchDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/SwitchForm.json b/apps/www/src/public/r/styles/default/SwitchForm.json
index 8a1ede1b..d2b7abc4 100644
--- a/apps/www/src/public/r/styles/default/SwitchForm.json
+++ b/apps/www/src/public/r/styles/default/SwitchForm.json
@@ -17,7 +17,7 @@
       "path": "example/SwitchForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TableDemo.json b/apps/www/src/public/r/styles/default/TableDemo.json
index ee863c7c..0d356515 100644
--- a/apps/www/src/public/r/styles/default/TableDemo.json
+++ b/apps/www/src/public/r/styles/default/TableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
       "type": "registry:example",
-      "target": "TableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TabsDemo.json b/apps/www/src/public/r/styles/default/TabsDemo.json
index d8bc7479..a5519dbe 100644
--- a/apps/www/src/public/r/styles/default/TabsDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
index cd789b2c..8dee3778 100644
--- a/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/default/TabsVerticalDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
index 6a8534b2..5ca21f27 100644
--- a/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputComboboxDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TagsInputComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputDemo.json b/apps/www/src/public/r/styles/default/TagsInputDemo.json
index 6818e1ab..09d69c5f 100644
--- a/apps/www/src/public/r/styles/default/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TagsInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
index d744c9db..aaaf115d 100644
--- a/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/default/TagsInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/TagsInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaDemo.json b/apps/www/src/public/r/styles/default/TextareaDemo.json
index 5cbecfa8..886842fd 100644
--- a/apps/www/src/public/r/styles/default/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/default/TextareaDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaDisabled.json b/apps/www/src/public/r/styles/default/TextareaDisabled.json
index 9c148a70..30bd37d8 100644
--- a/apps/www/src/public/r/styles/default/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/default/TextareaDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaForm.json b/apps/www/src/public/r/styles/default/TextareaForm.json
index 64b75735..b7086d9d 100644
--- a/apps/www/src/public/r/styles/default/TextareaForm.json
+++ b/apps/www/src/public/r/styles/default/TextareaForm.json
@@ -17,7 +17,7 @@
       "path": "example/TextareaForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithButton.json b/apps/www/src/public/r/styles/default/TextareaWithButton.json
index 4001677e..164c7cf7 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithLabel.json b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
index 8cc8bfa5..8136709f 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TextareaWithText.json b/apps/www/src/public/r/styles/default/TextareaWithText.json
index faafeec8..02ad1ade 100644
--- a/apps/www/src/public/r/styles/default/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/default/TextareaWithText.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastDemo.json b/apps/www/src/public/r/styles/default/ToastDemo.json
index 357990a7..57db292d 100644
--- a/apps/www/src/public/r/styles/default/ToastDemo.json
+++ b/apps/www/src/public/r/styles/default/ToastDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ToastDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastDestructive.json b/apps/www/src/public/r/styles/default/ToastDestructive.json
index cb8e6a49..ae653c12 100644
--- a/apps/www/src/public/r/styles/default/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/default/ToastDestructive.json
@@ -12,7 +12,7 @@
       "path": "example/ToastDestructive.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDestructive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastSimple.json b/apps/www/src/public/r/styles/default/ToastSimple.json
index e5664275..b0fd6640 100644
--- a/apps/www/src/public/r/styles/default/ToastSimple.json
+++ b/apps/www/src/public/r/styles/default/ToastSimple.json
@@ -11,7 +11,7 @@
       "path": "example/ToastSimple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastSimple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastWithAction.json b/apps/www/src/public/r/styles/default/ToastWithAction.json
index 24580e1f..9202e532 100644
--- a/apps/www/src/public/r/styles/default/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/default/ToastWithAction.json
@@ -12,7 +12,7 @@
       "path": "example/ToastWithAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithAction.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToastWithTitle.json b/apps/www/src/public/r/styles/default/ToastWithTitle.json
index f7bb9562..7e618cee 100644
--- a/apps/www/src/public/r/styles/default/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/default/ToastWithTitle.json
@@ -11,7 +11,7 @@
       "path": "example/ToastWithTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithTitle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleDemo.json b/apps/www/src/public/r/styles/default/ToggleDemo.json
index c90c7319..560e5f09 100644
--- a/apps/www/src/public/r/styles/default/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
index 70809381..690a575b 100644
--- a/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
index 79cbfd09..1eee2bad 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
index 6e6818a5..d8007f00 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
index 86e88b49..30ef0a67 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
index e49a11d5..8e4c0588 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
index ce09688a..e505e8a8 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSingleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSingleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSingleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
index 31de53f8..591f1e7b 100644
--- a/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleGroupSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
index 1db3b49b..dec2a70a 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
index 2bc3c99e..c28f32b4 100644
--- a/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleItalicWithTextDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicWithTextDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicWithTextDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
index aee4f4c7..8c29ea38 100644
--- a/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
index d43603b1..37f94493 100644
--- a/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/default/ToggleSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TooltipDemo.json b/apps/www/src/public/r/styles/default/TooltipDemo.json
index 083ba344..e8a52386 100644
--- a/apps/www/src/public/r/styles/default/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/default/TooltipDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TooltipDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:example",
-      "target": "TooltipDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyBlockquote.json b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
index 9819d203..c20d5f8b 100644
--- a/apps/www/src/public/r/styles/default/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/default/TypographyBlockquote.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyBlockquote.vue",
       "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyBlockquote.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyDemo.json b/apps/www/src/public/r/styles/default/TypographyDemo.json
index 7dc911d6..82085ca2 100644
--- a/apps/www/src/public/r/styles/default/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/default/TypographyDemo.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyDemo.vue",
       "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH1.json b/apps/www/src/public/r/styles/default/TypographyH1.json
index 4688e1d9..ac6302ac 100644
--- a/apps/www/src/public/r/styles/default/TypographyH1.json
+++ b/apps/www/src/public/r/styles/default/TypographyH1.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH1.vue",
       "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH1.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH2.json b/apps/www/src/public/r/styles/default/TypographyH2.json
index 50d1467b..29abfe46 100644
--- a/apps/www/src/public/r/styles/default/TypographyH2.json
+++ b/apps/www/src/public/r/styles/default/TypographyH2.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH2.vue",
       "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH2.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH3.json b/apps/www/src/public/r/styles/default/TypographyH3.json
index 3819ad2a..871a73f8 100644
--- a/apps/www/src/public/r/styles/default/TypographyH3.json
+++ b/apps/www/src/public/r/styles/default/TypographyH3.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH3.vue",
       "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH3.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyH4.json b/apps/www/src/public/r/styles/default/TypographyH4.json
index 72b7f9a0..1680369a 100644
--- a/apps/www/src/public/r/styles/default/TypographyH4.json
+++ b/apps/www/src/public/r/styles/default/TypographyH4.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH4.vue",
       "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH4.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyInlineCode.json b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
index 70a6eb50..4b52c76b 100644
--- a/apps/www/src/public/r/styles/default/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/default/TypographyInlineCode.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyInlineCode.vue",
       "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyInlineCode.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyLarge.json b/apps/www/src/public/r/styles/default/TypographyLarge.json
index d0d2febc..75175696 100644
--- a/apps/www/src/public/r/styles/default/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/default/TypographyLarge.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLarge.vue",
       "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLarge.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyLead.json b/apps/www/src/public/r/styles/default/TypographyLead.json
index 40e1b5bb..aeebe241 100644
--- a/apps/www/src/public/r/styles/default/TypographyLead.json
+++ b/apps/www/src/public/r/styles/default/TypographyLead.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLead.vue",
       "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLead.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyList.json b/apps/www/src/public/r/styles/default/TypographyList.json
index 6d20c56b..36e3e1eb 100644
--- a/apps/www/src/public/r/styles/default/TypographyList.json
+++ b/apps/www/src/public/r/styles/default/TypographyList.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyList.vue",
       "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyList.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyMuted.json b/apps/www/src/public/r/styles/default/TypographyMuted.json
index 5a5beda4..dd2b0458 100644
--- a/apps/www/src/public/r/styles/default/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/default/TypographyMuted.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyMuted.vue",
       "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyMuted.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyP.json b/apps/www/src/public/r/styles/default/TypographyP.json
index cb740655..f3c14134 100644
--- a/apps/www/src/public/r/styles/default/TypographyP.json
+++ b/apps/www/src/public/r/styles/default/TypographyP.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyP.vue",
       "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyP.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographySmall.json b/apps/www/src/public/r/styles/default/TypographySmall.json
index 1ec9e7cf..605633ed 100644
--- a/apps/www/src/public/r/styles/default/TypographySmall.json
+++ b/apps/www/src/public/r/styles/default/TypographySmall.json
@@ -8,7 +8,7 @@
       "path": "example/TypographySmall.vue",
       "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographySmall.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/TypographyTable.json b/apps/www/src/public/r/styles/default/TypographyTable.json
index 69146da4..69571bcd 100644
--- a/apps/www/src/public/r/styles/default/TypographyTable.json
+++ b/apps/www/src/public/r/styles/default/TypographyTable.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyTable.vue",
       "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyTable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VCalendarDemo.json b/apps/www/src/public/r/styles/default/VCalendarDemo.json
index b490b098..ebd3e5fa 100644
--- a/apps/www/src/public/r/styles/default/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/default/VCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/VCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "VCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerDemo.json b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
index 4a04ec4a..3b97c7b0 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerForm.json b/apps/www/src/public/r/styles/default/VDatePickerForm.json
index bf9329f0..14b92857 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/VDatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
index 6619fd89..71d802a9 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/VDatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
index eb48ccc2..73dab0a4 100644
--- a/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/default/VDatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
index 2db2beab..45cbd2e1 100644
--- a/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/default/VDateTimePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDateTimePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDateTimePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
index cffdfca8..cf4db136 100644
--- a/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/default/VRangePickerWithSlot.json
@@ -13,7 +13,7 @@
       "path": "example/VRangePickerWithSlot.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VRangePickerWithSlot.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/default/sidebar.json b/apps/www/src/public/r/styles/default/sidebar.json
index 82cd655c..e8161f9b 100644
--- a/apps/www/src/public/r/styles/default/sidebar.json
+++ b/apps/www/src/public/r/styles/default/sidebar.json
@@ -163,7 +163,7 @@
     },
     {
       "path": "ui/sidebar/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
       "target": "sidebar/index.ts"
     },
diff --git a/apps/www/src/public/r/styles/default/toggle.json b/apps/www/src/public/r/styles/default/toggle.json
index 7727f5d5..d316e829 100644
--- a/apps/www/src/public/r/styles/default/toggle.json
+++ b/apps/www/src/public/r/styles/default/toggle.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "ui/toggle/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
       "target": "toggle/index.ts"
     }
diff --git a/apps/www/src/public/r/styles/new-york/AccordionDemo.json b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
index fc7460cf..9e4f9539 100644
--- a/apps/www/src/public/r/styles/new-york/AccordionDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AccordionDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AccordionDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
       "type": "registry:example",
-      "target": "AccordionDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDemo.json b/apps/www/src/public/r/styles/new-york/AlertDemo.json
index 1818c5ce..bfa3128f 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
index 829d78d9..29d36246 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AlertDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
index 0e8dfff6..06e56e2f 100644
--- a/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AlertDialogDemo.json
@@ -11,7 +11,7 @@
       "path": "example/AlertDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
       "type": "registry:example",
-      "target": "AlertDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
index c1042e33..d91d0526 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
index b7b4121e..15909208 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
index ceef9699..f1b72315 100644
--- a/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/AreaChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/AreaChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "AreaChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
index bac76804..b15edccf 100644
--- a/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AspectRatioDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AspectRatioDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
       "type": "registry:example",
-      "target": "AspectRatioDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication01.json b/apps/www/src/public/r/styles/new-york/Authentication01.json
index 87f2675a..cdecc493 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication01.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication01.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication01.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication02.json b/apps/www/src/public/r/styles/new-york/Authentication02.json
index 79773353..2e55cfdd 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication02.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication02.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication02.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication03.json b/apps/www/src/public/r/styles/new-york/Authentication03.json
index fc4fe797..c264d7c1 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication03.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication03.json
@@ -13,7 +13,7 @@
       "path": "block/Authentication03.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Authentication04.json b/apps/www/src/public/r/styles/new-york/Authentication04.json
index 4a40f872..de2446fb 100644
--- a/apps/www/src/public/r/styles/new-york/Authentication04.json
+++ b/apps/www/src/public/r/styles/new-york/Authentication04.json
@@ -12,7 +12,7 @@
       "path": "block/Authentication04.vue",
       "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Authentication04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormApi.json b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
index 163f480b..4df8a739 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormApi.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormApi.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormApi.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormArray.json b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
index a7a0b40f..22af3fa5 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormArray.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormArray.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormArray.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormArray.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
index f5aec770..42920362 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormBasic.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormBasic.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormBasic.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
index f342e860..e61ff781 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormConfirmPassword.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormConfirmPassword.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormConfirmPassword.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
index 56f2a4fb..b28c6fb2 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormControlled.json
@@ -16,7 +16,7 @@
       "path": "example/AutoFormControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
index 62ffcbf3..5ea0f106 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormDependencies.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormDependencies.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormDependencies.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
index 9ef746a1..44bd16cc 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormInputWithoutLabel.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormInputWithoutLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormInputWithoutLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
index 658cc8db..b5991545 100644
--- a/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
+++ b/apps/www/src/public/r/styles/new-york/AutoFormSubObject.json
@@ -12,7 +12,7 @@
       "path": "example/AutoFormSubObject.vue",
       "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
       "type": "registry:example",
-      "target": "AutoFormSubObject.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/AvatarDemo.json b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
index da66e574..39e5171c 100644
--- a/apps/www/src/public/r/styles/new-york/AvatarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/AvatarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/AvatarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
       "type": "registry:example",
-      "target": "AvatarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
index 02754d1e..907a9c03 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
index c7e89d23..a62afed9 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
index bf6647a2..4c4582a2 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
index 73d091c4..6ff5f0c0 100644
--- a/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BadgeSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BadgeSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
       "type": "registry:example",
-      "target": "BadgeSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
index c04e4028..ac5ad1ff 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartDemo.json b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
index b20a4648..aa513960 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartRounded.json b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
index 17a37ac3..58959d2b 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartRounded.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartRounded.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartRounded.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartRounded.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BarChartStacked.json b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
index 25d407d2..f582e7eb 100644
--- a/apps/www/src/public/r/styles/new-york/BarChartStacked.json
+++ b/apps/www/src/public/r/styles/new-york/BarChartStacked.json
@@ -10,7 +10,7 @@
       "path": "example/BarChartStacked.vue",
       "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "BarChartStacked.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
index 50b5b443..2be016a4 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDemo.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
index 7f65da64..3a39aca3 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbDropdown.json
@@ -11,7 +11,7 @@
       "path": "example/BreadcrumbDropdown.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbDropdown.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
index 361dfb46..2902a1ce 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbEllipsisDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbEllipsisDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbEllipsisDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
index 0f23025f..f548f553 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbLinkDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
index f7e634f8..4f696fb3 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/BreadcrumbResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
index b40f1e2c..fdfd7e7b 100644
--- a/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/BreadcrumbSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/BreadcrumbSeparatorDemo.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
       "type": "registry:example",
-      "target": "BreadcrumbSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
index 6c5bba88..63f04c6a 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonAsChildDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonAsChildDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonAsChildDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
index 03fc37fe..ae7c7614 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
index d6bdd34b..d1b77edc 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonDestructiveDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonDestructiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonDestructiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
index 6c11d1d6..03f6da5b 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonGhostDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonGhostDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonGhostDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
index 3574402f..2e0de32c 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
index a0760893..401ada1d 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLinkDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLinkDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLinkDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
index 95afd90c..7f66b92d 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonLoadingDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonLoadingDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonLoadingDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
index 408e6407..7e79b4e6 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
index 2f72c751..db0c2be3 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonSecondaryDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonSecondaryDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonSecondaryDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
index 48aaa6d0..1a0bcd70 100644
--- a/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ButtonWithIconDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ButtonWithIconDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ButtonWithIconDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarDemo.json b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
index 67094f7f..6ceba044 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarForm.json b/apps/www/src/public/r/styles/new-york/CalendarForm.json
index c1cb14ee..02d713f2 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarForm.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarForm.json
@@ -19,7 +19,7 @@
       "path": "example/CalendarForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
index 943221cd..78d0e8a8 100644
--- a/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
+++ b/apps/www/src/public/r/styles/new-york/CalendarWithSelect.json
@@ -14,7 +14,7 @@
       "path": "example/CalendarWithSelect.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
       "type": "registry:example",
-      "target": "CalendarWithSelect.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardChat.json b/apps/www/src/public/r/styles/new-york/CardChat.json
index d4ab81a2..0b4c1e90 100644
--- a/apps/www/src/public/r/styles/new-york/CardChat.json
+++ b/apps/www/src/public/r/styles/new-york/CardChat.json
@@ -17,7 +17,7 @@
       "path": "example/CardChat.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "CardChat.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardDemo.json b/apps/www/src/public/r/styles/new-york/CardDemo.json
index a3a48c54..8b54b97e 100644
--- a/apps/www/src/public/r/styles/new-york/CardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardDemo.json
@@ -13,7 +13,7 @@
       "path": "example/CardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardFormDemo.json b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
index 4ef32517..5617b181 100644
--- a/apps/www/src/public/r/styles/new-york/CardFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CardFormDemo.json
@@ -14,7 +14,7 @@
       "path": "example/CardFormDemo.vue",
       "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardStats.json b/apps/www/src/public/r/styles/new-york/CardStats.json
index c2b99982..f3fc717f 100644
--- a/apps/www/src/public/r/styles/new-york/CardStats.json
+++ b/apps/www/src/public/r/styles/new-york/CardStats.json
@@ -15,7 +15,7 @@
       "path": "example/CardStats.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CardStats.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CardWithForm.json b/apps/www/src/public/r/styles/new-york/CardWithForm.json
index 0e4d1a2b..33d2087d 100644
--- a/apps/www/src/public/r/styles/new-york/CardWithForm.json
+++ b/apps/www/src/public/r/styles/new-york/CardWithForm.json
@@ -14,7 +14,7 @@
       "path": "example/CardWithForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CardWithForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselApi.json b/apps/www/src/public/r/styles/new-york/CarouselApi.json
index fdc029b0..8ef76276 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselApi.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselApi.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselApi.vue",
       "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselApi.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselDemo.json b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
index bd1a3a28..d03ac4f6 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
index 665d43d8..9bac374f 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselOrientation.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselOrientation.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselOrientation.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
index 7f57329f..ddc7bfc2 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselPlugin.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselPlugin.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselPlugin.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSize.json b/apps/www/src/public/r/styles/new-york/CarouselSize.json
index 393af4ec..b1368d2a 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSize.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSize.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSize.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSize.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
index ae36ba5a..6edc7dab 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselSpacing.json
@@ -11,7 +11,7 @@
       "path": "example/CarouselSpacing.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselSpacing.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
index 8f561d5f..0ff46d3f 100644
--- a/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
+++ b/apps/www/src/public/r/styles/new-york/CarouselThumbnails.json
@@ -13,7 +13,7 @@
       "path": "example/CarouselThumbnails.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CarouselThumbnails.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
index fd6e2f97..16a58000 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
index ce94c014..10abd87a 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
index 4a47b62c..ce8624f0 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormMultiple.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormMultiple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormMultiple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
index cfb66bdf..bd533951 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxFormSingle.json
@@ -17,7 +17,7 @@
       "path": "example/CheckboxFormSingle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxFormSingle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
index bdce2d95..1703c074 100644
--- a/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
+++ b/apps/www/src/public/r/styles/new-york/CheckboxWithText.json
@@ -10,7 +10,7 @@
       "path": "example/CheckboxWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CheckboxWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
index 9d078450..67f5e102 100644
--- a/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CollapsibleDemo.json
@@ -11,7 +11,7 @@
       "path": "example/CollapsibleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
       "type": "registry:example",
-      "target": "CollapsibleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
index 61969e43..1cbe9d41 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDemo.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
index dd1aafc0..014b8dfd 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxDropdownMenu.json
@@ -12,7 +12,7 @@
       "path": "example/ComboboxDropdownMenu.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxDropdownMenu.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxForm.json b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
index c1ef6df6..22a26e92 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxForm.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxForm.json
@@ -19,7 +19,7 @@
       "path": "example/ComboboxForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
index 92629bcd..3c2b4204 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxPopover.json
@@ -13,7 +13,7 @@
       "path": "example/ComboboxPopover.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxPopover.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
index efb22ef0..07de17cc 100644
--- a/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
+++ b/apps/www/src/public/r/styles/new-york/ComboboxResponsive.json
@@ -15,7 +15,7 @@
       "path": "example/ComboboxResponsive.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "ComboboxResponsive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDemo.json b/apps/www/src/public/r/styles/new-york/CommandDemo.json
index 48578973..75bee9c3 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDemo.json
@@ -10,7 +10,7 @@
       "path": "example/CommandDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
index f1d8e0ed..395b0507 100644
--- a/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/CommandDialogDemo.json
@@ -12,7 +12,7 @@
       "path": "example/CommandDialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "CommandDialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
index 9366283c..d35891cb 100644
--- a/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ContextMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ContextMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "ContextMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
index 1ae12efd..81d77e25 100644
--- a/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/CustomChartTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/CustomChartTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
       "type": "registry:example",
-      "target": "CustomChartTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard01.json b/apps/www/src/public/r/styles/new-york/Dashboard01.json
index 10d4dd11..e1b33c59 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard01.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard01.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard01.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard01.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard02.json b/apps/www/src/public/r/styles/new-york/Dashboard02.json
index c459fe3b..13bf449b 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard02.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard02.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard02.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard02.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard03.json b/apps/www/src/public/r/styles/new-york/Dashboard03.json
index 62626363..190bddad 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard03.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard03.json
@@ -17,7 +17,7 @@
       "path": "block/Dashboard03.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard03.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard04.json b/apps/www/src/public/r/styles/new-york/Dashboard04.json
index d6d532d0..bb3f0ae4 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard04.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard04.json
@@ -15,7 +15,7 @@
       "path": "block/Dashboard04.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard04.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard05.json b/apps/www/src/public/r/styles/new-york/Dashboard05.json
index 3d081777..4bc90128 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard05.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard05.json
@@ -23,7 +23,7 @@
       "path": "block/Dashboard05.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard05.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard06.json b/apps/www/src/public/r/styles/new-york/Dashboard06.json
index 13332dd1..3e80eb8d 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard06.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard06.json
@@ -19,7 +19,7 @@
       "path": "block/Dashboard06.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard06.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Dashboard07.json b/apps/www/src/public/r/styles/new-york/Dashboard07.json
index 92ea3a4c..63651f86 100644
--- a/apps/www/src/public/r/styles/new-york/Dashboard07.json
+++ b/apps/www/src/public/r/styles/new-york/Dashboard07.json
@@ -22,7 +22,7 @@
       "path": "block/Dashboard07.vue",
       "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:block",
-      "target": "Dashboard07.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
index 347d8d34..1486d994 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableColumnPinningDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableColumnPinningDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableColumnPinningDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemo.json b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
index 676bd213..618a75f1 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
index d53e6eae..12d0effa 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableDemoColumn.json
@@ -11,7 +11,7 @@
       "path": "example/DataTableDemoColumn.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableDemoColumn.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
index 87492229..0ed04c4e 100644
--- a/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DataTableReactiveDemo.json
@@ -17,7 +17,7 @@
       "path": "example/DataTableReactiveDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "DataTableReactiveDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
index c6a5c2c7..0829c298 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerForm.json b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
index 8f03c34b..795a25c9 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/DatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
index 104611ca..c5e8780f 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithIndependentMonths.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithIndependentMonths.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithIndependentMonths.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
index ef0564ed..6a4862a4 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/DatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
index a9cd7624..f259da24 100644
--- a/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/DatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/DatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "DatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
index 271c932f..ad88c0b2 100644
--- a/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
+++ b/apps/www/src/public/r/styles/new-york/DialogCustomCloseButton.json
@@ -13,7 +13,7 @@
       "path": "example/DialogCustomCloseButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogCustomCloseButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogDemo.json b/apps/www/src/public/r/styles/new-york/DialogDemo.json
index c432603c..f083828f 100644
--- a/apps/www/src/public/r/styles/new-york/DialogDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogDemo.json
@@ -13,7 +13,7 @@
       "path": "example/DialogDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogForm.json b/apps/www/src/public/r/styles/new-york/DialogForm.json
index 5ce3d0a9..4854208a 100644
--- a/apps/www/src/public/r/styles/new-york/DialogForm.json
+++ b/apps/www/src/public/r/styles/new-york/DialogForm.json
@@ -14,7 +14,7 @@
       "path": "example/DialogForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
index c8355c4e..c00e5c07 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollBodyDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollBodyDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollBodyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
index 9ddd9bae..134bd48c 100644
--- a/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DialogScrollOverlayDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DialogScrollOverlayDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "DialogScrollOverlayDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartColor.json b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
index a5cbe913..70a14087 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartColor.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartColor.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartColor.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartColor.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
index 91d0bde5..669ebd4c 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
index 3adf64db..c9952752 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DonutChartPie.json b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
index b044e476..165653fe 100644
--- a/apps/www/src/public/r/styles/new-york/DonutChartPie.json
+++ b/apps/www/src/public/r/styles/new-york/DonutChartPie.json
@@ -10,7 +10,7 @@
       "path": "example/DonutChartPie.vue",
       "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "DonutChartPie.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDemo.json b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
index c195110c..f39a7f8c 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDemo.json
@@ -14,7 +14,7 @@
       "path": "example/DrawerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DrawerDialog.json b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
index 94e9152b..6d5b45b9 100644
--- a/apps/www/src/public/r/styles/new-york/DrawerDialog.json
+++ b/apps/www/src/public/r/styles/new-york/DrawerDialog.json
@@ -16,7 +16,7 @@
       "path": "example/DrawerDialog.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
       "type": "registry:example",
-      "target": "DrawerDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
index be25743e..2a73d3a1 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuCheckboxes.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuCheckboxes.vue",
       "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuCheckboxes.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
index c2e1c6b1..b5b614a5 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuDemo.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
index eaec51f1..840eee7c 100644
--- a/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
+++ b/apps/www/src/public/r/styles/new-york/DropdownMenuRadioGroup.json
@@ -11,7 +11,7 @@
       "path": "example/DropdownMenuRadioGroup.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "DropdownMenuRadioGroup.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
index 7f107ffb..1ed6ca5f 100644
--- a/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
+++ b/apps/www/src/public/r/styles/new-york/HoverCardDemo.json
@@ -12,7 +12,7 @@
       "path": "example/HoverCardDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
       "type": "registry:example",
-      "target": "HoverCardDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputDemo.json b/apps/www/src/public/r/styles/new-york/InputDemo.json
index 189a9dfa..ab3b658a 100644
--- a/apps/www/src/public/r/styles/new-york/InputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/InputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/InputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputDisabled.json b/apps/www/src/public/r/styles/new-york/InputDisabled.json
index f33362d9..65e0d57d 100644
--- a/apps/www/src/public/r/styles/new-york/InputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/InputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/InputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
       "type": "registry:example",
-      "target": "InputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputFile.json b/apps/www/src/public/r/styles/new-york/InputFile.json
index 0b12da10..07a9d27d 100644
--- a/apps/www/src/public/r/styles/new-york/InputFile.json
+++ b/apps/www/src/public/r/styles/new-york/InputFile.json
@@ -11,7 +11,7 @@
       "path": "example/InputFile.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFile.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputForm.json b/apps/www/src/public/r/styles/new-york/InputForm.json
index 16e4a3e2..bf58c7f9 100644
--- a/apps/www/src/public/r/styles/new-york/InputForm.json
+++ b/apps/www/src/public/r/styles/new-york/InputForm.json
@@ -17,7 +17,7 @@
       "path": "example/InputForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
index 750bf1ba..353de2d6 100644
--- a/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
+++ b/apps/www/src/public/r/styles/new-york/InputFormAutoAnimate.json
@@ -17,7 +17,7 @@
       "path": "example/InputFormAutoAnimate.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "InputFormAutoAnimate.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithButton.json b/apps/www/src/public/r/styles/new-york/InputWithButton.json
index 147d9b55..7ee609e5 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithIcon.json b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
index 8fcc8ab0..b1384a9b 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithIcon.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithIcon.json
@@ -10,7 +10,7 @@
       "path": "example/InputWithIcon.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithIcon.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/InputWithLabel.json b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
index 25be2066..5043a06b 100644
--- a/apps/www/src/public/r/styles/new-york/InputWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/InputWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/InputWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "InputWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LabelDemo.json b/apps/www/src/public/r/styles/new-york/LabelDemo.json
index 6f69175b..39697848 100644
--- a/apps/www/src/public/r/styles/new-york/LabelDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LabelDemo.json
@@ -11,7 +11,7 @@
       "path": "example/LabelDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "LabelDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
index 543e8d09..e0ce5267 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartCustomTooltip.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartCustomTooltip.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartCustomTooltip.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartDemo.json b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
index bae2df19..6921d68e 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartDemo.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartDemo.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
index e9eca28c..bb58d37e 100644
--- a/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
+++ b/apps/www/src/public/r/styles/new-york/LineChartSparkline.json
@@ -10,7 +10,7 @@
       "path": "example/LineChartSparkline.vue",
       "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "LineChartSparkline.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/MenubarDemo.json b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
index 6b421456..9d975459 100644
--- a/apps/www/src/public/r/styles/new-york/MenubarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/MenubarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/MenubarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
       "type": "registry:example",
-      "target": "MenubarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
index e43bb722..2a5ebf87 100644
--- a/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NavigationMenuDemo.json
@@ -10,7 +10,7 @@
       "path": "example/NavigationMenuDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
       "type": "registry:example",
-      "target": "NavigationMenuDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
index c89ab567..5ccfac60 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldCurrency.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldCurrency.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldCurrency.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
index bd2e3714..fc497cc2 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDecimal.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDecimal.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDecimal.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
index e55406cf..c9c57d4b 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDemo.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
index cc8291ff..893b8b9a 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldDisabled.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
index f0292f52..7ea0f9fe 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldForm.json
@@ -17,7 +17,7 @@
       "path": "example/NumberFieldForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
index a700c334..be03a934 100644
--- a/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
+++ b/apps/www/src/public/r/styles/new-york/NumberFieldPercentage.json
@@ -11,7 +11,7 @@
       "path": "example/NumberFieldPercentage.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
       "type": "registry:example",
-      "target": "NumberFieldPercentage.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PaginationDemo.json b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
index 8c5bd901..4079c7fe 100644
--- a/apps/www/src/public/r/styles/new-york/PaginationDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PaginationDemo.json
@@ -11,7 +11,7 @@
       "path": "example/PaginationDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
       "type": "registry:example",
-      "target": "PaginationDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputControlled.json b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
index 00a26581..a2a8fd1b 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputControlled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputControlled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputControlled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputControlled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDemo.json b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
index e54b5222..95debf52 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
index 33c81d45..b877bc5c 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
index c82019e0..d4fc038b 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/PinInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
index 102e102e..eb530caf 100644
--- a/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PinInputSeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/PinInputSeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "PinInputSeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/PopoverDemo.json b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
index 388a8e67..ad08adaf 100644
--- a/apps/www/src/public/r/styles/new-york/PopoverDemo.json
+++ b/apps/www/src/public/r/styles/new-york/PopoverDemo.json
@@ -13,7 +13,7 @@
       "path": "example/PopoverDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "PopoverDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ProgressDemo.json b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
index a4a6fb66..25792b84 100644
--- a/apps/www/src/public/r/styles/new-york/ProgressDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ProgressDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ProgressDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
       "type": "registry:example",
-      "target": "ProgressDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
index f061eca6..6e40c1b1 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupDemo.json
@@ -11,7 +11,7 @@
       "path": "example/RadioGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
index 39d8bcf1..e4c133a2 100644
--- a/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
+++ b/apps/www/src/public/r/styles/new-york/RadioGroupForm.json
@@ -17,7 +17,7 @@
       "path": "example/RadioGroupForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "RadioGroupForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
index fa18daa7..dd502996 100644
--- a/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/RangeCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/RangeCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "RangeCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableDemo.json b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
index a3ded18f..e6405c7b 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
index 1329aed7..5507f3cf 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableHandleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableHandleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableHandleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
index 0bac1e59..db80a16c 100644
--- a/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ResizableVerticalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ResizableVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ResizableVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
index 475919c7..c84d98fc 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ScrollAreaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
index d5140d46..97223db8 100644
--- a/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ScrollAreaHorizontalDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ScrollAreaHorizontalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
       "type": "registry:example",
-      "target": "ScrollAreaHorizontalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectDemo.json b/apps/www/src/public/r/styles/new-york/SelectDemo.json
index 0ca1c9cc..9f2d2bc4 100644
--- a/apps/www/src/public/r/styles/new-york/SelectDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SelectDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SelectDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectForm.json b/apps/www/src/public/r/styles/new-york/SelectForm.json
index 31b08218..f058c030 100644
--- a/apps/www/src/public/r/styles/new-york/SelectForm.json
+++ b/apps/www/src/public/r/styles/new-york/SelectForm.json
@@ -17,7 +17,7 @@
       "path": "example/SelectForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SelectScrollable.json b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
index 3533bb94..c7849084 100644
--- a/apps/www/src/public/r/styles/new-york/SelectScrollable.json
+++ b/apps/www/src/public/r/styles/new-york/SelectScrollable.json
@@ -10,7 +10,7 @@
       "path": "example/SelectScrollable.vue",
       "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
       "type": "registry:example",
-      "target": "SelectScrollable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
index 9d1bbace..f83022ef 100644
--- a/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SeparatorDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SeparatorDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SeparatorDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SheetDemo.json b/apps/www/src/public/r/styles/new-york/SheetDemo.json
index c56748f7..6de832fc 100644
--- a/apps/www/src/public/r/styles/new-york/SheetDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
index e4d838d1..c407c6fa 100644
--- a/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SheetSideDemo.json
@@ -13,7 +13,7 @@
       "path": "example/SheetSideDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SheetSideDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar01.json b/apps/www/src/public/r/styles/new-york/Sidebar01.json
index 2bfd9aa5..bde54ab8 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar01.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar01.json
@@ -14,7 +14,7 @@
       "path": "block/Sidebar01/page.vue",
       "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar01Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar02.json b/apps/www/src/public/r/styles/new-york/Sidebar02.json
new file mode 100644
index 00000000..cea0d958
--- /dev/null
+++ b/apps/www/src/public/r/styles/new-york/Sidebar02.json
@@ -0,0 +1,42 @@
+{
+  "name": "Sidebar02",
+  "type": "registry:block",
+  "dependencies": [],
+  "registryDependencies": [
+    "AppSidebar.vue",
+    "breadcrumb",
+    "separator",
+    "sidebar",
+    "SearchForm.vue",
+    "VersionSwitcher.vue",
+    "collapsible",
+    "label",
+    "dropdown-menu"
+  ],
+  "files": [
+    {
+      "path": "block/Sidebar02/page.vue",
+      "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "type": "registry:page",
+      "target": "pages/dashboard/index.vue"
+    },
+    {
+      "path": "block/Sidebar02/components/AppSidebar.vue",
+      "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/SearchForm.vue",
+      "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    },
+    {
+      "path": "block/Sidebar02/components/VersionSwitcher.vue",
+      "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+      "type": "registry:component",
+      "target": ""
+    }
+  ]
+}
diff --git a/apps/www/src/public/r/styles/new-york/Sidebar07.json b/apps/www/src/public/r/styles/new-york/Sidebar07.json
index b54fc18a..b5063258 100644
--- a/apps/www/src/public/r/styles/new-york/Sidebar07.json
+++ b/apps/www/src/public/r/styles/new-york/Sidebar07.json
@@ -13,9 +13,9 @@
   "files": [
     {
       "path": "block/Sidebar07/page.vue",
-      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+      "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
       "type": "registry:page",
-      "target": "Sidebar07Page.vue"
+      "target": "pages/dashboard/index.vue"
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonCard.json b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
index 54cd04fc..aaba9b03 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonCard.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonCard.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonCard.vue",
       "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonCard.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
index 911b5704..68a2794a 100644
--- a/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SkeletonDemo.json
@@ -10,7 +10,7 @@
       "path": "example/SkeletonDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SkeletonDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SliderDemo.json b/apps/www/src/public/r/styles/new-york/SliderDemo.json
index 9c18fc3f..1dabeea6 100644
--- a/apps/www/src/public/r/styles/new-york/SliderDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SliderDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SliderDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
       "type": "registry:example",
-      "target": "SliderDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SliderForm.json b/apps/www/src/public/r/styles/new-york/SliderForm.json
index eeb4265b..8ca9e923 100644
--- a/apps/www/src/public/r/styles/new-york/SliderForm.json
+++ b/apps/www/src/public/r/styles/new-york/SliderForm.json
@@ -17,7 +17,7 @@
       "path": "example/SliderForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SliderForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SonnerDemo.json b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
index e907e7f0..234121d8 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerDemo.json
@@ -12,7 +12,7 @@
       "path": "example/SonnerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
index f4e89c44..07885dc3 100644
--- a/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
+++ b/apps/www/src/public/r/styles/new-york/SonnerWithDialog.json
@@ -13,7 +13,7 @@
       "path": "example/SonnerWithDialog.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
       "type": "registry:example",
-      "target": "SonnerWithDialog.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperDemo.json b/apps/www/src/public/r/styles/new-york/StepperDemo.json
index 40814330..fa4d85db 100644
--- a/apps/www/src/public/r/styles/new-york/StepperDemo.json
+++ b/apps/www/src/public/r/styles/new-york/StepperDemo.json
@@ -10,7 +10,7 @@
       "path": "example/StepperDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperForm.json b/apps/www/src/public/r/styles/new-york/StepperForm.json
index c722236b..6d2f2914 100644
--- a/apps/www/src/public/r/styles/new-york/StepperForm.json
+++ b/apps/www/src/public/r/styles/new-york/StepperForm.json
@@ -15,7 +15,7 @@
       "path": "example/StepperForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperHorizental.json b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
index f0450393..eccfe5a7 100644
--- a/apps/www/src/public/r/styles/new-york/StepperHorizental.json
+++ b/apps/www/src/public/r/styles/new-york/StepperHorizental.json
@@ -11,7 +11,7 @@
       "path": "example/StepperHorizental.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperHorizental.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/StepperVertical.json b/apps/www/src/public/r/styles/new-york/StepperVertical.json
index 47727b5a..11e663a8 100644
--- a/apps/www/src/public/r/styles/new-york/StepperVertical.json
+++ b/apps/www/src/public/r/styles/new-york/StepperVertical.json
@@ -11,7 +11,7 @@
       "path": "example/StepperVertical.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
       "type": "registry:example",
-      "target": "StepperVertical.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SwitchDemo.json b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
index cfe3454b..e283f076 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchDemo.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchDemo.json
@@ -11,7 +11,7 @@
       "path": "example/SwitchDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/SwitchForm.json b/apps/www/src/public/r/styles/new-york/SwitchForm.json
index b2e95aea..daa6877e 100644
--- a/apps/www/src/public/r/styles/new-york/SwitchForm.json
+++ b/apps/www/src/public/r/styles/new-york/SwitchForm.json
@@ -17,7 +17,7 @@
       "path": "example/SwitchForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "SwitchForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TableDemo.json b/apps/www/src/public/r/styles/new-york/TableDemo.json
index bb7d10b9..f6f8d9ef 100644
--- a/apps/www/src/public/r/styles/new-york/TableDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TableDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TableDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
       "type": "registry:example",
-      "target": "TableDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TabsDemo.json b/apps/www/src/public/r/styles/new-york/TabsDemo.json
index dfd5f125..a3cc5e37 100644
--- a/apps/www/src/public/r/styles/new-york/TabsDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
index a10d3118..5060eec5 100644
--- a/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TabsVerticalDemo.json
@@ -14,7 +14,7 @@
       "path": "example/TabsVerticalDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
       "type": "registry:example",
-      "target": "TabsVerticalDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
index eefb3ea9..b0a877e5 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputComboboxDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TagsInputComboboxDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputComboboxDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
index 5af8fba8..735132bc 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TagsInputDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
index e560c54c..b860210e 100644
--- a/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TagsInputFormDemo.json
@@ -17,7 +17,7 @@
       "path": "example/TagsInputFormDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TagsInputFormDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDemo.json b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
index d53d10ff..c23609a9 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDemo.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
index 844cd277..98959398 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaDisabled.json
@@ -10,7 +10,7 @@
       "path": "example/TextareaDisabled.vue",
       "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaDisabled.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaForm.json b/apps/www/src/public/r/styles/new-york/TextareaForm.json
index d919cdda..54083f52 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaForm.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaForm.json
@@ -17,7 +17,7 @@
       "path": "example/TextareaForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
index 8a3e870a..8d00527f 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithButton.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithButton.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithButton.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
index ab334a3d..229a6fe7 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithLabel.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithLabel.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithLabel.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TextareaWithText.json b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
index 219f6ee2..67863602 100644
--- a/apps/www/src/public/r/styles/new-york/TextareaWithText.json
+++ b/apps/www/src/public/r/styles/new-york/TextareaWithText.json
@@ -11,7 +11,7 @@
       "path": "example/TextareaWithText.vue",
       "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TextareaWithText.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastDemo.json b/apps/www/src/public/r/styles/new-york/ToastDemo.json
index 29ed6da9..ebc1f4a6 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDemo.json
@@ -11,7 +11,7 @@
       "path": "example/ToastDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastDestructive.json b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
index 840cc942..cc11a18f 100644
--- a/apps/www/src/public/r/styles/new-york/ToastDestructive.json
+++ b/apps/www/src/public/r/styles/new-york/ToastDestructive.json
@@ -12,7 +12,7 @@
       "path": "example/ToastDestructive.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastDestructive.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastSimple.json b/apps/www/src/public/r/styles/new-york/ToastSimple.json
index dbb3b924..2e11f3e1 100644
--- a/apps/www/src/public/r/styles/new-york/ToastSimple.json
+++ b/apps/www/src/public/r/styles/new-york/ToastSimple.json
@@ -11,7 +11,7 @@
       "path": "example/ToastSimple.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastSimple.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithAction.json b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
index 43c02a99..df3bb318 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithAction.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithAction.json
@@ -12,7 +12,7 @@
       "path": "example/ToastWithAction.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithAction.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
index 8932b455..70f7fa7d 100644
--- a/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
+++ b/apps/www/src/public/r/styles/new-york/ToastWithTitle.json
@@ -11,7 +11,7 @@
       "path": "example/ToastWithTitle.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
       "type": "registry:example",
-      "target": "ToastWithTitle.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
index f9de4936..4823f0c2 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
index 48ed38d3..debe3c85 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
index 75b3b0c0..94d3443a 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
index adbf3e39..dbe87b8b 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupDisabledDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupDisabledDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupDisabledDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
index 1c0cb40b..41dc4fdb 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
index fbfa2f3f..9253a678 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupOutlineDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupOutlineDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupOutlineDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
index bcb804c2..d8d1c6b4 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSingleDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSingleDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSingleDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
index 1524d7f8..19105a61 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleGroupSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleGroupSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleGroupSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
index c6706d7e..dd66b9d7 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
index 966d414f..e8a8ce23 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleItalicWithTextDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleItalicWithTextDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleItalicWithTextDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
index c03fb329..930306dc 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleLargeDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleLargeDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleLargeDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
index f90f9018..e0c96cfb 100644
--- a/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
+++ b/apps/www/src/public/r/styles/new-york/ToggleSmallDemo.json
@@ -10,7 +10,7 @@
       "path": "example/ToggleSmallDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
       "type": "registry:example",
-      "target": "ToggleSmallDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TooltipDemo.json b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
index c0cdeb16..02cfe8b0 100644
--- a/apps/www/src/public/r/styles/new-york/TooltipDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TooltipDemo.json
@@ -11,7 +11,7 @@
       "path": "example/TooltipDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
       "type": "registry:example",
-      "target": "TooltipDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
index 9819d203..c20d5f8b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyBlockquote.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyBlockquote.vue",
       "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyBlockquote.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyDemo.json b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
index 7dc911d6..82085ca2 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyDemo.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyDemo.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyDemo.vue",
       "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH1.json b/apps/www/src/public/r/styles/new-york/TypographyH1.json
index 4688e1d9..ac6302ac 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH1.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH1.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH1.vue",
       "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH1.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH2.json b/apps/www/src/public/r/styles/new-york/TypographyH2.json
index 50d1467b..29abfe46 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH2.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH2.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH2.vue",
       "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH2.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH3.json b/apps/www/src/public/r/styles/new-york/TypographyH3.json
index 3819ad2a..871a73f8 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH3.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH3.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH3.vue",
       "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH3.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyH4.json b/apps/www/src/public/r/styles/new-york/TypographyH4.json
index 72b7f9a0..1680369a 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyH4.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyH4.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyH4.vue",
       "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyH4.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
index 70a6eb50..4b52c76b 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyInlineCode.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyInlineCode.vue",
       "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyInlineCode.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLarge.json b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
index d0d2febc..75175696 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLarge.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLarge.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLarge.vue",
       "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLarge.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyLead.json b/apps/www/src/public/r/styles/new-york/TypographyLead.json
index 40e1b5bb..aeebe241 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyLead.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyLead.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyLead.vue",
       "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyLead.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyList.json b/apps/www/src/public/r/styles/new-york/TypographyList.json
index 6d20c56b..36e3e1eb 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyList.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyList.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyList.vue",
       "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyList.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyMuted.json b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
index 5a5beda4..dd2b0458 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyMuted.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyMuted.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyMuted.vue",
       "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyMuted.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyP.json b/apps/www/src/public/r/styles/new-york/TypographyP.json
index cb740655..f3c14134 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyP.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyP.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyP.vue",
       "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyP.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographySmall.json b/apps/www/src/public/r/styles/new-york/TypographySmall.json
index 1ec9e7cf..605633ed 100644
--- a/apps/www/src/public/r/styles/new-york/TypographySmall.json
+++ b/apps/www/src/public/r/styles/new-york/TypographySmall.json
@@ -8,7 +8,7 @@
       "path": "example/TypographySmall.vue",
       "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographySmall.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/TypographyTable.json b/apps/www/src/public/r/styles/new-york/TypographyTable.json
index 69146da4..69571bcd 100644
--- a/apps/www/src/public/r/styles/new-york/TypographyTable.json
+++ b/apps/www/src/public/r/styles/new-york/TypographyTable.json
@@ -8,7 +8,7 @@
       "path": "example/TypographyTable.vue",
       "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "TypographyTable.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
index ade41d1d..e9167d70 100644
--- a/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VCalendarDemo.json
@@ -10,7 +10,7 @@
       "path": "example/VCalendarDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
       "type": "registry:example",
-      "target": "VCalendarDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
index e8ea4063..9af09140 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
index 87a27920..a803d856 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerForm.json
@@ -19,7 +19,7 @@
       "path": "example/VDatePickerForm.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerForm.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
index 85790287..32796580 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithPresets.json
@@ -14,7 +14,7 @@
       "path": "example/VDatePickerWithPresets.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithPresets.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
index 35d2da11..e7c10d2e 100644
--- a/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
+++ b/apps/www/src/public/r/styles/new-york/VDatePickerWithRange.json
@@ -13,7 +13,7 @@
       "path": "example/VDatePickerWithRange.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VDatePickerWithRange.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
index 30f5517e..35431428 100644
--- a/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
+++ b/apps/www/src/public/r/styles/new-york/VDateTimePickerDemo.json
@@ -13,7 +13,7 @@
       "path": "example/VDateTimePickerDemo.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
       "type": "registry:example",
-      "target": "VDateTimePickerDemo.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
index 3b4edd33..15fa7b80 100644
--- a/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
+++ b/apps/www/src/public/r/styles/new-york/VRangePickerWithSlot.json
@@ -13,7 +13,7 @@
       "path": "example/VRangePickerWithSlot.vue",
       "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
       "type": "registry:example",
-      "target": "VRangePickerWithSlot.vue"
+      "target": ""
     }
   ]
 }
diff --git a/apps/www/src/public/r/styles/new-york/sidebar.json b/apps/www/src/public/r/styles/new-york/sidebar.json
index dc484fc7..f6f268d9 100644
--- a/apps/www/src/public/r/styles/new-york/sidebar.json
+++ b/apps/www/src/public/r/styles/new-york/sidebar.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "ui/sidebar/Sidebar.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
       "type": "registry:ui",
       "target": "sidebar/Sidebar.vue"
     },
@@ -163,7 +163,7 @@
     },
     {
       "path": "ui/sidebar/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+      "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
       "type": "registry:ui",
       "target": "sidebar/index.ts"
     },
diff --git a/apps/www/src/public/r/styles/new-york/toggle.json b/apps/www/src/public/r/styles/new-york/toggle.json
index 77f54286..44ad2008 100644
--- a/apps/www/src/public/r/styles/new-york/toggle.json
+++ b/apps/www/src/public/r/styles/new-york/toggle.json
@@ -14,7 +14,7 @@
     },
     {
       "path": "ui/toggle/index.ts",
-      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+      "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
       "type": "registry:ui",
       "target": "toggle/index.ts"
     }
diff --git a/apps/www/src/public/r/temp.json b/apps/www/src/public/r/temp.json
index b3c12abe..873fbe6c 100644
--- a/apps/www/src/public/r/temp.json
+++ b/apps/www/src/public/r/temp.json
@@ -2297,7 +2297,7 @@
     "files": [
       {
         "path": "ui/sidebar/Sidebar.vue",
-        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<{\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
+        "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport type { SidebarProps } from '.'\nimport { cn } from '@/lib/utils'\nimport Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'\nimport SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'\nimport { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<SidebarProps>(), {\n  side: 'left',\n  variant: 'sidebar',\n  collapsible: 'offcanvas',\n})\n\nconst { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n</script>\n\n<template>\n  <div\n    v-if=\"collapsible === 'none'\"\n    :class=\"cn('flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground', props.class)\"\n    v-bind=\"$attrs\"\n  >\n    <slot />\n  </div>\n\n  <Sheet v-else-if=\"isMobile\" :open=\"openMobile\" v-bind=\"$attrs\" @update:open=\"setOpenMobile\">\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-mobile=\"true\"\n      :side=\"side\"\n      class=\"w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n      :style=\"{\n        '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n      }\"\n    >\n      <div class=\"flex h-full w-full flex-col\">\n        <slot />\n      </div>\n    </SheetContent>\n  </Sheet>\n\n  <div\n    v-else class=\"group peer hidden md:block\"\n    :data-state=\"state\"\n    :data-collapsible=\"state === 'collapsed' ? collapsible : ''\"\n    :data-variant=\"variant\"\n    :data-side=\"side\"\n  >\n    <!-- This is what handles the sidebar gap on desktop  -->\n    <div\n      :class=\"cn(\n        'duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear',\n        'group-data-[collapsible=offcanvas]:w-0',\n        'group-data-[side=right]:rotate-180',\n        variant === 'floating' || variant === 'inset'\n          ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon]',\n      )\"\n    />\n    <div\n      :class=\"cn(\n        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',\n        side === 'left'\n          ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'\n          : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\n        variant === 'floating' || variant === 'inset'\n          ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]'\n          : 'group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l',\n        props.class,\n      )\"\n      v-bind=\"$attrs\"\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow\"\n      >\n        <slot />\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:ui",
         "target": "sidebar/Sidebar.vue"
       },
@@ -2441,7 +2441,7 @@
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
         "target": "sidebar/index.ts"
       },
@@ -2865,7 +2865,7 @@
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-3',\n        sm: 'h-8 px-2',\n        lg: 'h-10 px-3',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-9 px-2 min-w-9',\n        sm: 'h-8 px-1.5 min-w-8',\n        lg: 'h-10 px-2.5 min-w-10',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
         "target": "toggle/index.ts"
       }
@@ -2978,7 +2978,7 @@
         "path": "example/AccordionDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/new-york/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
         "type": "registry:example",
-        "target": "AccordionDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -2994,7 +2994,7 @@
         "path": "example/AlertDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { RocketIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert>\n    <RocketIcon class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3010,7 +3010,7 @@
         "path": "example/AlertDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/new-york/ui/alert'\nimport { ExclamationTriangleIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <ExclamationTriangleIcon class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3027,7 +3027,7 @@
         "path": "example/AlertDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/new-york/ui/alert-dialog'\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3043,7 +3043,7 @@
         "path": "example/AreaChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -3059,7 +3059,7 @@
         "path": "example/AreaChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3075,7 +3075,7 @@
         "path": "example/AreaChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/new-york/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -3091,7 +3091,7 @@
         "path": "example/AspectRatioDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/new-york/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
         "type": "registry:example",
-        "target": "AspectRatioDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3109,7 +3109,7 @@
         "path": "example/AutoFormApi.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormApi.vue"
+        "target": ""
       }
     ]
   },
@@ -3127,7 +3127,7 @@
         "path": "example/AutoFormArray.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormArray.vue"
+        "target": ""
       }
     ]
   },
@@ -3145,7 +3145,7 @@
         "path": "example/AutoFormBasic.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormBasic.vue"
+        "target": ""
       }
     ]
   },
@@ -3163,7 +3163,7 @@
         "path": "example/AutoFormConfirmPassword.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormConfirmPassword.vue"
+        "target": ""
       }
     ]
   },
@@ -3185,7 +3185,7 @@
         "path": "example/AutoFormControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -3203,7 +3203,7 @@
         "path": "example/AutoFormDependencies.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormDependencies.vue"
+        "target": ""
       }
     ]
   },
@@ -3221,7 +3221,7 @@
         "path": "example/AutoFormInputWithoutLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-center gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormInputWithoutLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -3239,7 +3239,7 @@
         "path": "example/AutoFormSubObject.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/new-york/ui/auto-form'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormSubObject.vue"
+        "target": ""
       }
     ]
   },
@@ -3255,7 +3255,7 @@
         "path": "example/AvatarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
         "type": "registry:example",
-        "target": "AvatarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3271,7 +3271,7 @@
         "path": "example/BadgeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3287,7 +3287,7 @@
         "path": "example/BadgeDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3303,7 +3303,7 @@
         "path": "example/BadgeOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3319,7 +3319,7 @@
         "path": "example/BadgeSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3335,7 +3335,7 @@
         "path": "example/BarChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -3351,7 +3351,7 @@
         "path": "example/BarChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3367,7 +3367,7 @@
         "path": "example/BarChartRounded.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartRounded.vue"
+        "target": ""
       }
     ]
   },
@@ -3383,7 +3383,7 @@
         "path": "example/BarChartStacked.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartStacked.vue"
+        "target": ""
       }
     ]
   },
@@ -3400,7 +3400,7 @@
         "path": "example/BreadcrumbDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3417,7 +3417,7 @@
         "path": "example/BreadcrumbDropdown.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ChevronDownIcon, SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDownIcon class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDropdown.vue"
+        "target": ""
       }
     ]
   },
@@ -3433,7 +3433,7 @@
         "path": "example/BreadcrumbEllipsisDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbEllipsisDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3449,7 +3449,7 @@
         "path": "example/BreadcrumbLinkDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3470,7 +3470,7 @@
         "path": "example/BreadcrumbResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -3486,7 +3486,7 @@
         "path": "example/BreadcrumbSeparatorDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { SlashIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <SlashIcon />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3502,7 +3502,7 @@
         "path": "example/ButtonAsChildDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonAsChildDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3518,7 +3518,7 @@
         "path": "example/ButtonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3534,7 +3534,7 @@
         "path": "example/ButtonDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3550,7 +3550,7 @@
         "path": "example/ButtonGhostDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonGhostDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3566,7 +3566,7 @@
         "path": "example/ButtonIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ChevronRightIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRightIcon class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3582,7 +3582,7 @@
         "path": "example/ButtonLinkDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3598,7 +3598,7 @@
         "path": "example/ButtonLoadingDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ReloadIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button disabled>\n    <ReloadIcon class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLoadingDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3614,7 +3614,7 @@
         "path": "example/ButtonOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3630,7 +3630,7 @@
         "path": "example/ButtonSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3646,7 +3646,7 @@
         "path": "example/ButtonWithIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { EnvelopeOpenIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Button>\n    <EnvelopeOpenIcon class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonWithIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3662,7 +3662,7 @@
         "path": "example/CalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3687,7 +3687,7 @@
         "path": "example/CalendarForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarForm.vue"
+        "target": ""
       }
     ]
   },
@@ -3707,7 +3707,7 @@
         "path": "example/CalendarWithSelect.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/new-york/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarWithSelect.vue"
+        "target": ""
       }
     ]
   },
@@ -3730,7 +3730,7 @@
         "path": "example/CardChat.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/new-york/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport { CheckIcon, PaperPlaneIcon, PlusIcon } from '@radix-icons/vue'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <PlusIcon class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <PaperPlaneIcon class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <CheckIcon v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "CardChat.vue"
+        "target": ""
       }
     ]
   },
@@ -3749,7 +3749,7 @@
         "path": "example/CardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { BellIcon, CheckIcon } from '@radix-icons/vue'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellIcon />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <CheckIcon class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3769,7 +3769,7 @@
         "path": "example/CardFormDemo.vue",
         "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3790,7 +3790,7 @@
         "path": "example/CardStats.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { BarChart } from '@/registry/new-york/ui/chart-bar'\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport { VisScatter } from '@unovis/vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <LineChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :margin=\"{ top: 5, right: 10, left: 10, bottom: 0 }\"\n            :categories=\"['revenue']\"\n            :index=\"'revenue'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-tooltip=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n          >\n            <VisScatter\n              color=\"white\"\n              stroke-color=\"hsl(var(--primary))\"\n              :x=\"(d: Data, i: number) => i\"\n              :y=\"(d: Data) => d.revenue\"\n              :size=\"6\"\n              :stroke-width=\"2\"\n            />\n          </LineChart>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <BarChart\n            class=\"h-[80px]\"\n            :data=\"data\"\n            :categories=\"['subscription']\"\n            :index=\"'subscription'\"\n            :show-grid-line=\"false\"\n            :show-legend=\"false\"\n            :show-x-axis=\"false\"\n            :show-y-axis=\"false\"\n            :show-tooltip=\"false\"\n          />\n          <!-- <VisXYContainer\n            height=\"80px\" :data=\"data\"\n          >\n            <VisStackedBar\n              :x=\"(d: Data, i:number) => i\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer> -->\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CardStats.vue"
+        "target": ""
       }
     ]
   },
@@ -3810,7 +3810,7 @@
         "path": "example/CardWithForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardWithForm.vue"
+        "target": ""
       }
     ]
   },
@@ -3829,7 +3829,7 @@
         "path": "example/CarouselApi.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/new-york/ui/carousel'\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselApi.vue"
+        "target": ""
       }
     ]
   },
@@ -3846,7 +3846,7 @@
         "path": "example/CarouselDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3863,7 +3863,7 @@
         "path": "example/CarouselOrientation.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselOrientation.vue"
+        "target": ""
       }
     ]
   },
@@ -3880,7 +3880,7 @@
         "path": "example/CarouselPlugin.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselPlugin.vue"
+        "target": ""
       }
     ]
   },
@@ -3897,7 +3897,7 @@
         "path": "example/CarouselSize.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSize.vue"
+        "target": ""
       }
     ]
   },
@@ -3914,7 +3914,7 @@
         "path": "example/CarouselSpacing.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSpacing.vue"
+        "target": ""
       }
     ]
   },
@@ -3933,7 +3933,7 @@
         "path": "example/CarouselThumbnails.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/new-york/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselThumbnails.vue"
+        "target": ""
       }
     ]
   },
@@ -3949,7 +3949,7 @@
         "path": "example/CheckboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -3965,7 +3965,7 @@
         "path": "example/CheckboxDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -3988,7 +3988,7 @@
         "path": "example/CheckboxFormMultiple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormMultiple.vue"
+        "target": ""
       }
     ]
   },
@@ -4011,7 +4011,7 @@
         "path": "example/CheckboxFormSingle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4 shadow\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormSingle.vue"
+        "target": ""
       }
     ]
   },
@@ -4027,7 +4027,7 @@
         "path": "example/CheckboxWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -4044,7 +4044,7 @@
         "path": "example/CollapsibleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\n\nimport { CaretSortIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <CaretSortIcon class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
         "type": "registry:example",
-        "target": "CollapsibleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4063,7 +4063,7 @@
         "path": "example/ComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <CheckIcon\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4081,7 +4081,7 @@
         "path": "example/ComboboxDropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <DotsHorizontalIcon />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDropdownMenu.vue"
+        "target": ""
       }
     ]
   },
@@ -4106,7 +4106,7 @@
         "path": "example/ComboboxForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CaretSortIcon, CheckIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    language: '',\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <CaretSortIcon class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    {{ language.label }}\n                    <CheckIcon\n                      :class=\"cn('ml-auto h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4124,7 +4124,7 @@
         "path": "example/ComboboxPopover.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/new-york/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst open = ref(false)\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"() => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                {{ status.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxPopover.vue"
+        "target": ""
       }
     ]
   },
@@ -4145,7 +4145,7 @@
         "path": "example/ComboboxResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else v-model:open=\"isOpen\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -4161,7 +4161,7 @@
         "path": "example/CommandDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/new-york/ui/command'\n\nimport {\n  CalendarIcon,\n  EnvelopeClosedIcon,\n  FaceIcon,\n  GearIcon,\n  PersonIcon,\n  RocketIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <FaceIcon class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Launch\">\n          <RocketIcon class=\"mr-2 h-4 w-4\" />\n          <span>Launch</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <PersonIcon class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Mail\">\n          <EnvelopeClosedIcon class=\"mr-2 h-4 w-4\" />\n          <span>Mail</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <GearIcon class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4179,7 +4179,7 @@
         "path": "example/CommandDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/new-york/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4195,7 +4195,7 @@
         "path": "example/ContextMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/new-york/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "ContextMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4211,7 +4211,7 @@
         "path": "example/CustomChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/new-york/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CustomChartTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4234,7 +4234,7 @@
         "path": "example/DataTableColumnPinningDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableColumnPinningDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4257,7 +4257,7 @@
         "path": "example/DataTableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { CaretSortIcon, ChevronDownIcon } from '@radix-icons/vue'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(CaretSortIcon, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      })\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDownIcon class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4274,7 +4274,7 @@
         "path": "example/DataTableDemoColumn.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { DotsHorizontalIcon } from '@radix-icons/vue'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <DotsHorizontalIcon class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemoColumn.vue"
+        "target": ""
       }
     ]
   },
@@ -4297,7 +4297,7 @@
         "path": "example/DataTableReactiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableReactiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4316,7 +4316,7 @@
         "path": "example/DatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4341,7 +4341,7 @@
         "path": "example/DatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4360,7 +4360,7 @@
         "path": "example/DatePickerWithIndependentMonths.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  CalendarIcon,\n  ChevronLeftIcon,\n  ChevronRightIcon,\n} from '@radix-icons/vue'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeftIcon class=\"h-4 w-4\" />\n              </button>\n              <div :class=\"cn('text-sm font-medium')\">\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRightIcon class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithIndependentMonths.vue"
+        "target": ""
       }
     ]
   },
@@ -4380,7 +4380,7 @@
         "path": "example/DatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Calendar } from '@/registry/new-york/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -4399,7 +4399,7 @@
         "path": "example/DatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/new-york/ui/popover'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -4418,7 +4418,7 @@
         "path": "example/DialogCustomCloseButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { CopyIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <CopyIcon class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogCustomCloseButton.vue"
+        "target": ""
       }
     ]
   },
@@ -4437,7 +4437,7 @@
         "path": "example/DialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4457,7 +4457,7 @@
         "path": "example/DialogForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\n\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4474,7 +4474,7 @@
         "path": "example/DialogScrollBodyDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollBodyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4491,7 +4491,7 @@
         "path": "example/DialogScrollOverlayDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollOverlayDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4507,7 +4507,7 @@
         "path": "example/DonutChartColor.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartColor.vue"
+        "target": ""
       }
     ]
   },
@@ -4523,7 +4523,7 @@
         "path": "example/DonutChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4539,7 +4539,7 @@
         "path": "example/DonutChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  {\n    name: 'Jan',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Feb',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Mar',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Apr',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'May',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n  {\n    name: 'Jun',\n    total: Math.floor(Math.random() * 2000) + 500,\n    predicted: Math.floor(Math.random() * 2000) + 500,\n  },\n]\n\nfunction valueFormatter(tick: number | Date) {\n  return typeof tick === 'number'\n    ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n    : ''\n}\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4555,7 +4555,7 @@
         "path": "example/DonutChartPie.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/new-york/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartPie.vue"
+        "target": ""
       }
     ]
   },
@@ -4575,7 +4575,7 @@
         "path": "example/DrawerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { MinusIcon, PlusIcon } from '@radix-icons/vue'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <MinusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <PlusIcon class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4597,7 +4597,7 @@
         "path": "example/DrawerDialog.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -4614,7 +4614,7 @@
         "path": "example/DropdownMenuCheckboxes.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuCheckboxes.vue"
+        "target": ""
       }
     ]
   },
@@ -4631,7 +4631,7 @@
         "path": "example/DropdownMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4648,7 +4648,7 @@
         "path": "example/DropdownMenuRadioGroup.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuRadioGroup.vue"
+        "target": ""
       }
     ]
   },
@@ -4666,7 +4666,7 @@
         "path": "example/HoverCardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/new-york/ui/hover-card'\nimport { CalendarIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarIcon class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
         "type": "registry:example",
-        "target": "HoverCardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4682,7 +4682,7 @@
         "path": "example/InputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4698,7 +4698,7 @@
         "path": "example/InputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -4715,7 +4715,7 @@
         "path": "example/InputFile.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFile.vue"
+        "target": ""
       }
     ]
   },
@@ -4738,7 +4738,7 @@
         "path": "example/InputForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast/use-toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputForm.vue"
+        "target": ""
       }
     ]
   },
@@ -4761,7 +4761,7 @@
         "path": "example/InputFormAutoAnimate.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { isFieldDirty, handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\" :validate-on-blur=\"!isFieldDirty\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFormAutoAnimate.vue"
+        "target": ""
       }
     ]
   },
@@ -4778,7 +4778,7 @@
         "path": "example/InputWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -4794,7 +4794,7 @@
         "path": "example/InputWithIcon.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { MagnifyingGlassIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <MagnifyingGlassIcon class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithIcon.vue"
+        "target": ""
       }
     ]
   },
@@ -4811,7 +4811,7 @@
         "path": "example/InputWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -4828,7 +4828,7 @@
         "path": "example/LabelDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "LabelDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4844,7 +4844,7 @@
         "path": "example/LineChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -4860,7 +4860,7 @@
         "path": "example/LineChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4876,7 +4876,7 @@
         "path": "example/LineChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/new-york/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -4892,7 +4892,7 @@
         "path": "example/MenubarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/new-york/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
         "type": "registry:example",
-        "target": "MenubarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4908,7 +4908,7 @@
         "path": "example/NavigationMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/new-york/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "NavigationMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4925,7 +4925,7 @@
         "path": "example/NumberFieldCurrency.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldCurrency.vue"
+        "target": ""
       }
     ]
   },
@@ -4942,7 +4942,7 @@
         "path": "example/NumberFieldDecimal.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDecimal.vue"
+        "target": ""
       }
     ]
   },
@@ -4959,7 +4959,7 @@
         "path": "example/NumberFieldDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -4976,7 +4976,7 @@
         "path": "example/NumberFieldDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -4999,7 +4999,7 @@
         "path": "example/NumberFieldForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5016,7 +5016,7 @@
         "path": "example/NumberFieldPercentage.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/new-york/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldPercentage.vue"
+        "target": ""
       }
     ]
   },
@@ -5033,7 +5033,7 @@
         "path": "example/PaginationDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/new-york/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-9 h-9 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
         "type": "registry:example",
-        "target": "PaginationDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5049,7 +5049,7 @@
         "path": "example/PinInputControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -5065,7 +5065,7 @@
         "path": "example/PinInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5081,7 +5081,7 @@
         "path": "example/PinInputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -5104,7 +5104,7 @@
         "path": "example/PinInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/new-york/ui/pin-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5120,7 +5120,7 @@
         "path": "example/PinInputSeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/new-york/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5139,7 +5139,7 @@
         "path": "example/PopoverDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "PopoverDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5155,7 +5155,7 @@
         "path": "example/ProgressDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
         "type": "registry:example",
-        "target": "ProgressDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5172,7 +5172,7 @@
         "path": "example/RadioGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\" :orientation=\"'vertical'\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5195,7 +5195,7 @@
         "path": "example/RadioGroupForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/new-york/ui/radio-group'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5211,7 +5211,7 @@
         "path": "example/RangeCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/new-york/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "RangeCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5227,7 +5227,7 @@
         "path": "example/ResizableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5243,7 +5243,7 @@
         "path": "example/ResizableHandleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableHandleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5259,7 +5259,7 @@
         "path": "example/ResizableVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/new-york/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5276,7 +5276,7 @@
         "path": "example/ScrollAreaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/new-york/ui/scroll-area'\nimport { Separator } from '@/registry/new-york/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5292,7 +5292,7 @@
         "path": "example/ScrollAreaHorizontalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/new-york/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaHorizontalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5308,7 +5308,7 @@
         "path": "example/SelectDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5331,7 +5331,7 @@
         "path": "example/SelectForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5347,7 +5347,7 @@
         "path": "example/SelectScrollable.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectScrollable.vue"
+        "target": ""
       }
     ]
   },
@@ -5363,7 +5363,7 @@
         "path": "example/SeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/new-york/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5382,7 +5382,7 @@
         "path": "example/SheetDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5401,7 +5401,7 @@
         "path": "example/SheetSideDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/new-york/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetSideDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5417,7 +5417,7 @@
         "path": "example/SkeletonCard.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonCard.vue"
+        "target": ""
       }
     ]
   },
@@ -5433,7 +5433,7 @@
         "path": "example/SkeletonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/new-york/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5450,7 +5450,7 @@
         "path": "example/SliderDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "SliderDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5473,7 +5473,7 @@
         "path": "example/SliderForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Slider } from '@/registry/new-york/ui/slider'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SliderForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5491,7 +5491,7 @@
         "path": "example/SonnerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast('Event has been created', {\n        description: 'Sunday, December 03, 2023 at 9:00 AM',\n        action: {\n          label: 'Undo',\n          onClick: () => console.log('Undo'),\n        },\n      })\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5510,7 +5510,7 @@
         "path": "example/SonnerWithDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/new-york/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerWithDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -5526,7 +5526,7 @@
         "path": "example/StepperDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5547,7 +5547,7 @@
         "path": "example/StepperForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/new-york/ui/form'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n                <CircleIcon v-if=\"state === 'active'\" />\n                <DotIcon v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5564,7 +5564,7 @@
         "path": "example/StepperHorizental.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperHorizental.vue"
+        "target": ""
       }
     ]
   },
@@ -5581,7 +5581,7 @@
         "path": "example/StepperVertical.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/new-york/ui/stepper'\nimport { CheckIcon, CircleIcon, DotIcon } from '@radix-icons/vue'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <CheckIcon v-if=\"state === 'completed'\" class=\"size-5\" />\n          <CircleIcon v-if=\"state === 'active'\" />\n          <DotIcon v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperVertical.vue"
+        "target": ""
       }
     ]
   },
@@ -5598,7 +5598,7 @@
         "path": "example/SwitchDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Switch } from '@/registry/new-york/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5621,7 +5621,7 @@
         "path": "example/SwitchForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/new-york/ui/form'\nimport { Switch } from '@/registry/new-york/ui/switch'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5637,7 +5637,7 @@
         "path": "example/TableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
         "type": "registry:example",
-        "target": "TableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5657,7 +5657,7 @@
         "path": "example/TabsDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5677,7 +5677,7 @@
         "path": "example/TabsVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5694,7 +5694,7 @@
         "path": "example/TagsInputComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/new-york/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5710,7 +5710,7 @@
         "path": "example/TagsInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5733,7 +5733,7 @@
         "path": "example/TagsInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/new-york/ui/tags-input'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5749,7 +5749,7 @@
         "path": "example/TextareaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5765,7 +5765,7 @@
         "path": "example/TextareaDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -5788,7 +5788,7 @@
         "path": "example/TextareaForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { toast } from '@/registry/new-york/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaForm.vue"
+        "target": ""
       }
     ]
   },
@@ -5805,7 +5805,7 @@
         "path": "example/TextareaWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -5822,7 +5822,7 @@
         "path": "example/TextareaWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -5839,7 +5839,7 @@
         "path": "example/TextareaWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -5856,7 +5856,7 @@
         "path": "example/ToastDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5874,7 +5874,7 @@
         "path": "example/ToastDestructive.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDestructive.vue"
+        "target": ""
       }
     ]
   },
@@ -5891,7 +5891,7 @@
         "path": "example/ToastSimple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastSimple.vue"
+        "target": ""
       }
     ]
   },
@@ -5909,7 +5909,7 @@
         "path": "example/ToastWithAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { ToastAction } from '@/registry/new-york/ui/toast'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithAction.vue"
+        "target": ""
       }
     ]
   },
@@ -5926,7 +5926,7 @@
         "path": "example/ToastWithTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { useToast } from '@/registry/new-york/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithTitle.vue"
+        "target": ""
       }
     ]
   },
@@ -5942,7 +5942,7 @@
         "path": "example/ToggleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontBoldIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontBoldIcon class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5958,7 +5958,7 @@
         "path": "example/ToggleDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { UnderlineIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\" disabled>\n    <UnderlineIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5974,7 +5974,7 @@
         "path": "example/ToggleGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -5990,7 +5990,7 @@
         "path": "example/ToggleGroupDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6006,7 +6006,7 @@
         "path": "example/ToggleGroupLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6022,7 +6022,7 @@
         "path": "example/ToggleGroupOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6038,7 +6038,7 @@
         "path": "example/ToggleGroupSingleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSingleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6054,7 +6054,7 @@
         "path": "example/ToggleGroupSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\n\nimport {\n  FontBoldIcon,\n  FontItalicIcon,\n  UnderlineIcon,\n} from '@radix-icons/vue'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <FontBoldIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <FontItalicIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <UnderlineIcon class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6070,7 +6070,7 @@
         "path": "example/ToggleItalicDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6086,7 +6086,7 @@
         "path": "example/ToggleItalicWithTextDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicWithTextDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6102,7 +6102,7 @@
         "path": "example/ToggleLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6118,7 +6118,7 @@
         "path": "example/ToggleSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/new-york/ui/toggle'\n\nimport { FontItalicIcon } from '@radix-icons/vue'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <FontItalicIcon class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6135,7 +6135,7 @@
         "path": "example/TooltipDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:example",
-        "target": "TooltipDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6149,7 +6149,7 @@
         "path": "example/TypographyBlockquote.vue",
         "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyBlockquote.vue"
+        "target": ""
       }
     ]
   },
@@ -6163,7 +6163,7 @@
         "path": "example/TypographyDemo.vue",
         "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6177,7 +6177,7 @@
         "path": "example/TypographyH1.vue",
         "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH1.vue"
+        "target": ""
       }
     ]
   },
@@ -6191,7 +6191,7 @@
         "path": "example/TypographyH2.vue",
         "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH2.vue"
+        "target": ""
       }
     ]
   },
@@ -6205,7 +6205,7 @@
         "path": "example/TypographyH3.vue",
         "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH3.vue"
+        "target": ""
       }
     ]
   },
@@ -6219,7 +6219,7 @@
         "path": "example/TypographyH4.vue",
         "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH4.vue"
+        "target": ""
       }
     ]
   },
@@ -6233,7 +6233,7 @@
         "path": "example/TypographyInlineCode.vue",
         "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyInlineCode.vue"
+        "target": ""
       }
     ]
   },
@@ -6247,7 +6247,7 @@
         "path": "example/TypographyLarge.vue",
         "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLarge.vue"
+        "target": ""
       }
     ]
   },
@@ -6261,7 +6261,7 @@
         "path": "example/TypographyLead.vue",
         "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLead.vue"
+        "target": ""
       }
     ]
   },
@@ -6275,7 +6275,7 @@
         "path": "example/TypographyList.vue",
         "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyList.vue"
+        "target": ""
       }
     ]
   },
@@ -6289,7 +6289,7 @@
         "path": "example/TypographyMuted.vue",
         "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyMuted.vue"
+        "target": ""
       }
     ]
   },
@@ -6303,7 +6303,7 @@
         "path": "example/TypographyP.vue",
         "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyP.vue"
+        "target": ""
       }
     ]
   },
@@ -6317,7 +6317,7 @@
         "path": "example/TypographySmall.vue",
         "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographySmall.vue"
+        "target": ""
       }
     ]
   },
@@ -6331,7 +6331,7 @@
         "path": "example/TypographyTable.vue",
         "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyTable.vue"
+        "target": ""
       }
     ]
   },
@@ -6347,7 +6347,7 @@
         "path": "example/VCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "VCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6366,7 +6366,7 @@
         "path": "example/VDatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6391,7 +6391,7 @@
         "path": "example/VDatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/new-york/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { toast } from '@/registry/new-york/ui/toast'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\n\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -6411,7 +6411,7 @@
         "path": "example/VDatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -6430,7 +6430,7 @@
         "path": "example/VDatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -6449,7 +6449,7 @@
         "path": "example/VDateTimePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDateTimePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -6468,7 +6468,7 @@
         "path": "example/VRangePickerWithSlot.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/new-york/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/new-york/ui/popover'\n\nimport { Calendar } from '@/registry/new-york/ui/v-calendar'\nimport { CalendarIcon } from '@radix-icons/vue'\nimport { addDays, format } from 'date-fns'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"flex w-full mt-6 border-t border-accent pt-4\">\n              <div class=\"w-1/2\">\n                <strong>Entry time</strong>\n                <Calendar\n                  v-model=\"date.start\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n              <div class=\"w-1/2\">\n                <strong>Exit time</strong>\n                <Calendar\n                  v-model=\"date.end\"\n                  mode=\"time\"\n                  hide-time-header\n                />\n              </div>\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VRangePickerWithSlot.vue"
+        "target": ""
       }
     ]
   },
@@ -6487,7 +6487,7 @@
         "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6506,7 +6506,7 @@
         "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6525,7 +6525,7 @@
         "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6543,7 +6543,7 @@
         "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6566,7 +6566,7 @@
         "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/new-york/ui/avatar'\nimport { Badge } from '@/registry/new-york/ui/badge'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/new-york/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6587,7 +6587,7 @@
         "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6610,7 +6610,7 @@
         "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/new-york/ui/drawer'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/new-york/ui/select'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/registry/new-york/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[53px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg bg-muted\"\n              aria-label=\"Playground\"\n            >\n              <SquareTerminal class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Playground\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Models\"\n            >\n              <Bot class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Models\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"API\"\n            >\n              <Code2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            API\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Documentation\"\n            >\n              <Book class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Documentation\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"rounded-lg\"\n              aria-label=\"Settings\"\n            >\n              <Settings2 class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Help\"\n            >\n              <LifeBuoy class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Help\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"ghost\"\n              size=\"icon\"\n              class=\"mt-auto rounded-lg\"\n              aria-label=\"Account\"\n            >\n              <SquareUser class=\"size-5\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\" :side-offset=\"5\">\n            Account\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[53px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Paperclip class=\"size-4\" />\n                    <span class=\"sr-only\">Attach file</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Attach File\n                </TooltipContent>\n              </Tooltip>\n              <Tooltip>\n                <TooltipTrigger as-child>\n                  <Button variant=\"ghost\" size=\"icon\">\n                    <Mic class=\"size-4\" />\n                    <span class=\"sr-only\">Use Microphone</span>\n                  </Button>\n                </TooltipTrigger>\n                <TooltipContent side=\"top\">\n                  Use Microphone\n                </TooltipContent>\n              </Tooltip>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6631,7 +6631,7 @@
         "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/new-york/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6660,7 +6660,7 @@
         "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { Checkbox } from '@/registry/new-york/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/new-york/ui/pagination'\nimport { Progress } from '@/registry/new-york/ui/progress'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard05.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6685,7 +6685,7 @@
         "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/new-york/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard06.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6713,7 +6713,7 @@
         "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/new-york/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Button } from '@/registry/new-york/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/new-york/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/new-york/ui/dropdown-menu'\nimport { Input } from '@/registry/new-york/ui/input'\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/new-york/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/new-york/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/new-york/ui/table'\nimport { Textarea } from '@/registry/new-york/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/new-york/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from '@/registry/new-york/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Home class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Dashboard</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Dashboard\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <ShoppingCart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Orders</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Orders\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Package class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Products</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Products\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Users2 class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Customers</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Customers\n          </TooltipContent>\n        </Tooltip>\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <LineChart class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Analytics</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Analytics\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <Tooltip>\n          <TooltipTrigger as-child>\n            <a\n              href=\"#\"\n              class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n            >\n              <Settings class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Settings</span>\n            </a>\n          </TooltipTrigger>\n          <TooltipContent side=\"right\">\n            Settings\n          </TooltipContent>\n        </Tooltip>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard07.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -6733,7 +6733,49 @@
         "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Label } from '@/registry/new-york/ui/label'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar01Page.vue"
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar02/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar02/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/new-york/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/new-york/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/new-york/ui/sidebar'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/new-york/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -6752,9 +6794,9 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/new-york/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/new-york/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/new-york/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/new-york/ui/dropdown-menu'\nimport { Separator } from '@/registry/new-york/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/new-york/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar07Page.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -9012,7 +9054,7 @@
       },
       {
         "path": "ui/sidebar/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
+        "content": "import type { HTMLAttributes } from 'vue'\nimport { cva, type VariantProps } from 'class-variance-authority'\n\nexport interface SidebarProps {\n  side?: 'left' | 'right'\n  variant?: 'sidebar' | 'floating' | 'inset'\n  collapsible?: 'offcanvas' | 'icon' | 'none'\n  class?: HTMLAttributes['class']\n}\n\nexport { default as Sidebar } from './Sidebar.vue'\nexport { default as SidebarContent } from './SidebarContent.vue'\nexport { default as SidebarFooter } from './SidebarFooter.vue'\nexport { default as SidebarGroup } from './SidebarGroup.vue'\nexport { default as SidebarGroupAction } from './SidebarGroupAction.vue'\nexport { default as SidebarGroupContent } from './SidebarGroupContent.vue'\nexport { default as SidebarGroupLabel } from './SidebarGroupLabel.vue'\nexport { default as SidebarHeader } from './SidebarHeader.vue'\nexport { default as SidebarInput } from './SidebarInput.vue'\nexport { default as SidebarInset } from './SidebarInset.vue'\nexport { default as SidebarMenu } from './SidebarMenu.vue'\nexport { default as SidebarMenuAction } from './SidebarMenuAction.vue'\nexport { default as SidebarMenuBadge } from './SidebarMenuBadge.vue'\nexport { default as SidebarMenuButton } from './SidebarMenuButton.vue'\nexport { default as SidebarMenuItem } from './SidebarMenuItem.vue'\nexport { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue'\nexport { default as SidebarMenuSub } from './SidebarMenuSub.vue'\nexport { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue'\nexport { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue'\nexport { default as SidebarProvider } from './SidebarProvider.vue'\nexport { default as SidebarRail } from './SidebarRail.vue'\nexport { default as SidebarSeparator } from './SidebarSeparator.vue'\nexport { default as SidebarTrigger } from './SidebarTrigger.vue'\n\nexport { useSidebar } from './utils'\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n      },\n      size: {\n        default: 'h-8 text-sm',\n        sm: 'h-7 text-xs',\n        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
         "type": "registry:ui",
         "target": "sidebar/index.ts"
       },
@@ -9436,7 +9478,7 @@
       },
       {
         "path": "ui/toggle/index.ts",
-        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3',\n        sm: 'h-9 px-2.5',\n        lg: 'h-11 px-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
+        "content": "import { cva, type VariantProps } from 'class-variance-authority'\n\nexport { default as Toggle } from './Toggle.vue'\n\nexport const toggleVariants = cva(\n  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        outline:\n          'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',\n      },\n      size: {\n        default: 'h-10 px-3 min-w-10',\n        sm: 'h-9 px-2.5 min-w-9',\n        lg: 'h-11 px-5 min-w-11',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n)\n\nexport type ToggleVariants = VariantProps<typeof toggleVariants>\n",
         "type": "registry:ui",
         "target": "toggle/index.ts"
       }
@@ -9549,7 +9591,7 @@
         "path": "example/AccordionDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/registry/default/ui/accordion'\n\nconst defaultValue = 'item-1'\n\nconst accordionItems = [\n  { value: 'item-1', title: 'Is it accessible?', content: 'Yes. It adheres to the WAI-ARIA design pattern.' },\n  { value: 'item-2', title: 'Is it unstyled?', content: 'Yes. It\\'s unstyled by default, giving you freedom over the look and feel.' },\n  { value: 'item-3', title: 'Can it be animated?', content: 'Yes! You can use the transition prop to configure the animation.' },\n]\n</script>\n\n<template>\n  <Accordion type=\"single\" class=\"w-full\" collapsible :default-value=\"defaultValue\">\n    <AccordionItem v-for=\"item in accordionItems\" :key=\"item.value\" :value=\"item.value\">\n      <AccordionTrigger>{{ item.title }}</AccordionTrigger>\n      <AccordionContent>\n        {{ item.content }}\n      </AccordionContent>\n    </AccordionItem>\n  </Accordion>\n</template>\n",
         "type": "registry:example",
-        "target": "AccordionDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9565,7 +9607,7 @@
         "path": "example/AlertDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { Terminal } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert>\n    <Terminal class=\"h-4 w-4\" />\n    <AlertTitle>Heads up!</AlertTitle>\n    <AlertDescription>\n      You can add components to your app using the cli.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9581,7 +9623,7 @@
         "path": "example/AlertDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Alert, AlertDescription, AlertTitle } from '@/registry/default/ui/alert'\nimport { AlertCircle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Alert variant=\"destructive\">\n    <AlertCircle class=\"w-4 h-4\" />\n    <AlertTitle>Error</AlertTitle>\n    <AlertDescription>\n      Your session has expired. Please log in again.\n    </AlertDescription>\n  </Alert>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9598,7 +9640,7 @@
         "path": "example/AlertDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n} from '@/registry/default/ui/alert-dialog'\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <AlertDialog>\n    <AlertDialogTrigger as-child>\n      <Button variant=\"outline\">\n        Show Dialog\n      </Button>\n    </AlertDialogTrigger>\n    <AlertDialogContent>\n      <AlertDialogHeader>\n        <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>\n        <AlertDialogDescription>\n          This action cannot be undone. This will permanently delete your\n          account and remove your data from our servers.\n        </AlertDialogDescription>\n      </AlertDialogHeader>\n      <AlertDialogFooter>\n        <AlertDialogCancel>Cancel</AlertDialogCancel>\n        <AlertDialogAction>Continue</AlertDialogAction>\n      </AlertDialogFooter>\n    </AlertDialogContent>\n  </AlertDialog>\n</template>\n",
         "type": "registry:example",
-        "target": "AlertDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9614,7 +9656,7 @@
         "path": "example/AreaChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -9630,7 +9672,7 @@
         "path": "example/AreaChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <AreaChart :data=\"data\" index=\"name\" :categories=\"['total', 'predicted']\" />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9646,7 +9688,7 @@
         "path": "example/AreaChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { AreaChart } from '@/registry/default/ui/chart-area'\nimport { CurveType } from '@unovis/ts'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Aug', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Sep', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Oct', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Nov', total: Math.floor(Math.random() * 2000) + 1000 },\n  { name: 'Dec', total: Math.floor(Math.random() * 2000) + 1000 },\n]\n</script>\n\n<template>\n  <AreaChart\n    class=\"h-[100px] w-[400px]\"\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total']\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n    :curve-type=\"CurveType.Linear\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "AreaChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -9662,7 +9704,7 @@
         "path": "example/AspectRatioDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { AspectRatio } from '@/registry/default/ui/aspect-ratio'\n</script>\n\n<template>\n  <AspectRatio :ratio=\"16 / 9\" class=\"bg-muted\">\n    <img\n      src=\"https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80\"\n      alt=\"Photo by Drew Beamer\"\n      class=\"rounded-md object-cover w-full h-full\"\n    >\n  </AspectRatio>\n</template>\n",
         "type": "registry:example",
-        "target": "AspectRatioDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9680,7 +9722,7 @@
         "path": "example/AutoFormApi.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h, onMounted, shallowRef } from 'vue'\nimport * as z from 'zod'\n\nconst schema = shallowRef<z.ZodObject< any, any, any > | null>(null)\n\nonMounted(() => {\n  fetch('https://jsonplaceholder.typicode.com/users')\n    .then(response => response.json())\n    .then((data) => {\n      schema.value = z.object({\n        user: z.enum(data.map((user: any) => user.name)),\n      })\n    })\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <div class=\"flex justify-center w-full\">\n    <AutoForm\n      v-if=\"schema\"\n      class=\"w-2/3 space-y-6\"\n      :schema=\"schema\"\n      @submit=\"onSubmit\"\n    >\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </AutoForm>\n\n    <div v-else>\n      Loading...\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormApi.vue"
+        "target": ""
       }
     ]
   },
@@ -9698,7 +9740,7 @@
         "path": "example/AutoFormArray.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  guestListName: z.string(),\n  invitedGuests: z\n    .array(\n      z.object({\n        name: z.string(),\n        age: z.coerce.number(),\n      }),\n    )\n    .describe('Guests invited to the party'),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormArray.vue"
+        "target": ""
       }
     ]
   },
@@ -9716,7 +9758,7 @@
         "path": "example/AutoFormBasic.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nenum Sports {\n  Football = 'Football/Soccer',\n  Basketball = 'Basketball',\n  Baseball = 'Baseball',\n  Hockey = 'Hockey (Ice)',\n  None = 'I don\\'t like sports',\n}\n\nconst schema = z.object({\n  username: z\n    .string({\n      required_error: 'Username is required.',\n    })\n    .min(2, {\n      message: 'Username must be at least 2 characters.',\n    }),\n\n  password: z\n    .string({\n      required_error: 'Password is required.',\n    })\n    .min(8, {\n      message: 'Password must be at least 8 characters.',\n    }),\n\n  favouriteNumber: z.coerce\n    .number({\n      invalid_type_error: 'Favourite number must be a number.',\n    })\n    .min(1, {\n      message: 'Favourite number must be at least 1.',\n    })\n    .max(10, {\n      message: 'Favourite number must be at most 10.',\n    })\n    .default(1)\n    .optional(),\n\n  acceptTerms: z\n    .boolean()\n    .refine(value => value, {\n      message: 'You must accept the terms and conditions.',\n      path: ['acceptTerms'],\n    }),\n\n  sendMeMails: z.boolean().optional(),\n\n  birthday: z.coerce.date().optional(),\n\n  color: z.enum(['red', 'green', 'blue']).optional(),\n\n  // Another enum example\n  marshmallows: z\n    .enum(['not many', 'a few', 'a lot', 'too many']),\n\n  // Native enum example\n  sports: z.nativeEnum(Sports).describe('What is your favourite sport?'),\n\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    })\n    .optional(),\n\n  customParent: z.string().optional(),\n\n  file: z.string().optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      password: {\n        label: 'Your secure password',\n        inputProps: {\n          type: 'password',\n          placeholder: '••••••••',\n        },\n      },\n      favouriteNumber: {\n        description: 'Your favourite number between 1 and 10.',\n      },\n      acceptTerms: {\n        label: 'Accept terms and conditions.',\n        inputProps: {\n          required: true,\n        },\n      },\n\n      birthday: {\n        description: 'We need your birthday to send you a gift.',\n      },\n\n      sendMeMails: {\n        component: 'switch',\n      },\n\n      bio: {\n        component: 'textarea',\n      },\n\n      marshmallows: {\n        label: 'How many marshmallows fit in your mouth?',\n        component: 'radio',\n      },\n\n      file: {\n        label: 'Text file',\n        component: 'file',\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #acceptTerms=\"slotProps\">\n      <AutoFormField v-bind=\"slotProps\" />\n      <div class=\"!mt-2 text-sm\">\n        I agree to the <button class=\"text-primary underline\">\n          terms and conditions\n        </button>.\n      </div>\n    </template>\n\n    <template #customParent=\"slotProps\">\n      <div class=\"flex items-end space-x-2\">\n        <AutoFormField v-bind=\"slotProps\" class=\"w-full\" />\n        <Button type=\"button\">\n          Check\n        </Button>\n      </div>\n    </template>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormBasic.vue"
+        "target": ""
       }
     ]
   },
@@ -9734,7 +9776,7 @@
         "path": "example/AutoFormConfirmPassword.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z\n  .object({\n    password: z.string(),\n    confirm: z.string(),\n  })\n  .refine(data => data.password === data.confirm, {\n    message: 'Passwords must match.',\n    path: ['confirm'],\n  })\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormConfirmPassword.vue"
+        "target": ""
       }
     ]
   },
@@ -9756,7 +9798,7 @@
         "path": "example/AutoFormControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nconst form = useForm({\n  validationSchema: toTypedSchema(schema),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :form=\"form\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -9774,7 +9816,7 @@
         "path": "example/AutoFormDependencies.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\nimport { DependencyType } from '../ui/auto-form/interface'\n\nconst schema = z.object({\n  age: z.number(),\n  parentsAllowed: z.boolean().optional(),\n  vegetarian: z.boolean().optional(),\n  mealOptions: z.enum(['Pasta', 'Salad', 'Beef Wellington']).optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      age: {\n        description:\n          'Setting this below 18 will require parents consent.',\n      },\n      parentsAllowed: {\n        label: 'Did your parents allow you to register?',\n      },\n      vegetarian: {\n        label: 'Are you a vegetarian?',\n        description:\n          'Setting this to true will remove non-vegetarian food options.',\n      },\n      mealOptions: {\n        component: 'radio',\n      },\n    }\"\n    :dependencies=\"[\n      {\n        sourceField: 'age',\n        type: DependencyType.HIDES,\n        targetField: 'parentsAllowed',\n        when: (age) => age >= 18,\n      },\n      {\n        sourceField: 'age',\n        type: DependencyType.REQUIRES,\n        targetField: 'parentsAllowed',\n        when: (age) => age < 18,\n      },\n      {\n        sourceField: 'vegetarian',\n        type: DependencyType.SETS_OPTIONS,\n        targetField: 'mealOptions',\n        when: (vegetarian) => vegetarian,\n        options: ['Pasta', 'Salad'],\n      },\n    ]\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormDependencies.vue"
+        "target": ""
       }
     ]
   },
@@ -9792,7 +9834,7 @@
         "path": "example/AutoFormInputWithoutLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm, AutoFormField } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  username: z.string(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      username: {\n        hideLabel: true,\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <template #username=\"slotProps\">\n      <div class=\"flex items-start gap-3\">\n        <div class=\"flex-1\">\n          <AutoFormField v-bind=\"slotProps\" />\n        </div>\n        <div>\n          <Button type=\"submit\">\n            Update\n          </Button>\n        </div>\n      </div>\n    </template>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormInputWithoutLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -9810,7 +9852,7 @@
         "path": "example/AutoFormSubObject.vue",
         "content": "<script setup lang=\"ts\">\nimport { AutoForm } from '@/registry/default/ui/auto-form'\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from '@/registry/default/ui/toast'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst schema = z.object({\n  subObject: z.object({\n    subField: z.string().optional().default('Sub Field'),\n    numberField: z.number().optional().default(1),\n\n    subSubObject: z\n      .object({\n        subSubField: z.string().default('Sub Sub Field'),\n      })\n      .describe('Sub Sub Object Description'),\n  }),\n  optionalSubObject: z\n    .object({\n      optionalSubField: z.string(),\n      otherOptionalSubField: z.string(),\n    })\n    .optional(),\n})\n\nfunction onSubmit(values: Record<string, any>) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <AutoForm\n    class=\"w-2/3 space-y-6\"\n    :schema=\"schema\"\n    :field-config=\"{\n      subObject: {\n        numberField: {\n          inputProps: {\n            type: 'number',\n          },\n        },\n      },\n    }\"\n    @submit=\"onSubmit\"\n  >\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </AutoForm>\n</template>\n",
         "type": "registry:example",
-        "target": "AutoFormSubObject.vue"
+        "target": ""
       }
     ]
   },
@@ -9826,7 +9868,7 @@
         "path": "example/AvatarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\n</script>\n\n<template>\n  <Avatar>\n    <AvatarImage src=\"https://github.com/unovue.png\" alt=\"@unovue\" />\n    <AvatarFallback>CN</AvatarFallback>\n  </Avatar>\n</template>\n",
         "type": "registry:example",
-        "target": "AvatarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9842,7 +9884,7 @@
         "path": "example/BadgeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge>Badge</Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9858,7 +9900,7 @@
         "path": "example/BadgeDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"destructive\">\n    Destructive\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9874,7 +9916,7 @@
         "path": "example/BadgeOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"outline\">\n    Outline\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9890,7 +9932,7 @@
         "path": "example/BadgeSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n</script>\n\n<template>\n  <Badge variant=\"secondary\">\n    Secondary\n  </Badge>\n</template>\n",
         "type": "registry:example",
-        "target": "BadgeSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9906,7 +9948,7 @@
         "path": "example/BarChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -9922,7 +9964,7 @@
         "path": "example/BarChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    :data=\"data\"\n    index=\"name\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9938,7 +9980,7 @@
         "path": "example/BarChartRounded.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :rounded-corners=\"4\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartRounded.vue"
+        "target": ""
       }
     ]
   },
@@ -9954,7 +9996,7 @@
         "path": "example/BarChartStacked.vue",
         "content": "<script setup lang=\"ts\">\nimport { BarChart } from '@/registry/default/ui/chart-bar'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jul', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <BarChart\n    index=\"name\"\n    :data=\"data\"\n    :categories=\"['total', 'predicted']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :type=\"'stacked'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "BarChartStacked.vue"
+        "target": ""
       }
     ]
   },
@@ -9971,7 +10013,7 @@
         "path": "example/BreadcrumbDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle menu</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -9988,7 +10030,7 @@
         "path": "example/BreadcrumbDropdown.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ChevronDown, Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger class=\"flex items-center gap-1\">\n            Components\n            <ChevronDown class=\"h-4 w-4\" />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"start\">\n            <DropdownMenuItem>Documentation</DropdownMenuItem>\n            <DropdownMenuItem>Themes</DropdownMenuItem>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbDropdown.vue"
+        "target": ""
       }
     ]
   },
@@ -10004,7 +10046,7 @@
         "path": "example/BreadcrumbEllipsisDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbEllipsis />\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink as-child>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbEllipsisDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10020,7 +10062,7 @@
         "path": "example/BreadcrumbLinkDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/\">\n            Home\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbLink>\n          <a href=\"/docs/components/accordion.html\">\n            Components\n          </a>\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10041,7 +10083,7 @@
         "path": "example/BreadcrumbResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbEllipsis,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { useMediaQuery } from '@vueuse/core'\nimport { computed, ref } from 'vue'\n\nconst isDesktop = useMediaQuery('(min-width: 768px)')\nconst isOpen = ref(false)\nconst items = ref([\n  { href: '#', label: 'Home' },\n  { href: '#', label: 'Documentation' },\n  { href: '#', label: 'Building Your Application' },\n  { href: '#', label: 'Data Fetching' },\n  { label: 'Caching and Revalidating' },\n])\n\nconst itemsToDisplay = 3\nconst firstLabel = computed(() => items.value[0]?.label)\n\nconst allButLastTwoItems = computed(() => items.value.slice(1, -2))\nconst remainingItems = computed(() => items.value.slice(-itemsToDisplay + 1))\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"{items[0].href}\">\n          {{ firstLabel }}\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator />\n      <template v-if=\"items.length > itemsToDisplay\">\n        <BreadcrumbItem>\n          <DropdownMenu v-if=\"isDesktop\" v-model:open=\"isOpen\">\n            <DropdownMenuTrigger\n              class=\"flex items-center gap-1\"\n              aria-label=\"Toggle menu\"\n            >\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\">\n              <DropdownMenuItem v-for=\"item of allButLastTwoItems\" :key=\"item.label\">\n                <a :href=\"item.href || '#'\">\n                  {{ item.label }}\n                </a>\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n          <Drawer v-else v-model:open=\"isOpen\">\n            <DrawerTrigger aria-label=\"Toggle Menu\">\n              <BreadcrumbEllipsis class=\"h-4 w-4\" />\n            </DrawerTrigger>\n            <DrawerContent>\n              <DrawerHeader class=\"text-left\">\n                <DrawerTitle>Navigate to</DrawerTitle>\n                <DrawerDescription>\n                  Select a page to navigate to.\n                </DrawerDescription>\n              </DrawerHeader>\n              <div class=\"grid gap-1 px-4\">\n                <a\n                  v-for=\"item of allButLastTwoItems\"\n                  :key=\"item.label\"\n                  :href=\"item.href\"\n                  class=\"py-1 text-sm\"\n                >\n                  {{ item.label }}\n                </a>\n              </div>\n              <DrawerFooter class=\"pt-4\">\n                <DrawerClose as-child>\n                  <Button variant=\"outline\">\n                    Close\n                  </Button>\n                </DrawerClose>\n              </DrawerFooter>\n            </DrawerContent>\n          </Drawer>\n        </BreadcrumbItem>\n        <BreadcrumbSeparator />\n      </template>\n      <BreadcrumbItem v-for=\" item of remainingItems\" :key=\"item.label\">\n        <template v-if=\"item.href\">\n          <BreadcrumbLink\n            as-child\n            class=\"max-w-20 truncate md:max-w-none\"\n          >\n            <a :href=\"item.href\">\n              {{ item.label }}\n            </a>\n          </BreadcrumbLink>\n          <BreadcrumbSeparator />\n        </template>\n        <BreadcrumbPage v-else class=\"max-w-20 truncate md:max-w-none\">\n          {{ item.label }}\n        </BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -10057,7 +10099,7 @@
         "path": "example/BreadcrumbSeparatorDemo.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Slash } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Breadcrumb>\n    <BreadcrumbList>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/\">\n          Home\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbLink href=\"/docs/components/accordion.html\">\n          Components\n        </BreadcrumbLink>\n      </BreadcrumbItem>\n      <BreadcrumbSeparator>\n        <Slash />\n      </BreadcrumbSeparator>\n      <BreadcrumbItem>\n        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n      </BreadcrumbItem>\n    </BreadcrumbList>\n  </Breadcrumb>\n</template>\n",
         "type": "registry:example",
-        "target": "BreadcrumbSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10073,7 +10115,7 @@
         "path": "example/ButtonAsChildDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button as-child>\n    <a href=\"/login\">\n      Login\n    </a>\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonAsChildDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10089,7 +10131,7 @@
         "path": "example/ButtonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button>Button</Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10105,7 +10147,7 @@
         "path": "example/ButtonDestructiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"destructive\">\n    Destructive\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonDestructiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10121,7 +10163,7 @@
         "path": "example/ButtonGhostDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"ghost\">\n    Ghost\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonGhostDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10137,7 +10179,7 @@
         "path": "example/ButtonIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ChevronRight } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button variant=\"outline\" size=\"icon\">\n    <ChevronRight class=\"w-4 h-4\" />\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10153,7 +10195,7 @@
         "path": "example/ButtonLinkDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"link\">\n    Link\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLinkDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10169,7 +10211,7 @@
         "path": "example/ButtonLoadingDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Loader2 } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button disabled>\n    <Loader2 class=\"w-4 h-4 mr-2 animate-spin\" />\n    Please wait\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonLoadingDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10185,7 +10227,7 @@
         "path": "example/ButtonOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"outline\">\n    Outline\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10201,7 +10243,7 @@
         "path": "example/ButtonSecondaryDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n</script>\n\n<template>\n  <Button variant=\"secondary\">\n    Secondary\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonSecondaryDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10217,7 +10259,7 @@
         "path": "example/ButtonWithIconDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Mail } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Button>\n    <Mail class=\"w-4 h-4 mr-2\" /> Login with Email\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ButtonWithIconDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10233,7 +10275,7 @@
         "path": "example/CalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst value = ref(today(getLocalTimeZone())) as Ref<DateValue>\n</script>\n\n<template>\n  <Calendar v-model=\"value\" :weekday-format=\"'short'\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10258,7 +10300,7 @@
         "path": "example/CalendarForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10278,7 +10320,7 @@
         "path": "example/CalendarWithSelect.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading } from '@/registry/default/ui/calendar'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { type DateValue, getLocalTimeZone, today } from '@internationalized/date'\nimport { useVModel } from '@vueuse/core'\nimport { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useDateFormatter, useForwardPropsEmits } from 'reka-ui'\nimport { createDecade, createYear, toDate } from 'reka-ui/date'\nimport { computed, type HTMLAttributes, type Ref } from 'vue'\n\nconst props = withDefaults(defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>(), {\n  modelValue: undefined,\n  placeholder() {\n    return today(getLocalTimeZone())\n  },\n  weekdayFormat: 'short',\n})\nconst emits = defineEmits<CalendarRootEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, placeholder: __, ...delegated } = props\n\n  return delegated\n})\n\nconst placeholder = useVModel(props, 'modelValue', emits, {\n  passive: true,\n  defaultValue: today(getLocalTimeZone()),\n}) as Ref<DateValue>\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n\nconst formatter = useDateFormatter('en')\n</script>\n\n<template>\n  <CalendarRoot\n    v-slot=\"{ date, grid, weekDays }\"\n    v-model:placeholder=\"placeholder\"\n    v-bind=\"forwarded\"\n    :class=\"cn('rounded-md border p-3', props.class)\"\n  >\n    <CalendarHeader>\n      <CalendarHeading class=\"flex w-full items-center justify-between gap-2\">\n        <Select\n          :default-value=\"placeholder.month.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.month) return;\n            placeholder = placeholder.set({\n              month: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select month\" class=\"w-[60%]\">\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"month in createYear({ dateObj: date })\"\n              :key=\"month.toString()\" :value=\"month.month.toString()\"\n            >\n              {{ formatter.custom(toDate(month), { month: 'long' }) }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n\n        <Select\n          :default-value=\"placeholder.year.toString()\"\n          @update:model-value=\"(v) => {\n            if (!v || !placeholder) return;\n            if (Number(v) === placeholder?.year) return;\n            placeholder = placeholder.set({\n              year: Number(v),\n            })\n          }\"\n        >\n          <SelectTrigger aria-label=\"Select year\" class=\"w-[40%]\">\n            <SelectValue placeholder=\"Select year\" />\n          </SelectTrigger>\n          <SelectContent class=\"max-h-[200px]\">\n            <SelectItem\n              v-for=\"yearValue in createDecade({ dateObj: date, startIndex: -10, endIndex: 10 })\"\n              :key=\"yearValue.toString()\" :value=\"yearValue.year.toString()\"\n            >\n              {{ yearValue.year }}\n            </SelectItem>\n          </SelectContent>\n        </Select>\n      </CalendarHeading>\n    </CalendarHeader>\n\n    <div class=\"flex flex-col space-y-4 pt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\">\n      <CalendarGrid v-for=\"month in grid\" :key=\"month.value.toString()\">\n        <CalendarGridHead>\n          <CalendarGridRow>\n            <CalendarHeadCell\n              v-for=\"day in weekDays\" :key=\"day\"\n            >\n              {{ day }}\n            </CalendarHeadCell>\n          </CalendarGridRow>\n        </CalendarGridHead>\n        <CalendarGridBody class=\"grid\">\n          <CalendarGridRow v-for=\"(weekDates, index) in month.rows\" :key=\"`weekDate-${index}`\" class=\"mt-2 w-full\">\n            <CalendarCell\n              v-for=\"weekDate in weekDates\"\n              :key=\"weekDate.toString()\"\n              :date=\"weekDate\"\n            >\n              <CalendarCellTrigger\n                :day=\"weekDate\"\n                :month=\"month.value\"\n              />\n            </CalendarCell>\n          </CalendarGridRow>\n        </CalendarGridBody>\n      </CalendarGrid>\n    </div>\n  </CalendarRoot>\n</template>\n",
         "type": "registry:example",
-        "target": "CalendarWithSelect.vue"
+        "target": ""
       }
     ]
   },
@@ -10301,7 +10343,7 @@
         "path": "example/CardChat.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardFooter,\n  CardHeader,\n} from '@/registry/default/ui/card'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\n\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport { Check, Plus, Send } from 'lucide-vue-next'\nimport { computed, ref } from 'vue'\n\nconst input = ref('')\nconst inputLength = computed(() => input.value.trim().length)\nconst users = ref([\n  {\n    name: 'Olivia Martin',\n    email: 'm@example.com',\n    avatar: '/avatars/01.png',\n  },\n  {\n    name: 'Isabella Nguyen',\n    email: 'isabella.nguyen@email.com',\n    avatar: '/avatars/03.png',\n  },\n  {\n    name: 'Emma Wilson',\n    email: 'emma@example.com',\n    avatar: '/avatars/05.png',\n  },\n  {\n    name: 'Jackson Lee',\n    email: 'lee@example.com',\n    avatar: '/avatars/02.png',\n  },\n  {\n    name: 'William Kim',\n    email: 'will@email.com',\n    avatar: '/avatars/04.png',\n  },\n])\n\ntype User = (typeof users.value)[number]\n\nconst messages = ref([\n  { role: 'agent', content: 'Hi, how can I help you today?' },\n  { role: 'user', content: 'Hey, I\\'m having trouble with my account.' },\n  { role: 'agent', content: 'What seems to be the problem?' },\n  { role: 'user', content: 'I can\\'t log in.' },\n])\n\nconst open = ref(false)\nconst selectedUsers = ref<User[]>([])\n</script>\n\n<template>\n  <Card>\n    <CardHeader class=\"flex flex-row items-center justify-between\">\n      <div class=\"flex items-center space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"/avatars/01.png\" alt=\"Image\" />\n          <AvatarFallback>OM</AvatarFallback>\n        </Avatar>\n        <div>\n          <p class=\"text-sm font-medium leading-none\">\n            Sofia Davis\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            m@example.com\n          </p>\n        </div>\n      </div>\n      <TooltipProvider>\n        <Tooltip :delay-duration=\"200\">\n          <TooltipTrigger as-child>\n            <Button\n              variant=\"outline\"\n              class=\"rounded-full p-2.5 flex items-center justify-center\"\n              @click=\"open = true\"\n            >\n              <Plus class=\"w-4 h-4\" />\n            </Button>\n          </TooltipTrigger>\n          <TooltipContent :side-offset=\"10\">\n            New message\n          </TooltipContent>\n        </Tooltip>\n      </TooltipProvider>\n    </CardHeader>\n    <CardContent>\n      <div class=\"space-y-4\">\n        <div\n          v-for=\"(message, index) in messages\"\n          :key=\"index\"\n          :class=\"cn(\n            'flex w-max max-w-[75%] flex-col gap-2 rounded-lg px-3 py-2 text-sm',\n            message.role === 'user' ? 'ml-auto bg-primary text-primary-foreground' : 'bg-muted',\n          )\"\n        >\n          {{ message.content }}\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <form\n        class=\"flex w-full items-center space-x-2\"\n        @submit.prevent=\"() => {\n          if (inputLength === 0) return\n          messages.push({\n            role: 'user',\n            content: input,\n          })\n        }\"\n      >\n        <Input v-model=\"input\" placeholder=\"Type a message...\" class=\"flex-1\" />\n        <Button class=\"p-2.5 flex items-center justify-center\" :disabled=\"inputLength === 0\">\n          <Send class=\"w-4 h-4\" />\n          <span class=\"sr-only\">Send</span>\n        </Button>\n      </form>\n    </CardFooter>\n  </Card>\n\n  <Dialog v-model:open=\"open\">\n    <DialogContent class=\"gap-0 p-0 outline-none\">\n      <DialogHeader class=\"px-4 pb-4 pt-5\">\n        <DialogTitle>New message</DialogTitle>\n        <DialogDescription>\n          Invite a user to this thread. This will create a new group\n          message.\n        </DialogDescription>\n      </DialogHeader>\n      <Command class=\"overflow-hidden rounded-t-none border-t\">\n        <CommandInput placeholder=\"Search user...\" />\n        <CommandList>\n          <CommandEmpty>No users found.</CommandEmpty>\n          <CommandGroup class=\"p-2\">\n            <CommandItem\n              v-for=\"user in users\"\n              :key=\"user.email\"\n              :value=\"user\"\n              class=\"flex items-center px-2\"\n              @select=\"() => {\n                const index = selectedUsers.findIndex(u => u === user)\n                if (index !== -1) {\n                  selectedUsers.splice(index, 1)\n                }\n                else {\n                  selectedUsers.push(user)\n                }\n              }\"\n            >\n              <Avatar>\n                <AvatarImage :src=\"user.avatar\" alt=\"Image\" />\n                <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n              </Avatar>\n              <div class=\"ml-2\">\n                <p class=\"text-sm font-medium leading-none\">\n                  {{ user.name }}\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  {{ user.email }}\n                </p>\n              </div>\n              <Check v-if=\"selectedUsers.includes(user)\" class=\"ml-auto flex h-5 w-5 text-primary\" />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n      <DialogFooter class=\"flex items-center border-t p-4 sm:justify-between\">\n        <div v-if=\"selectedUsers.length > 0\" class=\"flex -space-x-2 overflow-hidden\">\n          <Avatar\n            v-for=\"user in selectedUsers\"\n            :key=\"user.email\"\n            class=\"inline-block border-2 border-background\"\n          >\n            <AvatarImage :src=\"user.avatar\" />\n            <AvatarFallback>{{ user.name[0] }}</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <p v-else class=\"text-sm text-muted-foreground\">\n          Select users to add to this thread.\n        </p>\n\n        <Button\n          :disabled=\"selectedUsers.length < 2\"\n          @click=\"open = false\"\n        >\n          Continue\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "CardChat.vue"
+        "target": ""
       }
     ]
   },
@@ -10320,7 +10362,7 @@
         "path": "example/CardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { BellRing, Check } from 'lucide-vue-next'\n\nconst notifications = [\n  {\n    title: 'Your call has been confirmed.',\n    description: '1 hour ago',\n  },\n  {\n    title: 'You have a new message!',\n    description: '1 hour ago',\n  },\n  {\n    title: 'Your subscription is expiring soon!',\n    description: '2 hours ago',\n  },\n]\n</script>\n\n<template>\n  <Card :class=\"cn('w-[380px]', $attrs.class ?? '')\">\n    <CardHeader>\n      <CardTitle>Notifications</CardTitle>\n      <CardDescription>You have 3 unread messages.</CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\" flex items-center space-x-4 rounded-md border p-4\">\n        <BellRing />\n        <div class=\"flex-1 space-y-1\">\n          <p class=\"text-sm font-medium leading-none\">\n            Push Notifications\n          </p>\n          <p class=\"text-sm text-muted-foreground\">\n            Send notifications to device.\n          </p>\n        </div>\n        <Switch />\n      </div>\n      <div>\n        <div\n          v-for=\"(notification, index) in notifications\" :key=\"index\"\n          class=\"mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0\"\n        >\n          <span class=\"flex h-2 w-2 translate-y-1 rounded-full bg-sky-500\" />\n          <div class=\"space-y-1\">\n            <p class=\"text-sm font-medium leading-none\">\n              {{ notification.title }}\n            </p>\n            <p class=\"text-sm text-muted-foreground\">\n              {{ notification.description }}\n            </p>\n          </div>\n        </div>\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        <Check class=\"mr-2 h-4 w-4\" /> Mark all as read\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10340,7 +10382,7 @@
         "path": "example/CardFormDemo.vue",
         "content": "<script setup lang='ts'>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid items-center w-full gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between px-6 pb-6\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10361,7 +10403,7 @@
         "path": "example/CardStats.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { themes } from '@/registry/registry-themes'\nimport { useConfigStore } from '@/stores/config'\nimport { VisLine, VisScatter, VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { useData } from 'vitepress'\nimport { computed } from 'vue'\n\ntype Data = typeof data[number]\nconst data = [\n  { revenue: 10400, subscription: 240 },\n  { revenue: 14405, subscription: 300 },\n  { revenue: 9400, subscription: 200 },\n  { revenue: 8200, subscription: 278 },\n  { revenue: 7000, subscription: 189 },\n  { revenue: 9600, subscription: 239 },\n  { revenue: 11244, subscription: 278 },\n  { revenue: 26475, subscription: 189 },\n]\n\nconst cfg = useConfigStore()\n\nconst { isDark } = useData()\nconst theme = computed(() => themes.find(theme => theme.name === cfg.config.value.theme))\n\nconst lineX = (d: Data, i: number) => i\nconst lineY = (d: Data) => d.revenue\n</script>\n\n<template>\n  <div class=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-2\">\n    <Card>\n      <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n        <CardTitle class=\"text-sm font-normal\">\n          Total Revenue\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          $15,231.89\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +20.1% from last month\n        </p>\n\n        <div class=\"h-20\">\n          <VisXYContainer\n            height=\"80px\"\n            :data=\"data\" :margin=\"{\n              top: 5,\n              right: 10,\n              left: 10,\n              bottom: 0,\n            }\"\n          >\n            <VisLine :x=\"lineX\" :y=\"lineY\" color=\"hsl(var(--primary))\" />\n            <VisScatter :x=\"lineX\" :y=\"lineY\" :size=\"6\" stroke-color=\"hsl(var(--primary))\" :stroke-width=\"2\" color=\"white\" />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n\n    <Card>\n      <CardHeader class=\"pb-2\">\n        <CardTitle class=\"text-lg\">\n          Subscriptions\n        </CardTitle>\n      </CardHeader>\n      <CardContent>\n        <div class=\"text-2xl font-bold\">\n          +2,350\n        </div>\n        <p class=\"text-xs text-muted-foreground\">\n          +54.8% from last month\n        </p>\n\n        <div class=\"mt-4 h-20\">\n          <VisXYContainer\n            height=\"80px\" :data=\"data\" :style=\"{\n              '--theme-primary': `hsl(${\n                theme?.cssVars?.[isDark ? 'dark' : 'light']?.primary\n              })`,\n            }\"\n          >\n            <VisStackedBar\n              :x=\"lineX\"\n              :y=\"(d: Data) => d.subscription\"\n              :bar-padding=\"0.1\"\n              :rounded-corners=\"0\" color=\"hsl(var(--primary))\"\n            />\n          </VisXYContainer>\n        </div>\n      </CardContent>\n    </Card>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CardStats.vue"
+        "target": ""
       }
     ]
   },
@@ -10381,7 +10423,7 @@
         "path": "example/CardWithForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Card class=\"w-[350px]\">\n    <CardHeader>\n      <CardTitle>Create project</CardTitle>\n      <CardDescription>Deploy your new project in one-click.</CardDescription>\n    </CardHeader>\n    <CardContent>\n      <form>\n        <div class=\"grid w-full items-center gap-4\">\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" placeholder=\"Name of your project\" />\n          </div>\n          <div class=\"flex flex-col space-y-1.5\">\n            <Label for=\"framework\">Framework</Label>\n            <Select>\n              <SelectTrigger id=\"framework\">\n                <SelectValue placeholder=\"Select\" />\n              </SelectTrigger>\n              <SelectContent position=\"popper\">\n                <SelectItem value=\"next\">\n                  Next.js\n                </SelectItem>\n                <SelectItem value=\"sveltekit\">\n                  SvelteKit\n                </SelectItem>\n                <SelectItem value=\"astro\">\n                  Astro\n                </SelectItem>\n                <SelectItem value=\"nuxt\">\n                  Nuxt\n                </SelectItem>\n              </SelectContent>\n            </Select>\n          </div>\n        </div>\n      </form>\n    </CardContent>\n    <CardFooter class=\"flex justify-between\">\n      <Button variant=\"outline\">\n        Cancel\n      </Button>\n      <Button>Deploy</Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CardWithForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10400,7 +10442,7 @@
         "path": "example/CarouselApi.vue",
         "content": "<script setup lang=\"ts\">\nimport type { CarouselApi } from '@/registry/default/ui/carousel'\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst api = ref<CarouselApi>()\nconst totalCount = ref(0)\nconst current = ref(0)\n\nfunction setApi(val: CarouselApi) {\n  api.value = val\n}\n\nwatchOnce(api, (api) => {\n  if (!api)\n    return\n\n  totalCount.value = api.scrollSnapList().length\n  current.value = api.selectedScrollSnap() + 1\n\n  api.on('select', () => {\n    current.value = api.selectedScrollSnap() + 1\n  })\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel class=\"relative w-full max-w-xs\" @init-api=\"setApi\">\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <div class=\"py-2 text-center text-sm text-muted-foreground\">\n      Slide {{ current }} of {{ totalCount }}\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselApi.vue"
+        "target": ""
       }
     ]
   },
@@ -10417,7 +10459,7 @@
         "path": "example/CarouselDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel v-slot=\"{ canScrollNext }\" class=\"relative w-full max-w-xs\">\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext v-if=\"canScrollNext\" />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10434,7 +10476,7 @@
         "path": "example/CarouselOrientation.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    orientation=\"vertical\"\n    class=\"relative w-full max-w-xsw-full max-w-xs\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-mt-1 h-[200px]\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"p-1 md:basis-1/2\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselOrientation.vue"
+        "target": ""
       }
     ]
   },
@@ -10451,7 +10493,7 @@
         "path": "example/CarouselPlugin.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport Autoplay from 'embla-carousel-autoplay'\n\nconst plugin = Autoplay({\n  delay: 2000,\n  stopOnMouseEnter: true,\n  stopOnInteraction: false,\n})\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-xs\"\n    :plugins=\"[plugin]\"\n    @mouseenter=\"plugin.stop\"\n    @mouseleave=\"[plugin.reset(), plugin.play(), console.log('Running')];\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselPlugin.vue"
+        "target": ""
       }
     ]
   },
@@ -10468,7 +10510,7 @@
         "path": "example/CarouselSize.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent>\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-3xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSize.vue"
+        "target": ""
       }
     ]
   },
@@ -10485,7 +10527,7 @@
         "path": "example/CarouselSpacing.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\n</script>\n\n<template>\n  <Carousel\n    class=\"relative w-full max-w-sm\"\n    :opts=\"{\n      align: 'start',\n    }\"\n  >\n    <CarouselContent class=\"-ml-1\">\n      <CarouselItem v-for=\"(_, index) in 5\" :key=\"index\" class=\"pl-1 md:basis-1/2 lg:basis-1/3\">\n        <div class=\"p-1\">\n          <Card>\n            <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n              <span class=\"text-2xl font-semibold\">{{ index + 1 }}</span>\n            </CardContent>\n          </Card>\n        </div>\n      </CarouselItem>\n    </CarouselContent>\n    <CarouselPrevious />\n    <CarouselNext />\n  </Carousel>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselSpacing.vue"
+        "target": ""
       }
     ]
   },
@@ -10504,7 +10546,7 @@
         "path": "example/CarouselThumbnails.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\nimport { Carousel, type CarouselApi, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/registry/default/ui/carousel'\nimport { watchOnce } from '@vueuse/core'\nimport { ref } from 'vue'\n\nconst emblaMainApi = ref<CarouselApi>()\nconst emblaThumbnailApi = ref<CarouselApi>()\nconst selectedIndex = ref(0)\n\nfunction onSelect() {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  selectedIndex.value = emblaMainApi.value.selectedScrollSnap()\n  emblaThumbnailApi.value.scrollTo(emblaMainApi.value.selectedScrollSnap())\n}\n\nfunction onThumbClick(index: number) {\n  if (!emblaMainApi.value || !emblaThumbnailApi.value)\n    return\n  emblaMainApi.value.scrollTo(index)\n}\n\nwatchOnce(emblaMainApi, (emblaMainApi) => {\n  if (!emblaMainApi)\n    return\n\n  onSelect()\n  emblaMainApi.on('select', onSelect)\n  emblaMainApi.on('reInit', onSelect)\n})\n</script>\n\n<template>\n  <div class=\"w-full sm:w-auto\">\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaMainApi = val\"\n    >\n      <CarouselContent>\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\">\n          <div class=\"p-1\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n      <CarouselPrevious />\n      <CarouselNext />\n    </Carousel>\n\n    <Carousel\n      class=\"relative w-full max-w-xs\"\n      @init-api=\"(val) => emblaThumbnailApi = val\"\n    >\n      <CarouselContent class=\"flex gap-1 ml-0\">\n        <CarouselItem v-for=\"(_, index) in 10\" :key=\"index\" class=\"pl-0 basis-1/4 cursor-pointer\" @click=\"onThumbClick(index)\">\n          <div class=\"p-1\" :class=\"index === selectedIndex ? '' : 'opacity-50'\">\n            <Card>\n              <CardContent class=\"flex aspect-square items-center justify-center p-6\">\n                <span class=\"text-4xl font-semibold\">{{ index + 1 }}</span>\n              </CardContent>\n            </Card>\n          </div>\n        </CarouselItem>\n      </CarouselContent>\n    </Carousel>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CarouselThumbnails.vue"
+        "target": ""
       }
     ]
   },
@@ -10520,7 +10562,7 @@
         "path": "example/CheckboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Checkbox id=\"terms\" />\n    <label\n      for=\"terms\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10536,7 +10578,7 @@
         "path": "example/CheckboxDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex space-x-2\">\n    <Checkbox id=\"terms1\" disabled />\n    <label\n      for=\"terms2\"\n      class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n    >\n      Accept terms and conditions\n    </label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -10559,7 +10601,7 @@
         "path": "example/CheckboxFormMultiple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst items = [\n  {\n    id: 'recents',\n    label: 'Recents',\n  },\n  {\n    id: 'home',\n    label: 'Home',\n  },\n  {\n    id: 'applications',\n    label: 'Applications',\n  },\n  {\n    id: 'desktop',\n    label: 'Desktop',\n  },\n  {\n    id: 'downloads',\n    label: 'Downloads',\n  },\n  {\n    id: 'documents',\n    label: 'Documents',\n  },\n] as const\n\nconst formSchema = toTypedSchema(z.object({\n  items: z.array(z.string()).refine(value => value.some(item => item), {\n    message: 'You have to select at least one item.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    items: ['recents', 'home'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form @submit=\"onSubmit\">\n    <FormField name=\"items\">\n      <FormItem>\n        <div class=\"mb-4\">\n          <FormLabel class=\"text-base\">\n            Sidebar\n          </FormLabel>\n          <FormDescription>\n            Select the items you want to display in the sidebar.\n          </FormDescription>\n        </div>\n\n        <FormField v-for=\"item in items\" v-slot=\"{ value, handleChange }\" :key=\"item.id\" type=\"checkbox\" :value=\"item.id\" :unchecked-value=\"false\" name=\"items\">\n          <FormItem class=\"flex flex-row items-start space-x-3 space-y-0\">\n            <FormControl>\n              <Checkbox\n                :model-value=\"value.includes(item.id)\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n            <FormLabel class=\"font-normal\">\n              {{ item.label }}\n            </FormLabel>\n          </FormItem>\n        </FormField>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <div class=\"flex justify-start mt-4\">\n      <Button type=\"submit\">\n        Submit\n      </Button>\n    </div>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormMultiple.vue"
+        "target": ""
       }
     ]
   },
@@ -10582,7 +10624,7 @@
         "path": "example/CheckboxFormSingle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  mobile: z.boolean().default(false).optional(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    mobile: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value, handleChange }\" type=\"checkbox\" name=\"mobile\">\n      <FormItem class=\"flex flex-row items-start gap-x-3 space-y-0 rounded-md border p-4\">\n        <FormControl>\n          <Checkbox :model-value=\"value\" @update:model-value=\"handleChange\" />\n        </FormControl>\n        <div class=\"space-y-1 leading-none\">\n          <FormLabel>Use different settings for my mobile devices</FormLabel>\n          <FormDescription>\n            You can manage your mobile notifications in the\n            <a href=\"/examples/forms\">mobile settings</a> page.\n          </FormDescription>\n          <FormMessage />\n        </div>\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxFormSingle.vue"
+        "target": ""
       }
     ]
   },
@@ -10598,7 +10640,7 @@
         "path": "example/CheckboxWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\n</script>\n\n<template>\n  <div class=\"items-top flex gap-x-2\">\n    <Checkbox id=\"terms1\" />\n    <div class=\"grid gap-1.5 leading-none\">\n      <label\n        for=\"terms1\"\n        class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n      >\n        Accept terms and conditions\n      </label>\n      <p class=\"text-sm text-muted-foreground\">\n        You agree to our Terms of Service and Privacy Policy.\n      </p>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CheckboxWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -10615,7 +10657,7 @@
         "path": "example/CollapsibleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport { ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <Collapsible\n    v-model:open=\"isOpen\"\n    class=\"w-[350px] space-y-2\"\n  >\n    <div class=\"flex items-center justify-between space-x-4 px-4\">\n      <h4 class=\"text-sm font-semibold\">\n        @peduarte starred 3 repositories\n      </h4>\n      <CollapsibleTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\" class=\"w-9 p-0\">\n          <ChevronsUpDown class=\"h-4 w-4\" />\n          <span class=\"sr-only\">Toggle</span>\n        </Button>\n      </CollapsibleTrigger>\n    </div>\n    <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n      @radix-ui/primitives\n    </div>\n    <CollapsibleContent class=\"space-y-2\">\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @radix-ui/colors\n      </div>\n      <div class=\"rounded-md border px-4 py-3 font-mono text-sm\">\n        @stitches/react\n      </div>\n    </CollapsibleContent>\n  </Collapsible>\n</template>\n",
         "type": "registry:example",
-        "target": "CollapsibleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10634,7 +10676,7 @@
         "path": "example/ComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst open = ref(false)\nconst value = ref('')\n</script>\n\n<template>\n  <Popover v-model:open=\"open\">\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        role=\"combobox\"\n        :aria-expanded=\"open\"\n        class=\"w-[200px] justify-between\"\n      >\n        {{ value\n          ? frameworks.find((framework) => framework.value === value)?.label\n          : \"Select framework...\" }}\n        <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-[200px] p-0\">\n      <Command>\n        <CommandInput class=\"h-9\" placeholder=\"Search framework...\" />\n        <CommandEmpty>No framework found.</CommandEmpty>\n        <CommandList>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"framework in frameworks\"\n              :key=\"framework.value\"\n              :value=\"framework.value\"\n              @select=\"(ev) => {\n                if (typeof ev.detail.value === 'string') {\n                  value = ev.detail.value\n                }\n                open = false\n              }\"\n            >\n              {{ framework.label }}\n              <Check\n                :class=\"cn(\n                  'ml-auto h-4 w-4',\n                  value === framework.value ? 'opacity-100' : 'opacity-0',\n                )\"\n              />\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10652,7 +10694,7 @@
         "path": "example/ComboboxDropdownMenu.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Calendar, MoreHorizontal, Tags, Trash, User } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst labels = [\n  'feature',\n  'bug',\n  'enhancement',\n  'documentation',\n  'design',\n  'question',\n  'maintenance',\n]\n\nconst labelRef = ref('feature')\nconst open = ref(false)\n</script>\n\n<template>\n  <div class=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n    <p class=\"text-sm font-medium leading-none\">\n      <span class=\"mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground\">\n        {{ labelRef }}\n      </span>\n      <span class=\"text-muted-foreground\">Create a new project</span>\n    </p>\n    <DropdownMenu v-model:open=\"open\">\n      <DropdownMenuTrigger as-child>\n        <Button variant=\"ghost\" size=\"sm\">\n          <MoreHorizontal />\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-[200px]\">\n        <DropdownMenuLabel>Actions</DropdownMenuLabel>\n        <DropdownMenuGroup>\n          <DropdownMenuItem>\n            <User class=\"mr-2 h-4 w-4\" />\n            Assign to...\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <Calendar class=\"mr-2 h-4 w-4\" />\n            Set due date...\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger>\n              <Tags class=\"mr-2 h-4 w-4\" />\n              Apply label\n            </DropdownMenuSubTrigger>\n            <DropdownMenuSubContent class=\"p-0\">\n              <Command>\n                <CommandInput\n                  placeholder=\"Filter label...\"\n                  auto-focus\n                />\n                <CommandList>\n                  <CommandEmpty>No label found.</CommandEmpty>\n                  <CommandGroup>\n                    <CommandItem\n                      v-for=\"label in labels\"\n                      :key=\"label\"\n                      :value=\"label\"\n                      @select=\"(ev) => {\n                        labelRef = ev.detail.value as string\n                        open = false\n                      }\"\n                    >\n                      {{ label }}\n                    </CommandItem>\n                  </CommandGroup>\n                </CommandList>\n              </Command>\n            </DropdownMenuSubContent>\n          </DropdownMenuSub>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem class=\"text-red-600\">\n            <Trash class=\"mr-2 h-4 w-4\" />\n            Delete\n            <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxDropdownMenu.vue"
+        "target": ""
       }
     ]
   },
@@ -10677,7 +10719,7 @@
         "path": "example/ComboboxForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, ChevronsUpDown } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst languages = [\n  { label: 'English', value: 'en' },\n  { label: 'French', value: 'fr' },\n  { label: 'German', value: 'de' },\n  { label: 'Spanish', value: 'es' },\n  { label: 'Portuguese', value: 'pt' },\n  { label: 'Russian', value: 'ru' },\n  { label: 'Japanese', value: 'ja' },\n  { label: 'Korean', value: 'ko' },\n  { label: 'Chinese', value: 'zh' },\n]\n\nconst formSchema = toTypedSchema(z.object({\n  language: z.string({\n    required_error: 'Please select a language.',\n  }),\n}))\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-6\" @submit=\"onSubmit\">\n    <FormField name=\"language\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Language</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\"\n                role=\"combobox\"\n                :class=\"cn('w-[200px] justify-between', !values.language && 'text-muted-foreground')\"\n              >\n                {{ values.language ? languages.find(\n                  (language) => language.value === values.language,\n                )?.label : 'Select language...' }}\n                <ChevronsUpDown class=\"ml-2 h-4 w-4 shrink-0 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-[200px] p-0\">\n            <Command>\n              <CommandInput placeholder=\"Search language...\" />\n              <CommandEmpty>Nothing found.</CommandEmpty>\n              <CommandList>\n                <CommandGroup>\n                  <CommandItem\n                    v-for=\"language in languages\"\n                    :key=\"language.value\"\n                    :value=\"language.label\"\n                    @select=\"() => {\n                      setFieldValue('language', language.value)\n                    }\"\n                  >\n                    <Check\n                      :class=\"cn('mr-2 h-4 w-4', language.value === values.language ? 'opacity-100' : 'opacity-0')\"\n                    />\n                    {{ language.label }}\n                  </CommandItem>\n                </CommandGroup>\n              </CommandList>\n            </Command>\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          This is the language that will be used in the dashboard.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10696,7 +10738,7 @@
         "path": "example/ComboboxPopover.vue",
         "content": "<script setup lang=\"ts\">\nimport type { Icon } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/registry/default/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  ArrowUpCircle,\n  CheckCircle2,\n  Circle,\n  HelpCircle,\n  XCircle,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n  icon: Icon\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n    icon: HelpCircle,\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n    icon: Circle,\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n    icon: ArrowUpCircle,\n  },\n  {\n    value: 'done',\n    label: 'Done',\n    icon: CheckCircle2,\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n    icon: XCircle,\n  },\n]\n\nconst open = ref(false)\n// const value = ref<typeof statuses[number]>()\n\nconst selectedStatus = ref<Status>()\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <p class=\"text-sm text-muted-foreground\">\n      Status\n    </p>\n    <Popover v-model:open=\"open\">\n      <PopoverTrigger as-child>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"w-[150px] justify-start\"\n        >\n          <template v-if=\"selectedStatus\">\n            <component :is=\"selectedStatus?.icon\" class=\"mr-2 h-4 w-4 shrink-0\" />\n            {{ selectedStatus?.label }}\n          </template>\n          <template v-else>\n            + Set status\n          </template>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"p-0\" side=\"right\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Change status...\" />\n          <CommandList>\n            <CommandEmpty>No results found.</CommandEmpty>\n            <CommandGroup>\n              <CommandItem\n                v-for=\"status in statuses\"\n                :key=\"status.value\"\n                :value=\"status.value\"\n                @select=\"(value) => {\n                  selectedStatus = status\n                  open = false\n                }\"\n              >\n                <component\n                  :is=\"status.icon\"\n                  :key=\"status.value\"\n                  :class=\"cn('mr-2 h-4 w-4', status.value === selectedStatus?.value ? 'opacity-100' : 'opacity-40',\n                  )\"\n                />\n                <span>{{ status.label }}</span>\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxPopover.vue"
+        "target": ""
       }
     ]
   },
@@ -10717,7 +10759,7 @@
         "path": "example/ComboboxResponsive.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { Drawer, DrawerContent, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\ninterface Status {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: 'backlog',\n    label: 'Backlog',\n  },\n  {\n    value: 'todo',\n    label: 'Todo',\n  },\n  {\n    value: 'in progress',\n    label: 'In Progress',\n  },\n  {\n    value: 'done',\n    label: 'Done',\n  },\n  {\n    value: 'canceled',\n    label: 'Canceled',\n  },\n]\n\nconst [UseTemplate, StatusList] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\nconst selectedStatus = ref<Status | null>(null)\n\nfunction onStatusSelect(status: Status) {\n  selectedStatus.value = status\n  isOpen.value = false\n}\n</script>\n\n<template>\n  <div>\n    <UseTemplate>\n      <Command>\n        <CommandInput placeholder=\"Filter status...\" />\n        <CommandList>\n          <CommandEmpty>No results found.</CommandEmpty>\n          <CommandGroup>\n            <CommandItem\n              v-for=\"status of statuses\"\n              :key=\"status.value\"\n              :value=\"status.value\"\n              @select=\"onStatusSelect(status)\"\n            >\n              {{ status.label }}\n            </CommandItem>\n          </CommandGroup>\n        </CommandList>\n      </Command>\n    </UseTemplate>\n\n    <Popover v-if=\"isDesktop\" v-model:open=\"isOpen\">\n      <PopoverTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-[200px] p-0\" align=\"start\">\n        <StatusList />\n      </PopoverContent>\n    </Popover>\n\n    <Drawer v-else :open=\"isOpen\" @update:open=\"(newOpenValue) => isOpen = newOpenValue\">\n      <DrawerTrigger as-child>\n        <Button variant=\"outline\" class=\"w-[150px] justify-start\">\n          {{ selectedStatus ? selectedStatus.label : \"+ Set status\" }}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div class=\"mt-4 border-t\">\n          <StatusList />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "ComboboxResponsive.vue"
+        "target": ""
       }
     ]
   },
@@ -10733,7 +10775,7 @@
         "path": "example/CommandDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from '@/registry/default/ui/command'\n\nimport {\n  Calculator,\n  Calendar,\n  CreditCard,\n  Settings,\n  Smile,\n  User,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <Command class=\"rounded-lg border shadow-md max-w-[450px]\">\n    <CommandInput placeholder=\"Type a command or search...\" />\n    <CommandList>\n      <CommandEmpty>No results found.</CommandEmpty>\n      <CommandGroup heading=\"Suggestions\">\n        <CommandItem value=\"Calendar\">\n          <Calendar class=\"mr-2 h-4 w-4\" />\n          <span>Calendar</span>\n        </CommandItem>\n        <CommandItem value=\"Search Emoji\">\n          <Smile class=\"mr-2 h-4 w-4\" />\n          <span>Search Emoji</span>\n        </CommandItem>\n        <CommandItem value=\"Calculator\">\n          <Calculator class=\"mr-2 h-4 w-4\" />\n          <span>Calculator</span>\n        </CommandItem>\n      </CommandGroup>\n      <CommandSeparator />\n      <CommandGroup heading=\"Settings\">\n        <CommandItem value=\"Profile\">\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <CommandShortcut>⌘P</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Billing\">\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <CommandShortcut>⌘B</CommandShortcut>\n        </CommandItem>\n        <CommandItem value=\"Settings\">\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <CommandShortcut>⌘S</CommandShortcut>\n        </CommandItem>\n      </CommandGroup>\n    </CommandList>\n  </Command>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10751,7 +10793,7 @@
         "path": "example/CommandDialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n} from '@/registry/default/ui/command'\n\nimport { useMagicKeys } from '@vueuse/core'\nimport { ref, watch } from 'vue'\n\nconst open = ref(false)\n\nconst { Meta_J, Ctrl_J } = useMagicKeys({\n  passive: false,\n  onEventFired(e) {\n    if (e.key === 'j' && (e.metaKey || e.ctrlKey))\n      e.preventDefault()\n  },\n})\n\nwatch([Meta_J, Ctrl_J], (v) => {\n  if (v[0] || v[1])\n    handleOpenChange()\n})\n\nfunction handleOpenChange() {\n  open.value = !open.value\n}\n</script>\n\n<template>\n  <div>\n    <p class=\"text-sm text-muted-foreground\">\n      Press\n      <kbd\n        class=\"pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100\"\n      >\n        <span class=\"text-xs\">⌘</span>J\n      </kbd>\n    </p>\n    <CommandDialog v-model:open=\"open\">\n      <CommandInput placeholder=\"Type a command or search...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup heading=\"Suggestions\">\n          <CommandItem value=\"calendar\">\n            Calendar\n          </CommandItem>\n          <CommandItem value=\"search-emoji\">\n            Search Emoji\n          </CommandItem>\n          <CommandItem value=\"calculator\">\n            Calculator\n          </CommandItem>\n        </CommandGroup>\n        <CommandSeparator />\n        <CommandGroup heading=\"Settings\">\n          <CommandItem value=\"profile\">\n            Profile\n          </CommandItem>\n          <CommandItem value=\"billing\">\n            Billing\n          </CommandItem>\n          <CommandItem value=\"settings\">\n            Settings\n          </CommandItem>\n        </CommandGroup>\n      </CommandList>\n    </CommandDialog>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "CommandDialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10767,7 +10809,7 @@
         "path": "example/ContextMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ContextMenu,\n  ContextMenuCheckboxItem,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuLabel,\n  ContextMenuRadioGroup,\n  ContextMenuRadioItem,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuTrigger,\n} from '@/registry/default/ui/context-menu'\n</script>\n\n<template>\n  <ContextMenu>\n    <ContextMenuTrigger class=\"flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm\">\n      Right click here\n    </ContextMenuTrigger>\n    <ContextMenuContent class=\"w-64\">\n      <ContextMenuItem inset>\n        Back\n        <ContextMenuShortcut>⌘[</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset disabled>\n        Forward\n        <ContextMenuShortcut>⌘]</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuItem inset>\n        Reload\n        <ContextMenuShortcut>⌘R</ContextMenuShortcut>\n      </ContextMenuItem>\n      <ContextMenuSub>\n        <ContextMenuSubTrigger inset>\n          More Tools\n        </ContextMenuSubTrigger>\n        <ContextMenuSubContent class=\"w-48\">\n          <ContextMenuItem>\n            Save Page As...\n            <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>\n          </ContextMenuItem>\n          <ContextMenuItem>Create Shortcut...</ContextMenuItem>\n          <ContextMenuItem>Name Window...</ContextMenuItem>\n          <ContextMenuSeparator />\n          <ContextMenuItem>Developer Tools</ContextMenuItem>\n        </ContextMenuSubContent>\n      </ContextMenuSub>\n      <ContextMenuSeparator />\n      <ContextMenuCheckboxItem checked>\n        Show Bookmarks Bar\n        <ContextMenuShortcut>⌘⇧B</ContextMenuShortcut>\n      </ContextMenuCheckboxItem>\n      <ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>\n      <ContextMenuSeparator />\n      <ContextMenuRadioGroup model-value=\"pedro\">\n        <ContextMenuLabel inset>\n          People\n        </ContextMenuLabel>\n        <ContextMenuSeparator />\n        <ContextMenuRadioItem value=\"pedro\">\n          Pedro Duarte\n        </ContextMenuRadioItem>\n        <ContextMenuRadioItem value=\"colm\">\n          Colm Tuite\n        </ContextMenuRadioItem>\n      </ContextMenuRadioGroup>\n    </ContextMenuContent>\n  </ContextMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "ContextMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10783,7 +10825,7 @@
         "path": "example/CustomChartTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { Card, CardContent } from '@/registry/default/ui/card'\n\ndefineProps<{\n  title?: string\n  data: {\n    name: string\n    color: string\n    value: any\n  }[]\n}>()\n</script>\n\n<template>\n  <Card class=\"text-sm\">\n    <CardContent class=\"p-3 min-w-[180px] flex flex-col gap-2\">\n      <div v-for=\"(item, key) in data\" :key=\"key\" class=\"flex justify-between items-center\">\n        <div class=\"flex items-center\">\n          <span class=\"w-1 h-7 mr-4 rounded-full\" :style=\"{ background: item.color }\" />\n          <span>{{ item.name }}</span>\n        </div>\n        <span class=\"font-semibold ml-4\">{{ item.value }}</span>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:example",
-        "target": "CustomChartTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -10806,7 +10848,7 @@
         "path": "example/DataTableColumnPinningDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { cn, valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  createColumnHelper,\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columnHelper = createColumnHelper<Payment>()\n\nconst columns = [\n  columnHelper.display({\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => {\n      return h(Checkbox, {\n        'modelValue': row.getIsSelected(),\n        'onUpdate:modelValue': value => row.toggleSelected(!!value),\n        'ariaLabel': 'Select row',\n      })\n    },\n    enableSorting: false,\n    enableHiding: false,\n  }),\n  columnHelper.accessor('status', {\n    enablePinning: true,\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  }),\n  columnHelper.accessor('email', {\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  }),\n  columnHelper.accessor('amount', {\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  }),\n  columnHelper.display({\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  }),\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n    columnPinning: {\n      left: ['status'],\n    },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead\n              v-for=\"header in headerGroup.headers\" :key=\"header.id\" :data-pinned=\"header.column.getIsPinned()\"\n              :class=\"cn(\n                { 'sticky bg-background/95': header.column.getIsPinned() },\n                header.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n              )\"\n            >\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell\n                  v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\" :data-pinned=\"cell.column.getIsPinned()\"\n                  :class=\"cn(\n                    { 'sticky bg-background/95': cell.column.getIsPinned() },\n                    cell.column.getIsPinned() === 'left' ? 'left-0' : 'right-0',\n                  )\"\n                >\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ row.original }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableColumnPinningDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10829,7 +10871,7 @@
         "path": "example/DataTableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data: Payment[] = [\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n]\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-sm\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10846,7 +10888,7 @@
         "path": "example/DataTableDemoColumn.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { MoreHorizontal } from 'lucide-vue-next'\n\ndefineProps<{\n  payment: {\n    id: string\n  }\n}>()\n\ndefineEmits<{\n  (e: 'expand'): void\n}>()\n\nfunction copy(id: string) {\n  navigator.clipboard.writeText(id)\n}\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"ghost\" class=\"h-8 w-8 p-0\">\n        <span class=\"sr-only\">Open menu</span>\n        <MoreHorizontal class=\"h-4 w-4\" />\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent align=\"end\">\n      <DropdownMenuLabel>Actions</DropdownMenuLabel>\n      <DropdownMenuItem @click=\"copy(payment.id)\">\n        Copy payment ID\n      </DropdownMenuItem>\n      <DropdownMenuItem @click=\"$emit('expand')\">\n        Expand\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>View customer</DropdownMenuItem>\n      <DropdownMenuItem>View payment details</DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableDemoColumn.vue"
+        "target": ""
       }
     ]
   },
@@ -10869,7 +10911,7 @@
         "path": "example/DataTableReactiveDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type {\n  ColumnDef,\n  ColumnFiltersState,\n  ExpandedState,\n  SortingState,\n  VisibilityState,\n} from '@tanstack/vue-table'\nimport { valueUpdater } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  FlexRender,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { ArrowUpDown, ChevronDown } from 'lucide-vue-next'\nimport { h, ref, shallowRef } from 'vue'\nimport DropdownAction from './DataTableDemoColumn.vue'\n\nexport interface Payment {\n  id: string\n  amount: number\n  status: 'pending' | 'processing' | 'success' | 'failed'\n  email: string\n}\n\nconst data = shallowRef<Payment[]>([\n  {\n    id: 'm5gr84i9',\n    amount: 316,\n    status: 'success',\n    email: 'ken99@yahoo.com',\n  },\n  {\n    id: '3u1reuv4',\n    amount: 242,\n    status: 'success',\n    email: 'Abe45@gmail.com',\n  },\n  {\n    id: 'derv1ws0',\n    amount: 837,\n    status: 'processing',\n    email: 'Monserrat44@gmail.com',\n  },\n  {\n    id: '5kma53ae',\n    amount: 874,\n    status: 'success',\n    email: 'Silas22@gmail.com',\n  },\n  {\n    id: 'bhqecj4p',\n    amount: 721,\n    status: 'failed',\n    email: 'carmella@hotmail.com',\n  },\n])\n\nconst columns: ColumnDef<Payment>[] = [\n  {\n    id: 'select',\n    header: ({ table }) => h(Checkbox, {\n      'modelValue': table.getIsAllPageRowsSelected() || (table.getIsSomePageRowsSelected() && 'indeterminate'),\n      'onUpdate:modelValue': value => table.toggleAllPageRowsSelected(!!value),\n      'ariaLabel': 'Select all',\n    }),\n    cell: ({ row }) => h(Checkbox, {\n      'modelValue': row.getIsSelected(),\n      'onUpdate:modelValue': value => row.toggleSelected(!!value),\n      'ariaLabel': 'Select row',\n    }),\n    enableSorting: false,\n    enableHiding: false,\n  },\n  {\n    accessorKey: 'status',\n    header: 'Status',\n    cell: ({ row }) => h('div', { class: 'capitalize' }, row.getValue('status')),\n  },\n  {\n    accessorKey: 'email',\n    header: ({ column }) => {\n      return h(Button, {\n        variant: 'ghost',\n        onClick: () => column.toggleSorting(column.getIsSorted() === 'asc'),\n      }, () => ['Email', h(ArrowUpDown, { class: 'ml-2 h-4 w-4' })])\n    },\n    cell: ({ row }) => h('div', { class: 'lowercase' }, row.getValue('email')),\n  },\n  {\n    accessorKey: 'amount',\n    header: () => h('div', { class: 'text-right' }, 'Amount'),\n    cell: ({ row }) => {\n      const amount = Number.parseFloat(row.getValue('amount'))\n\n      // Format the amount as a dollar amount\n      const formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n      }).format(amount)\n\n      return h('div', { class: 'text-right font-medium' }, formatted)\n    },\n  },\n  {\n    id: 'actions',\n    enableHiding: false,\n    cell: ({ row }) => {\n      const payment = row.original\n\n      return h('div', { class: 'relative' }, h(DropdownAction, {\n        payment,\n        onExpand: row.toggleExpanded,\n      }))\n    },\n  },\n]\n\nconst sorting = ref<SortingState>([])\nconst columnFilters = ref<ColumnFiltersState>([])\nconst columnVisibility = ref<VisibilityState>({})\nconst rowSelection = ref({})\nconst expanded = ref<ExpandedState>({})\n\nconst table = useVueTable({\n  data,\n  columns,\n  getCoreRowModel: getCoreRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n  getExpandedRowModel: getExpandedRowModel(),\n  onSortingChange: updaterOrValue => valueUpdater(updaterOrValue, sorting),\n  onColumnFiltersChange: updaterOrValue => valueUpdater(updaterOrValue, columnFilters),\n  onColumnVisibilityChange: updaterOrValue => valueUpdater(updaterOrValue, columnVisibility),\n  onRowSelectionChange: updaterOrValue => valueUpdater(updaterOrValue, rowSelection),\n  onExpandedChange: updaterOrValue => valueUpdater(updaterOrValue, expanded),\n  state: {\n    get sorting() { return sorting.value },\n    get columnFilters() { return columnFilters.value },\n    get columnVisibility() { return columnVisibility.value },\n    get rowSelection() { return rowSelection.value },\n    get expanded() { return expanded.value },\n  },\n})\n\nconst statuses: Payment['status'][] = ['pending', 'processing', 'success', 'failed']\nfunction randomize() {\n  data.value = data.value.map(item => ({\n    ...item,\n    status: statuses[Math.floor(Math.random() * statuses.length)],\n  }))\n}\n</script>\n\n<template>\n  <div class=\"w-full\">\n    <div class=\"flex gap-2 items-center py-4\">\n      <Input\n        class=\"max-w-52\"\n        placeholder=\"Filter emails...\"\n        :model-value=\"table.getColumn('email')?.getFilterValue() as string\"\n        @update:model-value=\" table.getColumn('email')?.setFilterValue($event)\"\n      />\n      <Button @click=\"randomize\">\n        Randomize\n      </Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <Button variant=\"outline\" class=\"ml-auto\">\n            Columns <ChevronDown class=\"ml-2 h-4 w-4\" />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\">\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table.getAllColumns().filter((column) => column.getCanHide())\"\n            :key=\"column.id\"\n            class=\"capitalize\"\n            :model-value=\"column.getIsVisible()\"\n            @update:model-value=\"(value) => {\n              column.toggleVisibility(!!value)\n            }\"\n          >\n            {{ column.id }}\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n    <div class=\"rounded-md border\">\n      <Table>\n        <TableHeader>\n          <TableRow v-for=\"headerGroup in table.getHeaderGroups()\" :key=\"headerGroup.id\">\n            <TableHead v-for=\"header in headerGroup.headers\" :key=\"header.id\">\n              <FlexRender v-if=\"!header.isPlaceholder\" :render=\"header.column.columnDef.header\" :props=\"header.getContext()\" />\n            </TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          <template v-if=\"table.getRowModel().rows?.length\">\n            <template v-for=\"row in table.getRowModel().rows\" :key=\"row.id\">\n              <TableRow :data-state=\"row.getIsSelected() && 'selected'\">\n                <TableCell v-for=\"cell in row.getVisibleCells()\" :key=\"cell.id\">\n                  <FlexRender :render=\"cell.column.columnDef.cell\" :props=\"cell.getContext()\" />\n                </TableCell>\n              </TableRow>\n              <TableRow v-if=\"row.getIsExpanded()\">\n                <TableCell :colspan=\"row.getAllCells().length\">\n                  {{ JSON.stringify(row.original) }}\n                </TableCell>\n              </TableRow>\n            </template>\n          </template>\n\n          <TableRow v-else>\n            <TableCell\n              :colspan=\"columns.length\"\n              class=\"h-24 text-center\"\n            >\n              No results.\n            </TableCell>\n          </TableRow>\n        </TableBody>\n      </Table>\n    </div>\n\n    <div class=\"flex items-center justify-end space-x-2 py-4\">\n      <div class=\"flex-1 text-sm text-muted-foreground\">\n        {{ table.getFilteredSelectedRowModel().rows.length }} of\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected.\n      </div>\n      <div class=\"space-x-2\">\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          Previous\n        </Button>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          Next\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "DataTableReactiveDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10888,7 +10930,7 @@
         "path": "example/DatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"value\" initial-focus />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -10913,7 +10955,7 @@
         "path": "example/DatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { CalendarDate, DateFormatter, getLocalTimeZone, parseDate, today } from '@internationalized/date'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { toDate } from 'reka-ui/date'\nimport { useForm } from 'vee-validate'\nimport { computed, h, ref } from 'vue'\nimport { z } from 'zod'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z\n    .string()\n    .refine(v => v, { message: 'A date of birth is required.' }),\n}))\n\nconst placeholder = ref()\n\nconst { handleSubmit, setFieldValue, values } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n\n  },\n})\n\nconst value = computed({\n  get: () => values.dob ? parseDate(values.dob) : undefined,\n  set: val => val,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? df.format(toDate(value)) : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n              <input hidden>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"w-auto p-0\">\n            <Calendar\n              v-model:placeholder=\"placeholder\"\n              v-model=\"value\"\n              calendar-label=\"Date of birth\"\n              initial-focus\n              :min-value=\"new CalendarDate(1900, 1, 1)\"\n              :max-value=\"today(getLocalTimeZone())\"\n              @update:model-value=\"(v) => {\n                if (v) {\n                  setFieldValue('dob', v.toString())\n                }\n                else {\n                  setFieldValue('dob', undefined)\n                }\n\n              }\"\n            />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -10932,7 +10974,7 @@
         "path": "example/DatePickerWithIndependentMonths.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\n\nimport { Button, buttonVariants } from '@/registry/default/ui/button'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n\nimport {\n  RangeCalendarCell,\n  RangeCalendarCellTrigger,\n  RangeCalendarGrid,\n  RangeCalendarGridBody,\n  RangeCalendarGridHead,\n  RangeCalendarGridRow,\n  RangeCalendarHeadCell,\n} from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  type DateValue,\n  isEqualMonth,\n} from '@internationalized/date'\nimport {\n  Calendar as CalendarIcon,\n  ChevronLeft,\n  ChevronRight,\n} from 'lucide-vue-next'\nimport { type DateRange, RangeCalendarRoot, useDateFormatter } from 'reka-ui'\nimport { createMonth, type Grid, toDate } from 'reka-ui/date'\nimport { type Ref, ref, watch } from 'vue'\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n\nconst locale = ref('en-US')\nconst formatter = useDateFormatter(locale.value)\n\nconst placeholder = ref(value.value.start) as Ref<DateValue>\nconst secondMonthPlaceholder = ref(value.value.end) as Ref<DateValue>\n\nconst firstMonth = ref(\n  createMonth({\n    dateObj: placeholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\nconst secondMonth = ref(\n  createMonth({\n    dateObj: secondMonthPlaceholder.value,\n    locale: locale.value,\n    fixedWeeks: true,\n    weekStartsOn: 0,\n  }),\n) as Ref<Grid<DateValue>>\n\nfunction updateMonth(reference: 'first' | 'second', months: number) {\n  if (reference === 'first') {\n    placeholder.value = placeholder.value.add({ months })\n  }\n  else {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months,\n    })\n  }\n}\n\nwatch(placeholder, (_placeholder) => {\n  firstMonth.value = createMonth({\n    dateObj: _placeholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(secondMonthPlaceholder.value, _placeholder)) {\n    secondMonthPlaceholder.value = secondMonthPlaceholder.value.add({\n      months: 1,\n    })\n  }\n})\n\nwatch(secondMonthPlaceholder, (_secondMonthPlaceholder) => {\n  secondMonth.value = createMonth({\n    dateObj: _secondMonthPlaceholder,\n    weekStartsOn: 0,\n    fixedWeeks: false,\n    locale: locale.value,\n  })\n  if (isEqualMonth(_secondMonthPlaceholder, placeholder.value))\n    placeholder.value = placeholder.value.subtract({ months: 1 })\n})\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"\n          cn(\n            'w-[280px] justify-start text-left font-normal',\n            !value && 'text-muted-foreground',\n          )\n        \"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n            -\n            {{\n              formatter.custom(toDate(value.end), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n\n          <template v-else>\n            {{\n              formatter.custom(toDate(value.start), {\n                dateStyle: \"medium\",\n              })\n            }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendarRoot v-slot=\"{ weekDays }\" v-model=\"value\" v-model:placeholder=\"placeholder\" class=\"p-3\">\n        <div\n          class=\"flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0\"\n        >\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(firstMonth.value),\n                  )\n                }}\n              </div>\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('first', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in firstMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"firstMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n          <div class=\"flex flex-col gap-4\">\n            <div class=\"flex items-center justify-between\">\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', -1)\"\n              >\n                <ChevronLeft class=\"h-4 w-4\" />\n              </button>\n              <div\n                :class=\"cn('text-sm font-medium')\"\n              >\n                {{\n                  formatter.fullMonthAndYear(\n                    toDate(secondMonth.value),\n                  )\n                }}\n              </div>\n\n              <button\n                :class=\"\n                  cn(\n                    buttonVariants({ variant: 'outline' }),\n                    'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',\n                  )\n                \"\n                @click=\"updateMonth('second', 1)\"\n              >\n                <ChevronRight class=\"h-4 w-4\" />\n              </button>\n            </div>\n            <RangeCalendarGrid>\n              <RangeCalendarGridHead>\n                <RangeCalendarGridRow>\n                  <RangeCalendarHeadCell\n                    v-for=\"day in weekDays\"\n                    :key=\"day\"\n                    class=\"w-full\"\n                  >\n                    {{ day }}\n                  </RangeCalendarHeadCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridHead>\n              <RangeCalendarGridBody>\n                <RangeCalendarGridRow\n                  v-for=\"(\n                    weekDates, index\n                  ) in secondMonth.rows\"\n                  :key=\"`weekDate-${index}`\"\n                  class=\"mt-2 w-full\"\n                >\n                  <RangeCalendarCell\n                    v-for=\"weekDate in weekDates\"\n                    :key=\"weekDate.toString()\"\n                    :date=\"weekDate\"\n                  >\n                    <RangeCalendarCellTrigger\n                      :day=\"weekDate\"\n                      :month=\"secondMonth.value\"\n                    />\n                  </RangeCalendarCell>\n                </RangeCalendarGridRow>\n              </RangeCalendarGridBody>\n            </RangeCalendarGrid>\n          </div>\n        </div>\n      </RangeCalendarRoot>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithIndependentMonths.vue"
+        "target": ""
       }
     ]
   },
@@ -10952,7 +10994,7 @@
         "path": "example/DatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Calendar } from '@/registry/default/ui/calendar'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport {\n  DateFormatter,\n  type DateValue,\n  getLocalTimeZone,\n  today,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'long',\n})\n\nconst items = [\n  { value: 0, label: 'Today' },\n  { value: 1, label: 'Tomorrow' },\n  { value: 3, label: 'In 3 days' },\n  { value: 7, label: 'In a week' },\n]\n\nconst value = ref<DateValue>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        {{ value ? df.format(value.toDate(getLocalTimeZone())) : \"Pick a date\" }}\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col gap-y-2 p-2\">\n      <Select\n        @update:model-value=\"(v) => {\n          if (!v) return;\n          value = today(getLocalTimeZone()).add({ days: Number(v) });\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectItem v-for=\"item in items\" :key=\"item.value\" :value=\"item.value.toString()\">\n            {{ item.label }}\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <Calendar v-model=\"value\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -10971,7 +11013,7 @@
         "path": "example/DatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { cn } from '@/lib/utils'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Popover, PopoverContent, PopoverTrigger } from '@/registry/default/ui/popover'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport {\n  CalendarDate,\n  DateFormatter,\n  getLocalTimeZone,\n} from '@internationalized/date'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { type Ref, ref } from 'vue'\n\nconst df = new DateFormatter('en-US', {\n  dateStyle: 'medium',\n})\n\nconst value = ref({\n  start: new CalendarDate(2022, 1, 20),\n  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !value && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"value.start\">\n          <template v-if=\"value.end\">\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }} - {{ df.format(value.end.toDate(getLocalTimeZone())) }}\n          </template>\n\n          <template v-else>\n            {{ df.format(value.start.toDate(getLocalTimeZone())) }}\n          </template>\n        </template>\n        <template v-else>\n          Pick a date\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <RangeCalendar v-model=\"value\" initial-focus :number-of-months=\"2\" @update:start-value=\"(startDate) => value.start = startDate\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "DatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -10990,7 +11032,7 @@
         "path": "example/DialogCustomCloseButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Copy } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Share\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-md\">\n      <DialogHeader>\n        <DialogTitle>Share link</DialogTitle>\n        <DialogDescription>\n          Anyone who has this link will be able to view this.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"flex items-center space-x-2\">\n        <div class=\"grid flex-1 gap-2\">\n          <Label for=\"link\" class=\"sr-only\">\n            Link\n          </Label>\n          <Input\n            id=\"link\"\n            default-value=\"https://shadcn-vue.com/docs/installation\"\n            read-only\n          />\n        </div>\n        <Button type=\"submit\" size=\"sm\" class=\"px-3\">\n          <span class=\"sr-only\">Copy</span>\n          <Copy class=\"w-4 h-4\" />\n        </Button>\n      </div>\n      <DialogFooter class=\"sm:justify-start\">\n        <DialogClose as-child>\n          <Button type=\"button\" variant=\"secondary\">\n            Close\n          </Button>\n        </DialogClose>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogCustomCloseButton.vue"
+        "target": ""
       }
     ]
   },
@@ -11009,7 +11051,7 @@
         "path": "example/DialogDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11029,7 +11071,7 @@
         "path": "example/DialogForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Form,\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\n\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form v-slot=\"{ handleSubmit }\" as=\"\" keep-values :validation-schema=\"formSchema\">\n    <Dialog>\n      <DialogTrigger as-child>\n        <Button variant=\"outline\">\n          Edit Profile\n        </Button>\n      </DialogTrigger>\n      <DialogContent class=\"sm:max-w-[425px]\">\n        <DialogHeader>\n          <DialogTitle>Edit profile</DialogTitle>\n          <DialogDescription>\n            Make changes to your profile here. Click save when you're done.\n          </DialogDescription>\n        </DialogHeader>\n\n        <form id=\"dialogForm\" @submit=\"handleSubmit($event, onSubmit)\">\n          <FormField v-slot=\"{ componentField }\" name=\"username\">\n            <FormItem>\n              <FormLabel>Username</FormLabel>\n              <FormControl>\n                <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n              </FormControl>\n              <FormDescription>\n                This is your public display name.\n              </FormDescription>\n              <FormMessage />\n            </FormItem>\n          </FormField>\n        </form>\n\n        <DialogFooter>\n          <Button type=\"submit\" form=\"dialogForm\">\n            Save changes\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11046,7 +11088,7 @@
         "path": "example/DialogScrollBodyDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px] grid-rows-[auto_minmax(0,1fr)_auto] p-0 max-h-[90dvh]\">\n      <DialogHeader class=\"p-6 pb-0\">\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 overflow-y-auto px-6\">\n        <div class=\"flex flex-col justify-between h-[300dvh]\">\n          <p>\n            This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.\n          </p>\n\n          <p>This content should appear at the bottom after you scroll.</p>\n        </div>\n      </div>\n      <DialogFooter class=\"p-6 pt-0\">\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollBodyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11063,7 +11105,7 @@
         "path": "example/DialogScrollOverlayDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogScrollContent,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogScrollContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Modal title</DialogTitle>\n        <DialogDescription>\n          Here is modal with overlay scroll\n        </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4 py-4 h-[300dvh]\">\n        <p>\n          This is some placeholder content to show the scrolling behavior for modals. Instead of repeating the text in the modal, we use an inline style to set a minimum height, thereby extending the length of the overall modal and demonstrating the overflow scrolling. When content becomes longer than the height of the viewport, scrolling will move the modal as needed.\n        </p>\n      </div>\n      <DialogFooter>\n        <Button type=\"submit\">\n          Save changes\n        </Button>\n      </DialogFooter>\n    </DialogScrollContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "DialogScrollOverlayDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11079,7 +11121,7 @@
         "path": "example/DonutChartColor.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n\nconst valueFormatter = (tick: number | Date) => typeof tick === 'number' ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}` : ''\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :value-formatter=\"valueFormatter\"\n    :colors=\"['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'purple']\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartColor.vue"
+        "target": ""
       }
     ]
   },
@@ -11095,7 +11137,7 @@
         "path": "example/DonutChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -11111,7 +11153,7 @@
         "path": "example/DonutChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11127,7 +11169,7 @@
         "path": "example/DonutChartPie.vue",
         "content": "<script setup lang=\"ts\">\nimport { DonutChart } from '@/registry/default/ui/chart-donut'\n\nconst data = [\n  { name: 'Jan', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Feb', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Mar', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Apr', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'May', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n  { name: 'Jun', total: Math.floor(Math.random() * 2000) + 500, predicted: Math.floor(Math.random() * 2000) + 500 },\n]\n</script>\n\n<template>\n  <DonutChart\n    index=\"name\"\n    :category=\"'total'\"\n    :data=\"data\"\n    :type=\"'pie'\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "DonutChartPie.vue"
+        "target": ""
       }
     ]
   },
@@ -11147,7 +11189,7 @@
         "path": "example/DrawerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { VisStackedBar, VisXYContainer } from '@unovis/vue'\nimport { Minus, Plus } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst goal = ref(350)\n\ntype Data = typeof data[number]\nconst data = [\n  { goal: 400 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 239 },\n  { goal: 300 },\n  { goal: 200 },\n  { goal: 278 },\n  { goal: 189 },\n  { goal: 349 },\n]\n</script>\n\n<template>\n  <Drawer>\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Open Drawer\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <div class=\"mx-auto w-full max-w-sm\">\n        <DrawerHeader>\n          <DrawerTitle>Move Goal</DrawerTitle>\n          <DrawerDescription>Set your daily activity goal.</DrawerDescription>\n        </DrawerHeader>\n        <div class=\"p-4 pb-0\">\n          <div class=\"flex items-center justify-center space-x-2\">\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal <= 200\"\n              @click=\"goal -= 10\"\n            >\n              <Minus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Decrease</span>\n            </Button>\n            <div class=\"flex-1 text-center\">\n              <div class=\"text-7xl font-bold tracking-tighter\">\n                {{ goal }}\n              </div>\n              <div class=\"text-[0.70rem] uppercase text-muted-foreground\">\n                Calories/day\n              </div>\n            </div>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"h-8 w-8 shrink-0 rounded-full\"\n              :disabled=\"goal >= 400\"\n              @click=\"goal += 10\"\n            >\n              <Plus class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Increase</span>\n            </Button>\n          </div>\n          <div class=\"my-3 px-3 h-[120px]\">\n            <VisXYContainer\n              :data=\"data\"\n              class=\"h-[120px]\"\n              :style=\"{\n                'opacity': 0.9,\n                '--theme-primary': `hsl(var(--foreground))`,\n              }\"\n            >\n              <VisStackedBar\n                :x=\"(d: Data, i :number) => i\"\n                :y=\"(d: Data) => d.goal\"\n                color=\"var(--theme-primary)\"\n                :bar-padding=\"0.1\"\n                :rounded-corners=\"0\"\n              />\n            </VisXYContainer>\n          </div>\n        </div>\n        <DrawerFooter>\n          <Button>Submit</Button>\n          <DrawerClose as-child>\n            <Button variant=\"outline\">\n              Cancel\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      </div>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11169,7 +11211,7 @@
         "path": "example/DrawerDialog.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { createReusableTemplate, useMediaQuery } from '@vueuse/core'\nimport { ref } from 'vue'\n\n// Reuse `form` section\nconst [UseTemplate, GridForm] = createReusableTemplate()\nconst isDesktop = useMediaQuery('(min-width: 768px)')\n\nconst isOpen = ref(false)\n</script>\n\n<template>\n  <UseTemplate>\n    <form class=\"grid items-start gap-4 px-4\">\n      <div class=\"grid gap-2\">\n        <Label html-for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" default-value=\"shadcn@example.com\" />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label html-for=\"username\">Username</Label>\n        <Input id=\"username\" default-value=\"@shadcn\" />\n      </div>\n      <Button type=\"submit\">\n        Save changes\n      </Button>\n    </form>\n  </UseTemplate>\n\n  <Dialog v-if=\"isDesktop\" v-model:open=\"isOpen\">\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DialogTrigger>\n    <DialogContent class=\"sm:max-w-[425px]\">\n      <DialogHeader>\n        <DialogTitle>Edit profile</DialogTitle>\n        <DialogDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DialogDescription>\n      </DialogHeader>\n      <GridForm />\n    </DialogContent>\n  </Dialog>\n\n  <Drawer v-else v-model:open=\"isOpen\">\n    <DrawerTrigger as-child>\n      <Button variant=\"outline\">\n        Edit Profile\n      </Button>\n    </DrawerTrigger>\n    <DrawerContent>\n      <DrawerHeader class=\"text-left\">\n        <DrawerTitle>Edit profile</DrawerTitle>\n        <DrawerDescription>\n          Make changes to your profile here. Click save when you're done.\n        </DrawerDescription>\n      </DrawerHeader>\n      <GridForm />\n      <DrawerFooter class=\"pt-2\">\n        <DrawerClose as-child>\n          <Button variant=\"outline\">\n            Cancel\n          </Button>\n        </DrawerClose>\n      </DrawerFooter>\n    </DrawerContent>\n  </Drawer>\n</template>\n",
         "type": "registry:example",
-        "target": "DrawerDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -11186,7 +11228,7 @@
         "path": "example/DropdownMenuCheckboxes.vue",
         "content": "<script lang=\"ts\" setup>\nimport type { DropdownMenuCheckboxItemProps } from 'reka-ui'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\ntype Checked = DropdownMenuCheckboxItemProps['modelValue']\n\nconst showStatusBar = ref<Checked>(true)\nconst showActivityBar = ref<Checked>(false)\nconst showPanel = ref<Checked>(false)\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showStatusBar\"\n      >\n        Status Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showActivityBar\"\n        disabled\n      >\n        Activity Bar\n      </DropdownMenuCheckboxItem>\n      <DropdownMenuCheckboxItem\n        v-model:model-value=\"showPanel\"\n      >\n        Panel\n      </DropdownMenuCheckboxItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuCheckboxes.vue"
+        "target": ""
       }
     ]
   },
@@ -11203,7 +11245,7 @@
         "path": "example/DropdownMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport {\n  Cloud,\n  CreditCard,\n  Github,\n  Keyboard,\n  LifeBuoy,\n  LogOut,\n  Mail,\n  MessageSquare,\n  Plus,\n  PlusCircle,\n  Settings,\n  User,\n  UserPlus,\n  Users,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>My Account</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <User class=\"mr-2 h-4 w-4\" />\n          <span>Profile</span>\n          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <CreditCard class=\"mr-2 h-4 w-4\" />\n          <span>Billing</span>\n          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Settings class=\"mr-2 h-4 w-4\" />\n          <span>Settings</span>\n          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <Keyboard class=\"mr-2 h-4 w-4\" />\n          <span>Keyboard shortcuts</span>\n          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <Users class=\"mr-2 h-4 w-4\" />\n          <span>Team</span>\n        </DropdownMenuItem>\n        <DropdownMenuSub>\n          <DropdownMenuSubTrigger>\n            <UserPlus class=\"mr-2 h-4 w-4\" />\n            <span>Invite users</span>\n          </DropdownMenuSubTrigger>\n          <DropdownMenuPortal>\n            <DropdownMenuSubContent>\n              <DropdownMenuItem>\n                <Mail class=\"mr-2 h-4 w-4\" />\n                <span>Email</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <MessageSquare class=\"mr-2 h-4 w-4\" />\n                <span>Message</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem>\n                <PlusCircle class=\"mr-2 h-4 w-4\" />\n                <span>More...</span>\n              </DropdownMenuItem>\n            </DropdownMenuSubContent>\n          </DropdownMenuPortal>\n        </DropdownMenuSub>\n        <DropdownMenuItem>\n          <Plus class=\"mr-2 h-4 w-4\" />\n          <span>New Team</span>\n          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <Github class=\"mr-2 h-4 w-4\" />\n        <span>GitHub</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem>\n        <LifeBuoy class=\"mr-2 h-4 w-4\" />\n        <span>Support</span>\n      </DropdownMenuItem>\n      <DropdownMenuItem disabled>\n        <Cloud class=\"mr-2 h-4 w-4\" />\n        <span>API</span>\n      </DropdownMenuItem>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <LogOut class=\"mr-2 h-4 w-4\" />\n        <span>Log out</span>\n        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n      </DropdownMenuItem>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11220,7 +11262,7 @@
         "path": "example/DropdownMenuRadioGroup.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { ref } from 'vue'\n\nconst position = ref('bottom')\n</script>\n\n<template>\n  <DropdownMenu>\n    <DropdownMenuTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </DropdownMenuTrigger>\n    <DropdownMenuContent class=\"w-56\">\n      <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n      <DropdownMenuSeparator />\n      <DropdownMenuRadioGroup v-model=\"position\">\n        <DropdownMenuRadioItem value=\"top\">\n          Top\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"bottom\">\n          Bottom\n        </DropdownMenuRadioItem>\n        <DropdownMenuRadioItem value=\"right\">\n          Right\n        </DropdownMenuRadioItem>\n      </DropdownMenuRadioGroup>\n    </DropdownMenuContent>\n  </DropdownMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "DropdownMenuRadioGroup.vue"
+        "target": ""
       }
     ]
   },
@@ -11238,7 +11280,7 @@
         "path": "example/HoverCardDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  HoverCard,\n  HoverCardContent,\n  HoverCardTrigger,\n} from '@/registry/default/ui/hover-card'\nimport { CalendarDays } from 'lucide-vue-next'\n</script>\n\n<template>\n  <HoverCard>\n    <HoverCardTrigger as-child>\n      <Button variant=\"link\">\n        @vuejs\n      </Button>\n    </HoverCardTrigger>\n    <HoverCardContent class=\"w-80\">\n      <div class=\"flex justify-between space-x-4\">\n        <Avatar>\n          <AvatarImage src=\"https://github.com/vuejs.png\" />\n          <AvatarFallback>VC</AvatarFallback>\n        </Avatar>\n        <div class=\"space-y-1\">\n          <h4 class=\"text-sm font-semibold\">\n            @vuejs\n          </h4>\n          <p class=\"text-sm\">\n            Progressive JavaScript framework for building modern web interfaces.\n          </p>\n          <div class=\"flex items-center pt-2\">\n            <CalendarDays class=\"mr-2 h-4 w-4 opacity-70\" />\n            <span class=\"text-xs text-muted-foreground\">\n              Joined January 2014\n            </span>\n          </div>\n        </div>\n      </div>\n    </HoverCardContent>\n  </HoverCard>\n</template>\n",
         "type": "registry:example",
-        "target": "HoverCardDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11254,7 +11296,7 @@
         "path": "example/InputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11270,7 +11312,7 @@
         "path": "example/InputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <Input disabled type=\"email\" placeholder=\"Email\" />\n</template>\n",
         "type": "registry:example",
-        "target": "InputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11287,7 +11329,7 @@
         "path": "example/InputFile.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"picture\">Picture</Label>\n    <Input id=\"picture\" type=\"file\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFile.vue"
+        "target": ""
       }
     ]
   },
@@ -11310,7 +11352,7 @@
         "path": "example/InputForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11333,7 +11375,7 @@
         "path": "example/InputFormAutoAnimate.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { vAutoAnimate } from '@formkit/auto-animate/vue'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  username: z.string().min(2).max(50),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"username\">\n      <FormItem v-auto-animate>\n        <FormLabel>Username</FormLabel>\n        <FormControl>\n          <Input type=\"text\" placeholder=\"shadcn\" v-bind=\"componentField\" />\n        </FormControl>\n        <FormDescription>\n          This is your public display name.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "InputFormAutoAnimate.vue"
+        "target": ""
       }
     ]
   },
@@ -11350,7 +11392,7 @@
         "path": "example/InputWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\n</script>\n\n<template>\n  <div class=\"flex w-full max-w-sm items-center gap-1.5\">\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n    <Button type=\"submit\">\n      Subscribe\n    </Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -11366,7 +11408,7 @@
         "path": "example/InputWithIcon.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"relative w-full max-w-sm items-center\">\n    <Input id=\"search\" type=\"text\" placeholder=\"Search...\" class=\"pl-10\" />\n    <span class=\"absolute start-0 inset-y-0 flex items-center justify-center px-2\">\n      <Search class=\"size-6 text-muted-foreground\" />\n    </span>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithIcon.vue"
+        "target": ""
       }
     ]
   },
@@ -11383,7 +11425,7 @@
         "path": "example/InputWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"grid w-full max-w-sm items-center gap-1.5\">\n    <Label for=\"email\">Email</Label>\n    <Input id=\"email\" type=\"email\" placeholder=\"Email\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "InputWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -11400,7 +11442,7 @@
         "path": "example/LabelDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div>\n    <div class=\"flex items-center space-x-2\">\n      <Checkbox id=\"terms\" />\n      <Label for=\"terms\">Accept terms and conditions</Label>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "LabelDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11416,7 +11458,7 @@
         "path": "example/LineChartCustomTooltip.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\nimport CustomChartTooltip from './CustomChartTooltip.vue'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :custom-tooltip=\"CustomChartTooltip\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartCustomTooltip.vue"
+        "target": ""
       }
     ]
   },
@@ -11432,7 +11474,7 @@
         "path": "example/LineChartDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    :data=\"data\"\n    index=\"year\"\n    :categories=\"['Export Growth Rate', 'Import Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11448,7 +11490,7 @@
         "path": "example/LineChartSparkline.vue",
         "content": "<script setup lang=\"ts\">\nimport { LineChart } from '@/registry/default/ui/chart-line'\n\nconst data = [\n  {\n    'year': 1970,\n    'Export Growth Rate': 2.04,\n    'Import Growth Rate': 1.53,\n  },\n  {\n    'year': 1971,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.58,\n  },\n  {\n    'year': 1972,\n    'Export Growth Rate': 1.96,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1973,\n    'Export Growth Rate': 1.93,\n    'Import Growth Rate': 1.61,\n  },\n  {\n    'year': 1974,\n    'Export Growth Rate': 1.88,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1975,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.64,\n  },\n  {\n    'year': 1976,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.62,\n  },\n  {\n    'year': 1977,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.69,\n  },\n  {\n    'year': 1978,\n    'Export Growth Rate': 1.74,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1979,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.67,\n  },\n  {\n    'year': 1980,\n    'Export Growth Rate': 1.79,\n    'Import Growth Rate': 1.7,\n  },\n  {\n    'year': 1981,\n    'Export Growth Rate': 1.81,\n    'Import Growth Rate': 1.72,\n  },\n  {\n    'year': 1982,\n    'Export Growth Rate': 1.84,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1983,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.73,\n  },\n  {\n    'year': 1984,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.78,\n  },\n  {\n    'year': 1985,\n    'Export Growth Rate': 1.78,\n    'Import Growth Rate': 1.81,\n  },\n  {\n    'year': 1986,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.89,\n  },\n  {\n    'year': 1987,\n    'Export Growth Rate': 1.82,\n    'Import Growth Rate': 1.91,\n  },\n  {\n    'year': 1988,\n    'Export Growth Rate': 1.77,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1989,\n    'Export Growth Rate': 1.76,\n    'Import Growth Rate': 1.94,\n  },\n  {\n    'year': 1990,\n    'Export Growth Rate': 1.75,\n    'Import Growth Rate': 1.97,\n  },\n  {\n    'year': 1991,\n    'Export Growth Rate': 1.62,\n    'Import Growth Rate': 1.99,\n  },\n  {\n    'year': 1992,\n    'Export Growth Rate': 1.56,\n    'Import Growth Rate': 2.12,\n  },\n  {\n    'year': 1993,\n    'Export Growth Rate': 1.5,\n    'Import Growth Rate': 2.13,\n  },\n  {\n    'year': 1994,\n    'Export Growth Rate': 1.46,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1995,\n    'Export Growth Rate': 1.43,\n    'Import Growth Rate': 2.17,\n  },\n  {\n    'year': 1996,\n    'Export Growth Rate': 1.4,\n    'Import Growth Rate': 2.2,\n  },\n  {\n    'year': 1997,\n    'Export Growth Rate': 1.37,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 1998,\n    'Export Growth Rate': 1.34,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 1999,\n    'Export Growth Rate': 1.32,\n    'Import Growth Rate': 2.05,\n  },\n  {\n    'year': 2000,\n    'Export Growth Rate': 1.33,\n    'Import Growth Rate': 2.07,\n  },\n  {\n    'year': 2001,\n    'Export Growth Rate': 1.31,\n    'Import Growth Rate': 2.08,\n  },\n  {\n    'year': 2002,\n    'Export Growth Rate': 1.29,\n    'Import Growth Rate': 2.1,\n  },\n  {\n    'year': 2003,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.15,\n  },\n  {\n    'year': 2004,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.21,\n  },\n  {\n    'year': 2005,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.23,\n  },\n  {\n    'year': 2006,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.29,\n  },\n  {\n    'year': 2007,\n    'Export Growth Rate': 1.27,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2008,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2009,\n    'Export Growth Rate': 1.26,\n    'Import Growth Rate': 2.36,\n  },\n  {\n    'year': 2010,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2011,\n    'Export Growth Rate': 1.24,\n    'Import Growth Rate': 2.34,\n  },\n  {\n    'year': 2012,\n    'Export Growth Rate': 1.25,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2013,\n    'Export Growth Rate': 1.22,\n    'Import Growth Rate': 2.3,\n  },\n  {\n    'year': 2014,\n    'Export Growth Rate': 1.2,\n    'Import Growth Rate': 2.35,\n  },\n  {\n    'year': 2015,\n    'Export Growth Rate': 1.17,\n    'Import Growth Rate': 2.39,\n  },\n  {\n    'year': 2016,\n    'Export Growth Rate': 1.16,\n    'Import Growth Rate': 2.41,\n  },\n  {\n    'year': 2017,\n    'Export Growth Rate': 1.13,\n    'Import Growth Rate': 2.44,\n  },\n  {\n    'year': 2018,\n    'Export Growth Rate': 1.07,\n    'Import Growth Rate': 2.45,\n  },\n  {\n    'year': 2019,\n    'Export Growth Rate': 1.03,\n    'Import Growth Rate': 2.47,\n  },\n  {\n    'year': 2020,\n    'Export Growth Rate': 0.92,\n    'Import Growth Rate': 2.48,\n  },\n  {\n    'year': 2021,\n    'Export Growth Rate': 0.82,\n    'Import Growth Rate': 2.51,\n  },\n]\n</script>\n\n<template>\n  <LineChart\n    index=\"year\"\n    class=\"h-[100px] w-[400px]\"\n    :data=\"data\"\n    :categories=\"['Export Growth Rate']\"\n    :y-formatter=\"(tick, i) => {\n      return typeof tick === 'number'\n        ? `$ ${new Intl.NumberFormat('us').format(tick).toString()}`\n        : ''\n    }\"\n    :show-tooltip=\"false\"\n    :show-grid-line=\"false\"\n    :show-legend=\"false\"\n    :show-x-axis=\"false\"\n    :show-y-axis=\"false\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "LineChartSparkline.vue"
+        "target": ""
       }
     ]
   },
@@ -11464,7 +11506,7 @@
         "path": "example/MenubarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from '@/registry/default/ui/menubar'\n</script>\n\n<template>\n  <Menubar>\n    <MenubarMenu>\n      <MenubarTrigger>File</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          New Window <MenubarShortcut>⌘N</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled>\n          New Incognito Window\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Share</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Email link</MenubarItem>\n            <MenubarItem>Messages</MenubarItem>\n            <MenubarItem>Notes</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>\n          Print... <MenubarShortcut>⌘P</MenubarShortcut>\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Edit</MenubarTrigger>\n      <MenubarContent>\n        <MenubarItem>\n          Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem>\n          Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarSub>\n          <MenubarSubTrigger>Find</MenubarSubTrigger>\n          <MenubarSubContent>\n            <MenubarItem>Search the web</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Find...</MenubarItem>\n            <MenubarItem>Find Next</MenubarItem>\n            <MenubarItem>Find Previous</MenubarItem>\n          </MenubarSubContent>\n        </MenubarSub>\n        <MenubarSeparator />\n        <MenubarItem>Cut</MenubarItem>\n        <MenubarItem>Copy</MenubarItem>\n        <MenubarItem>Paste</MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>View</MenubarTrigger>\n      <MenubarContent>\n        <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n        <MenubarCheckboxItem checked>\n          Always Show Full URLs\n        </MenubarCheckboxItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Reload <MenubarShortcut>⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarItem disabled inset>\n          Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Toggle Fullscreen\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Hide Sidebar\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n    <MenubarMenu>\n      <MenubarTrigger>Profiles</MenubarTrigger>\n      <MenubarContent>\n        <MenubarRadioGroup value=\"benoit\">\n          <MenubarRadioItem value=\"andy\">\n            Andy\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"benoit\">\n            Benoit\n          </MenubarRadioItem>\n          <MenubarRadioItem value=\"Luis\">\n            Luis\n          </MenubarRadioItem>\n        </MenubarRadioGroup>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Edit...\n        </MenubarItem>\n        <MenubarSeparator />\n        <MenubarItem inset>\n          Add Profile...\n        </MenubarItem>\n      </MenubarContent>\n    </MenubarMenu>\n  </Menubar>\n</template>\n",
         "type": "registry:example",
-        "target": "MenubarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11480,7 +11522,7 @@
         "path": "example/NavigationMenuDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/registry/default/ui/navigation-menu'\n\nconst components: { title: string, href: string, description: string }[] = [\n  {\n    title: 'Alert Dialog',\n    href: '/docs/components/alert-dialog',\n    description:\n      'A modal dialog that interrupts the user with important content and expects a response.',\n  },\n  {\n    title: 'Hover Card',\n    href: '/docs/components/hover-card',\n    description:\n      'For sighted users to preview content available behind a link.',\n  },\n  {\n    title: 'Progress',\n    href: '/docs/components/progress',\n    description:\n      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',\n  },\n  {\n    title: 'Scroll-area',\n    href: '/docs/components/scroll-area',\n    description: 'Visually or semantically separates content.',\n  },\n  {\n    title: 'Tabs',\n    href: '/docs/components/tabs',\n    description:\n      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',\n  },\n  {\n    title: 'Tooltip',\n    href: '/docs/components/tooltip',\n    description:\n      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',\n  },\n]\n</script>\n\n<template>\n  <NavigationMenu>\n    <NavigationMenuList>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]\">\n            <li class=\"row-span-3\">\n              <NavigationMenuLink as-child>\n                <a\n                  class=\"flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md\"\n                  href=\"/\"\n                >\n                  <img src=\"https://www.reka-ui.com/logo.svg\" class=\"h-6 w-6\">\n                  <div class=\"mb-2 mt-4 text-lg font-medium\">\n                    shadcn/ui\n                  </div>\n                  <p class=\"text-sm leading-tight text-muted-foreground\">\n                    Beautifully designed components built with Radix UI and\n                    Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/introduction\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Introduction</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Re-usable components built using Radix UI and Tailwind CSS.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/installation\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Installation</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    How to install dependencies and structure your app.\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n            <li>\n              <NavigationMenuLink as-child>\n                <a\n                  href=\"/docs/typography\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">Typography</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    Styles for headings, paragraphs, lists...etc\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuTrigger>Components</NavigationMenuTrigger>\n        <NavigationMenuContent>\n          <ul class=\"grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] \">\n            <li v-for=\"component in components\" :key=\"component.title\">\n              <NavigationMenuLink as-child>\n                <a\n                  :href=\"component.href\"\n                  class=\"block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground\"\n                >\n                  <div class=\"text-sm font-medium leading-none\">{{ component.title }}</div>\n                  <p class=\"line-clamp-2 text-sm leading-snug text-muted-foreground\">\n                    {{ component.description }}\n                  </p>\n                </a>\n              </NavigationMenuLink>\n            </li>\n          </ul>\n        </NavigationMenuContent>\n      </NavigationMenuItem>\n      <NavigationMenuItem>\n        <NavigationMenuLink href=\"/docs/introduction\" :class=\"navigationMenuTriggerStyle()\">\n          Documentation\n        </NavigationMenuLink>\n      </NavigationMenuItem>\n    </NavigationMenuList>\n  </NavigationMenu>\n</template>\n",
         "type": "registry:example",
-        "target": "NavigationMenuDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11497,7 +11539,7 @@
         "path": "example/NumberFieldCurrency.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"balance\"\n    :default-value=\"1500\"\n    :format-options=\"{\n      style: 'currency',\n      currency: 'EUR',\n      currencyDisplay: 'code',\n      currencySign: 'accounting',\n    }\"\n  >\n    <Label for=\"balance\">Balance</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldCurrency.vue"
+        "target": ""
       }
     ]
   },
@@ -11514,7 +11556,7 @@
         "path": "example/NumberFieldDecimal.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"number\"\n    :default-value=\"5\"\n    :format-options=\"{\n      signDisplay: 'exceptZero',\n      minimumFractionDigits: 1,\n    }\"\n  >\n    <Label for=\"number\">Number</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDecimal.vue"
+        "target": ""
       }
     ]
   },
@@ -11531,7 +11573,7 @@
         "path": "example/NumberFieldDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age\" :default-value=\"18\" :min=\"0\">\n    <Label for=\"age\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11548,7 +11590,7 @@
         "path": "example/NumberFieldDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField id=\"age-disabled\" :default-value=\"18\" disabled>\n    <Label for=\"age-disabled\">Age</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11571,7 +11613,7 @@
         "path": "example/NumberFieldForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  payment: z.number().min(10, 'Min 10 euros to send payment').max(5000, 'Max 5000 euros to send payment'),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    payment: 10,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"payment\">\n      <FormItem>\n        <FormLabel>Payment</FormLabel>\n        <NumberField\n          class=\"gap-2\"\n          :min=\"0\"\n          :format-options=\"{\n            style: 'currency',\n            currency: 'EUR',\n            currencyDisplay: 'code',\n            currencySign: 'accounting',\n          }\"\n          :model-value=\"value\"\n          @update:model-value=\"(v) => {\n            if (v) {\n              setFieldValue('payment', v)\n            }\n            else {\n              setFieldValue('payment', undefined)\n            }\n          }\"\n        >\n          <NumberFieldContent>\n            <NumberFieldDecrement />\n            <FormControl>\n              <NumberFieldInput />\n            </FormControl>\n            <NumberFieldIncrement />\n          </NumberFieldContent>\n        </NumberField>\n        <FormDescription>\n          Enter value between 10 and 5000.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11588,7 +11630,7 @@
         "path": "example/NumberFieldPercentage.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  NumberField,\n  NumberFieldContent,\n  NumberFieldDecrement,\n  NumberFieldIncrement,\n  NumberFieldInput,\n} from '@/registry/default/ui/number-field'\n</script>\n\n<template>\n  <NumberField\n    id=\"percent\"\n    :default-value=\"0.05\"\n    :step=\"0.01\"\n    :format-options=\"{\n      style: 'percent',\n    }\"\n  >\n    <Label for=\"percent\">Percent</Label>\n    <NumberFieldContent>\n      <NumberFieldDecrement />\n      <NumberFieldInput />\n      <NumberFieldIncrement />\n    </NumberFieldContent>\n  </NumberField>\n</template>\n",
         "type": "registry:example",
-        "target": "NumberFieldPercentage.vue"
+        "target": ""
       }
     ]
   },
@@ -11605,7 +11647,7 @@
         "path": "example/PaginationDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Button,\n} from '@/registry/default/ui/button'\n\nimport {\n  Pagination,\n  PaginationEllipsis,\n  PaginationFirst,\n  PaginationLast,\n  PaginationList,\n  PaginationListItem,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\n</script>\n\n<template>\n  <Pagination v-slot=\"{ page }\" :items-per-page=\"10\" :total=\"100\" :sibling-count=\"1\" show-edges :default-page=\"2\">\n    <PaginationList v-slot=\"{ items }\" class=\"flex items-center gap-1\">\n      <PaginationFirst />\n      <PaginationPrev />\n\n      <template v-for=\"(item, index) in items\">\n        <PaginationListItem v-if=\"item.type === 'page'\" :key=\"index\" :value=\"item.value\" as-child>\n          <Button class=\"w-10 h-10 p-0\" :variant=\"item.value === page ? 'default' : 'outline'\">\n            {{ item.value }}\n          </Button>\n        </PaginationListItem>\n        <PaginationEllipsis v-else :key=\"item.type\" :index=\"index\" />\n      </template>\n\n      <PaginationNext />\n      <PaginationLast />\n    </PaginationList>\n  </Pagination>\n</template>\n",
         "type": "registry:example",
-        "target": "PaginationDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11621,7 +11663,7 @@
         "path": "example/PinInputControlled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>(['1', '2', '3'])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputControlled.vue"
+        "target": ""
       }
     ]
   },
@@ -11637,7 +11679,7 @@
         "path": "example/PinInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11653,7 +11695,7 @@
         "path": "example/PinInputDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      disabled\n    >\n      <PinInputGroup>\n        <PinInputInput\n          v-for=\"(id, index) in 5\"\n          :key=\"id\"\n          :index=\"index\"\n        />\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -11676,7 +11718,7 @@
         "path": "example/PinInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n} from '@/registry/default/ui/pin-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  pin: z.array(z.coerce.string()).length(5, { message: 'Invalid input' }),\n}))\n\nconst { handleSubmit, setFieldValue } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    pin: ['1', '2', '3'],\n  },\n})\n\nconst onSubmit = handleSubmit(({ pin }) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(pin.join(''), null, 2))),\n  })\n})\n\nconst handleComplete = (e: string[]) => console.log(e.join(''))\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6 mx-auto\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"pin\">\n      <FormItem>\n        <FormLabel>OTP</FormLabel>\n        <FormControl>\n          <PinInput\n            id=\"pin-input\"\n            :model-value=\"value\"\n            placeholder=\"○\"\n            class=\"flex gap-2 items-center mt-1\"\n            otp\n            type=\"number\"\n            :name=\"componentField.name\"\n            @complete=\"handleComplete\"\n            @update:model-value=\"(arrStr) => {\n              setFieldValue('pin', arrStr.filter(Boolean))\n            }\"\n          >\n            <PinInputGroup>\n              <PinInputInput\n                v-for=\"(id, index) in 5\"\n                :key=\"id\"\n                :index=\"index\"\n              />\n            </PinInputGroup>\n          </PinInput>\n        </FormControl>\n        <FormDescription>\n          Allows users to input a sequence of one-character alphanumeric inputs.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button>Submit</Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11692,7 +11734,7 @@
         "path": "example/PinInputSeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  PinInput,\n  PinInputGroup,\n  PinInputInput,\n  PinInputSeparator,\n} from '@/registry/default/ui/pin-input'\nimport { ref } from 'vue'\n\nconst value = ref<string[]>([])\nconst handleComplete = (e: string[]) => alert(e.join(''))\n</script>\n\n<template>\n  <div>\n    <PinInput\n      id=\"pin-input\"\n      v-model=\"value\"\n      placeholder=\"○\"\n      @complete=\"handleComplete\"\n    >\n      <PinInputGroup class=\"gap-1\">\n        <template v-for=\"(id, index) in 5\" :key=\"id\">\n          <PinInputInput\n            class=\"rounded-md border\"\n            :index=\"index\"\n          />\n          <template v-if=\"index !== 4\">\n            <PinInputSeparator />\n          </template>\n        </template>\n      </PinInputGroup>\n    </PinInput>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "PinInputSeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11711,7 +11753,7 @@
         "path": "example/PopoverDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button variant=\"outline\">\n        Open popover\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-80\">\n      <div class=\"grid gap-4\">\n        <div class=\"space-y-2\">\n          <h4 class=\"font-medium leading-none\">\n            Dimensions\n          </h4>\n          <p class=\"text-sm text-muted-foreground\">\n            Set the dimensions for the layer.\n          </p>\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"width\">Width</Label>\n            <Input\n              id=\"width\"\n              type=\"text\"\n              default-value=\"100%\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxWidth\">Max. width</Label>\n            <Input\n              id=\"maxWidth\"\n              type=\"text\"\n              default-value=\"300px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"height\">Height</Label>\n            <Input\n              id=\"height\"\n              type=\"text\"\n              default-value=\"25px\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n          <div class=\"grid grid-cols-3 items-center gap-4\">\n            <Label for=\"maxHeight\">Max. height</Label>\n            <Input\n              id=\"maxHeight\"\n              type=\"text\"\n              default-value=\"none\"\n              class=\"col-span-2 h-8\"\n            />\n          </div>\n        </div>\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "PopoverDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11727,7 +11769,7 @@
         "path": "example/ProgressDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Progress } from '@/registry/default/ui/progress'\nimport { ref, watchEffect } from 'vue'\n\nconst progress = ref(13)\n\nwatchEffect((cleanupFn) => {\n  const timer = setTimeout(() => progress.value = 66, 500)\n  cleanupFn(() => clearTimeout(timer))\n})\n</script>\n\n<template>\n  <Progress v-model=\"progress\" class=\"w-3/5\" />\n</template>\n",
         "type": "registry:example",
-        "target": "ProgressDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11744,7 +11786,7 @@
         "path": "example/RadioGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\n</script>\n\n<template>\n  <RadioGroup default-value=\"comfortable\">\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r1\" value=\"default\" />\n      <Label for=\"r1\">Default</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r2\" value=\"comfortable\" />\n      <Label for=\"r2\">Comfortable</Label>\n    </div>\n    <div class=\"flex items-center space-x-2\">\n      <RadioGroupItem id=\"r3\" value=\"compact\" />\n      <Label for=\"r3\">Compact</Label>\n    </div>\n  </RadioGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11767,7 +11809,7 @@
         "path": "example/RadioGroupForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { RadioGroup, RadioGroupItem } from '@/registry/default/ui/radio-group'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  type: z.enum(['all', 'mentions', 'none'], {\n    required_error: 'You need to select a notification type.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" type=\"radio\" name=\"type\">\n      <FormItem class=\"space-y-3\">\n        <FormLabel>Notify me about...</FormLabel>\n\n        <FormControl>\n          <RadioGroup\n            class=\"flex flex-col space-y-1\"\n            v-bind=\"componentField\"\n          >\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"all\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                All new messages\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"mentions\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Direct messages and mentions\n              </FormLabel>\n            </FormItem>\n            <FormItem class=\"flex items-center space-y-0 gap-x-3\">\n              <FormControl>\n                <RadioGroupItem value=\"none\" />\n              </FormControl>\n              <FormLabel class=\"font-normal\">\n                Nothing\n              </FormLabel>\n            </FormItem>\n          </RadioGroup>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "RadioGroupForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11783,7 +11825,7 @@
         "path": "example/RangeCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport type { DateRange } from 'reka-ui'\nimport { RangeCalendar } from '@/registry/default/ui/range-calendar'\nimport { getLocalTimeZone, today } from '@internationalized/date'\nimport { type Ref, ref } from 'vue'\n\nconst start = today(getLocalTimeZone())\nconst end = start.add({ days: 7 })\n\nconst value = ref({\n  start,\n  end,\n}) as Ref<DateRange>\n</script>\n\n<template>\n  <RangeCalendar v-model=\"value\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "RangeCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11799,7 +11841,7 @@
         "path": "example/ResizableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"demo-group-1\"\n    direction=\"horizontal\"\n    class=\"max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"demo-panel-1\" :default-size=\"50\">\n      <div class=\"flex h-[200px] items-center justify-center p-6\">\n        <span class=\"font-semibold\">One</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"demo-handle-1\" />\n    <ResizablePanel id=\"demo-panel-2\" :default-size=\"50\">\n      <ResizablePanelGroup id=\"demo-group-2\" direction=\"vertical\">\n        <ResizablePanel id=\"demo-panel-3\" :default-size=\"25\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Two</span>\n          </div>\n        </ResizablePanel>\n        <ResizableHandle id=\"demo-handle-2\" />\n        <ResizablePanel id=\"demo-panel-4\" :default-size=\"75\">\n          <div class=\"flex h-full items-center justify-center p-6\">\n            <span class=\"font-semibold\">Three</span>\n          </div>\n        </ResizablePanel>\n      </ResizablePanelGroup>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11815,7 +11857,7 @@
         "path": "example/ResizableHandleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"handle-demo-group-1\"\n    direction=\"horizontal\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"handle-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Sidebar</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"handle-demo-handle-1\" with-handle />\n    <ResizablePanel id=\"handle-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableHandleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11831,7 +11873,7 @@
         "path": "example/ResizableVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  ResizableHandle,\n  ResizablePanel,\n  ResizablePanelGroup,\n} from '@/registry/default/ui/resizable'\n</script>\n\n<template>\n  <ResizablePanelGroup\n    id=\"vertical-demo-group-1\"\n    direction=\"vertical\"\n    class=\"min-h-[200px] max-w-md rounded-lg border\"\n  >\n    <ResizablePanel id=\"vertical-demo-panel-1\" :default-size=\"25\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Header</span>\n      </div>\n    </ResizablePanel>\n    <ResizableHandle id=\"vertical-demo-handle-1\" />\n    <ResizablePanel id=\"vertical-demo-panel-2\" :default-size=\"75\">\n      <div class=\"flex h-full items-center justify-center p-6\">\n        <span class=\"font-semibold\">Content</span>\n      </div>\n    </ResizablePanel>\n  </ResizablePanelGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ResizableVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11848,7 +11890,7 @@
         "path": "example/ScrollAreaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea } from '@/registry/default/ui/scroll-area'\nimport { Separator } from '@/registry/default/ui/separator'\n\nconst tags = Array.from({ length: 50 }).map(\n  (_, i, a) => `v1.2.0-beta.${a.length - i}`,\n)\n</script>\n\n<template>\n  <ScrollArea class=\"h-72 w-48 rounded-md border\">\n    <div class=\"p-4\">\n      <h4 class=\"mb-4 text-sm font-medium leading-none\">\n        Tags\n      </h4>\n\n      <div v-for=\"tag in tags\" :key=\"tag\">\n        <div class=\"text-sm\">\n          {{ tag }}\n        </div>\n        <Separator class=\"my-2\" />\n      </div>\n    </div>\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11864,7 +11906,7 @@
         "path": "example/ScrollAreaHorizontalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ScrollArea, ScrollBar } from '@/registry/default/ui/scroll-area'\n\ninterface Artwork {\n  id: string\n  artist: string\n  art: string\n}\n\nconst works: Artwork[] = [\n  {\n    id: '1',\n    artist: 'Ornella Binni',\n    art: 'https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '2',\n    artist: 'Tom Byrom',\n    art: 'https://images.unsplash.com/photo-1548516173-3cabfa4607e9?auto=format&fit=crop&w=300&q=80',\n  },\n  {\n    id: '3',\n    artist: 'Vladimir Malyavko',\n    art: 'https://images.unsplash.com/photo-1494337480532-3725c85fd2ab?auto=format&fit=crop&w=300&q=80',\n  },\n]\n</script>\n\n<template>\n  <ScrollArea class=\"border rounded-md w-96 whitespace-nowrap\">\n    <div class=\"flex p-4 space-x-4 w-max\">\n      <div v-for=\"artwork in works\" :key=\"artwork.id\">\n        <figure class=\"shrink-0\">\n          <div class=\"overflow-hidden rounded-md\">\n            <img\n              :src=\"artwork.art\"\n              :alt=\"`Photo by ${artwork.artist}`\"\n              class=\"aspect-[3/4] w-36 h-56 object-cover\"\n            >\n          </div>\n          <figcaption class=\"pt-2 text-xs text-muted-foreground\">\n            Photo by\n            <span class=\"font-semibold text-foreground\">\n              {{ artwork.artist }}\n            </span>\n          </figcaption>\n        </figure>\n      </div>\n    </div>\n    <ScrollBar orientation=\"horizontal\" />\n  </ScrollArea>\n</template>\n",
         "type": "registry:example",
-        "target": "ScrollAreaHorizontalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11880,7 +11922,7 @@
         "path": "example/SelectDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[180px]\">\n      <SelectValue placeholder=\"Select a fruit\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>Fruits</SelectLabel>\n        <SelectItem value=\"apple\">\n          Apple\n        </SelectItem>\n        <SelectItem value=\"banana\">\n          Banana\n        </SelectItem>\n        <SelectItem value=\"blueberry\">\n          Blueberry\n        </SelectItem>\n        <SelectItem value=\"grapes\">\n          Grapes\n        </SelectItem>\n        <SelectItem value=\"pineapple\">\n          Pineapple\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11903,7 +11945,7 @@
         "path": "example/SelectForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  email: z\n    .string({\n      required_error: 'Please select an email to display.',\n    })\n    .email(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"email\">\n      <FormItem>\n        <FormLabel>Email</FormLabel>\n\n        <Select v-bind=\"componentField\">\n          <FormControl>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a verified email to display\" />\n            </SelectTrigger>\n          </FormControl>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"m@example.com\">\n                m@example.com\n              </SelectItem>\n              <SelectItem value=\"m@google.com\">\n                m@google.com\n              </SelectItem>\n              <SelectItem value=\"m@support.com\">\n                m@support.com\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FormDescription>\n          You can manage email addresses in your\n          <a href=\"/examples/forms\">email settings</a>.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectForm.vue"
+        "target": ""
       }
     ]
   },
@@ -11919,7 +11961,7 @@
         "path": "example/SelectScrollable.vue",
         "content": "<script lang=\"ts\" setup>\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\n</script>\n\n<template>\n  <Select>\n    <SelectTrigger class=\"w-[280px]\">\n      <SelectValue placeholder=\"Select a timezone\" />\n    </SelectTrigger>\n    <SelectContent>\n      <SelectGroup>\n        <SelectLabel>North America</SelectLabel>\n        <SelectItem value=\"est\">\n          Eastern Standard Time (EST)\n        </SelectItem>\n        <SelectItem value=\"cst\">\n          Central Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"mst\">\n          Mountain Standard Time (MST)\n        </SelectItem>\n        <SelectItem value=\"pst\">\n          Pacific Standard Time (PST)\n        </SelectItem>\n        <SelectItem value=\"akst\">\n          Alaska Standard Time (AKST)\n        </SelectItem>\n        <SelectItem value=\"hst\">\n          Hawaii Standard Time (HST)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Europe & Africa</SelectLabel>\n        <SelectItem value=\"gmt\">\n          Greenwich Mean Time (GMT)\n        </SelectItem>\n        <SelectItem value=\"cet\">\n          Central European Time (CET)\n        </SelectItem>\n        <SelectItem value=\"eet\">\n          Eastern European Time (EET)\n        </SelectItem>\n        <SelectItem value=\"west\">\n          Western European Summer Time (WEST)\n        </SelectItem>\n        <SelectItem value=\"cat\">\n          Central Africa Time (CAT)\n        </SelectItem>\n        <SelectItem value=\"eat\">\n          East Africa Time (EAT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Asia</SelectLabel>\n        <SelectItem value=\"msk\">\n          Moscow Time (MSK)\n        </SelectItem>\n        <SelectItem value=\"ist\">\n          India Standard Time (IST)\n        </SelectItem>\n        <SelectItem value=\"cst_china\">\n          China Standard Time (CST)\n        </SelectItem>\n        <SelectItem value=\"jst\">\n          Japan Standard Time (JST)\n        </SelectItem>\n        <SelectItem value=\"kst\">\n          Korea Standard Time (KST)\n        </SelectItem>\n        <SelectItem value=\"ist_indonesia\">\n          Indonesia Central Standard Time (WITA)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>Australia & Pacific</SelectLabel>\n        <SelectItem value=\"awst\">\n          Australian Western Standard Time (AWST)\n        </SelectItem>\n        <SelectItem value=\"acst\">\n          Australian Central Standard Time (ACST)\n        </SelectItem>\n        <SelectItem value=\"aest\">\n          Australian Eastern Standard Time (AEST)\n        </SelectItem>\n        <SelectItem value=\"nzst\">\n          New Zealand Standard Time (NZST)\n        </SelectItem>\n        <SelectItem value=\"fjt\">\n          Fiji Time (FJT)\n        </SelectItem>\n      </SelectGroup>\n      <SelectGroup>\n        <SelectLabel>South America</SelectLabel>\n        <SelectItem value=\"art\">\n          Argentina Time (ART)\n        </SelectItem>\n        <SelectItem value=\"bot\">\n          Bolivia Time (BOT)\n        </SelectItem>\n        <SelectItem value=\"brt\">\n          Brasilia Time (BRT)\n        </SelectItem>\n        <SelectItem value=\"clt\">\n          Chile Standard Time (CLT)\n        </SelectItem>\n      </SelectGroup>\n    </SelectContent>\n  </Select>\n</template>\n",
         "type": "registry:example",
-        "target": "SelectScrollable.vue"
+        "target": ""
       }
     ]
   },
@@ -11935,7 +11977,7 @@
         "path": "example/SeparatorDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Separator } from '@/registry/default/ui/separator'\n</script>\n\n<template>\n  <div>\n    <div class=\"space-y-1\">\n      <h4 class=\"text-sm font-medium leading-none\">\n        Radix Primitives\n      </h4>\n      <p class=\"text-sm text-muted-foreground\">\n        An open-source UI component library.\n      </p>\n    </div>\n    <Separator class=\"my-4\" label=\"Or\" />\n    <div class=\"flex h-5 items-center space-x-4 text-sm\">\n      <div>Blog</div>\n      <Separator orientation=\"vertical\" />\n      <div>Docs</div>\n      <Separator orientation=\"vertical\" />\n      <div>Source</div>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SeparatorDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11954,7 +11996,7 @@
         "path": "example/SheetDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\n</script>\n\n<template>\n  <Sheet>\n    <SheetTrigger as-child>\n      <Button variant=\"outline\">\n        Open\n      </Button>\n    </SheetTrigger>\n    <SheetContent>\n      <SheetHeader>\n        <SheetTitle>Edit profile</SheetTitle>\n        <SheetDescription>\n          Make changes to your profile here. Click save when you're done.\n        </SheetDescription>\n      </SheetHeader>\n      <div class=\"grid gap-4 py-4\">\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"name\" class=\"text-right\">\n            Name\n          </Label>\n          <Input id=\"name\" default-value=\"Pedro Duarte\" class=\"col-span-3\" />\n        </div>\n        <div class=\"grid grid-cols-4 items-center gap-4\">\n          <Label for=\"username\" class=\"text-right\">\n            Username\n          </Label>\n          <Input id=\"username\" default-value=\"@peduarte\" class=\"col-span-3\" />\n        </div>\n      </div>\n      <SheetFooter>\n        <SheetClose as-child>\n          <Button type=\"submit\">\n            Save changes\n          </Button>\n        </SheetClose>\n      </SheetFooter>\n    </SheetContent>\n  </Sheet>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11973,7 +12015,7 @@
         "path": "example/SheetSideDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetTitle,\n  SheetTrigger,\n} from '@/registry/default/ui/sheet'\nimport { ref } from 'vue'\n\nconst SHEET_SIDES = ['top', 'right', 'bottom', 'left'] as const\n\nconst username = ref('')\n</script>\n\n<template>\n  <div class=\"grid grid-cols-2 gap-2\">\n    <Sheet v-for=\"side in SHEET_SIDES\" :key=\"side\">\n      <SheetTrigger as-child>\n        <Button variant=\"outline\">\n          {{ side }}\n        </Button>\n      </SheetTrigger>\n      <SheetContent :side=\"side\">\n        <SheetHeader>\n          <SheetTitle>Edit profile</SheetTitle>\n          <SheetDescription>\n            Make changes to your profile here. Click save when you're done.\n          </SheetDescription>\n        </SheetHeader>\n        <div class=\"grid gap-4 py-4\">\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"name\" class=\"text-right\">Name</Label>\n            <Input id=\"name\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n          <div class=\"grid items-center grid-cols-4 gap-4\">\n            <Label for=\"username\" class=\"text-right\">Username</Label>\n            <Input id=\"username\" v-model=\"username\" class=\"col-span-3\" />\n          </div>\n        </div>\n        <SheetFooter>\n          <SheetClose as-child>\n            <Button type=\"submit\">\n              Save changes\n            </Button>\n          </SheetClose>\n        </SheetFooter>\n      </SheetContent>\n    </Sheet>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SheetSideDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -11989,7 +12031,7 @@
         "path": "example/SkeletonCard.vue",
         "content": "<script lang=\"ts\" setup>\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex flex-col space-y-3\">\n    <Skeleton class=\"h-[125px] w-[250px] rounded-xl\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonCard.vue"
+        "target": ""
       }
     ]
   },
@@ -12005,7 +12047,7 @@
         "path": "example/SkeletonDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Skeleton } from '@/registry/default/ui/skeleton'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-4\">\n    <Skeleton class=\"h-12 w-12 rounded-full\" />\n    <div class=\"space-y-2\">\n      <Skeleton class=\"h-4 w-[250px]\" />\n      <Skeleton class=\"h-4 w-[200px]\" />\n    </div>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SkeletonDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12022,7 +12064,7 @@
         "path": "example/SliderDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { ref } from 'vue'\n\nconst modelValue = ref([50])\n</script>\n\n<template>\n  <Slider\n    v-model=\"modelValue\"\n    :max=\"100\"\n    :step=\"1\"\n    :class=\"cn('w-3/5', $attrs.class ?? '')\"\n  />\n</template>\n",
         "type": "registry:example",
-        "target": "SliderDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12045,7 +12087,7 @@
         "path": "example/SliderForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Slider } from '@/registry/default/ui/slider'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  duration: z.array(\n    z.number().min(0).max(60),\n  ),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    duration: [30],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"duration\">\n      <FormItem>\n        <FormLabel>Duration</FormLabel>\n        <FormControl>\n          <Slider\n            v-bind=\"componentField\"\n            :default-value=\"[30]\"\n            :max=\"100\"\n            :min=\"0\"\n            :step=\"5\"\n          />\n          <FormDescription class=\"flex justify-between\">\n            <span>How many minutes are you available?</span>\n            <span>{{ value?.[0] }} min</span>\n          </FormDescription>\n        </FormControl>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SliderForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12063,7 +12105,7 @@
         "path": "example/SonnerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Button\n    variant=\"outline\"\n    @click=\"\n      () => {\n        toast('Event has been created', {\n          description: 'Sunday, December 03, 2023 at 9:00 AM',\n          action: {\n            label: 'Undo',\n            onClick: () => console.log('Undo'),\n          },\n        });\n      }\n    \"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12082,7 +12124,7 @@
         "path": "example/SonnerWithDialog.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@/registry/default/ui/dialog'\nimport { toast } from 'vue-sonner'\n</script>\n\n<template>\n  <Dialog>\n    <DialogTrigger as-child>\n      <Button variant=\"outline\">\n        Dialog with toast\n      </Button>\n    </DialogTrigger>\n    <DialogContent\n      class=\"sm:max-w-md\"\n      @interact-outside=\"event => {\n        const target = event.target as HTMLElement;\n        if (target?.closest('[data-sonner-toaster]')) return event.preventDefault()\n      }\"\n    >\n      <DialogHeader>\n        <DialogTitle>Vue Sonner Toast</DialogTitle>\n        <DialogDescription> Dialog with toast </DialogDescription>\n      </DialogHeader>\n      <div class=\"grid gap-4\">\n        <Button\n          size=\"sm\"\n          class=\"px-3\"\n          @click=\"\n            () => {\n              toast('Event has been created', {\n                description: 'Sunday, December 03, 2023 at 9:00 AM',\n                action: {\n                  label: 'Undo',\n                  onClick: () => console.log('Undo'),\n                },\n              });\n            }\n          \"\n        >\n          Toast\n        </Button>\n      </div>\n    </DialogContent>\n  </Dialog>\n</template>\n",
         "type": "registry:example",
-        "target": "SonnerWithDialog.vue"
+        "target": ""
       }
     ]
   },
@@ -12098,7 +12140,7 @@
         "path": "example/StepperDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\n\nimport { BookUser, Check, CreditCard, Truck } from 'lucide-vue-next'\n\nconst steps = [{\n  step: 1,\n  title: 'Address',\n  description: 'Add your address here',\n  icon: BookUser,\n}, {\n  step: 2,\n  title: 'Shipping',\n  description: 'Set your preferred shipping method',\n  icon: Truck,\n}, {\n  step: 3,\n  title: 'Payment',\n  description: 'Add any payment information you have',\n  icon: CreditCard,\n}, {\n  step: 4,\n  title: 'Checkout',\n  description: 'Confirm your order',\n  icon: Check,\n}]\n</script>\n\n<template>\n  <Stepper>\n    <StepperItem\n      v-for=\"item in steps\"\n      :key=\"item.step\"\n      class=\"basis-1/4\"\n      :step=\"item.step\"\n    >\n      <StepperTrigger>\n        <StepperIndicator>\n          <component :is=\"item.icon\" class=\"w-4 h-4\" />\n        </StepperIndicator>\n        <div class=\"flex flex-col\">\n          <StepperTitle>\n            {{ item.title }}\n          </StepperTitle>\n          <StepperDescription>\n            {{ item.description }}\n          </StepperDescription>\n        </div>\n      </StepperTrigger>\n      <StepperSeparator\n        v-if=\"item.step !== steps[steps.length - 1].step\"\n        class=\"w-full h-px\"\n      />\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12119,7 +12161,7 @@
         "path": "example/StepperForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/registry/default/ui/form'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\nimport { h, ref } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = [\n  z.object({\n    fullName: z.string(),\n    email: z.string().email(),\n  }),\n  z.object({\n    password: z.string().min(2).max(50),\n    confirmPassword: z.string(),\n  }).refine(\n    (values) => {\n      return values.password === values.confirmPassword\n    },\n    {\n      message: 'Passwords must match!',\n      path: ['confirmPassword'],\n    },\n  ),\n  z.object({\n    favoriteDrink: z.union([z.literal('coffee'), z.literal('tea'), z.literal('soda')]),\n  }),\n]\n\nconst stepIndex = ref(1)\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Your password',\n    description: 'Choose a password',\n  },\n  {\n    step: 3,\n    title: 'Your Favorite Drink',\n    description: 'Choose a drink',\n  },\n]\n\nfunction onSubmit(values: any) {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n}\n</script>\n\n<template>\n  <Form\n    v-slot=\"{ meta, values, validate }\"\n    as=\"\" keep-values :validation-schema=\"toTypedSchema(formSchema[stepIndex - 1])\"\n  >\n    <Stepper v-slot=\"{ isNextDisabled, isPrevDisabled, nextStep, prevStep }\" v-model=\"stepIndex\" class=\"block w-full\">\n      <form\n        @submit=\"(e) => {\n          e.preventDefault()\n          validate()\n\n          if (stepIndex === steps.length && meta.valid) {\n            onSubmit(values)\n          }\n        }\"\n      >\n        <div class=\"flex w-full flex-start gap-2\">\n          <StepperItem\n            v-for=\"step in steps\"\n            :key=\"step.step\"\n            v-slot=\"{ state }\"\n            class=\"relative flex w-full flex-col items-center justify-center\"\n            :step=\"step.step\"\n          >\n            <StepperSeparator\n              v-if=\"step.step !== steps[steps.length - 1].step\"\n              class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n            />\n\n            <StepperTrigger as-child>\n              <Button\n                :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n                size=\"icon\"\n                class=\"z-10 rounded-full shrink-0\"\n                :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n                :disabled=\"state !== 'completed' && !meta.valid\"\n              >\n                <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n                <Circle v-if=\"state === 'active'\" />\n                <Dot v-if=\"state === 'inactive'\" />\n              </Button>\n            </StepperTrigger>\n\n            <div class=\"mt-5 flex flex-col items-center text-center\">\n              <StepperTitle\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"text-sm font-semibold transition lg:text-base\"\n              >\n                {{ step.title }}\n              </StepperTitle>\n              <StepperDescription\n                :class=\"[state === 'active' && 'text-primary']\"\n                class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n              >\n                {{ step.description }}\n              </StepperDescription>\n            </div>\n          </StepperItem>\n        </div>\n\n        <div class=\"flex flex-col gap-4 mt-4\">\n          <template v-if=\"stepIndex === 1\">\n            <FormField v-slot=\"{ componentField }\" name=\"fullName\">\n              <FormItem>\n                <FormLabel>Full Name</FormLabel>\n                <FormControl>\n                  <Input type=\"text\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"email\">\n              <FormItem>\n                <FormLabel>Email</FormLabel>\n                <FormControl>\n                  <Input type=\"email \" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 2\">\n            <FormField v-slot=\"{ componentField }\" name=\"password\">\n              <FormItem>\n                <FormLabel>Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n\n            <FormField v-slot=\"{ componentField }\" name=\"confirmPassword\">\n              <FormItem>\n                <FormLabel>Confirm Password</FormLabel>\n                <FormControl>\n                  <Input type=\"password\" v-bind=\"componentField\" />\n                </FormControl>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n\n          <template v-if=\"stepIndex === 3\">\n            <FormField v-slot=\"{ componentField }\" name=\"favoriteDrink\">\n              <FormItem>\n                <FormLabel>Drink</FormLabel>\n\n                <Select v-bind=\"componentField\">\n                  <FormControl>\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a drink\" />\n                    </SelectTrigger>\n                  </FormControl>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"coffee\">\n                        Coffe\n                      </SelectItem>\n                      <SelectItem value=\"tea\">\n                        Tea\n                      </SelectItem>\n                      <SelectItem value=\"soda\">\n                        Soda\n                      </SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <FormMessage />\n              </FormItem>\n            </FormField>\n          </template>\n        </div>\n\n        <div class=\"flex items-center justify-between mt-4\">\n          <Button :disabled=\"isPrevDisabled\" variant=\"outline\" size=\"sm\" @click=\"prevStep()\">\n            Back\n          </Button>\n          <div class=\"flex items-center gap-3\">\n            <Button v-if=\"stepIndex !== 3\" :type=\"meta.valid ? 'button' : 'submit'\" :disabled=\"isNextDisabled\" size=\"sm\" @click=\"meta.valid && nextStep()\">\n              Next\n            </Button>\n            <Button\n              v-if=\"stepIndex === 3\" size=\"sm\" type=\"submit\"\n            >\n              Submit\n            </Button>\n          </div>\n        </div>\n      </form>\n    </Stepper>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12136,7 +12178,7 @@
         "path": "example/StepperHorizental.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description: 'Provide your name and email',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description: 'Start collaborating with your team',\n  },\n]\n</script>\n\n<template>\n  <Stepper class=\"flex w-full items-start gap-2\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full flex-col items-center justify-center\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"mt-5 flex flex-col items-center text-center\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperHorizental.vue"
+        "target": ""
       }
     ]
   },
@@ -12153,7 +12195,7 @@
         "path": "example/StepperVertical.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle, StepperTrigger } from '@/registry/default/ui/stepper'\nimport { Check, Circle, Dot } from 'lucide-vue-next'\n\nconst steps = [\n  {\n    step: 1,\n    title: 'Your details',\n    description:\n        'Provide your name and email address. We will use this information to create your account',\n  },\n  {\n    step: 2,\n    title: 'Company details',\n    description: 'A few details about your company will help us personalize your experience',\n  },\n  {\n    step: 3,\n    title: 'Invite your team',\n    description:\n        'Start collaborating with your team by inviting them to join your account. You can skip this step and invite them later',\n  },\n]\n</script>\n\n<template>\n  <Stepper orientation=\"vertical\" class=\"mx-auto flex w-full max-w-md flex-col justify-start gap-10\">\n    <StepperItem\n      v-for=\"step in steps\"\n      :key=\"step.step\"\n      v-slot=\"{ state }\"\n      class=\"relative flex w-full items-start gap-6\"\n      :step=\"step.step\"\n    >\n      <StepperSeparator\n        v-if=\"step.step !== steps[steps.length - 1].step\"\n        class=\"absolute left-[18px] top-[38px] block h-[105%] w-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary\"\n      />\n\n      <StepperTrigger as-child>\n        <Button\n          :variant=\"state === 'completed' || state === 'active' ? 'default' : 'outline'\"\n          size=\"icon\"\n          class=\"z-10 rounded-full shrink-0\"\n          :class=\"[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']\"\n        >\n          <Check v-if=\"state === 'completed'\" class=\"size-5\" />\n          <Circle v-if=\"state === 'active'\" />\n          <Dot v-if=\"state === 'inactive'\" />\n        </Button>\n      </StepperTrigger>\n\n      <div class=\"flex flex-col gap-1\">\n        <StepperTitle\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"text-sm font-semibold transition lg:text-base\"\n        >\n          {{ step.title }}\n        </StepperTitle>\n        <StepperDescription\n          :class=\"[state === 'active' && 'text-primary']\"\n          class=\"sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm\"\n        >\n          {{ step.description }}\n        </StepperDescription>\n      </div>\n    </StepperItem>\n  </Stepper>\n</template>\n",
         "type": "registry:example",
-        "target": "StepperVertical.vue"
+        "target": ""
       }
     ]
   },
@@ -12170,7 +12212,7 @@
         "path": "example/SwitchDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Switch } from '@/registry/default/ui/switch'\n</script>\n\n<template>\n  <div class=\"flex items-center space-x-2\">\n    <Switch id=\"airplane-mode\" />\n    <Label for=\"airplane-mode\">Airplane Mode</Label>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12193,7 +12235,7 @@
         "path": "example/SwitchForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n} from '@/registry/default/ui/form'\nimport { Switch } from '@/registry/default/ui/switch'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  marketing_emails: z.boolean().default(false).optional(),\n  security_emails: z.boolean(),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    security_emails: true,\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <div>\n      <h3 class=\"mb-4 text-lg font-medium\">\n        Email Notifications\n      </h3>\n\n      <div class=\"space-y-4\">\n        <FormField v-slot=\"{ value, handleChange }\" name=\"marketing_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Marketing emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about new products, features, and more.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n        <FormField v-slot=\"{ value, handleChange }\" name=\"security_emails\">\n          <FormItem class=\"flex flex-row items-center justify-between rounded-lg border p-4\">\n            <div class=\"space-y-0.5\">\n              <FormLabel class=\"text-base\">\n                Security emails\n              </FormLabel>\n              <FormDescription>\n                Receive emails about your account security.\n              </FormDescription>\n            </div>\n            <FormControl>\n              <Switch\n                :model-value=\"value\"\n                disabled\n                aria-readonly\n                @update:model-value=\"handleChange\"\n              />\n            </FormControl>\n          </FormItem>\n        </FormField>\n      </div>\n    </div>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "SwitchForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12209,7 +12251,7 @@
         "path": "example/TableDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\n\nconst invoices = [\n  {\n    invoice: 'INV001',\n    paymentStatus: 'Paid',\n    totalAmount: '$250.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV002',\n    paymentStatus: 'Pending',\n    totalAmount: '$150.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV003',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$350.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV004',\n    paymentStatus: 'Paid',\n    totalAmount: '$450.00',\n    paymentMethod: 'Credit Card',\n  },\n  {\n    invoice: 'INV005',\n    paymentStatus: 'Paid',\n    totalAmount: '$550.00',\n    paymentMethod: 'PayPal',\n  },\n  {\n    invoice: 'INV006',\n    paymentStatus: 'Pending',\n    totalAmount: '$200.00',\n    paymentMethod: 'Bank Transfer',\n  },\n  {\n    invoice: 'INV007',\n    paymentStatus: 'Unpaid',\n    totalAmount: '$300.00',\n    paymentMethod: 'Credit Card',\n  },\n]\n</script>\n\n<template>\n  <Table>\n    <TableCaption>A list of your recent invoices.</TableCaption>\n    <TableHeader>\n      <TableRow>\n        <TableHead class=\"w-[100px]\">\n          Invoice\n        </TableHead>\n        <TableHead>Status</TableHead>\n        <TableHead>Method</TableHead>\n        <TableHead class=\"text-right\">\n          Amount\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n    <TableBody>\n      <TableRow v-for=\"invoice in invoices\" :key=\"invoice.invoice\">\n        <TableCell class=\"font-medium\">\n          {{ invoice.invoice }}\n        </TableCell>\n        <TableCell>{{ invoice.paymentStatus }}</TableCell>\n        <TableCell>{{ invoice.paymentMethod }}</TableCell>\n        <TableCell class=\"text-right\">\n          {{ invoice.totalAmount }}\n        </TableCell>\n      </TableRow>\n    </TableBody>\n  </Table>\n</template>\n",
         "type": "registry:example",
-        "target": "TableDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12229,7 +12271,7 @@
         "path": "example/TabsDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\">\n    <TabsList class=\"grid w-full grid-cols-2\">\n      <TabsTrigger value=\"account\">\n        Account\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12249,7 +12291,7 @@
         "path": "example/TabsVerticalDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\n</script>\n\n<template>\n  <Tabs default-value=\"account\" class=\"w-[400px]\" orientation=\"vertical\">\n    <TabsList class=\"grid w-full grid-cols-1\">\n      <TabsTrigger value=\"account\">\n        Accounts\n      </TabsTrigger>\n      <TabsTrigger value=\"password\">\n        Password\n      </TabsTrigger>\n    </TabsList>\n    <TabsContent value=\"account\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Account</CardTitle>\n          <CardDescription>\n            Make changes to your account here. Click save when you're done.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"name\">Name</Label>\n            <Input id=\"name\" default-value=\"Pedro Duarte\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"username\">Username</Label>\n            <Input id=\"username\" default-value=\"@peduarte\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save changes</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n    <TabsContent value=\"password\">\n      <Card>\n        <CardHeader>\n          <CardTitle>Password</CardTitle>\n          <CardDescription>\n            Change your password here. After saving, you'll be logged out.\n          </CardDescription>\n        </CardHeader>\n        <CardContent class=\"space-y-2\">\n          <div class=\"space-y-1\">\n            <Label for=\"current\">Current password</Label>\n            <Input id=\"current\" type=\"password\" />\n          </div>\n          <div class=\"space-y-1\">\n            <Label for=\"new\">New password</Label>\n            <Input id=\"new\" type=\"password\" />\n          </div>\n        </CardContent>\n        <CardFooter>\n          <Button>Save password</Button>\n        </CardFooter>\n      </Card>\n    </TabsContent>\n  </Tabs>\n</template>\n",
         "type": "registry:example",
-        "target": "TabsVerticalDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12266,7 +12308,7 @@
         "path": "example/TagsInputComboboxDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/registry/default/ui/command'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ComboboxAnchor, ComboboxContent, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'reka-ui'\nimport { computed, ref } from 'vue'\n\nconst frameworks = [\n  { value: 'next.js', label: 'Next.js' },\n  { value: 'sveltekit', label: 'SvelteKit' },\n  { value: 'nuxt', label: 'Nuxt' },\n  { value: 'remix', label: 'Remix' },\n  { value: 'astro', label: 'Astro' },\n]\n\nconst modelValue = ref<string[]>([])\nconst open = ref(false)\nconst searchTerm = ref('')\n\nconst filteredFrameworks = computed(() => frameworks.filter(i => !modelValue.value.includes(i.label)))\n</script>\n\n<template>\n  <TagsInput class=\"px-0 gap-0 w-80\" :model-value=\"modelValue\">\n    <div class=\"flex gap-2 flex-wrap items-center px-3\">\n      <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n        <TagsInputItemText />\n        <TagsInputItemDelete />\n      </TagsInputItem>\n    </div>\n\n    <ComboboxRoot v-model=\"modelValue\" v-model:open=\"open\" v-model:search-term=\"searchTerm\" class=\"w-full\">\n      <ComboboxAnchor as-child>\n        <ComboboxInput placeholder=\"Framework...\" as-child>\n          <TagsInputInput class=\"w-full px-3\" :class=\"modelValue.length > 0 ? 'mt-2' : ''\" @keydown.enter.prevent />\n        </ComboboxInput>\n      </ComboboxAnchor>\n\n      <ComboboxPortal>\n        <ComboboxContent>\n          <CommandList\n            position=\"popper\"\n            class=\"w-[--reka-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\"\n          >\n            <CommandEmpty />\n            <CommandGroup>\n              <CommandItem\n                v-for=\"framework in filteredFrameworks\" :key=\"framework.value\" :value=\"framework.label\"\n                @select.prevent=\"(ev) => {\n                  if (typeof ev.detail.value === 'string') {\n                    searchTerm = ''\n                    modelValue.push(ev.detail.value)\n                  }\n\n                  if (filteredFrameworks.length === 0) {\n                    open = false\n                  }\n                }\"\n              >\n                {{ framework.label }}\n              </CommandItem>\n            </CommandGroup>\n          </CommandList>\n        </ComboboxContent>\n      </ComboboxPortal>\n    </ComboboxRoot>\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputComboboxDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12282,7 +12324,7 @@
         "path": "example/TagsInputDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { ref } from 'vue'\n\nconst modelValue = ref(['Apple', 'Banana'])\n</script>\n\n<template>\n  <TagsInput v-model=\"modelValue\">\n    <TagsInputItem v-for=\"item in modelValue\" :key=\"item\" :value=\"item\">\n      <TagsInputItemText />\n      <TagsInputItemDelete />\n    </TagsInputItem>\n\n    <TagsInputInput placeholder=\"Fruits...\" />\n  </TagsInput>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12305,7 +12347,7 @@
         "path": "example/TagsInputFormDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/registry/default/ui/tags-input'\nimport { toast } from '@/registry/default/ui/toast'\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport { z } from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  fruits: z.array(z.string()).min(1).max(3),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n  initialValues: {\n    fruits: ['Apple', 'Banana'],\n  },\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-2/3 space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ value }\" name=\"fruits\">\n      <FormItem>\n        <FormLabel>Fruits</FormLabel>\n        <FormControl>\n          <TagsInput :model-value=\"value\">\n            <TagsInputItem v-for=\"item in value\" :key=\"item\" :value=\"item\">\n              <TagsInputItemText />\n              <TagsInputItemDelete />\n            </TagsInputItem>\n\n            <TagsInputInput placeholder=\"Fruits...\" />\n          </TagsInput>\n        </FormControl>\n        <FormDescription>\n          Select your favorite fruits.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TagsInputFormDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12321,7 +12363,7 @@
         "path": "example/TextareaDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12337,7 +12379,7 @@
         "path": "example/TextareaDisabled.vue",
         "content": "<script setup lang=\"ts\">\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <Textarea placeholder=\"Type your message here.\" disabled />\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaDisabled.vue"
+        "target": ""
       }
     ]
   },
@@ -12360,7 +12402,7 @@
         "path": "example/TextareaForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { toast } from '@/registry/default/ui/toast'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { useForm } from 'vee-validate'\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  bio: z\n    .string()\n    .min(10, {\n      message: 'Bio must be at least 10 characters.',\n    })\n    .max(160, {\n      message: 'Bio must not be longer than 30 characters.',\n    }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"w-full space-y-6\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField }\" name=\"bio\">\n      <FormItem>\n        <FormLabel>Bio</FormLabel>\n        <FormControl>\n          <Textarea\n            placeholder=\"Tell us a little bit about yourself\"\n            class=\"resize-none\"\n            v-bind=\"componentField\"\n          />\n        </FormControl>\n        <FormDescription>\n          You can <span>@mention</span> other users and organizations.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </form>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12377,7 +12419,7 @@
         "path": "example/TextareaWithButton.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-2\">\n    <Textarea placeholder=\"Type your message here.\" />\n    <Button>Send message</Button>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithButton.vue"
+        "target": ""
       }
     ]
   },
@@ -12394,7 +12436,7 @@
         "path": "example/TextareaWithLabel.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message\">Your message</Label>\n    <Textarea id=\"message\" placeholder=\"Type your message here.\" />\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithLabel.vue"
+        "target": ""
       }
     ]
   },
@@ -12411,7 +12453,7 @@
         "path": "example/TextareaWithText.vue",
         "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport { Textarea } from '@/registry/default/ui/textarea'\n</script>\n\n<template>\n  <div class=\"grid w-full gap-1.5\">\n    <Label for=\"message-2\">Your message</Label>\n    <Textarea id=\"message-2\" placeholder=\"Type your message here.\" />\n    <p class=\"text-sm text-muted-foreground\">\n      Your message will be copied to the support team.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TextareaWithText.vue"
+        "target": ""
       }
     ]
   },
@@ -12428,7 +12470,7 @@
         "path": "example/ToastDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Scheduled: Catch up',\n        description: 'Friday, February 10, 2023 at 5:57 PM',\n      });\n    }\"\n  >\n    Add to calendar\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12446,7 +12488,7 @@
         "path": "example/ToastDestructive.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        variant: 'destructive',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastDestructive.vue"
+        "target": ""
       }
     ]
   },
@@ -12463,7 +12505,7 @@
         "path": "example/ToastSimple.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        description: 'Your message has been sent.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastSimple.vue"
+        "target": ""
       }
     ]
   },
@@ -12481,7 +12523,7 @@
         "path": "example/ToastWithAction.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { ToastAction } from '@/registry/default/ui/toast'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\nimport { h } from 'vue'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n        action: h(ToastAction, {\n          altText: 'Try again',\n        }, {\n          default: () => 'Try again',\n        }),\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithAction.vue"
+        "target": ""
       }
     ]
   },
@@ -12498,7 +12540,7 @@
         "path": "example/ToastWithTitle.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { useToast } from '@/registry/default/ui/toast/use-toast'\n\nconst { toast } = useToast()\n</script>\n\n<template>\n  <Button\n    variant=\"outline\" @click=\"() => {\n      toast({\n        title: 'Uh oh! Something went wrong.',\n        description: 'There was a problem with your request.',\n      });\n    }\"\n  >\n    Show Toast\n  </Button>\n</template>\n",
         "type": "registry:example",
-        "target": "ToastWithTitle.vue"
+        "target": ""
       }
     ]
   },
@@ -12514,7 +12556,7 @@
         "path": "example/ToggleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Bold } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle bold\">\n    <Bold class=\"h-4 w-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12530,7 +12572,7 @@
         "path": "example/ToggleDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle underline\" disabled>\n    <Underline class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12546,7 +12588,7 @@
         "path": "example/ToggleGroupDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12562,7 +12604,7 @@
         "path": "example/ToggleGroupDisabledDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" disabled>\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupDisabledDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12578,7 +12620,7 @@
         "path": "example/ToggleGroupLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"lg\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12594,7 +12636,7 @@
         "path": "example/ToggleGroupOutlineDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" variant=\"outline\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupOutlineDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12610,7 +12652,7 @@
         "path": "example/ToggleGroupSingleDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"single\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSingleDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12626,7 +12668,7 @@
         "path": "example/ToggleGroupSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\n\nimport { Bold, Italic, Underline } from 'lucide-vue-next'\n</script>\n\n<template>\n  <ToggleGroup type=\"multiple\" size=\"sm\">\n    <ToggleGroupItem value=\"bold\" aria-label=\"Toggle bold\">\n      <Bold class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"italic\" aria-label=\"Toggle italic\">\n      <Italic class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n    <ToggleGroupItem value=\"underline\" aria-label=\"Toggle underline\">\n      <Underline class=\"h-4 w-4\" />\n    </ToggleGroupItem>\n  </ToggleGroup>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleGroupSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12642,7 +12684,7 @@
         "path": "example/ToggleItalicDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle variant=\"outline\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12658,7 +12700,7 @@
         "path": "example/ToggleItalicWithTextDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4 mr-2\" />\n    Italic\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleItalicWithTextDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12674,7 +12716,7 @@
         "path": "example/ToggleLargeDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleLargeDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12690,7 +12732,7 @@
         "path": "example/ToggleSmallDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Toggle } from '@/registry/default/ui/toggle'\n\nimport { Italic } from 'lucide-vue-next'\n</script>\n\n<template>\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">\n    <Italic class=\"w-4 h-4\" />\n  </Toggle>\n</template>\n",
         "type": "registry:example",
-        "target": "ToggleSmallDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12707,7 +12749,7 @@
         "path": "example/TooltipDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\n</script>\n\n<template>\n  <TooltipProvider>\n    <Tooltip>\n      <TooltipTrigger as-child>\n        <Button variant=\"outline\">\n          Hover\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>Add to library</p>\n      </TooltipContent>\n    </Tooltip>\n  </TooltipProvider>\n</template>\n",
         "type": "registry:example",
-        "target": "TooltipDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12721,7 +12763,7 @@
         "path": "example/TypographyBlockquote.vue",
         "content": "<template>\n  <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n    \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair that\n    they should pay for the privilege.\"\n  </blockquote>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyBlockquote.vue"
+        "target": ""
       }
     ]
   },
@@ -12735,7 +12777,7 @@
         "path": "example/TypographyDemo.vue",
         "content": "<template>\n  <div>\n    <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n      The Joke Tax Chronicles\n    </h1>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Once upon a time, in a far-off land, there was a very lazy king who\n      spent all day lounging on his throne. One day, his advisors came to him\n      with a problem: the kingdom was running out of money.\n    </p>\n    <h2\n      class=\"mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n    >\n      The King's Plan\n    </h2>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king thought long and hard, and finally came up with\n      <a\n        href=\"#\"\n        class=\"font-medium text-primary underline underline-offset-4\"\n      >\n        a brilliant plan\n      </a>\n      : he would tax the jokes in the kingdom.\n    </p>\n    <blockquote class=\"mt-6 border-l-2 pl-6 italic\">\n      \"After all,\" he said, \"everyone enjoys a good joke, so it's only fair\n      that they should pay for the privilege.\"\n    </blockquote>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The Joke Tax\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king's subjects were not amused. They grumbled and complained, but\n      the king was firm:\n    </p>\n    <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n      <li>1st level of puns: 5 gold coins</li>\n      <li>2nd level of jokes: 10 gold coins</li>\n      <li>3rd level of one-liners : 20 gold coins</li>\n    </ul>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      As a result, people stopped telling jokes, and the kingdom fell into a\n      gloom. But there was one person who refused to let the king's\n      foolishness get him down: a court jester named Jokester.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      Jokester's Revolt\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      Jokester began sneaking into the castle in the middle of the night and\n      leaving jokes all over the place: under the king's pillow, in his soup,\n      even in the royal toilet. The king was furious, but he couldn't seem to\n      stop Jokester.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      And then, one day, the people of the kingdom discovered that the jokes\n      left by Jokester were so funny that they couldn't help but laugh. And\n      once they started laughing, they couldn't stop.\n    </p>\n    <h3 class=\"mt-8 scroll-m-20 text-2xl font-semibold tracking-tight\">\n      The People's Rebellion\n    </h3>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The people of the kingdom, feeling uplifted by the laughter, started to\n      tell jokes and puns again, and soon the entire kingdom was in on the\n      joke.\n    </p>\n    <div class=\"my-6 w-full overflow-y-auto\">\n      <table class=\"w-full\">\n        <thead>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              King's Treasury\n            </th>\n            <th\n              class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              People's happiness\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Empty\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Overflowing\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Modest\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Satisfied\n            </td>\n          </tr>\n          <tr class=\"m-0 border-t p-0 even:bg-muted\">\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Full\n            </td>\n            <td\n              class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n            >\n              Ecstatic\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The king, seeing how much happier his subjects were, realized the error\n      of his ways and repealed the joke tax. Jokester was declared a hero, and\n      the kingdom lived happily ever after.\n    </p>\n    <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n      The moral of the story is: never underestimate the power of a good laugh\n      and always be careful of bad ideas.\n    </p>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12749,7 +12791,7 @@
         "path": "example/TypographyH1.vue",
         "content": "<template>\n  <h1 class=\"scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl\">\n    Taxing Laughter: The Joke Tax Chronicles\n  </h1>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH1.vue"
+        "target": ""
       }
     ]
   },
@@ -12763,7 +12805,7 @@
         "path": "example/TypographyH2.vue",
         "content": "<template>\n  <h2\n    class=\"scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0\"\n  >\n    The People of the Kingdom\n  </h2>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH2.vue"
+        "target": ""
       }
     ]
   },
@@ -12777,7 +12819,7 @@
         "path": "example/TypographyH3.vue",
         "content": "<template>\n  <h3 class=\"scroll-m-20 text-2xl font-semibold tracking-tight\">\n    The Joke Tax\n  </h3>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH3.vue"
+        "target": ""
       }
     ]
   },
@@ -12791,7 +12833,7 @@
         "path": "example/TypographyH4.vue",
         "content": "<template>\n  <h4 class=\"scroll-m-20 text-xl font-semibold tracking-tight\">\n    People stopped telling jokes\n  </h4>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyH4.vue"
+        "target": ""
       }
     ]
   },
@@ -12805,7 +12847,7 @@
         "path": "example/TypographyInlineCode.vue",
         "content": "<template>\n  <code\n    class=\"relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold\"\n  >\n    reka-ui\n  </code>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyInlineCode.vue"
+        "target": ""
       }
     ]
   },
@@ -12819,7 +12861,7 @@
         "path": "example/TypographyLarge.vue",
         "content": "<template>\n  <div class=\"text-lg font-semibold\">\n    Are you absolutely sure?\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLarge.vue"
+        "target": ""
       }
     ]
   },
@@ -12833,7 +12875,7 @@
         "path": "example/TypographyLead.vue",
         "content": "<template>\n  <p class=\"text-xl text-muted-foreground\">\n    A modal dialog that interrupts the user with important content and expects a\n    response.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyLead.vue"
+        "target": ""
       }
     ]
   },
@@ -12847,7 +12889,7 @@
         "path": "example/TypographyList.vue",
         "content": "<template>\n  <ul class=\"my-6 ml-6 list-disc [&>li]:mt-2\">\n    <li>1st level of puns: 5 gold coins</li>\n    <li>2nd level of jokes: 10 gold coins</li>\n    <li>3rd level of one-liners : 20 gold coins</li>\n  </ul>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyList.vue"
+        "target": ""
       }
     ]
   },
@@ -12861,7 +12903,7 @@
         "path": "example/TypographyMuted.vue",
         "content": "<template>\n  <p class=\"text-sm text-muted-foreground\">\n    Enter your email address.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyMuted.vue"
+        "target": ""
       }
     ]
   },
@@ -12875,7 +12917,7 @@
         "path": "example/TypographyP.vue",
         "content": "<template>\n  <p class=\"leading-7 [&:not(:first-child)]:mt-6\">\n    The king, seeing how much happier his subjects were, realized the error of\n    his ways and repealed the joke tax.\n  </p>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyP.vue"
+        "target": ""
       }
     ]
   },
@@ -12889,7 +12931,7 @@
         "path": "example/TypographySmall.vue",
         "content": "<template>\n  <small class=\"text-sm font-medium leading-none\">\n    Email address\n  </small>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographySmall.vue"
+        "target": ""
       }
     ]
   },
@@ -12903,7 +12945,7 @@
         "path": "example/TypographyTable.vue",
         "content": "<template>\n  <div class=\"my-6 w-full overflow-y-auto\">\n    <table class=\"w-full\">\n      <thead>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            King's Treasury\n          </th>\n          <th\n            class=\"border px-4 py-2 text-left font-bold [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            People's happiness\n          </th>\n        </tr>\n      </thead>\n      <tbody>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Empty\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Overflowing\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Modest\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Satisfied\n          </td>\n        </tr>\n        <tr class=\"m-0 border-t p-0 even:bg-muted\">\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Full\n          </td>\n          <td\n            class=\"border px-4 py-2 text-left [&[align=center]]:text-center [&[align=right]]:text-right\"\n          >\n            Ecstatic\n          </td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "TypographyTable.vue"
+        "target": ""
       }
     ]
   },
@@ -12919,7 +12961,7 @@
         "path": "example/VCalendarDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { ref } from 'vue'\n\nconst date = ref(new Date())\n</script>\n\n<template>\n  <Calendar v-model=\"date\" class=\"rounded-md border\" />\n</template>\n",
         "type": "registry:example",
-        "target": "VCalendarDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12938,7 +12980,7 @@
         "path": "example/VDatePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, \"PPP\") : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -12963,7 +13005,7 @@
         "path": "example/VDatePickerForm.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\nimport {\n  FormControl,\n  FormDescription,\n  FormField,\n  FormItem,\n  FormLabel,\n  FormMessage,\n} from '@/registry/default/ui/form'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { toast } from '@/registry/default/ui/toast'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\n\nimport { toTypedSchema } from '@vee-validate/zod'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { useForm } from 'vee-validate'\n\nimport { h } from 'vue'\nimport * as z from 'zod'\n\nconst formSchema = toTypedSchema(z.object({\n  dob: z.date({\n    required_error: 'A date of birth is required.',\n  }),\n}))\n\nconst { handleSubmit } = useForm({\n  validationSchema: formSchema,\n})\n\nconst onSubmit = handleSubmit((values) => {\n  toast({\n    title: 'You submitted the following values:',\n    description: h('pre', { class: 'mt-2 w-[340px] rounded-md bg-slate-950 p-4' }, h('code', { class: 'text-white' }, JSON.stringify(values, null, 2))),\n  })\n})\n</script>\n\n<template>\n  <form class=\"space-y-8\" @submit=\"onSubmit\">\n    <FormField v-slot=\"{ componentField, value }\" name=\"dob\">\n      <FormItem class=\"flex flex-col\">\n        <FormLabel>Date of birth</FormLabel>\n        <Popover>\n          <PopoverTrigger as-child>\n            <FormControl>\n              <Button\n                variant=\"outline\" :class=\"cn(\n                  'w-[240px] ps-3 text-start font-normal',\n                  !value && 'text-muted-foreground',\n                )\"\n              >\n                <span>{{ value ? format(value, \"PPP\") : \"Pick a date\" }}</span>\n                <CalendarIcon class=\"ms-auto h-4 w-4 opacity-50\" />\n              </Button>\n            </FormControl>\n          </PopoverTrigger>\n          <PopoverContent class=\"p-0\">\n            <Calendar v-bind=\"componentField\" />\n          </PopoverContent>\n        </Popover>\n        <FormDescription>\n          Your date of birth is used to calculate your age.\n        </FormDescription>\n        <FormMessage />\n      </FormItem>\n    </FormField>\n    <Button type=\"submit\">\n      Submit\n    </Button>\n  </Form>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerForm.vue"
+        "target": ""
       }
     ]
   },
@@ -12983,7 +13025,7 @@
         "path": "example/VDatePickerWithPresets.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        variant=\"outline\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <template v-if=\"date\">\n          {{ format(date, \"PPP\") }}\n        </template>\n        <template v-else>\n          <span>Pick a date</span>\n        </template>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"flex w-auto flex-col space-y-2 p-2\">\n      <Select\n        @update:model-value=\"(value) => {\n          date = addDays(new Date(), parseInt(value))\n        }\"\n      >\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectItem value=\"0\">\n            Today\n          </SelectItem>\n          <SelectItem value=\"1\">\n            Tomorrow\n          </SelectItem>\n          <SelectItem value=\"3\">\n            In 3 days\n          </SelectItem>\n          <SelectItem value=\"7\">\n            In a week\n          </SelectItem>\n        </SelectContent>\n      </Select>\n      <div class=\"rounded-md border\">\n        <Calendar v-model=\"date\" mode=\"single\" />\n      </div>\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithPresets.vue"
+        "target": ""
       }
     ]
   },
@@ -13002,7 +13044,7 @@
         "path": "example/VDatePickerWithRange.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          :columns=\"2\"\n        />\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VDatePickerWithRange.vue"
+        "target": ""
       }
     ]
   },
@@ -13021,7 +13063,7 @@
         "path": "example/VDateTimePickerDemo.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref<Date>()\n</script>\n\n<template>\n  <Popover>\n    <PopoverTrigger as-child>\n      <Button\n        :variant=\"'outline'\"\n        :class=\"cn(\n          'w-[280px] justify-start text-left font-normal',\n          !date && 'text-muted-foreground',\n        )\"\n      >\n        <CalendarIcon class=\"mr-2 h-4 w-4\" />\n        <span>{{ date ? format(date, 'PPP - hh:mm') : \"Pick a date\" }}</span>\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent class=\"w-auto p-0\">\n      <Calendar v-model=\"date\" mode=\"datetime\" />\n    </PopoverContent>\n  </Popover>\n</template>\n",
         "type": "registry:example",
-        "target": "VDateTimePickerDemo.vue"
+        "target": ""
       }
     ]
   },
@@ -13040,7 +13082,7 @@
         "path": "example/VRangePickerWithSlot.vue",
         "content": "<script setup lang=\"ts\">\nimport { cn } from '@/lib/utils'\nimport { Button } from '@/registry/default/ui/button'\n\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/registry/default/ui/popover'\nimport { Calendar } from '@/registry/default/ui/v-calendar'\nimport { addDays, format } from 'date-fns'\nimport { Calendar as CalendarIcon } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst date = ref({\n  start: new Date(2022, 0, 20),\n  end: addDays(new Date(2022, 0, 20), 20),\n})\n</script>\n\n<template>\n  <div :class=\"cn('grid gap-2', $attrs.class ?? '')\">\n    <Popover>\n      <PopoverTrigger as-child>\n        <Button\n          id=\"date\"\n          :variant=\"'outline'\"\n          :class=\"cn(\n            'w-[280px] justify-start text-left font-normal',\n            !date && 'text-muted-foreground',\n          )\"\n        >\n          <CalendarIcon class=\"mr-2 h-4 w-4\" />\n\n          <span>\n            {{ date.start ? (\n              date.end ? `${format(date.start, 'LLL dd, y')} - ${format(date.end, 'LLL dd, y')}`\n              : format(date.start, 'LLL dd, y')\n            ) : 'Pick a date' }}\n          </span>\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent class=\"w-auto p-0\" align=\"start\">\n        <Calendar\n          v-model.range=\"date\"\n          mode=\"date\"\n          :columns=\"2\"\n        >\n          <template #footer>\n            <div class=\"w-full px-3 pb-3\">\n              Entry time\n              <Calendar\n                v-model=\"date.start\"\n                mode=\"time\"\n                hide-time-header\n              />\n              Exit time\n              <Calendar\n                v-model=\"date.end\"\n                mode=\"time\"\n                hide-time-header\n              />\n            </div>\n          </template>\n        </Calendar>\n      </PopoverContent>\n    </Popover>\n  </div>\n</template>\n",
         "type": "registry:example",
-        "target": "VRangePickerWithSlot.vue"
+        "target": ""
       }
     ]
   },
@@ -13059,7 +13101,7 @@
         "path": "block/Authentication01.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A simple login form with email and password. The submit button says \\'Sign in\\'.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"w-full max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account.\n      </CardDescription>\n    </CardHeader>\n    <CardContent class=\"grid gap-4\">\n      <div class=\"grid gap-2\">\n        <Label for=\"email\">Email</Label>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </div>\n      <div class=\"grid gap-2\">\n        <Label for=\"password\">Password</Label>\n        <Input id=\"password\" type=\"password\" required />\n      </div>\n    </CardContent>\n    <CardFooter>\n      <Button class=\"w-full\">\n        Sign in\n      </Button>\n    </CardFooter>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13078,7 +13120,7 @@
         "path": "block/Authentication02.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login form with email and password. There\\'s an option to login with Google and a link to sign up if you don\\'t have an account.'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-2xl\">\n        Login\n      </CardTitle>\n      <CardDescription>\n        Enter your email below to login to your account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <div class=\"flex items-center\">\n            <Label for=\"password\">Password</Label>\n            <a href=\"#\" class=\"ml-auto inline-block text-sm underline\">\n              Forgot your password?\n            </a>\n          </div>\n          <Input id=\"password\" type=\"password\" required />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Login\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Login with Google\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Don't have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign up\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13097,7 +13139,7 @@
         "path": "block/Authentication03.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A sign up form with first name, last name, email and password inside a card. There\\'s an option to sign up with GitHub and a link to login if you already have an account'\nexport const iframeHeight = '600px'\nexport const containerClass = 'w-full h-screen flex items-center justify-center px-4'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <Card class=\"mx-auto max-w-sm\">\n    <CardHeader>\n      <CardTitle class=\"text-xl\">\n        Sign Up\n      </CardTitle>\n      <CardDescription>\n        Enter your information to create an account\n      </CardDescription>\n    </CardHeader>\n    <CardContent>\n      <div class=\"grid gap-4\">\n        <div class=\"grid grid-cols-2 gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"first-name\">First name</Label>\n            <Input id=\"first-name\" placeholder=\"Max\" required />\n          </div>\n          <div class=\"grid gap-2\">\n            <Label for=\"last-name\">Last name</Label>\n            <Input id=\"last-name\" placeholder=\"Robinson\" required />\n          </div>\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"email\">Email</Label>\n          <Input\n            id=\"email\"\n            type=\"email\"\n            placeholder=\"m@example.com\"\n            required\n          />\n        </div>\n        <div class=\"grid gap-2\">\n          <Label for=\"password\">Password</Label>\n          <Input id=\"password\" type=\"password\" />\n        </div>\n        <Button type=\"submit\" class=\"w-full\">\n          Create an account\n        </Button>\n        <Button variant=\"outline\" class=\"w-full\">\n          Sign up with GitHub\n        </Button>\n      </div>\n      <div class=\"mt-4 text-center text-sm\">\n        Already have an account?\n        <a href=\"#\" class=\"underline\">\n          Sign in\n        </a>\n      </div>\n    </CardContent>\n  </Card>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13115,7 +13157,7 @@
         "path": "block/Authentication04.vue",
         "content": "<script lang=\"ts\">\nexport const description\n  = 'A login page with two columns. The first column has the login form with email and password. There\\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full p-4 lg:p-0'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\n</script>\n\n<template>\n  <div class=\"w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]\">\n    <div class=\"flex items-center justify-center py-12\">\n      <div class=\"mx-auto grid w-[350px] gap-6\">\n        <div class=\"grid gap-2 text-center\">\n          <h1 class=\"text-3xl font-bold\">\n            Login\n          </h1>\n          <p class=\"text-balance text-muted-foreground\">\n            Enter your email below to login to your account\n          </p>\n        </div>\n        <div class=\"grid gap-4\">\n          <div class=\"grid gap-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              type=\"email\"\n              placeholder=\"m@example.com\"\n              required\n            />\n          </div>\n          <div class=\"grid gap-2\">\n            <div class=\"flex items-center\">\n              <Label for=\"password\">Password</Label>\n              <a\n                href=\"/forgot-password\"\n                class=\"ml-auto inline-block text-sm underline\"\n              >\n                Forgot your password?\n              </a>\n            </div>\n            <Input id=\"password\" type=\"password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">\n            Login\n          </Button>\n          <Button variant=\"outline\" class=\"w-full\">\n            Login with Google\n          </Button>\n        </div>\n        <div class=\"mt-4 text-center text-sm\">\n          Don't have an account?\n          <a href=\"#\" class=\"underline\">\n            Sign up\n          </a>\n        </div>\n      </div>\n    </div>\n    <div class=\"hidden bg-muted lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        width=\"1920\"\n        height=\"1080\"\n        class=\"h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Authentication04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13138,7 +13180,7 @@
         "path": "block/Dashboard01.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An application shell with a header and main content area. The header has a navbar, a search input and and a user nav dropdown. The user nav is toggled by a button with an avatar image. The main content area is divided into two rows. The first row has a grid of cards with statistics. The second row has a grid of cards with a table of recent transactions and a list of recent sales.'\nexport const iframeHeight = '825px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Avatar, AvatarFallback, AvatarImage } from '@/registry/default/ui/avatar'\nimport { Badge } from '@/registry/default/ui/badge'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/registry/default/ui/table'\nimport { Activity, ArrowUpRight, CircleUser, CreditCard, DollarSign, Menu, Package2, Search, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Analytics\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Analytics\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8\">\n      <div class=\"grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4\">\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Total Revenue\n            </CardTitle>\n            <DollarSign class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              $45,231.89\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +20.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Subscriptions\n            </CardTitle>\n            <Users class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +2350\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +180.1% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Sales\n            </CardTitle>\n            <CreditCard class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +12,234\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +19% from last month\n            </p>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader class=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n            <CardTitle class=\"text-sm font-medium\">\n              Active Now\n            </CardTitle>\n            <Activity class=\"h-4 w-4 text-muted-foreground\" />\n          </CardHeader>\n          <CardContent>\n            <div class=\"text-2xl font-bold\">\n              +573\n            </div>\n            <p class=\"text-xs text-muted-foreground\">\n              +201 since last hour\n            </p>\n          </CardContent>\n        </Card>\n      </div>\n      <div class=\"grid gap-4 md:gap-8 lg:grid-cols-2 xl:grid-cols-3\">\n        <Card class=\"xl:col-span-2\">\n          <CardHeader class=\"flex flex-row items-center\">\n            <div class=\"grid gap-2\">\n              <CardTitle>Transactions</CardTitle>\n              <CardDescription>\n                Recent transactions from your store.\n              </CardDescription>\n            </div>\n            <Button as-child size=\"sm\" class=\"ml-auto gap-1\">\n              <a href=\"#\">\n                View All\n                <ArrowUpRight class=\"h-4 w-4\" />\n              </a>\n            </Button>\n          </CardHeader>\n          <CardContent>\n            <Table>\n              <TableHeader>\n                <TableRow>\n                  <TableHead>Customer</TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Type\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Status\n                  </TableHead>\n                  <TableHead class=\"hidden xl:table-column\">\n                    Date\n                  </TableHead>\n                  <TableHead class=\"text-right\">\n                    Amount\n                  </TableHead>\n                </TableRow>\n              </TableHeader>\n              <TableBody>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-23\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $250.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Olivia Smith\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      olivia@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Refund\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Declined\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-24\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $150.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Noah Williams\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      noah@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Subscription\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-25\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $350.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Emma Brown\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      emma@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-26\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $450.00\n                  </TableCell>\n                </TableRow>\n                <TableRow>\n                  <TableCell>\n                    <div class=\"font-medium\">\n                      Liam Johnson\n                    </div>\n                    <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                      liam@example.com\n                    </div>\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    Sale\n                  </TableCell>\n                  <TableCell class=\"hidden xl:table-column\">\n                    <Badge class=\"text-xs\" variant=\"outline\">\n                      Approved\n                    </Badge>\n                  </TableCell>\n                  <TableCell class=\"hidden md:table-cell lg:hidden xl:table-column\">\n                    2023-06-27\n                  </TableCell>\n                  <TableCell class=\"text-right\">\n                    $550.00\n                  </TableCell>\n                </TableRow>\n              </TableBody>\n            </Table>\n          </CardContent>\n        </Card>\n        <Card>\n          <CardHeader>\n            <CardTitle>Recent Sales</CardTitle>\n          </CardHeader>\n          <CardContent class=\"grid gap-8\">\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/01.png\" alt=\"Avatar\" />\n                <AvatarFallback>OM</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Olivia Martin\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  olivia.martin@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$1,999.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/02.png\" alt=\"Avatar\" />\n                <AvatarFallback>JL</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Jackson Lee\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  jackson.lee@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/03.png\" alt=\"Avatar\" />\n                <AvatarFallback>IN</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Isabella Nguyen\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  isabella.nguyen@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$299.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/04.png\" alt=\"Avatar\" />\n                <AvatarFallback>WK</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  William Kim\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  will@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$99.00\n              </div>\n            </div>\n            <div class=\"flex items-center gap-4\">\n              <Avatar class=\"hidden h-9 w-9 sm:flex\">\n                <AvatarImage src=\"/avatars/05.png\" alt=\"Avatar\" />\n                <AvatarFallback>SD</AvatarFallback>\n              </Avatar>\n              <div class=\"grid gap-1\">\n                <p class=\"text-sm font-medium leading-none\">\n                  Sofia Davis\n                </p>\n                <p class=\"text-sm text-muted-foreground\">\n                  sofia.davis@email.com\n                </p>\n              </div>\n              <div class=\"ml-auto font-medium\">\n                +$39.00\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard01.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13159,7 +13201,7 @@
         "path": "block/Dashboard02.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A products dashboard with a sidebar navigation and a main content area. The dashboard has a header with a search input and a user menu. The sidebar has a logo, navigation links, and a card with a call to action. The main content area shows an empty state with a call to action.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { Bell, CircleUser, Home, LineChart, Menu, Package, Package2, Search, ShoppingCart, Users } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]\">\n    <div class=\"hidden border-r bg-muted/40 md:block\">\n      <div class=\"flex h-full max-h-screen flex-col gap-2\">\n        <div class=\"flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6\">\n          <a href=\"/\" class=\"flex items-center gap-2 font-semibold\">\n            <Package2 class=\"h-6 w-6\" />\n            <span class=\"\">Acme Inc</span>\n          </a>\n          <Button variant=\"outline\" size=\"icon\" class=\"ml-auto h-8 w-8\">\n            <Bell class=\"h-4 w-4\" />\n            <span class=\"sr-only\">Toggle notifications</span>\n          </Button>\n        </div>\n        <div class=\"flex-1\">\n          <nav class=\"grid items-start px-2 text-sm font-medium lg:px-4\">\n            <a\n              href=\"/\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Home class=\"h-4 w-4\" />\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <ShoppingCart class=\"h-4 w-4\" />\n              Orders\n              <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                6\n              </Badge>\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg bg-muted px-3 py-2 text-primary transition-all hover:text-primary\"\n            >\n              <Package class=\"h-4 w-4\" />\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <Users class=\"h-4 w-4\" />\n              Customers\n            </a>\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary\"\n            >\n              <LineChart class=\"h-4 w-4\" />\n              Analytics\n            </a>\n          </nav>\n        </div>\n        <div class=\"mt-auto p-4\">\n          <Card>\n            <CardHeader class=\"p-2 pt-0 md:p-4\">\n              <CardTitle>Upgrade to Pro</CardTitle>\n              <CardDescription>\n                Unlock all features and get unlimited access to our support\n                team.\n              </CardDescription>\n            </CardHeader>\n            <CardContent class=\"p-2 pt-0 md:p-4 md:pt-0\">\n              <Button size=\"sm\" class=\"w-full\">\n                Upgrade\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </div>\n    <div class=\"flex flex-col\">\n      <header class=\"flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button\n              variant=\"outline\"\n              size=\"icon\"\n              class=\"shrink-0 md:hidden\"\n            >\n              <Menu class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle navigation menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"flex flex-col\">\n            <nav class=\"grid gap-2 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-2 text-lg font-semibold\"\n              >\n                <Package2 class=\"h-6 w-6\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl bg-muted px-3 py-2 text-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n                <Badge class=\"ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full\">\n                  6\n                </Badge>\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <Users class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Analytics\n              </a>\n            </nav>\n            <div class=\"mt-auto\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Upgrade to Pro</CardTitle>\n                  <CardDescription>\n                    Unlock all features and get unlimited access to our\n                    support team.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Button size=\"sm\" class=\"w-full\">\n                    Upgrade\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </SheetContent>\n        </Sheet>\n        <div class=\"w-full flex-1\">\n          <form>\n            <div class=\"relative\">\n              <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n              <Input\n                type=\"search\"\n                placeholder=\"Search products...\"\n                class=\"w-full appearance-none bg-background pl-8 shadow-none md:w-2/3 lg:w-1/3\"\n              />\n            </div>\n          </form>\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6\">\n        <div class=\"flex items-center\">\n          <h1 class=\"text-lg font-semibold md:text-2xl\">\n            Inventory\n          </h1>\n        </div>\n        <div class=\"flex flex-1 items-center justify-center rounded-lg border border-dashed shadow-sm\">\n          <div class=\"flex flex-col items-center gap-1 text-center\">\n            <h3 class=\"text-2xl font-bold tracking-tight\">\n              You have no products\n            </h3>\n            <p class=\"text-sm text-muted-foreground\">\n              You can start selling as soon as you add a product.\n            </p>\n            <Button class=\"mt-4\">\n              Add Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard02.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13182,7 +13224,7 @@
         "path": "block/Dashboard03.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An AI playground with a sidebar navigation and a main content area. The playground has a header with a settings drawer and a share button. The sidebar has navigation links and a user menu. The main content area shows a form to configure the model and messages.'\nexport const iframeHeight = '740px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport { Button } from '@/registry/default/ui/button'\nimport { Drawer, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from '@/registry/default/ui/drawer'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/registry/default/ui/select'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/registry/default/ui/tooltip'\nimport { Bird, Book, Bot, Code2, CornerDownLeft, LifeBuoy, Mic, Paperclip, Rabbit, Settings, Settings2, Share, SquareTerminal, SquareUser, Triangle, Turtle } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"grid h-screen w-full pl-[56px]\">\n    <aside class=\"inset-y fixed  left-0 z-20 flex h-full flex-col border-r\">\n      <div class=\"border-b p-2\">\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Home\">\n          <Triangle class=\"size-5 fill-foreground\" />\n        </Button>\n      </div>\n      <nav class=\"grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg bg-muted\"\n                aria-label=\"Playground\"\n              >\n                <SquareTerminal class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Playground\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Models\"\n              >\n                <Bot class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Models\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"API\"\n              >\n                <Code2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              API\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Documentation\"\n              >\n                <Book class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Documentation\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"rounded-lg\"\n                aria-label=\"Settings\"\n              >\n                <Settings2 class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto grid gap-1 p-2\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Help\"\n              >\n                <LifeBuoy class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Help\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                class=\"mt-auto rounded-lg\"\n                aria-label=\"Account\"\n              >\n                <SquareUser class=\"size-5\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\" :side-offset=\"5\">\n              Account\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col\">\n      <header class=\"sticky top-0 z-10 flex h-[57px] items-center gap-1 border-b bg-background px-4\">\n        <h1 class=\"text-xl font-semibold\">\n          Playground\n        </h1>\n        <Drawer>\n          <DrawerTrigger as-child>\n            <Button variant=\"ghost\" size=\"icon\" class=\"md:hidden\">\n              <Settings class=\"size-4\" />\n              <span class=\"sr-only\">Settings</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent class=\"max-h-[80vh]\">\n            <DrawerHeader>\n              <DrawerTitle>Configuration</DrawerTitle>\n              <DrawerDescription>\n                Configure the settings for the model and messages.\n              </DrawerDescription>\n            </DrawerHeader>\n            <form class=\"grid w-full items-start gap-6 overflow-auto p-4 pt-0\">\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Settings\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"model\">Model</Label>\n                  <Select>\n                    <SelectTrigger\n                      id=\"model\"\n                      class=\"items-start [&_[data-description]]:hidden\"\n                    >\n                      <SelectValue placeholder=\"Select a model\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"genesis\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Rabbit class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Genesis\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Our fastest model for general use cases.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"explorer\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Bird class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Explorer\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              Performance and speed for efficiency.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                      <SelectItem value=\"quantum\">\n                        <div class=\"flex items-start gap-3 text-muted-foreground\">\n                          <Turtle class=\"size-5\" />\n                          <div class=\"grid gap-0.5\">\n                            <p>\n                              Neural\n                              <span class=\"font-medium text-foreground\">\n                                Quantum\n                              </span>\n                            </p>\n                            <p class=\"text-xs\" data-description>\n                              The most powerful model for complex\n                              computations.\n                            </p>\n                          </div>\n                        </div>\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"temperature\">Temperature</Label>\n                  <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </fieldset>\n              <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n                <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                  Messages\n                </legend>\n                <div class=\"grid gap-3\">\n                  <Label for=\"role\">Role</Label>\n                  <Select default-value=\"system\">\n                    <SelectTrigger>\n                      <SelectValue placeholder=\"Select a role\" />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"system\">\n                        System\n                      </SelectItem>\n                      <SelectItem value=\"user\">\n                        User\n                      </SelectItem>\n                      <SelectItem value=\"assistant\">\n                        Assistant\n                      </SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"content\">Content</Label>\n                  <Textarea id=\"content\" placeholder=\"You are a...\" />\n                </div>\n              </fieldset>\n            </form>\n          </DrawerContent>\n        </Drawer>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          class=\"ml-auto gap-1.5 text-sm\"\n        >\n          <Share class=\"size-3.5\" />\n          Share\n        </Button>\n      </header>\n      <main class=\"grid flex-1 gap-4 overflow-auto p-4 md:grid-cols-2 lg:grid-cols-3\">\n        <div class=\"relative hidden flex-col items-start gap-8 md:flex\">\n          <form class=\"grid w-full items-start gap-6\">\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Settings\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"model\">Model</Label>\n                <Select>\n                  <SelectTrigger\n                    id=\"model\"\n                    class=\"items-start [&_[data-description]]:hidden\"\n                  >\n                    <SelectValue placeholder=\"Select a model\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"genesis\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Rabbit class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Genesis\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Our fastest model for general use cases.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"explorer\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Bird class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Explorer\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            Performance and speed for efficiency.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                    <SelectItem value=\"quantum\">\n                      <div class=\"flex items-start gap-3 text-muted-foreground\">\n                        <Turtle class=\"size-5\" />\n                        <div class=\"grid gap-0.5\">\n                          <p>\n                            Neural\n                            <span class=\"font-medium text-foreground\">\n                              Quantum\n                            </span>\n                          </p>\n                          <p class=\"text-xs\" data-description>\n                            The most powerful model for complex computations.\n                          </p>\n                        </div>\n                      </div>\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"temperature\">Temperature</Label>\n                <Input id=\"temperature\" type=\"number\" placeholder=\"0.4\" />\n              </div>\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-p\">Top P</Label>\n                  <Input id=\"top-p\" type=\"number\" placeholder=\"0.7\" />\n                </div>\n                <div class=\"grid gap-3\">\n                  <Label for=\"top-k\">Top K</Label>\n                  <Input id=\"top-k\" type=\"number\" placeholder=\"0.0\" />\n                </div>\n              </div>\n            </fieldset>\n            <fieldset class=\"grid gap-6 rounded-lg border p-4\">\n              <legend class=\"-ml-1 px-1 text-sm font-medium\">\n                Messages\n              </legend>\n              <div class=\"grid gap-3\">\n                <Label for=\"role\">Role</Label>\n                <Select default-value=\"system\">\n                  <SelectTrigger>\n                    <SelectValue placeholder=\"Select a role\" />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectItem value=\"system\">\n                      System\n                    </SelectItem>\n                    <SelectItem value=\"user\">\n                      User\n                    </SelectItem>\n                    <SelectItem value=\"assistant\">\n                      Assistant\n                    </SelectItem>\n                  </SelectContent>\n                </Select>\n              </div>\n              <div class=\"grid gap-3\">\n                <Label for=\"content\">Content</Label>\n                <Textarea\n                  id=\"content\"\n                  placeholder=\"You are a...\"\n                  class=\"min-h-[9.5rem]\"\n                />\n              </div>\n            </fieldset>\n          </form>\n        </div>\n        <div class=\"relative flex h-full min-h-[50vh] flex-col rounded-xl bg-muted/50 p-4 lg:col-span-2\">\n          <Badge variant=\"outline\" class=\"absolute right-3 top-3\">\n            Output\n          </Badge>\n          <div class=\"flex-1\" />\n          <form class=\"relative overflow-hidden rounded-lg border bg-background focus-within:ring-1 focus-within:ring-ring\">\n            <Label for=\"message\" class=\"sr-only\">\n              Message\n            </Label>\n            <Textarea\n              id=\"message\"\n              placeholder=\"Type your message here...\"\n              class=\"min-h-12 resize-none border-0 p-3 shadow-none focus-visible:ring-0\"\n            />\n            <div class=\"flex items-center p-3 pt-0\">\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Paperclip class=\"size-4\" />\n                      <span class=\"sr-only\">Attach file</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Attach File\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <TooltipProvider>\n                <Tooltip>\n                  <TooltipTrigger as-child>\n                    <Button variant=\"ghost\" size=\"icon\">\n                      <Mic class=\"size-4\" />\n                      <span class=\"sr-only\">Use Microphone</span>\n                    </Button>\n                  </TooltipTrigger>\n                  <TooltipContent side=\"top\">\n                    Use Microphone\n                  </TooltipContent>\n                </Tooltip>\n              </TooltipProvider>\n              <Button type=\"submit\" size=\"sm\" class=\"ml-auto gap-1.5\">\n                Send Message\n                <CornerDownLeft class=\"size-3.5\" />\n              </Button>\n            </div>\n          </form>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard03.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13203,7 +13245,7 @@
         "path": "block/Dashboard04.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A settings page. The settings page has a sidebar navigation and a main content area. The main content area has a form to update the store name and a form to update the plugins directory. The sidebar navigation has links to general, security, integrations, support, organizations, and advanced settings.'\nexport const iframeHeight = '780px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Button } from '@/registry/default/ui/button'\n\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport { CircleUser, Menu, Package2, Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col\">\n    <header class=\"sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6\">\n      <nav class=\"hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6\">\n        <a\n          href=\"#\"\n          class=\"flex items-center gap-2 text-lg font-semibold md:text-base\"\n        >\n          <Package2 class=\"h-6 w-6\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Dashboard\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Orders\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Products\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-muted-foreground transition-colors hover:text-foreground\"\n        >\n          Customers\n        </a>\n        <a\n          href=\"#\"\n          class=\"text-foreground transition-colors hover:text-foreground\"\n        >\n          Settings\n        </a>\n      </nav>\n      <Sheet>\n        <SheetTrigger as-child>\n          <Button\n            variant=\"outline\"\n            size=\"icon\"\n            class=\"shrink-0 md:hidden\"\n          >\n            <Menu class=\"h-5 w-5\" />\n            <span class=\"sr-only\">Toggle navigation menu</span>\n          </Button>\n        </SheetTrigger>\n        <SheetContent side=\"left\">\n          <nav class=\"grid gap-6 text-lg font-medium\">\n            <a\n              href=\"#\"\n              class=\"flex items-center gap-2 text-lg font-semibold\"\n            >\n              <Package2 class=\"h-6 w-6\" />\n              <span class=\"sr-only\">Acme Inc</span>\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Dashboard\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Orders\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Products\n            </a>\n            <a\n              href=\"#\"\n              class=\"text-muted-foreground hover:text-foreground\"\n            >\n              Customers\n            </a>\n            <a href=\"#\" class=\"hover:text-foreground\">\n              Settings\n            </a>\n          </nav>\n        </SheetContent>\n      </Sheet>\n      <div class=\"flex w-full items-center gap-4 md:ml-auto md:gap-2 lg:gap-4\">\n        <form class=\"ml-auto flex-1 sm:flex-initial\">\n          <div class=\"relative\">\n            <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n            <Input\n              type=\"search\"\n              placeholder=\"Search products...\"\n              class=\"pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]\"\n            />\n          </div>\n        </form>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </header>\n    <main class=\"flex min-h-[calc(100vh_-_theme(spacing.16))] flex-1 flex-col gap-4 bg-muted/40 p-4 md:gap-8 md:p-10\">\n      <div class=\"mx-auto grid w-full max-w-6xl gap-2\">\n        <h1 class=\"text-3xl font-semibold\">\n          Settings\n        </h1>\n      </div>\n      <div class=\"mx-auto grid w-full max-w-6xl items-start gap-6 md:grid-cols-[180px_1fr] lg:grid-cols-[250px_1fr]\">\n        <nav class=\"grid gap-4 text-sm text-muted-foreground\">\n          <a href=\"#\" class=\"font-semibold text-primary\">\n            General\n          </a>\n          <a href=\"#\">\n            Security\n          </a>\n          <a href=\"#\">\n            Integrations\n          </a>\n          <a href=\"#\">\n            Support\n          </a>\n          <a href=\"#\">\n            Organizations\n          </a>\n          <a href=\"#\">\n            Advanced\n          </a>\n        </nav>\n        <div class=\"grid gap-6\">\n          <Card>\n            <CardHeader>\n              <CardTitle>Store Name</CardTitle>\n              <CardDescription>\n                Used to identify your store in the marketplace.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form>\n                <Input placeholder=\"Store Name\" />\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n          <Card>\n            <CardHeader>\n              <CardTitle>Plugins Directory</CardTitle>\n              <CardDescription>\n                The directory within your project, in which your plugins are\n                located.\n              </CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form class=\"flex flex-col gap-4\">\n                <Input\n                  placeholder=\"Project Name\"\n                  default-value=\"/content/plugins\"\n                />\n                <div class=\"flex items-center space-x-2\">\n                  <Checkbox id=\"include\" default-checked />\n                  <label\n                    for=\"include\"\n                    class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                  >\n                    Allow administrators to change the directory.\n                  </label>\n                </div>\n              </form>\n            </CardContent>\n            <CardFooter class=\"border-t px-6 py-4\">\n              <Button>Save</Button>\n            </CardFooter>\n          </Card>\n        </div>\n      </div>\n    </main>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard04.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13232,7 +13274,7 @@
         "path": "block/Dashboard05.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An orders dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. The main area has a list of recent orders with a filter and export button. The main area also has a detailed view of a single order with order details, shipping information, billing information, customer information, and payment information.'\nexport const iframeHeight = '1112px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { Checkbox } from '@/registry/default/ui/checkbox'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport {\n  Pagination,\n  PaginationList,\n  PaginationNext,\n  PaginationPrev,\n} from '@/registry/default/ui/pagination'\nimport { Progress } from '@/registry/default/ui/progress'\nimport { Separator } from '@/registry/default/ui/separator'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  Copy,\n  CreditCard,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreVertical,\n  Package,\n  Package2,\n  PanelLeft,\n  Search,\n  Settings,\n  ShoppingCart,\n  Truck,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Orders</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Recent Orders</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8 lg:grid-cols-3 xl:grid-cols-3\">\n        <div class=\"grid auto-rows-max items-start gap-4 md:gap-8 lg:col-span-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-2 xl:grid-cols-4\">\n            <Card class=\"sm:col-span-2\">\n              <CardHeader class=\"pb-3\">\n                <CardTitle>Your Orders</CardTitle>\n                <CardDescription class=\"max-w-lg text-balance leading-relaxed\">\n                  Introducing Our Dynamic Orders Dashboard for Seamless\n                  Management and Insightful Analysis.\n                </CardDescription>\n              </CardHeader>\n              <CardFooter>\n                <Button>Create New Order</Button>\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Week</CardDescription>\n                <CardTitle class=\"text-4xl\">\n                  $1329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +25% from last week\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"25\" aria-label=\"25% increase\" />\n              </CardFooter>\n            </Card>\n            <Card>\n              <CardHeader class=\"pb-2\">\n                <CardDescription>This Month</CardDescription>\n                <CardTitle class=\"text-3xl\">\n                  $5,329\n                </CardTitle>\n              </CardHeader>\n              <CardContent>\n                <div class=\"text-xs text-muted-foreground\">\n                  +10% from last month\n                </div>\n              </CardContent>\n              <CardFooter>\n                <Progress :model-value=\"12\" aria-label=\"12% increase\" />\n              </CardFooter>\n            </Card>\n          </div>\n          <Tabs default-value=\"week\">\n            <div class=\"flex items-center\">\n              <TabsList>\n                <TabsTrigger value=\"week\">\n                  Week\n                </TabsTrigger>\n                <TabsTrigger value=\"month\">\n                  Month\n                </TabsTrigger>\n                <TabsTrigger value=\"year\">\n                  Year\n                </TabsTrigger>\n              </TabsList>\n              <div class=\"ml-auto flex items-center gap-2\">\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                      <ListFilter class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only sm:not-sr-only\">Filter</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Fulfilled\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Declined\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <div class=\"items-top flex space-x-2\">\n                        <Checkbox id=\"terms1\" />\n                        <label\n                          for=\"terms2\"\n                          class=\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n                        >\n                          Refunded\n                        </label>\n                      </div>\n                    </DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n                <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1 rounded-md px-3\">\n                  <File class=\"h-3.5 w-3.5\" />\n                  <span class=\"sr-only sm:not-sr-only\">Export</span>\n                </Button>\n              </div>\n            </div>\n            <TabsContent value=\"week\">\n              <Card>\n                <CardHeader class=\"px-7\">\n                  <CardTitle>Orders</CardTitle>\n                  <CardDescription>\n                    Recent orders from your store.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead>Customer</TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Type\n                        </TableHead>\n                        <TableHead class=\"hidden sm:table-cell\">\n                          Status\n                        </TableHead>\n                        <TableHead class=\"hidden md:table-cell\">\n                          Date\n                        </TableHead>\n                        <TableHead class=\"text-right\">\n                          Amount\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow class=\"bg-accent\">\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Noah Williams\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            noah@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Subscription\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-25\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $350.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Liam Johnson\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            liam@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-23\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $250.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Olivia Smith\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            olivia@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Refund\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"outline\">\n                            Declined\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-24\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $150.00\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell>\n                          <div class=\"font-medium\">\n                            Emma Brown\n                          </div>\n                          <div class=\"hidden text-sm text-muted-foreground md:inline\">\n                            emma@example.com\n                          </div>\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          Sale\n                        </TableCell>\n                        <TableCell class=\"hidden sm:table-cell\">\n                          <Badge class=\"text-xs\" variant=\"secondary\">\n                            Fulfilled\n                          </Badge>\n                        </TableCell>\n                        <TableCell class=\"hidden md:table-cell\">\n                          2023-06-26\n                        </TableCell>\n                        <TableCell class=\"text-right\">\n                          $450.00\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n              </Card>\n            </TabsContent>\n          </Tabs>\n        </div>\n        <div>\n          <Card class=\"overflow-hidden\">\n            <CardHeader class=\"flex flex-row items-start bg-muted/50\">\n              <div class=\"grid gap-0.5\">\n                <CardTitle class=\"group flex items-center gap-2 text-lg\">\n                  Order ID: Oe31b70H\n                  <Button\n                    size=\"icon\"\n                    variant=\"outline\"\n                    class=\"h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100\"\n                  >\n                    <Copy class=\"h-3 w-3\" />\n                    <span class=\"sr-only\">Copy Order ID</span>\n                  </Button>\n                </CardTitle>\n                <CardDescription>Date: November 23, 2023</CardDescription>\n              </div>\n              <div class=\"ml-auto flex items-center gap-1\">\n                <Button size=\"sm\" variant=\"outline\" class=\"h-8 gap-1\">\n                  <Truck class=\"h-3.5 w-3.5\" />\n                  <span class=\"lg:sr-only xl:not-sr-only xl:whitespace-nowrap\">\n                    Track Order\n                  </span>\n                </Button>\n                <DropdownMenu>\n                  <DropdownMenuTrigger as-child>\n                    <Button size=\"icon\" variant=\"outline\" class=\"h-8 w-8\">\n                      <MoreVertical class=\"h-3.5 w-3.5\" />\n                      <span class=\"sr-only\">More</span>\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"end\">\n                    <DropdownMenuItem>Edit</DropdownMenuItem>\n                    <DropdownMenuItem>Export</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Trash</DropdownMenuItem>\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              </div>\n            </CardHeader>\n            <CardContent class=\"p-6 text-sm\">\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Order Details\n                </div>\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Glimmer Lamps x <span>2</span>\n                    </span>\n                    <span>$250.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">\n                      Aqua Filters x <span>1</span>\n                    </span>\n                    <span>$49.00</span>\n                  </li>\n                </ul>\n                <Separator class=\"my-2\" />\n                <ul class=\"grid gap-3\">\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Subtotal</span>\n                    <span>$299.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Shipping</span>\n                    <span>$5.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between\">\n                    <span class=\"text-muted-foreground\">Tax</span>\n                    <span>$25.00</span>\n                  </li>\n                  <li class=\"flex items-center justify-between font-semibold\">\n                    <span class=\"text-muted-foreground\">Total</span>\n                    <span>$329.00</span>\n                  </li>\n                </ul>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid grid-cols-2 gap-4\">\n                <div class=\"grid gap-3\">\n                  <div class=\"font-semibold\">\n                    Shipping Information\n                  </div>\n                  <address class=\"grid gap-0.5 not-italic text-muted-foreground\">\n                    <span>Liam Johnson</span>\n                    <span>1234 Main St.</span>\n                    <span>Anytown, CA 12345</span>\n                  </address>\n                </div>\n                <div class=\"grid auto-rows-max gap-3\">\n                  <div class=\"font-semibold\">\n                    Billing Information\n                  </div>\n                  <div class=\"text-muted-foreground\">\n                    Same as shipping address\n                  </div>\n                </div>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Customer Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Customer\n                    </dt>\n                    <dd>Liam Johnson</dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Email\n                    </dt>\n                    <dd>\n                      <a href=\"mailto:\">liam@acme.com</a>\n                    </dd>\n                  </div>\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"text-muted-foreground\">\n                      Phone\n                    </dt>\n                    <dd>\n                      <a href=\"tel:\">+1 234 567 890</a>\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n              <Separator class=\"my-4\" />\n              <div class=\"grid gap-3\">\n                <div class=\"font-semibold\">\n                  Payment Information\n                </div>\n                <dl class=\"grid gap-3\">\n                  <div class=\"flex items-center justify-between\">\n                    <dt class=\"flex items-center gap-1 text-muted-foreground\">\n                      <CreditCard class=\"h-4 w-4\" />\n                      Visa\n                    </dt>\n                    <dd>**** **** **** 4532</dd>\n                  </div>\n                </dl>\n              </div>\n            </CardContent>\n            <CardFooter class=\"flex flex-row items-center border-t bg-muted/50 px-6 py-3\">\n              <div class=\"text-xs text-muted-foreground\">\n                Updated <time dateTime=\"2023-11-23\">November 23, 2023</time>\n              </div>\n              <Pagination class=\"ml-auto mr-0 w-auto\" :items-per-page=\"10\">\n                <PaginationList class=\"gap-1\">\n                  <PaginationPrev variant=\"outline\" class=\"h-6 w-6\" />\n                  <PaginationNext variant=\"outline\" class=\"h-6 w-6\" />\n                </PaginationList>\n              </Pagination>\n            </CardFooter>\n          </Card>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard05.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13257,7 +13299,7 @@
         "path": "block/Dashboard06.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'An products dashboard with a sidebar navigation. The sidebar has icon navigation. The content area has a breadcrumb and search in the header. It displays a list of products in a table with actions.'\nexport const iframeHeight = '938px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/registry/default/ui/tabs'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  CircleUser,\n  File,\n  Home,\n  LineChart,\n  ListFilter,\n  MoreHorizontal,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 py-4\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 py-4\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>All Products</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <Tabs default-value=\"all\">\n          <div class=\"flex items-center\">\n            <TabsList>\n              <TabsTrigger value=\"all\">\n                All\n              </TabsTrigger>\n              <TabsTrigger value=\"active\">\n                Active\n              </TabsTrigger>\n              <TabsTrigger value=\"draft\">\n                Draft\n              </TabsTrigger>\n              <TabsTrigger value=\"archived\" class=\"hidden sm:flex\">\n                Archived\n              </TabsTrigger>\n            </TabsList>\n            <div class=\"ml-auto flex items-center gap-2\">\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <Button variant=\"outline\" size=\"sm\" class=\"h-7 gap-1\">\n                    <ListFilter class=\"h-3.5 w-3.5\" />\n                    <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                      Filter\n                    </span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <DropdownMenuLabel>Filter by</DropdownMenuLabel>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem checked>\n                    Active\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>Draft</DropdownMenuItem>\n                  <DropdownMenuItem>\n                    Archived\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n              <Button size=\"sm\" variant=\"outline\" class=\"h-7 gap-1\">\n                <File class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Export\n                </span>\n              </Button>\n              <Button size=\"sm\" class=\"h-7 gap-1\">\n                <PlusCircle class=\"h-3.5 w-3.5\" />\n                <span class=\"sr-only sm:not-sr-only sm:whitespace-nowrap\">\n                  Add Product\n                </span>\n              </Button>\n            </div>\n          </div>\n          <TabsContent value=\"all\">\n            <Card>\n              <CardHeader>\n                <CardTitle>Products</CardTitle>\n                <CardDescription>\n                  Manage your products and view their sales performance.\n                </CardDescription>\n              </CardHeader>\n              <CardContent>\n                <Table>\n                  <TableHeader>\n                    <TableRow>\n                      <TableHead class=\"hidden w-[100px] sm:table-cell\">\n                        <span class=\"sr-only\">img</span>\n                      </TableHead>\n                      <TableHead>Name</TableHead>\n                      <TableHead>Status</TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Price\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Total Sales\n                      </TableHead>\n                      <TableHead class=\"hidden md:table-cell\">\n                        Created at\n                      </TableHead>\n                      <TableHead>\n                        <span class=\"sr-only\">Actions</span>\n                      </TableHead>\n                    </TableRow>\n                  </TableHeader>\n                  <TableBody>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Laser Lemonade Machine\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $499.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        25\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-07-12 10:42 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Hypernova Headphones\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $129.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        100\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-10-18 03:21 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        AeroGlow Desk Lamp\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $39.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        50\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-11-29 08:15 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        TechTonic Energy Drink\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"secondary\">\n                          Draft\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $2.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        0\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2023-12-25 11:59 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Gamer Gear Pro Controller\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $59.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        75\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-01-01 12:00 AM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                    <TableRow>\n                      <TableCell class=\"hidden sm:table-cell\">\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square rounded-md object-cover\"\n                          height=\"64\"\n                          src=\"/placeholder.svg\"\n                          width=\"64\"\n                        >\n                      </TableCell>\n                      <TableCell class=\"font-medium\">\n                        Luminous VR Headset\n                      </TableCell>\n                      <TableCell>\n                        <Badge variant=\"outline\">\n                          Active\n                        </Badge>\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        $199.99\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        30\n                      </TableCell>\n                      <TableCell class=\"hidden md:table-cell\">\n                        2024-02-14 02:14 PM\n                      </TableCell>\n                      <TableCell>\n                        <DropdownMenu>\n                          <DropdownMenuTrigger as-child>\n                            <Button\n                              aria-haspopup=\"true\"\n                              size=\"icon\"\n                              variant=\"ghost\"\n                            >\n                              <MoreHorizontal class=\"h-4 w-4\" />\n                              <span class=\"sr-only\">Toggle menu</span>\n                            </Button>\n                          </DropdownMenuTrigger>\n                          <DropdownMenuContent align=\"end\">\n                            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n                            <DropdownMenuItem>Edit</DropdownMenuItem>\n                            <DropdownMenuItem>Delete</DropdownMenuItem>\n                          </DropdownMenuContent>\n                        </DropdownMenu>\n                      </TableCell>\n                    </TableRow>\n                  </TableBody>\n                </Table>\n              </CardContent>\n              <CardFooter>\n                <div class=\"text-xs text-muted-foreground\">\n                  Showing <strong>1-10</strong> of <strong>32</strong>\n                  products\n                </div>\n              </CardFooter>\n            </Card>\n          </TabsContent>\n        </Tabs>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard06.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13285,7 +13327,7 @@
         "path": "block/Dashboard07.vue",
         "content": "<script lang=\"ts\">\nexport const description = 'A product edit page. The product edit page has a form to edit the product details, stock, product category, product status, and product images. The product edit page has a sidebar navigation and a main content area. The main content area has a form to edit the product details, stock, product category, product status, and product images. The sidebar navigation has links to product details, stock, product category, product status, and product images.'\nexport const iframeHeight = '1200px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport { Badge } from '@/registry/default/ui/badge'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Button } from '@/registry/default/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/registry/default/ui/card'\nimport { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/registry/default/ui/dropdown-menu'\nimport { Input } from '@/registry/default/ui/input'\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/registry/default/ui/select'\nimport { Sheet, SheetContent, SheetTrigger } from '@/registry/default/ui/sheet'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/registry/default/ui/table'\nimport { Textarea } from '@/registry/default/ui/textarea'\nimport { ToggleGroup, ToggleGroupItem } from '@/registry/default/ui/toggle-group'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/registry/default/ui/tooltip'\nimport {\n  ChevronLeft,\n  CircleUser,\n  Home,\n  LineChart,\n  Package,\n  Package2,\n  PanelLeft,\n  PlusCircle,\n  Search,\n  Settings,\n  ShoppingCart,\n  Upload,\n  Users2,\n} from 'lucide-vue-next'\n</script>\n\n<template>\n  <div class=\"flex min-h-screen w-full flex-col bg-muted/40\">\n    <aside class=\"fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex\">\n      <nav class=\"flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <a\n          href=\"#\"\n          class=\"group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base\"\n        >\n          <Package2 class=\"h-4 w-4 transition-all group-hover:scale-110\" />\n          <span class=\"sr-only\">Acme Inc</span>\n        </a>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Home class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Dashboard</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Dashboard\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Orders</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Orders\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Package class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Products</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Products\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Customers</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Customers\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Analytics</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Analytics\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n      <nav class=\"mt-auto flex flex-col items-center gap-4 px-2 sm:py-5\">\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger as-child>\n              <a\n                href=\"#\"\n                class=\"flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8\"\n              >\n                <Settings class=\"h-5 w-5\" />\n                <span class=\"sr-only\">Settings</span>\n              </a>\n            </TooltipTrigger>\n            <TooltipContent side=\"right\">\n              Settings\n            </TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      </nav>\n    </aside>\n    <div class=\"flex flex-col sm:gap-4 sm:py-4 sm:pl-14\">\n      <header class=\"sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6\">\n        <Sheet>\n          <SheetTrigger as-child>\n            <Button size=\"icon\" variant=\"outline\" class=\"sm:hidden\">\n              <PanelLeft class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle Menu</span>\n            </Button>\n          </SheetTrigger>\n          <SheetContent side=\"left\" class=\"sm:max-w-xs\">\n            <nav class=\"grid gap-6 text-lg font-medium\">\n              <a\n                href=\"#\"\n                class=\"group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base\"\n              >\n                <Package2 class=\"h-5 w-5 transition-all group-hover:scale-110\" />\n                <span class=\"sr-only\">Acme Inc</span>\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Home class=\"h-5 w-5\" />\n                Dashboard\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <ShoppingCart class=\"h-5 w-5\" />\n                Orders\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-foreground\"\n              >\n                <Package class=\"h-5 w-5\" />\n                Products\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <Users2 class=\"h-5 w-5\" />\n                Customers\n              </a>\n              <a\n                href=\"#\"\n                class=\"flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground\"\n              >\n                <LineChart class=\"h-5 w-5\" />\n                Settings\n              </a>\n            </nav>\n          </SheetContent>\n        </Sheet>\n        <Breadcrumb class=\"hidden md:flex\">\n          <BreadcrumbList>\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Dashboard</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbLink as-child>\n                <a href=\"#\">Products</a>\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Edit Product</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n        <div class=\"relative ml-auto flex-1 md:grow-0\">\n          <Search class=\"absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground\" />\n          <Input\n            type=\"search\"\n            placeholder=\"Search...\"\n            class=\"w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[336px]\"\n          />\n        </div>\n        <DropdownMenu>\n          <DropdownMenuTrigger as-child>\n            <Button variant=\"secondary\" size=\"icon\" class=\"rounded-full\">\n              <CircleUser class=\"h-5 w-5\" />\n              <span class=\"sr-only\">Toggle user menu</span>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>Logout</DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n      <main class=\"grid flex-1 items-start gap-4 p-4 sm:px-6 sm:py-0 md:gap-8\">\n        <div class=\"mx-auto grid max-w-[59rem] flex-1 auto-rows-max gap-4\">\n          <div class=\"flex items-center gap-4\">\n            <Button variant=\"outline\" size=\"icon\" class=\"h-7 w-7\">\n              <ChevronLeft class=\"h-4 w-4\" />\n              <span class=\"sr-only\">Back</span>\n            </Button>\n            <h1 class=\"flex-1 shrink-0 whitespace-nowrap text-xl font-semibold tracking-tight sm:grow-0\">\n              Pro Controller\n            </h1>\n            <Badge variant=\"outline\" class=\"ml-auto sm:ml-0\">\n              In stock\n            </Badge>\n            <div class=\"hidden items-center gap-2 md:ml-auto md:flex\">\n              <Button variant=\"outline\" size=\"sm\">\n                Discard\n              </Button>\n              <Button size=\"sm\">\n                Save Product\n              </Button>\n            </div>\n          </div>\n          <div class=\"grid gap-4 md:grid-cols-[1fr_250px] lg:grid-cols-3 lg:gap-8\">\n            <div class=\"grid auto-rows-max items-start gap-4 lg:col-span-2 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Details</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"name\">Name</Label>\n                      <Input\n                        id=\"name\"\n                        type=\"text\"\n                        class=\"w-full\"\n                        default-value=\"Gamer Gear Pro Controller\"\n                      />\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"description\">Description</Label>\n                      <Textarea\n                        id=\"description\"\n                        default-value=\"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc.\"\n                        class=\"min-h-32\"\n                      />\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Stock</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <Table>\n                    <TableHeader>\n                      <TableRow>\n                        <TableHead class=\"w-[100px]\">\n                          SKU\n                        </TableHead>\n                        <TableHead>Stock</TableHead>\n                        <TableHead>Price</TableHead>\n                        <TableHead class=\"w-[100px]\">\n                          Size\n                        </TableHead>\n                      </TableRow>\n                    </TableHeader>\n                    <TableBody>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-001\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-1\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-1\"\n                            type=\"number\"\n                            default-value=\"100\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-1\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-1\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-002\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-2\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-2\"\n                            type=\"number\"\n                            default-value=\"143\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-2\" class=\"sr-only\">\n                            Price\n                          </Label>\n                          <Input\n                            id=\"price-2\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"m\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                      <TableRow>\n                        <TableCell class=\"font-semibold\">\n                          GGPC-003\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"stock-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"stock-3\"\n                            type=\"number\"\n                            default-value=\"32\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <Label for=\"price-3\" class=\"sr-only\">\n                            Stock\n                          </Label>\n                          <Input\n                            id=\"price-3\"\n                            type=\"number\"\n                            default-value=\"99.99\"\n                          />\n                        </TableCell>\n                        <TableCell>\n                          <ToggleGroup\n                            type=\"single\"\n                            default-value=\"s\"\n                            variant=\"outline\"\n                          >\n                            <ToggleGroupItem value=\"s\">\n                              S\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"m\">\n                              M\n                            </ToggleGroupItem>\n                            <ToggleGroupItem value=\"l\">\n                              L\n                            </ToggleGroupItem>\n                          </ToggleGroup>\n                        </TableCell>\n                      </TableRow>\n                    </TableBody>\n                  </Table>\n                </CardContent>\n                <CardFooter class=\"justify-center border-t p-4\">\n                  <Button size=\"sm\" variant=\"ghost\" class=\"gap-1\">\n                    <PlusCircle class=\"h-3.5 w-3.5\" />\n                    Add Variant\n                  </Button>\n                </CardFooter>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Category</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6 sm:grid-cols-3\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"category\">Category</Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"category\"\n                          aria-label=\"Select category\"\n                        >\n                          <SelectValue placeholder=\"Select category\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"clothing\">\n                            Clothing\n                          </SelectItem>\n                          <SelectItem value=\"electronics\">\n                            Electronics\n                          </SelectItem>\n                          <SelectItem value=\"accessories\">\n                            Accessories\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                    <div class=\"grid gap-3\">\n                      <Label for=\"subcategory\">\n                        Subcategory (optional)\n                      </Label>\n                      <Select>\n                        <SelectTrigger\n                          id=\"subcategory\"\n                          aria-label=\"Select subcategory\"\n                        >\n                          <SelectValue placeholder=\"Select subcategory\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"t-shirts\">\n                            T-Shirts\n                          </SelectItem>\n                          <SelectItem value=\"hoodies\">\n                            Hoodies\n                          </SelectItem>\n                          <SelectItem value=\"sweatshirts\">\n                            Sweatshirts\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n            </div>\n            <div class=\"grid auto-rows-max items-start gap-4 lg:gap-8\">\n              <Card>\n                <CardHeader>\n                  <CardTitle>Product Status</CardTitle>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-6\">\n                    <div class=\"grid gap-3\">\n                      <Label for=\"status\">Status</Label>\n                      <Select>\n                        <SelectTrigger id=\"status\" aria-label=\"Select status\">\n                          <SelectValue placeholder=\"Select status\" />\n                        </SelectTrigger>\n                        <SelectContent>\n                          <SelectItem value=\"draft\">\n                            Draft\n                          </SelectItem>\n                          <SelectItem value=\"published\">\n                            Active\n                          </SelectItem>\n                          <SelectItem value=\"archived\">\n                            Archived\n                          </SelectItem>\n                        </SelectContent>\n                      </Select>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card class=\"overflow-hidden\">\n                <CardHeader>\n                  <CardTitle>Product imgs</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div class=\"grid gap-2\">\n                    <img\n                      alt=\"Product image\"\n                      class=\"aspect-square w-full rounded-md object-cover\"\n                      height=\"300\"\n                      src=\"/placeholder.svg\"\n                      width=\"300\"\n                    >\n                    <div class=\"grid grid-cols-3 gap-2\">\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button>\n                        <img\n                          alt=\"Product image\"\n                          class=\"aspect-square w-full rounded-md object-cover\"\n                          height=\"84\"\n                          src=\"/placeholder.svg\"\n                          width=\"84\"\n                        >\n                      </button>\n                      <button class=\"flex aspect-square w-full items-center justify-center rounded-md border border-dashed\">\n                        <Upload class=\"h-4 w-4 text-muted-foreground\" />\n                        <span class=\"sr-only\">Upload</span>\n                      </button>\n                    </div>\n                  </div>\n                </CardContent>\n              </Card>\n              <Card>\n                <CardHeader>\n                  <CardTitle>Archive Product</CardTitle>\n                  <CardDescription>\n                    Lipsum dolor sit amet, consectetur adipiscing elit.\n                  </CardDescription>\n                </CardHeader>\n                <CardContent>\n                  <div />\n                  <Button size=\"sm\" variant=\"secondary\">\n                    Archive Product\n                  </Button>\n                </CardContent>\n              </Card>\n            </div>\n          </div>\n          <div class=\"flex items-center justify-center gap-2 md:hidden\">\n            <Button variant=\"outline\" size=\"sm\">\n              Discard\n            </Button>\n            <Button size=\"sm\">\n              Save Product\n            </Button>\n          </div>\n        </div>\n      </main>\n    </div>\n  </div>\n</template>\n",
         "type": "registry:block",
-        "target": "Dashboard07.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   },
@@ -13305,7 +13347,49 @@
         "path": "block/Sidebar01/page.vue",
         "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description\n  = 'A simple sidebar with navigation grouped by section.'\n</script>\n\n<script setup lang=\"ts\">\nimport { Check, ChevronsUpDown, GalleryVerticalEnd, Search } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// Import components from the custom library\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Label } from '@/registry/default/ui/label'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        { title: 'Installation', url: '#' },\n        { title: 'Project Structure', url: '#' },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        { title: 'Routing', url: '#' },\n        { title: 'Data Fetching', url: '#', isActive: true },\n        { title: 'Rendering', url: '#' },\n        { title: 'Caching', url: '#' },\n        { title: 'Styling', url: '#' },\n        { title: 'Optimizing', url: '#' },\n        { title: 'Configuring', url: '#' },\n        { title: 'Testing', url: '#' },\n        { title: 'Authentication', url: '#' },\n        { title: 'Deploying', url: '#' },\n        { title: 'Upgrading', url: '#' },\n        { title: 'Examples', url: '#' },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        { title: 'Components', url: '#' },\n        { title: 'File Conventions', url: '#' },\n        { title: 'Functions', url: '#' },\n        { title: 'next.config.js Options', url: '#' },\n        { title: 'CLI', url: '#' },\n        { title: 'Edge Runtime', url: '#' },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        { title: 'Accessibility', url: '#' },\n        { title: 'Fast Refresh', url: '#' },\n        { title: 'Next.js Compiler', url: '#' },\n        { title: 'Supported Browsers', url: '#' },\n        { title: 'Turbopack', url: '#' },\n      ],\n    },\n  ],\n}\n\nconst selectedVersion = ref(data.versions[0])\nconst dropdownOpen = ref(false)\nconst search = ref('')\n\nfunction toggleDropdown() {\n  dropdownOpen.value = !dropdownOpen.value\n}\n\nfunction setSelectedVersion(version: string) {\n  selectedVersion.value = version\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar>\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  :class=\"{ 'data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground': dropdownOpen }\"\n                  @click=\"toggleDropdown\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <GalleryVerticalEnd class=\"size-4\" />\n                  </div>\n                  <div class=\"flex flex-col gap-0.5 leading-none\">\n                    <span class=\"font-semibold\">Documentation</span>\n                    <span>v{{ selectedVersion }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                v-if=\"dropdownOpen\"\n                class=\"w-[--reka-dropdown-menu-trigger-width]\"\n                align=\"start\"\n              >\n                <DropdownMenuItem\n                  v-for=\"version in data.versions\"\n                  :key=\"version\"\n                  @click=\"setSelectedVersion(version)\"\n                >\n                  v{{ version }}\n                  <Check v-if=\"version === selectedVersion\" class=\"ml-auto\" />\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n\n        <form @submit.prevent>\n          <SidebarGroup class=\"py-0\">\n            <SidebarGroupContent class=\"relative\">\n              <Label for=\"search\" class=\"sr-only\">Search</Label>\n              <SidebarInput\n                id=\"search\"\n                v-model=\"search\"\n                placeholder=\"Search the docs...\"\n                class=\"pl-8\"\n              />\n              <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n            </SidebarGroupContent>\n          </SidebarGroup>\n        </form>\n      </SidebarHeader>\n\n      <SidebarContent>\n        <SidebarGroup v-for=\"item in data.navMain\" :key=\"item.title\">\n          <SidebarGroupLabel>{{ item.title }}</SidebarGroupLabel>\n          <SidebarGroupContent>\n            <SidebarMenu>\n              <SidebarMenuItem v-for=\"subItem in item.items\" :key=\"subItem.title\">\n                <SidebarMenuButton :class=\"{ 'is-active': subItem.isActive }\" as-child>\n                  <a :href=\"subItem.url\">{{ subItem.title }}</a>\n                </SidebarMenuButton>\n              </SidebarMenuItem>\n            </SidebarMenu>\n          </SidebarGroupContent>\n        </SidebarGroup>\n      </SidebarContent>\n\n      <SidebarRail />\n    </Sidebar>\n\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar01Page.vue"
+        "target": "pages/dashboard/index.vue"
+      }
+    ]
+  },
+  {
+    "name": "Sidebar02",
+    "type": "registry:block",
+    "dependencies": [],
+    "registryDependencies": [
+      "AppSidebar.vue",
+      "breadcrumb",
+      "separator",
+      "sidebar",
+      "SearchForm.vue",
+      "VersionSwitcher.vue",
+      "collapsible",
+      "label",
+      "dropdown-menu"
+    ],
+    "files": [
+      {
+        "path": "block/Sidebar02/page.vue",
+        "content": "<script lang=\"ts\">\nexport const iframeHeight = '800px'\nexport const description = 'A sidebar with collapsible sections.'\n</script>\n\n<script setup lang=\"ts\">\nimport AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  SidebarInset,\n  SidebarProvider,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\n</script>\n\n<template>\n  <SidebarProvider>\n    <AppSidebar />\n    <SidebarInset>\n      <header class=\"flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4\">\n        <SidebarTrigger class=\"-ml-1\" />\n        <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n        <Breadcrumb>\n          <BreadcrumbList>\n            <BreadcrumbItem class=\"hidden md:block\">\n              <BreadcrumbLink href=\"#\">\n                Building Your Application\n              </BreadcrumbLink>\n            </BreadcrumbItem>\n            <BreadcrumbSeparator class=\"hidden md:block\" />\n            <BreadcrumbItem>\n              <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n            </BreadcrumbItem>\n          </BreadcrumbList>\n        </Breadcrumb>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4\">\n        <div\n          v-for=\"i in 24\"\n          :key=\"i\"\n          class=\"aspect-video h-12 w-full rounded-lg bg-muted/50\"\n        />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "type": "registry:page",
+        "target": "pages/dashboard/index.vue"
+      },
+      {
+        "path": "block/Sidebar02/components/AppSidebar.vue",
+        "content": "<script setup lang=\"ts\">\nimport SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'\nimport VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  type SidebarProps,\n  SidebarRail,\n} from '@/registry/default/ui/sidebar'\nimport { ChevronRight } from 'lucide-vue-next'\n\nconst props = defineProps<SidebarProps>()\n\n// This is sample data.\nconst data = {\n  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],\n  navMain: [\n    {\n      title: 'Getting Started',\n      url: '#',\n      items: [\n        {\n          title: 'Installation',\n          url: '#',\n        },\n        {\n          title: 'Project Structure',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Building Your Application',\n      url: '#',\n      items: [\n        {\n          title: 'Routing',\n          url: '#',\n        },\n        {\n          title: 'Data Fetching',\n          url: '#',\n          isActive: true,\n        },\n        {\n          title: 'Rendering',\n          url: '#',\n        },\n        {\n          title: 'Caching',\n          url: '#',\n        },\n        {\n          title: 'Styling',\n          url: '#',\n        },\n        {\n          title: 'Optimizing',\n          url: '#',\n        },\n        {\n          title: 'Configuring',\n          url: '#',\n        },\n        {\n          title: 'Testing',\n          url: '#',\n        },\n        {\n          title: 'Authentication',\n          url: '#',\n        },\n        {\n          title: 'Deploying',\n          url: '#',\n        },\n        {\n          title: 'Upgrading',\n          url: '#',\n        },\n        {\n          title: 'Examples',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'API Reference',\n      url: '#',\n      items: [\n        {\n          title: 'Components',\n          url: '#',\n        },\n        {\n          title: 'File Conventions',\n          url: '#',\n        },\n        {\n          title: 'Functions',\n          url: '#',\n        },\n        {\n          title: 'next.config.js Options',\n          url: '#',\n        },\n        {\n          title: 'CLI',\n          url: '#',\n        },\n        {\n          title: 'Edge Runtime',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Architecture',\n      url: '#',\n      items: [\n        {\n          title: 'Accessibility',\n          url: '#',\n        },\n        {\n          title: 'Fast Refresh',\n          url: '#',\n        },\n        {\n          title: 'Next.js Compiler',\n          url: '#',\n        },\n        {\n          title: 'Supported Browsers',\n          url: '#',\n        },\n        {\n          title: 'Turbopack',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Community',\n      url: '#',\n      items: [\n        {\n          title: 'Contribution Guide',\n          url: '#',\n        },\n      ],\n    },\n  ],\n}\n</script>\n\n<template>\n  <Sidebar v-bind=\"props\">\n    <SidebarHeader>\n      <VersionSwitcher\n        :versions=\"data.versions\"\n        :default-version=\"data.versions[0]\"\n      />\n      <SearchForm />\n    </SidebarHeader>\n    <SidebarContent class=\"gap-0\">\n      <Collapsible\n        v-for=\"item in data.navMain\"\n        :key=\"item.title\"\n        :title=\"item.title\"\n        default-open\n        class=\"group/collapsible\"\n      >\n        <SidebarGroup>\n          <SidebarGroupLabel\n            as-child\n            class=\"group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\"\n          >\n            <CollapsibleTrigger>\n              {{ item.title }}\n              <ChevronRight class=\"ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90\" />\n            </CollapsibleTrigger>\n          </SidebarGroupLabel>\n          <CollapsibleContent>\n            <SidebarGroupContent>\n              <SidebarMenu>\n                <SidebarMenuItem v-for=\"childItem in item.items\" :key=\"childItem.title\">\n                  <SidebarMenuButton as-child :is-active=\"childItem.isActive\">\n                    <a :href=\"item.url\">{{ childItem.title }}</a>\n                  </SidebarMenuButton>\n                </SidebarMenuItem>\n              </SidebarMenu>\n            </SidebarGroupContent>\n          </CollapsibleContent>\n        </SidebarGroup>\n      </Collapsible>\n    </SidebarContent>\n    <SidebarRail />\n  </Sidebar>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/SearchForm.vue",
+        "content": "<script setup lang=\"ts\">\nimport { Label } from '@/registry/default/ui/label'\nimport {\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarInput,\n} from '@/registry/default/ui/sidebar'\n\nimport { Search } from 'lucide-vue-next'\n</script>\n\n<template>\n  <form>\n    <SidebarGroup class=\"py-0\">\n      <SidebarGroupContent class=\"relative\">\n        <Label for=\"search\" class=\"sr-only\">\n          Search\n        </Label>\n        <SidebarInput\n          id=\"search\"\n          placeholder=\"Search the docs...\"\n          class=\"pl-8\"\n        />\n        <Search class=\"pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50\" />\n      </SidebarGroupContent>\n    </SidebarGroup>\n  </form>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
+      },
+      {
+        "path": "block/Sidebar02/components/VersionSwitcher.vue",
+        "content": "<script setup lang=\"ts\">\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\n\nimport {\n  SidebarMenu,\n  SidebarMenuButton,\n  SidebarMenuItem,\n} from '@/registry/default/ui/sidebar'\nimport { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'\nimport { ref } from 'vue'\n\nconst props = defineProps<{\n  versions: string[]\n  defaultVersion: string\n}>()\n\nconst selectedVersion = ref(props.defaultVersion)\n</script>\n\n<template>\n  <SidebarMenu>\n    <SidebarMenuItem>\n      <DropdownMenu>\n        <DropdownMenuTrigger as-child>\n          <SidebarMenuButton\n            size=\"lg\"\n            class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n          >\n            <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n              <GalleryVerticalEnd class=\"size-4\" />\n            </div>\n            <div class=\"flex flex-col gap-0.5 leading-none\">\n              <span class=\"font-semibold\">Documentation</span>\n              <span class=\"\">v{{ selectedVersion }}</span>\n            </div>\n            <ChevronsUpDown class=\"ml-auto\" />\n          </SidebarMenuButton>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n          class=\"w-[--radix-dropdown-menu-trigger-width]\"\n          align=\"start\"\n        >\n          <DropdownMenuItem\n            v-for=\"version in versions\"\n            :key=\"version\"\n            @select=\"selectedVersion = version\"\n          >\n            v{{ version }}\n            <Check v-if=\"selectedVersion\" class=\"ml-auto\" />\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </SidebarMenuItem>\n  </SidebarMenu>\n</template>\n",
+        "type": "registry:component",
+        "target": ""
       }
     ]
   },
@@ -13324,9 +13408,9 @@
     "files": [
       {
         "path": "block/Sidebar07/page.vue",
-        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=ts>\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
+        "content": "<script lang=\"ts\">\nexport const description\n  = 'A sidebar that collapses to icons.'\nexport const iframeHeight = '800px'\nexport const containerClass = 'w-full h-full'\n</script>\n\n<script setup lang=\"ts\">\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/registry/default/ui/avatar'\n\nimport {\n  Breadcrumb,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbList,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n} from '@/registry/default/ui/breadcrumb'\n\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from '@/registry/default/ui/collapsible'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from '@/registry/default/ui/dropdown-menu'\nimport { Separator } from '@/registry/default/ui/separator'\nimport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarTrigger,\n} from '@/registry/default/ui/sidebar'\nimport {\n  AudioWaveform,\n  BadgeCheck,\n  Bell,\n  BookOpen,\n  Bot,\n  ChevronRight,\n  ChevronsUpDown,\n  Command,\n  CreditCard,\n  Folder,\n  Forward,\n  Frame,\n  GalleryVerticalEnd,\n  LogOut,\n  Map,\n  MoreHorizontal,\n  PieChart,\n  Plus,\n  Settings2,\n  Sparkles,\n  SquareTerminal,\n  Trash2,\n} from 'lucide-vue-next'\nimport { ref } from 'vue'\n\n// This is sample data.\nconst data = {\n  user: {\n    name: 'shadcn',\n    email: 'm@example.com',\n    avatar: '/avatars/shadcn.jpg',\n  },\n  teams: [\n    {\n      name: 'Acme Inc',\n      logo: GalleryVerticalEnd,\n      plan: 'Enterprise',\n    },\n    {\n      name: 'Acme Corp.',\n      logo: AudioWaveform,\n      plan: 'Startup',\n    },\n    {\n      name: 'Evil Corp.',\n      logo: Command,\n      plan: 'Free',\n    },\n  ],\n  navMain: [\n    {\n      title: 'Playground',\n      url: '#',\n      icon: SquareTerminal,\n      isActive: true,\n      items: [\n        {\n          title: 'History',\n          url: '#',\n        },\n        {\n          title: 'Starred',\n          url: '#',\n        },\n        {\n          title: 'Settings',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Models',\n      url: '#',\n      icon: Bot,\n      items: [\n        {\n          title: 'Genesis',\n          url: '#',\n        },\n        {\n          title: 'Explorer',\n          url: '#',\n        },\n        {\n          title: 'Quantum',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Documentation',\n      url: '#',\n      icon: BookOpen,\n      items: [\n        {\n          title: 'Introduction',\n          url: '#',\n        },\n        {\n          title: 'Get Started',\n          url: '#',\n        },\n        {\n          title: 'Tutorials',\n          url: '#',\n        },\n        {\n          title: 'Changelog',\n          url: '#',\n        },\n      ],\n    },\n    {\n      title: 'Settings',\n      url: '#',\n      icon: Settings2,\n      items: [\n        {\n          title: 'General',\n          url: '#',\n        },\n        {\n          title: 'Team',\n          url: '#',\n        },\n        {\n          title: 'Billing',\n          url: '#',\n        },\n        {\n          title: 'Limits',\n          url: '#',\n        },\n      ],\n    },\n  ],\n  projects: [\n    {\n      name: 'Design Engineering',\n      url: '#',\n      icon: Frame,\n    },\n    {\n      name: 'Sales & Marketing',\n      url: '#',\n      icon: PieChart,\n    },\n    {\n      name: 'Travel',\n      url: '#',\n      icon: Map,\n    },\n  ],\n}\n\nconst activeTeam = ref(data.teams[0])\n\nfunction setActiveTeam(team: typeof data.teams[number]) {\n  activeTeam.value = team\n}\n</script>\n\n<template>\n  <SidebarProvider>\n    <Sidebar collapsible=\"icon\">\n      <SidebarHeader>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <div class=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n                    <component :is=\"activeTeam.logo\" class=\"size-4\" />\n                  </div>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ activeTeam.name }}</span>\n                    <span class=\"truncate text-xs\">{{ activeTeam.plan }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent\n                class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\"\n                align=\"start\"\n                side=\"bottom\"\n                :side-offset=\"4\"\n              >\n                <DropdownMenuLabel class=\"text-xs text-muted-foreground\">\n                  Teams\n                </DropdownMenuLabel>\n                <DropdownMenuItem\n                  v-for=\"(team, index) in data.teams\"\n                  :key=\"team.name\"\n                  class=\"gap-2 p-2\"\n                  @click=\"setActiveTeam(team)\"\n                >\n                  <div class=\"flex size-6 items-center justify-center rounded-sm border\">\n                    <component :is=\"team.logo\" class=\"size-4 shrink-0\" />\n                  </div>\n                  {{ team.name }}\n                  <DropdownMenuShortcut>⌘{{ index + 1 }}</DropdownMenuShortcut>\n                </DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem class=\"gap-2 p-2\">\n                  <div class=\"flex size-6 items-center justify-center rounded-md border bg-background\">\n                    <Plus class=\"size-4\" />\n                  </div>\n                  <div class=\"font-medium text-muted-foreground\">\n                    Add team\n                  </div>\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarHeader>\n      <SidebarContent>\n        <SidebarGroup>\n          <SidebarGroupLabel>Platform</SidebarGroupLabel>\n          <SidebarMenu>\n            <Collapsible\n              v-for=\"item in data.navMain\"\n              :key=\"item.title\"\n              as-child\n              :default-open=\"item.isActive\"\n              class=\"group/collapsible\"\n            >\n              <SidebarMenuItem>\n                <CollapsibleTrigger as-child>\n                  <SidebarMenuButton :tooltip=\"item.title\">\n                    <component :is=\"item.icon\" />\n                    <span>{{ item.title }}</span>\n                    <ChevronRight class=\"ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90\" />\n                  </SidebarMenuButton>\n                </CollapsibleTrigger>\n                <CollapsibleContent>\n                  <SidebarMenuSub>\n                    <SidebarMenuSubItem\n                      v-for=\"subItem in item.items\"\n                      :key=\"subItem.title\"\n                    >\n                      <SidebarMenuSubButton as-child>\n                        <a :href=\"subItem.url\">\n                          <span>{{ subItem.title }}</span>\n                        </a>\n                      </SidebarMenuSubButton>\n                    </SidebarMenuSubItem>\n                  </SidebarMenuSub>\n                </CollapsibleContent>\n              </SidebarMenuItem>\n            </Collapsible>\n          </SidebarMenu>\n        </SidebarGroup>\n        <SidebarGroup class=\"group-data-[collapsible=icon]:hidden\">\n          <SidebarGroupLabel>Projects</SidebarGroupLabel>\n          <SidebarMenu>\n            <SidebarMenuItem\n              v-for=\"item in data.projects\"\n              :key=\"item.name\"\n            >\n              <SidebarMenuButton as-child>\n                <a :href=\"item.url\">\n                  <component :is=\"item.icon\" />\n                  <span>{{ item.name }}</span>\n                </a>\n              </SidebarMenuButton>\n              <DropdownMenu>\n                <DropdownMenuTrigger as-child>\n                  <SidebarMenuAction show-on-hover>\n                    <MoreHorizontal />\n                    <span class=\"sr-only\">More</span>\n                  </SidebarMenuAction>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent class=\"w-48 rounded-lg\" side=\"bottom\" align=\"end\">\n                  <DropdownMenuItem>\n                    <Folder class=\"text-muted-foreground\" />\n                    <span>View Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Forward class=\"text-muted-foreground\" />\n                    <span>Share Project</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>\n                    <Trash2 class=\"text-muted-foreground\" />\n                    <span>Delete Project</span>\n                  </DropdownMenuItem>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            </SidebarMenuItem>\n            <SidebarMenuItem>\n              <SidebarMenuButton class=\"text-sidebar-foreground/70\">\n                <MoreHorizontal class=\"text-sidebar-foreground/70\" />\n                <span>More</span>\n              </SidebarMenuButton>\n            </SidebarMenuItem>\n          </SidebarMenu>\n        </SidebarGroup>\n      </SidebarContent>\n      <SidebarFooter>\n        <SidebarMenu>\n          <SidebarMenuItem>\n            <DropdownMenu>\n              <DropdownMenuTrigger as-child>\n                <SidebarMenuButton\n                  size=\"lg\"\n                  class=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n                >\n                  <Avatar class=\"h-8 w-8 rounded-lg\">\n                    <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                    <AvatarFallback class=\"rounded-lg\">\n                      CN\n                    </AvatarFallback>\n                  </Avatar>\n                  <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                    <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                    <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                  </div>\n                  <ChevronsUpDown class=\"ml-auto size-4\" />\n                </SidebarMenuButton>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent class=\"w-[--reka-dropdown-menu-trigger-width] min-w-56 rounded-lg\" side=\"bottom\" align=\"end\" :side-offset=\"4\">\n                <DropdownMenuLabel class=\"p-0 font-normal\">\n                  <div class=\"flex items-center gap-2 px-1 py-1.5 text-left text-sm\">\n                    <Avatar class=\"h-8 w-8 rounded-lg\">\n                      <AvatarImage :src=\"data.user.avatar\" :alt=\"data.user.name\" />\n                      <AvatarFallback class=\"rounded-lg\">\n                        CN\n                      </AvatarFallback>\n                    </Avatar>\n                    <div class=\"grid flex-1 text-left text-sm leading-tight\">\n                      <span class=\"truncate font-semibold\">{{ data.user.name }}</span>\n                      <span class=\"truncate text-xs\">{{ data.user.email }}</span>\n                    </div>\n                  </div>\n                </DropdownMenuLabel>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <Sparkles />\n                    Upgrade to Pro\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>\n                    <BadgeCheck />\n                    Account\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <CreditCard />\n                    Billing\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <Bell />\n                    Notifications\n                  </DropdownMenuItem>\n                </DropdownMenuGroup>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem>\n                  <LogOut />\n                  Log out\n                </DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </SidebarMenuItem>\n        </SidebarMenu>\n      </SidebarFooter>\n      <SidebarRail />\n    </Sidebar>\n    <SidebarInset>\n      <header class=\"flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12\">\n        <div class=\"flex items-center gap-2 px-4\">\n          <SidebarTrigger class=\"-ml-1\" />\n          <Separator orientation=\"vertical\" class=\"mr-2 h-4\" />\n          <Breadcrumb>\n            <BreadcrumbList>\n              <BreadcrumbItem class=\"hidden md:block\">\n                <BreadcrumbLink href=\"#\">\n                  Building Your Application\n                </BreadcrumbLink>\n              </BreadcrumbItem>\n              <BreadcrumbSeparator class=\"hidden md:block\" />\n              <BreadcrumbItem>\n                <BreadcrumbPage>Data Fetching</BreadcrumbPage>\n              </BreadcrumbItem>\n            </BreadcrumbList>\n          </Breadcrumb>\n        </div>\n      </header>\n      <div class=\"flex flex-1 flex-col gap-4 p-4 pt-0\">\n        <div class=\"grid auto-rows-min gap-4 md:grid-cols-3\">\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n          <div class=\"aspect-video rounded-xl bg-muted/50\" />\n        </div>\n        <div class=\"min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min\" />\n      </div>\n    </SidebarInset>\n  </SidebarProvider>\n</template>\n",
         "type": "registry:page",
-        "target": "Sidebar07Page.vue"
+        "target": "pages/dashboard/index.vue"
       }
     ]
   }
diff --git a/apps/www/src/registry/crawl-content.ts b/apps/www/src/registry/crawl-content.ts
index af95f0e9..5b7dfaf8 100644
--- a/apps/www/src/registry/crawl-content.ts
+++ b/apps/www/src/registry/crawl-content.ts
@@ -2,7 +2,7 @@ import type { Registry, RegistryFiles } from './schema'
 import { readdir, readFile } from 'node:fs/promises'
 import { parseSync } from '@oxc-parser/wasm'
 import { join, resolve } from 'pathe'
-import { compileScript, parse } from 'vue/compiler-sfc'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
 import { type RegistryStyle, styles } from './registry-styles'
 
 // [Dependency, [...PeerDependencies]]
@@ -87,7 +87,7 @@ async function crawlExample(rootPath: string) {
       content: source,
       path: relativePath,
       // style,
-      target: dirent.name,
+      target: '',
       type,
     }
     const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
@@ -134,11 +134,13 @@ async function crawlBlock(rootPath: string) {
     const source = await readFile(filepath, { encoding: 'utf8' })
     const relativePath = join('block', dirent.name)
 
+    const target = 'pages/dashboard/index.vue'
+
     const file = {
       name: dirent.name,
       content: source,
       path: relativePath,
-      target: dirent.name,
+      target,
       type,
     }
     const { dependencies, registryDependencies } = await getFileDependencies(filepath, source)
@@ -249,12 +251,11 @@ async function buildBlockRegistry(blockPath: string, blockName: string) {
     const isPage = dirent.name === 'page.vue'
     const type = isPage ? 'registry:page' : 'registry:component'
 
-    // TODO: fix
     const compPath = isPage ? dirent.name : `components/${dirent.name}`
     const filepath = join(blockPath, compPath)
     const relativePath = join('block', blockName, compPath)
     const source = await readFile(filepath, { encoding: 'utf8' })
-    const target = isPage ? `${blockName}Page.vue` : dirent.name
+    const target = isPage ? `pages/dashboard/index.vue` : ''
 
     files.push({ content: source, path: relativePath, type, target })
 
@@ -320,3 +321,33 @@ async function getFileDependencies(filename: string, sourceCode: string) {
 
   return { registryDependencies, dependencies }
 }
+
+export async function getBlockMetadata(filename: string, sourceCode: string) {
+  const metadata = {
+    description: null as string | null,
+    iframeHeight: null as string | null,
+    containerClass: null as string | null,
+  }
+
+  if (filename.endsWith('.vue')) {
+    const { descriptor } = parse(sourceCode, { filename })
+    if (descriptor.script?.content) {
+      const ast = compileScript(descriptor, { id: '' })
+      walk(ast.scriptAst, {
+        enter(node: any) {
+          const declaration = node.declaration
+          // Check if the declaration is a variable declaration
+          if (declaration?.type === 'VariableDeclaration') {
+            // Extract variable names and their values
+            declaration.declarations.forEach((decl: any) => {
+              // @ts-expect-error ignore missing type
+              metadata[decl.id.name] = decl.init ? decl.init.value : null
+            })
+          }
+        },
+      })
+    }
+  }
+
+  return metadata
+}
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue b/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue
new file mode 100644
index 00000000..a7218884
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/AppSidebar.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/default/block/Sidebar02/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/default/block/Sidebar02/components/VersionSwitcher.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/default/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/default/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent class="gap-0">
+      <Collapsible
+        v-for="item in data.navMain"
+        :key="item.title"
+        :title="item.title"
+        default-open
+        class="group/collapsible"
+      >
+        <SidebarGroup>
+          <SidebarGroupLabel
+            as-child
+            class="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <CollapsibleTrigger>
+              {{ item.title }}
+              <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+                  <SidebarMenuButton as-child :is-active="childItem.isActive">
+                    <a :href="item.url">{{ childItem.title }}</a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </SidebarGroup>
+      </Collapsible>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue b/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue
new file mode 100644
index 00000000..b88fa9e3
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/default/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/default/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
new file mode 100644
index 00000000..6bb7c4cd
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/components/VersionSwitcher.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/default/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/default/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar02/page.vue b/apps/www/src/registry/default/block/Sidebar02/page.vue
new file mode 100644
index 00000000..b79e55a6
--- /dev/null
+++ b/apps/www/src/registry/default/block/Sidebar02/page.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible sections.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/default/block/Sidebar02/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/default/ui/breadcrumb'
+import { Separator } from '@/registry/default/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/default/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="i in 24"
+          :key="i"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/default/block/Sidebar07/page.vue b/apps/www/src/registry/default/block/Sidebar07/page.vue
index e62e8d78..4da722c7 100644
--- a/apps/www/src/registry/default/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/default/block/Sidebar07/page.vue
@@ -5,7 +5,7 @@ export const iframeHeight = '800px'
 export const containerClass = 'w-full h-full'
 </script>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import {
   Avatar,
   AvatarFallback,
diff --git a/apps/www/src/registry/default/ui/sidebar/index.ts b/apps/www/src/registry/default/ui/sidebar/index.ts
index b137821c..0b275a96 100644
--- a/apps/www/src/registry/default/ui/sidebar/index.ts
+++ b/apps/www/src/registry/default/ui/sidebar/index.ts
@@ -1,5 +1,13 @@
+import type { HTMLAttributes } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
 export { default as Sidebar } from './Sidebar.vue'
 export { default as SidebarContent } from './SidebarContent.vue'
 export { default as SidebarFooter } from './SidebarFooter.vue'
diff --git a/apps/www/src/registry/default/ui/toggle/index.ts b/apps/www/src/registry/default/ui/toggle/index.ts
index 75877ad0..7af28f5e 100644
--- a/apps/www/src/registry/default/ui/toggle/index.ts
+++ b/apps/www/src/registry/default/ui/toggle/index.ts
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2',
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ export const toggleVariants = cva(
           'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-10 px-3',
-        sm: 'h-9 px-2.5',
-        lg: 'h-11 px-5',
+        default: 'h-10 px-3 min-w-10',
+        sm: 'h-9 px-2.5 min-w-9',
+        lg: 'h-11 px-5 min-w-11',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue
new file mode 100644
index 00000000..df0b28e8
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/AppSidebar.vue
@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import SearchForm from '@/registry/new-york/block/Sidebar02/components/SearchForm.vue'
+import VersionSwitcher from '@/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue'
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/registry/new-york/ui/collapsible'
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  type SidebarProps,
+  SidebarRail,
+} from '@/registry/new-york/ui/sidebar'
+import { ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<SidebarProps>()
+
+// This is sample data.
+const data = {
+  versions: ['1.0.1', '1.1.0-alpha', '2.0.0-beta1'],
+  navMain: [
+    {
+      title: 'Getting Started',
+      url: '#',
+      items: [
+        {
+          title: 'Installation',
+          url: '#',
+        },
+        {
+          title: 'Project Structure',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Building Your Application',
+      url: '#',
+      items: [
+        {
+          title: 'Routing',
+          url: '#',
+        },
+        {
+          title: 'Data Fetching',
+          url: '#',
+          isActive: true,
+        },
+        {
+          title: 'Rendering',
+          url: '#',
+        },
+        {
+          title: 'Caching',
+          url: '#',
+        },
+        {
+          title: 'Styling',
+          url: '#',
+        },
+        {
+          title: 'Optimizing',
+          url: '#',
+        },
+        {
+          title: 'Configuring',
+          url: '#',
+        },
+        {
+          title: 'Testing',
+          url: '#',
+        },
+        {
+          title: 'Authentication',
+          url: '#',
+        },
+        {
+          title: 'Deploying',
+          url: '#',
+        },
+        {
+          title: 'Upgrading',
+          url: '#',
+        },
+        {
+          title: 'Examples',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'API Reference',
+      url: '#',
+      items: [
+        {
+          title: 'Components',
+          url: '#',
+        },
+        {
+          title: 'File Conventions',
+          url: '#',
+        },
+        {
+          title: 'Functions',
+          url: '#',
+        },
+        {
+          title: 'next.config.js Options',
+          url: '#',
+        },
+        {
+          title: 'CLI',
+          url: '#',
+        },
+        {
+          title: 'Edge Runtime',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Architecture',
+      url: '#',
+      items: [
+        {
+          title: 'Accessibility',
+          url: '#',
+        },
+        {
+          title: 'Fast Refresh',
+          url: '#',
+        },
+        {
+          title: 'Next.js Compiler',
+          url: '#',
+        },
+        {
+          title: 'Supported Browsers',
+          url: '#',
+        },
+        {
+          title: 'Turbopack',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Community',
+      url: '#',
+      items: [
+        {
+          title: 'Contribution Guide',
+          url: '#',
+        },
+      ],
+    },
+  ],
+}
+</script>
+
+<template>
+  <Sidebar v-bind="props">
+    <SidebarHeader>
+      <VersionSwitcher
+        :versions="data.versions"
+        :default-version="data.versions[0]"
+      />
+      <SearchForm />
+    </SidebarHeader>
+    <SidebarContent class="gap-0">
+      <Collapsible
+        v-for="item in data.navMain"
+        :key="item.title"
+        :title="item.title"
+        default-open
+        class="group/collapsible"
+      >
+        <SidebarGroup>
+          <SidebarGroupLabel
+            as-child
+            class="group/label text-sm text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+          >
+            <CollapsibleTrigger>
+              {{ item.title }}
+              <ChevronRight class="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-90" />
+            </CollapsibleTrigger>
+          </SidebarGroupLabel>
+          <CollapsibleContent>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem v-for="childItem in item.items" :key="childItem.title">
+                  <SidebarMenuButton as-child :is-active="childItem.isActive">
+                    <a :href="item.url">{{ childItem.title }}</a>
+                  </SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </CollapsibleContent>
+        </SidebarGroup>
+      </Collapsible>
+    </SidebarContent>
+    <SidebarRail />
+  </Sidebar>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue
new file mode 100644
index 00000000..bc39a8f4
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/SearchForm.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Label } from '@/registry/new-york/ui/label'
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarInput,
+} from '@/registry/new-york/ui/sidebar'
+import { Search } from 'lucide-vue-next'
+</script>
+
+<template>
+  <form>
+    <SidebarGroup class="py-0">
+      <SidebarGroupContent class="relative">
+        <Label for="search" class="sr-only">
+          Search
+        </Label>
+        <SidebarInput
+          id="search"
+          placeholder="Search the docs..."
+          class="pl-8"
+        />
+        <Search class="pointer-events-none absolute left-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50" />
+      </SidebarGroupContent>
+    </SidebarGroup>
+  </form>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
new file mode 100644
index 00000000..00d97432
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/components/VersionSwitcher.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/registry/new-york/ui/dropdown-menu'
+
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@/registry/new-york/ui/sidebar'
+import { Check, ChevronsUpDown, GalleryVerticalEnd } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const props = defineProps<{
+  versions: string[]
+  defaultVersion: string
+}>()
+
+const selectedVersion = ref(props.defaultVersion)
+</script>
+
+<template>
+  <SidebarMenu>
+    <SidebarMenuItem>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <SidebarMenuButton
+            size="lg"
+            class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+          >
+            <div class="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+              <GalleryVerticalEnd class="size-4" />
+            </div>
+            <div class="flex flex-col gap-0.5 leading-none">
+              <span class="font-semibold">Documentation</span>
+              <span class="">v{{ selectedVersion }}</span>
+            </div>
+            <ChevronsUpDown class="ml-auto" />
+          </SidebarMenuButton>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          class="w-[--radix-dropdown-menu-trigger-width]"
+          align="start"
+        >
+          <DropdownMenuItem
+            v-for="version in versions"
+            :key="version"
+            @select="selectedVersion = version"
+          >
+            v{{ version }}
+            <Check v-if="selectedVersion" class="ml-auto" />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </SidebarMenuItem>
+  </SidebarMenu>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar02/page.vue b/apps/www/src/registry/new-york/block/Sidebar02/page.vue
new file mode 100644
index 00000000..71cd1b6c
--- /dev/null
+++ b/apps/www/src/registry/new-york/block/Sidebar02/page.vue
@@ -0,0 +1,54 @@
+<script lang="ts">
+export const iframeHeight = '800px'
+export const description = 'A sidebar with collapsible sections.'
+</script>
+
+<script setup lang="ts">
+import AppSidebar from '@/registry/new-york/block/Sidebar02/components/AppSidebar.vue'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/registry/new-york/ui/breadcrumb'
+import { Separator } from '@/registry/new-york/ui/separator'
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from '@/registry/new-york/ui/sidebar'
+</script>
+
+<template>
+  <SidebarProvider>
+    <AppSidebar />
+    <SidebarInset>
+      <header class="flex sticky top-0 bg-background h-16 shrink-0 items-center gap-2 border-b px-4">
+        <SidebarTrigger class="-ml-1" />
+        <Separator orientation="vertical" class="mr-2 h-4" />
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem class="hidden md:block">
+              <BreadcrumbLink href="#">
+                Building Your Application
+              </BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator class="hidden md:block" />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Data Fetching</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </header>
+      <div class="flex flex-1 flex-col gap-4 p-4">
+        <div
+          v-for="i in 24"
+          :key="i"
+          class="aspect-video h-12 w-full rounded-lg bg-muted/50"
+        />
+      </div>
+    </SidebarInset>
+  </SidebarProvider>
+</template>
diff --git a/apps/www/src/registry/new-york/block/Sidebar07/page.vue b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
index 0aa299b4..5b1990fb 100644
--- a/apps/www/src/registry/new-york/block/Sidebar07/page.vue
+++ b/apps/www/src/registry/new-york/block/Sidebar07/page.vue
@@ -5,7 +5,7 @@ export const iframeHeight = '800px'
 export const containerClass = 'w-full h-full'
 </script>
 
-<script setup lang=ts>
+<script setup lang="ts">
 import {
   Avatar,
   AvatarFallback,
diff --git a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
index 2d785354..4b4e5577 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
+++ b/apps/www/src/registry/new-york/ui/sidebar/Sidebar.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from 'vue'
+import type { SidebarProps } from '.'
 import { cn } from '@/lib/utils'
 import Sheet from '@/registry/new-york/ui/sheet/Sheet.vue'
 import SheetContent from '@/registry/new-york/ui/sheet/SheetContent.vue'
@@ -9,12 +9,7 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const props = withDefaults(defineProps<{
-  side?: 'left' | 'right'
-  variant?: 'sidebar' | 'floating' | 'inset'
-  collapsible?: 'offcanvas' | 'icon' | 'none'
-  class?: HTMLAttributes['class']
-}>(), {
+const props = withDefaults(defineProps<SidebarProps>(), {
   side: 'left',
   variant: 'sidebar',
   collapsible: 'offcanvas',
diff --git a/apps/www/src/registry/new-york/ui/sidebar/index.ts b/apps/www/src/registry/new-york/ui/sidebar/index.ts
index b137821c..0b275a96 100644
--- a/apps/www/src/registry/new-york/ui/sidebar/index.ts
+++ b/apps/www/src/registry/new-york/ui/sidebar/index.ts
@@ -1,5 +1,13 @@
+import type { HTMLAttributes } from 'vue'
 import { cva, type VariantProps } from 'class-variance-authority'
 
+export interface SidebarProps {
+  side?: 'left' | 'right'
+  variant?: 'sidebar' | 'floating' | 'inset'
+  collapsible?: 'offcanvas' | 'icon' | 'none'
+  class?: HTMLAttributes['class']
+}
+
 export { default as Sidebar } from './Sidebar.vue'
 export { default as SidebarContent } from './SidebarContent.vue'
 export { default as SidebarFooter } from './SidebarFooter.vue'
diff --git a/apps/www/src/registry/new-york/ui/toggle/index.ts b/apps/www/src/registry/new-york/ui/toggle/index.ts
index 7bc499fa..97ddc957 100644
--- a/apps/www/src/registry/new-york/ui/toggle/index.ts
+++ b/apps/www/src/registry/new-york/ui/toggle/index.ts
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
+  'inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -12,9 +12,9 @@ export const toggleVariants = cva(
           'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
       },
       size: {
-        default: 'h-9 px-3',
-        sm: 'h-8 px-2',
-        lg: 'h-10 px-3',
+        default: 'h-9 px-2 min-w-9',
+        sm: 'h-8 px-1.5 min-w-8',
+        lg: 'h-10 px-2.5 min-w-10',
       },
     },
     defaultVariants: {
diff --git a/apps/www/src/registry/schema.ts b/apps/www/src/registry/schema.ts
index 4dfbf2fd..0d217cc4 100644
--- a/apps/www/src/registry/schema.ts
+++ b/apps/www/src/registry/schema.ts
@@ -76,12 +76,16 @@ export const blockSchema = registryEntrySchema.extend({
   type: z.literal('registry:block'),
   style: z.enum(['default', 'new-york']),
   component: z.any(),
+  raw: z.any(),
   container: z
     .object({
       height: z.string().nullish(),
       className: z.string().nullish(),
     })
     .optional(),
+  files: z.array(registryItemFileSchema.extend({
+    raw: z.any(),
+  })).optional(),
   code: z.string(),
   highlightedCode: z.string(),
 })
diff --git a/eslint.config.js b/eslint.config.js
index 89945111..f8feecd6 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -6,6 +6,7 @@ export default antfu(
     typescript: true,
     ignores: [
       '**/__registry__/index.ts',
+      '**/__registry__/block.ts',
     ],
   },
   {