chore: update deps

.github/actions/setup/action.yml

@@ -14,4 +14,3 @@ runs:
       with:
         node-version: lts/*
         cache: pnpm
-        registry-url: 'https://registry.npmjs.org'

.github/workflows/release.yaml

@@ -21,19 +21,6 @@ jobs:
       - name: Setup (Install Node & pnpm)
         uses: ./.github/actions/setup
 
-      - name: Install dependencies
-        run: pnpm i --frozen-lockfile
-
       - run: pnpm dlx changelogithub
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-
-      - name: Build CLI & Publish to npm
-        run: pnpm --filter shadcn-vue pub:release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-
-      - name: Build Module & Publish to npm
-        run: pnpm --filter shadcn-nuxt pub:release
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.vscode/extensions.json

@@ -1,7 +1,6 @@
 {
   "recommendations": [
     "Vue.volar",
-    "dbaeumer.vscode-eslint",
-    "bradlc.vscode-tailwindcss"
+    "dbaeumer.vscode-eslint"
   ]
 }

.vscode/settings.json

@@ -34,9 +34,5 @@
     "json",
     "jsonc",
     "yaml"
-  ],
-  "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
-    ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ]
 }

README.md

@@ -1,7 +1,7 @@
 <p align="center">
  <img align="center" src="https://raw.githubusercontent.com/radix-vue/shadcn-vue/dev/apps/www/src/public/android-chrome-192x192.png" height="96" />
  <h1 align="center">
-  shadcn-vue by Niklas Hermanns
+  shadcn-vue
  </h1>
 </p>
 
@@ -31,7 +31,3 @@ All credits go to these open-source works and resources
 ## License
 
 Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
-
-## Actions
-
-- Test

apps/www/.vitepress/config.mts

@@ -1,13 +1,14 @@
 import path from 'node:path'
-import { transformerMetaWordHighlight } from '@shikijs/transformers'
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-import Icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vitepress'
+import Icons from 'unplugin-icons/vite'
+import tailwind from 'tailwindcss'
+import autoprefixer from 'autoprefixer'
+import { transformerMetaWordHighlight } from '@shikijs/transformers'
+import { cssVariables } from './theme/config/shiki'
 
 import { siteConfig } from './theme/config/site'
-import CodeWrapperPlugin from './theme/plugins/codewrapper'
 import ComponentPreviewPlugin from './theme/plugins/previewer'
+import CodeWrapperPlugin from './theme/plugins/codewrapper'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -30,6 +31,7 @@ export default defineConfig({
     ['meta', { name: 'og:site_name', content: siteConfig.name }],
     ['meta', { name: 'og:image', content: siteConfig.ogImage }],
     ['meta', { name: 'twitter:image', content: siteConfig.ogImage }],
+
   ],
 
   sitemap: {
@@ -48,14 +50,11 @@ export default defineConfig({
       pattern: 'https://github.com/radix-vue/shadcn-vue/tree/dev/apps/www/src/:path',
       text: 'Edit this page on GitHub',
     },
-    carbonAds: {
-      code: 'CW7DK27U',
-      placement: 'wwwshadcn-vuecom',
-    },
   },
 
   srcDir: path.resolve(__dirname, '../src'),
   markdown: {
+    theme: cssVariables,
     codeTransformers: [
       transformerMetaWordHighlight(),
     ],

apps/www/.vitepress/theme/components/Announcement.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { announcementConfig } from '../config/site'
 import { Separator } from '@/lib/registry/default/ui/separator'
 import ArrowRightIcon from '~icons/radix-icons/arrow-right'
-import { announcementConfig } from '../config/site'
 </script>
 
 <template>

apps/www/.vitepress/theme/components/BlockContainer.vue

@@ -1,233 +0,0 @@
-<script setup lang="ts">
-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 { compileScript, parse, walk } from 'vue/compiler-sfc'
-import { highlight } from '../config/shiki'
-import BlockCopyButton from './BlockCopyButton.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
-
-// import { V0Button } from '@/components/v0-button'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
-import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
-import BlockPreview from './BlockPreview.vue'
-
-const props = defineProps<{
-  name: string
-}>()
-
-const { style, codeConfig } = useConfigStore()
-
-const isLoading = ref(true)
-const tabValue = ref('preview')
-const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
-
-const rawString = ref('')
-const codeHtml = ref('')
-const metadata = reactive({
-  description: null as string | null,
-  iframeHeight: null as string | null,
-  containerClass: null as string | null,
-})
-
-function removeScript(code: string) {
-  const s = new MagicString(code)
-  const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
-  let match
-  // eslint-disable-next-line no-cond-assign
-  while ((match = scriptTagRegex.exec(code)) !== null) {
-    const start = match.index
-    const end = match.index + match[0].length
-    s.overwrite(start, end, '') // Replace the script tag with an empty string
-  }
-  return s.trimStart().toString()
-}
-
-function transformImportPath(code: string) {
-  const s = new MagicString(code)
-  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
-  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
-  return s.toString()
-}
-
-watch([style, codeConfig], async () => {
-  try {
-    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
-    rawString.value = transformImportPath(removeScript(baseRawString))
-
-    if (!metadata.description) {
-      const { descriptor } = parse(baseRawString)
-      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
-            })
-          }
-        },
-      })
-    }
-
-    codeHtml.value = highlight(rawString.value, 'vue')
-  }
-  catch (err) {
-    console.error(err)
-  }
-}, { immediate: true, deep: true })
-</script>
-
-<template>
-  <Tabs
-    :id="name"
-    v-model="tabValue"
-    class="relative grid w-full scroll-m-20 gap-4"
-    :style=" {
-      '--container-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">
-            Preview
-          </TabsTrigger>
-          <TabsTrigger 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>
-        </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">
-          <ToggleGroup
-            type="single"
-            default-value="100"
-            @update:model-value="(value) => {
-              resizableRef?.resize(parseInt(value as string))
-            }"
-          >
-            <ToggleGroupItem
-              value="100"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Monitor class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="60"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Tablet class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-            <ToggleGroupItem
-              value="30"
-              class="h-[22px] w-[22px] rounded-sm p-0"
-            >
-              <Smartphone class="h-3.5 w-3.5" />
-            </ToggleGroupItem>
-          </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" />
-        <!-- <V0Button
-          name="{block.name}"
-          description="{block.description" || "Edit in v0"}
-          code="{block.code}"
-          style="{block.style}"
-        /> -->
-      </div>
-    </div>
-    <TabsContent
-      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"
-    >
-      <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
-        <ResizablePanel
-          id="block-resizable-panel-1"
-          ref="resizableRef"
-          :default-size="100"
-          :min-size="30"
-          :as-child="true"
-        >
-          <BlockPreview :name="name" styles="default" :container-class="metadata.containerClass ?? ''" 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
-        class="language-vue !h-full !max-h-[none] !mt-0"
-        v-html="codeHtml"
-      />
-    </TabsContent>
-  </Tabs>
-</template>

apps/www/.vitepress/theme/components/BlockCopyButton.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { toRefs } from 'vue'
+import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
-import { CheckIcon, ClipboardIcon } from '@radix-icons/vue'
-import { useClipboard } from '@vueuse/core'
-import { toRefs } from 'vue'
 
 const props = withDefaults(defineProps<{
   code?: string

apps/www/.vitepress/theme/components/BlockPage.vue

@@ -2,11 +2,11 @@
 import { useUrlSearchParams } from '@vueuse/core'
 import ComponentLoader from './ComponentLoader.vue'
 
-const params = useUrlSearchParams('history')
+const params = useUrlSearchParams('hash-params')
 </script>
 
 <template>
-  <div v-if="params.name" :class="params.containerClass">
+  <div v-if="params.name && params.style" :class="params.containerClass">
     <ComponentLoader :key="params.style?.toString()" :name="params.name?.toString()" :type-name="'block'" />
   </div>
 </template>

apps/www/.vitepress/theme/components/BlockPreview.vue

@@ -1,44 +1,245 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { useConfigStore } from '@/stores/config'
+import { CircleHelp, Info, Monitor, Smartphone, Tablet } from 'lucide-vue-next'
+import MagicString from 'magic-string'
+import { codeToHtml } from 'shiki'
+import { reactive, ref, watch } from 'vue'
+import { compileScript, parse, walk } from 'vue/compiler-sfc'
+import { cssVariables } from '../config/shiki'
+import BlockCopyButton from './BlockCopyButton.vue'
 import Spinner from './Spinner.vue'
+import StyleSwitcher from './StyleSwitcher.vue'
+
+// import { V0Button } from '@/components/v0-button'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/new-york/ui/tabs'
+import { ToggleGroup, ToggleGroupItem } from '@/lib/registry/new-york/ui/toggle-group'
 
 const props = defineProps<{
   name: string
-  styles?: string
-  containerClass?: string
-  container?: boolean
 }>()
 
+const { style, codeConfig } = useConfigStore()
+
 const isLoading = ref(true)
+const tabValue = ref('preview')
+const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
 
-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
+const rawString = ref('')
+const codeHtml = ref('')
+const metadata = reactive({
+  description: null as string | null,
+  iframeHeight: null as string | null,
+  containerClass: null as string | null,
 })
+
+function removeScript(code: string) {
+  const s = new MagicString(code)
+  const scriptTagRegex = /<script\s+lang="ts"\s*>[\s\S]+?<\/script>/g
+  let match
+  // eslint-disable-next-line no-cond-assign
+  while ((match = scriptTagRegex.exec(code)) !== null) {
+    const start = match.index
+    const end = match.index + match[0].length
+    s.overwrite(start, end, '') // Replace the script tag with an empty string
+  }
+  return s.trimStart().toString()
+}
+
+function transformImportPath(code: string) {
+  const s = new MagicString(code)
+  s.replaceAll(`@/lib/registry/${style.value}`, codeConfig.value.componentsPath)
+  s.replaceAll(`@/lib/utils`, codeConfig.value.utilsPath)
+  return s.toString()
+}
+
+watch([style, codeConfig], async () => {
+  try {
+    const baseRawString = await import(`../../../src/lib/registry/${style.value}/block/${props.name}.vue?raw`).then(res => res.default.trim())
+    rawString.value = transformImportPath(removeScript(baseRawString))
+
+    if (!metadata.description) {
+      const { descriptor } = parse(baseRawString)
+      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
+            })
+          }
+        },
+      })
+    }
+
+    codeHtml.value = await codeToHtml(rawString.value, {
+      lang: 'vue',
+      theme: cssVariables,
+    })
+  }
+  catch (err) {
+    console.error(err)
+  }
+}, { immediate: true, deep: true })
 </script>
 
 <template>
-  <div class="relative rounded-lg border overflow-hidden bg-background" :class="[container ? '' : 'aspect-[4/2.5]']">
-    <div v-if="isLoading" class="flex items-center justify-center h-full">
-      <Spinner />
+  <Tabs
+    :id="name"
+    v-model="tabValue"
+    class="relative grid w-full scroll-m-20 gap-4"
+    :style=" {
+      '--container-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">
+            Preview
+          </TabsTrigger>
+          <TabsTrigger 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>
+        </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">
+          <ToggleGroup
+            type="single"
+            default-value="100"
+            @update:model-value="(value) => {
+              resizableRef?.resize(parseInt(value))
+            }"
+          >
+            <ToggleGroupItem
+              value="100"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Monitor class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="60"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Tablet class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+            <ToggleGroupItem
+              value="30"
+              class="h-[22px] w-[22px] rounded-sm p-0"
+            >
+              <Smartphone class="h-3.5 w-3.5" />
+            </ToggleGroupItem>
+          </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" />
+        <!-- <V0Button
+          name="{block.name}"
+          description="{block.description" || "Edit in v0"}
+          code="{block.code}"
+          style="{block.style}"
+        /> -->
+      </div>
     </div>
-    <div
-      :class="[container ? 'w-full' : 'absolute inset-0 hidden w-[1600px] bg-background md:block']"
+    <TabsContent
+      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"
     >
-      <iframe
-        v-show="!isLoading"
-        :src="iframeURL"
-        class="relative z-20 w-full bg-background" :class="[container ? 'h-[--container-height]' : 'size-full']"
-        @load="isLoading = false"
+      <ResizablePanelGroup id="block-resizable" direction="horizontal" class="relative z-10">
+        <ResizablePanel
+          id="block-resizable-panel-1"
+          ref="resizableRef"
+          class="relative rounded-lg border bg-background transition-all "
+          :default-size="100"
+          :min-size="30"
+        >
+          <div v-if="isLoading" class="flex items-center justify-center h-full">
+            <Spinner />
+          </div>
+          <iframe
+            v-show="!isLoading"
+            :src="`/blocks/renderer#name=${name}&style=${style}&containerClass=${encodeURIComponent(metadata.containerClass ?? '')}`"
+            class="relative z-20 w-full bg-background h-[--container-height]"
+            @load="isLoading = false"
+          />
+        </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
+        class="language-vue !h-full !max-h-[none] !mt-0"
+        v-html="codeHtml"
       />
-    </div>
-  </div>
+    </TabsContent>
+  </Tabs>
 </template>

apps/www/.vitepress/theme/components/Blocks.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
+import Announcement from '../components/Announcement.vue'
+import BlockPreview from './BlockPreview.vue'
+import GitHubIcon from '~icons/radix-icons/github-logo'
+
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-import { ref } from 'vue'
-import Announcement from '../components/Announcement.vue'
-import PageAction from '../components/PageAction.vue'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import BlockContainer from './BlockContainer.vue'
 
 const blocks = ref<string[]>([])
 
@@ -48,6 +48,6 @@ import('../../../__registry__/index').then((res) => {
   </PageHeader>
 
   <section id="blocks" class="grid scroll-mt-24 gap-24 lg:gap-48">
-    <BlockContainer v-for="block in blocks" :key="block" :name="block" />
+    <BlockPreview v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>

apps/www/.vitepress/theme/components/CarbonAds.vue

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { useData } from 'vitepress'
-import { onMounted, ref, watch } from 'vue'
-
-const { page, theme } = useData()
-const carbonOptions = theme.value.carbonAds
-const container = ref()
-
-let isInitialized = false
-
-function init() {
-  if (!isInitialized) {
-    isInitialized = true
-    const s = document.createElement('script')
-    s.type = 'text/javascript'
-    s.id = '_carbonads_js'
-    s.src = `//cdn.carbonads.com/carbon.js?serve=${carbonOptions.code}&placement=${carbonOptions.placement}&format=cover`
-    s.async = true
-    container.value.appendChild(s)
-  }
-}
-
-watch(() => page.value.relativePath, () => {
-  if (isInitialized) {
-    ;(window as any)._carbonads?.refresh()
-  }
-})
-
-// no need to account for option changes during dev, we can just
-// refresh the page
-if (carbonOptions) {
-  onMounted(() => {
-    // @ts-expect-error ignoring env
-    if (import.meta.env.DEV)
-      return
-
-    // if the page is loaded when aside is active, load carbon directly.
-    // otherwise, only load it if the page resizes to wide enough. this avoids
-    // loading carbon at all on mobile where it's never shown
-    init()
-  })
-}
-</script>
-
-<template>
-  <div
-    ref="container"
-  />
-</template>
-
-<style>
-#carbon-responsive {
-  @apply w-[238px] !mt-6;
-}
-
-.carbon-responsive-wrap {
-	@apply bg-muted/50 border border-muted p-4 rounded-md flex flex-col items-center !important;
-}
-
-.carbon-responsive-wrap .carbon-img {
-	@apply flex-none rounded overflow-hidden !important;
-}
-
-.carbon-responsive-wrap .carbon-text {
-  @apply text-muted-foreground text-sm flex-none text-center !important;
-}
-
-#carbonads .carbon-poweredby {
-	@apply bg-background text-muted-foreground block text-right text-[10px] uppercase no-underline !important;
-}
-</style>

apps/www/.vitepress/theme/components/CodeConfigCustomizer.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
-import { useConfigStore } from '@/stores/config'
-import { toTypedSchema } from '@vee-validate/zod'
-import RadixIconsGear from '~icons/radix-icons/gear'
 import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
+import { useConfigStore } from '@/stores/config'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@/lib/registry/new-york/ui/sheet'
+import RadixIconsGear from '~icons/radix-icons/gear'
 
 const { codeConfig, setCodeConfig } = useConfigStore()
 

apps/www/.vitepress/theme/components/CodeSandbox.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
+import { Icon } from '@iconify/vue'
 import { makeCodeSandboxParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string

apps/www/.vitepress/theme/components/CodeWrapper.ts

@@ -1,5 +1,5 @@
+import { type VNode, type VNodeArrayChildren, cloneVNode, defineComponent } from 'vue'
 import { useConfigStore } from '@/stores/config'
-import { cloneVNode, defineComponent, type VNode, type VNodeArrayChildren } from 'vue'
 
 function crawlSpan(children: VNodeArrayChildren, cb: (vnode: VNode) => void) {
   children.forEach((childNode) => {

apps/www/.vitepress/theme/components/ComponentLoader.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { useConfigStore } from '@/stores/config'
 import { defineAsyncComponent } from 'vue'
 import Spinner from './Spinner.vue'
+import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<{
   name: string

apps/www/.vitepress/theme/components/ComponentPreview.vue

@@ -1,15 +1,16 @@
 <script setup lang="ts">
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
-import { cn } from '@/lib/utils'
-import { useConfigStore } from '@/stores/config'
-import { useClipboard } from '@vueuse/core'
-import MagicString from 'magic-string'
 import { computed, ref, watch } from 'vue'
-import { highlight } from '../config/shiki'
-import CodeSandbox from './CodeSandbox.vue'
+import { codeToHtml } from 'shiki'
+import MagicString from 'magic-string'
+import { useClipboard } from '@vueuse/core'
+import { cssVariables } from '../config/shiki'
+import StyleSwitcher from './StyleSwitcher.vue'
 import ComponentLoader from './ComponentLoader.vue'
 import Stackblitz from './Stackblitz.vue'
-import StyleSwitcher from './StyleSwitcher.vue'
+import CodeSandbox from './CodeSandbox.vue'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
+import { useConfigStore } from '@/stores/config'
+import { cn } from '@/lib/utils'
 
 defineOptions({
   inheritAttrs: false,
@@ -36,7 +37,10 @@ function transformImportPath(code: string) {
 watch([style, codeConfig], async () => {
   try {
     rawString.value = await import(`../../../src/lib/registry/${style.value}/example/${props.name}.vue?raw`).then(res => res.default.trim())
-    codeHtml.value = highlight(transformedRawString.value, 'vue')
+    codeHtml.value = await codeToHtml(transformedRawString.value, {
+      lang: 'vue',
+      theme: cssVariables,
+    })
   }
   catch (err) {
     console.error(err)

apps/www/.vitepress/theme/components/CustomizerCode.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useClipboard } from '@vueuse/core'
+import { useConfigStore } from '@/stores/config'
 import { themes } from '@/lib/registry'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { useConfigStore } from '@/stores/config'
-import { useClipboard } from '@vueuse/core'
 import CheckIcon from '~icons/radix-icons/check'
 import CopyIcon from '~icons/radix-icons/copy'
-import { computed, ref } from 'vue'
 
 const { theme, config } = useConfigStore()
 

apps/www/.vitepress/theme/components/DocsBreadcrumb.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { useRoute } from 'vitepress'
+import { computed } from 'vue'
 import {
   Breadcrumb,
   BreadcrumbItem,
@@ -6,8 +8,6 @@ import {
   BreadcrumbList,
   BreadcrumbSeparator,
 } from '@/lib/registry/new-york/ui/breadcrumb'
-import { useRoute } from 'vitepress'
-import { computed } from 'vue'
 
 const route = useRoute()
 

apps/www/.vitepress/theme/components/EditLink.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import Pencil2Icon from '~icons/radix-icons/pencil-2'
 import { useData } from 'vitepress'
 import { computed } from 'vue'
+import Pencil2Icon from '~icons/radix-icons/pencil-2'
+import { Button } from '@/lib/registry/default/ui/button'
 
 const { theme, page } = useData()
 

apps/www/.vitepress/theme/components/ExamplesNav.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
-import { cn } from '@/lib/utils'
-import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 import { useRoute } from 'vitepress'
 import { computed, toRefs } from 'vue'
+import { cn } from '@/lib/utils'
+import { ScrollArea, ScrollBar } from '@/lib/registry/default/ui/scroll-area'
+import ArrowRightIcon from '~icons/radix-icons/arrow-right'
 
 const { path } = toRefs(useRoute())
 

apps/www/.vitepress/theme/components/InlineThemePicker.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Color } from '../types/colors'
+import { useConfigStore } from '@/stores/config'
 import { colors } from '@/lib/registry'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
-import { useConfigStore } from '@/stores/config'
 import RadixIconsCheck from '~icons/radix-icons/check'
 
 defineProps<{

apps/www/.vitepress/theme/components/LandingPage.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import MailExample from '@/examples/mail/Example.vue'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
+import ExamplesNav from '../components/ExamplesNav.vue'
+import Announcement from '../components/Announcement.vue'
+import GitHubIcon from '~icons/radix-icons/github-logo'
+
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import GitHubIcon from '~icons/radix-icons/github-logo'
-import Announcement from '../components/Announcement.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import PageAction from '../components/PageAction.vue'
 
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import MailExample from '@/examples/mail/Example.vue'
 </script>
 
 <template>

apps/www/.vitepress/theme/components/MobileNav.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
-import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
 import { ref } from 'vue'
 import { docsConfig } from '../config/docs'
 import Logo from './Logo.vue'
+import { Sheet, SheetContent, SheetTrigger } from '@/lib/registry/default/ui/sheet'
+import { Button } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const open = ref(false)
 </script>

apps/www/.vitepress/theme/components/PageHeaderDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import WrapBalancer from 'vue-wrap-balancer'
+import { cn } from '@/lib/utils'
 </script>
 
 <template>

apps/www/.vitepress/theme/components/Stackblitz.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { Style } from '@/lib/registry/styles'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Icon } from '@iconify/vue'
 import { ref, toRefs, watch } from 'vue'
+import { Icon } from '@iconify/vue'
 import { makeStackblitzParams } from '../utils/codeeditor'
 import Tooltip from './Tooltip.vue'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import type { Style } from '@/lib/registry/styles'
 
 const props = defineProps<{
   name: string

apps/www/.vitepress/theme/components/StyleSwitcher.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
 import type { SelectTriggerProps } from 'radix-vue'
+import { useConfigStore } from '@/stores/config'
+
+import { cn } from '@/lib/utils'
 import {
   Select,
   SelectContent,
@@ -7,10 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-
 import { styles } from '@/lib/registry/styles'
-import { cn } from '@/lib/utils'
-import { useConfigStore } from '@/stores/config'
 
 const props = defineProps<SelectTriggerProps & { class?: string }>()
 const { config } = useConfigStore()

apps/www/.vitepress/theme/components/TableOfContent.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import type { TableOfContents, TableOfContentsItem } from '../types/docs'
-import { buttonVariants } from '@/lib/registry/default/ui/button'
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
-import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import { onContentUpdated } from 'vitepress'
 import { shallowRef } from 'vue'
-import CarbonAds from '../components/CarbonAds.vue'
+import type { TableOfContents, TableOfContentsItem } from '../types/docs'
 import TableOfContentTree from './TableOfContentTree.vue'
-
-defineProps<{
-  showCarbonAds?: boolean
-}>()
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/lib/registry/default/ui/collapsible'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
+import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 
 const headers = shallowRef<TableOfContents>()
 
@@ -29,7 +24,7 @@ function getHeadingsWithHierarchy(divId: string) {
     const level = Number.parseInt(heading.tagName.charAt(1))
     if (!heading.id) {
       const newId = heading.textContent
-        ?.replaceAll(/[^a-z0-9 ]/gi, '')
+        .replaceAll(/[^a-z0-9 ]/gi, '')
         .replaceAll(' ', '-')
         .toLowerCase()
       heading.id = `${newId}`
@@ -68,7 +63,6 @@ onContentUpdated(() => {
           On This Page
         </p>
         <TableOfContentTree :tree="headers" :level="1" />
-        <CarbonAds v-if="showCarbonAds" />
       </div>
     </ScrollArea>
   </div>

apps/www/.vitepress/theme/components/TableOfContentTree.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+import { useRoute } from 'vitepress'
 import type { TableOfContentsItem } from '../types/docs'
 import { cn } from '@/lib/utils'
-import { useRoute } from 'vitepress'
-import { onMounted, onUnmounted, ref, watch } from 'vue'
 
 withDefaults(defineProps<{
   level: number

apps/www/.vitepress/theme/components/TabsMarkdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 import { computed, useSlots } from 'vue'
+import { Tabs, TabsList, TabsTrigger } from '@/lib/registry/default/ui/tabs'
 
 const slots = useSlots()
 

apps/www/.vitepress/theme/components/ThemeCustomizer.vue

@@ -1,13 +1,13 @@
 <script lang="ts" setup>
+import { useData } from 'vitepress'
 import type { Color } from '../types/colors'
-import { colors } from '@/lib/registry'
+import { RADII, useConfigStore } from '@/stores/config'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Label } from '@/lib/registry/new-york/ui/label'
-import { RADII, useConfigStore } from '@/stores/config'
+import { colors } from '@/lib/registry'
 import RadixIconsCheck from '~icons/radix-icons/check'
-import RadixIconsMoon from '~icons/radix-icons/moon'
 import RadixIconsSun from '~icons/radix-icons/sun'
-import { useData } from 'vitepress'
+import RadixIconsMoon from '~icons/radix-icons/moon'
 
 defineProps<{
   allColors: Color[]
@@ -43,7 +43,7 @@ const { isDark } = useData()
           @click="setTheme(color)"
         >
           <span
-            class="h-5 w-5 rounded-full flex items-center justify-center shrink-0"
+            class="h-5 w-5 rounded-full flex items-center justify-center"
             :style="{ backgroundColor: colors[color][7].rgb }"
           >
             <RadixIconsCheck

apps/www/.vitepress/theme/components/ThemePopover.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
+import { Paintbrush } from 'lucide-vue-next'
+import { onMounted, watch } from 'vue'
+import { allColors } from './theming/utils/data'
+import ThemeCustomizer from './ThemeCustomizer.vue'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
 import { useConfigStore } from '@/stores/config'
-import { Paintbrush } from 'lucide-vue-next'
-import { onMounted, watch } from 'vue'
-import ThemeCustomizer from './ThemeCustomizer.vue'
-import { allColors } from './theming/utils/data'
 
 const { theme, radius } = useConfigStore()
 

apps/www/.vitepress/theme/components/index.ts

@@ -1,12 +1,11 @@
-export { default as APITable } from './APITable.vue'
-export { default as BlockPreview } from './BlockPreview.vue'
-export { default as Callout } from './Callout.vue'
 export { default as CodeWrapper } from './CodeWrapper'
 export { default as ComponentPreview } from './ComponentPreview.vue'
+export { default as APITable } from './APITable.vue'
+export { default as TabPreview } from './TabPreview.vue'
+export { default as TabMarkdown } from './TabMarkdown.vue'
+export { default as TabsMarkdown } from './TabsMarkdown.vue'
+export { default as Callout } from './Callout.vue'
 export { default as LinkedCard } from './LinkedCard.vue'
 export { default as ManualInstall } from './ManualInstall.vue'
 export { default as Steps } from './Steps.vue'
-export { default as TabMarkdown } from './TabMarkdown.vue'
-export { default as TabPreview } from './TabPreview.vue'
-export { default as TabsMarkdown } from './TabsMarkdown.vue'
 export { default as VPImage } from './VPImage.vue'

apps/www/.vitepress/theme/components/theming/Theming.vue

@@ -1,25 +1,25 @@
 <script setup lang="ts">
+import { type Ref, ref } from 'vue'
 import type { DateRange } from 'radix-vue'
+import { getLocalTimeZone, today } from '@internationalized/date'
+
+import ThemingLayout from './../../layout/ThemingLayout.vue'
+
 import CookieSettings from '@/examples/cards/components/CookieSettings.vue'
 import CreateAccount from '@/examples/cards/components/CreateAccount.vue'
-
 import PaymentMethod from '@/examples/cards/components/PaymentMethod.vue'
-
 import ReportAnIssue from '@/examples/cards/components/ReportAnIssue.vue'
 import ShareDocument from '@/examples/cards/components/ShareDocument.vue'
 import TeamMembers from '@/examples/cards/components/TeamMembers.vue'
+
 import CardChat from '@/lib/registry/new-york/example/CardChat.vue'
 import ActivityGoal from '@/lib/registry/new-york/example/Cards/ActivityGoal.vue'
-import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
-
 import Metric from '@/lib/registry/new-york/example/Cards/Metric.vue'
+import DataTable from '@/lib/registry/new-york/example/Cards/DataTable.vue'
 import CardStats from '@/lib/registry/new-york/example/CardStats.vue'
+
 import { Card } from '@/lib/registry/new-york/ui/card'
 import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
-import { getLocalTimeZone, today } from '@internationalized/date'
-
-import { type Ref, ref } from 'vue'
-import ThemingLayout from './../../layout/ThemingLayout.vue'
 
 const now = today(getLocalTimeZone())
 

apps/www/.vitepress/theme/config/docs.ts

@@ -128,10 +128,12 @@ export const docsConfig: DocsConfig = {
           title: 'Auto Form',
           href: '/docs/components/auto-form',
           items: [],
+          label: 'New',
         },
         {
           title: 'Charts',
           href: '/docs/charts',
+          label: 'New Alpha',
           items: [],
         },
       ],
@@ -139,11 +141,6 @@ export const docsConfig: DocsConfig = {
     {
       title: 'Components',
       items: [
-        {
-          title: 'Sidebar',
-          href: '/docs/components/sidebar',
-          label: 'New',
-        },
         {
           title: 'Accordion',
           href: '/docs/components/accordion',
@@ -181,6 +178,7 @@ export const docsConfig: DocsConfig = {
           title: 'Calendar',
           href: '/docs/components/calendar',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Card',
@@ -219,6 +217,7 @@ export const docsConfig: DocsConfig = {
           title: 'Date Picker',
           href: '/docs/components/date-picker',
           items: [],
+          label: 'Updated',
         },
         {
           title: 'Dialog',
@@ -260,6 +259,7 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Number Field',
           href: '/docs/components/number-field',
+          label: 'New Alpha',
         },
         {
           title: 'Pagination',
@@ -324,6 +324,7 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Stepper',
           href: '/docs/components/stepper',
+          label: 'New',
         },
         {
           title: 'Switch',

apps/www/.vitepress/theme/config/shiki.ts

@@ -1,41 +1,6 @@
-import type { HighlighterCore } from 'shiki/core'
-import type { ThemeOptions } from 'vitepress'
-import { computedAsync } from '@vueuse/core'
-import { createHighlighterCore } from 'shiki/core'
-import { createJavaScriptRegexEngine } from 'shiki/engine/javascript'
+import { createCssVariablesTheme } from 'shiki'
 
-export const shikiThemes: ThemeOptions = {
-  light: 'github-light-default',
-  dark: 'github-dark-default',
-}
-
-export const highlighter = computedAsync<HighlighterCore>(async (onCancel) => {
-  const shiki = await createHighlighterCore({
-    engine: createJavaScriptRegexEngine(),
-    themes: [
-      () => import('shiki/themes/github-dark-default.mjs'),
-      () => import('shiki/themes/github-light-default.mjs'),
-    ],
-    langs: [
-      () => import('shiki/langs/javascript.mjs'),
-      () => import('shiki/langs/vue.mjs'),
-    ],
-  })
-
-  onCancel(() => shiki?.dispose())
-  return shiki
+export const cssVariables = createCssVariablesTheme({
+  variablePrefix: '--shiki-',
+  variableDefaults: {},
 })
-
-export function highlight(code: string, lang: string) {
-  if (!highlighter.value)
-    return code
-
-  return highlighter.value.codeToHtml(code, {
-    lang,
-    defaultColor: false,
-    themes: {
-      dark: 'github-dark-default',
-      light: 'github-light-default',
-    },
-  })
-}

apps/www/.vitepress/theme/index.ts

@@ -1,8 +1,8 @@
-import * as components from './components'
-import DocsLayout from './layout/DocsLayout.vue'
-import ExamplesLayout from './layout/ExamplesLayout.vue'
 // https://vitepress.dev/guide/custom-theme
 import Layout from './layout/MainLayout.vue'
+import DocsLayout from './layout/DocsLayout.vue'
+import ExamplesLayout from './layout/ExamplesLayout.vue'
+import * as components from './components'
 import './style.css'
 import './styles/vp-doc.css'
 import './styles/shiki.css'

apps/www/.vitepress/theme/layout/DocsLayout.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
+import { useData, useRoute } from 'vitepress'
+import { docsConfig } from '../config/docs'
+import TableOfContentVue from '../components/TableOfContent.vue'
+import EditLink from '../components/EditLink.vue'
+import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
 import { ScrollArea } from '@/lib/registry/default/ui/scroll-area'
 import RadixIconsCode from '~icons/radix-icons/code'
 import RadixIconsExternalLink from '~icons/radix-icons/external-link'
-import { useData, useRoute } from 'vitepress'
-import DocsBreadcrumb from '../components/DocsBreadcrumb.vue'
-import EditLink from '../components/EditLink.vue'
-import TableOfContent from '../components/TableOfContent.vue'
-import { docsConfig } from '../config/docs'
 
 const $route = useRoute()
 const { frontmatter } = useData()
@@ -62,7 +62,7 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
       <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
         <div class="mx-auto w-full min-w-0">
           <div class="block xl:hidden">
-            <TableOfContent />
+            <TableOfContentVue />
           </div>
 
           <DocsBreadcrumb class="mb-4" />
@@ -104,7 +104,7 @@ const sourceLink = 'https://github.com/radix-vue/shadcn-vue/tree/dev/'
 
         <div class="hidden text-sm xl:block">
           <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
-            <TableOfContent show-carbon-ads />
+            <TableOfContentVue />
           </div>
         </div>
       </main>

apps/www/.vitepress/theme/layout/ExamplesLayout.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
+import PageAction from '../components/PageAction.vue'
+import ExamplesNav from '../components/ExamplesNav.vue'
+import Announcement from '../components/Announcement.vue'
+
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import { cn } from '@/lib/utils'
-import Announcement from '../components/Announcement.vue'
-import ExamplesNav from '../components/ExamplesNav.vue'
-import PageAction from '../components/PageAction.vue'
-import PageHeader from '../components/PageHeader.vue'
-
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
 </script>
 
 <template>

apps/www/.vitepress/theme/layout/MainLayout.vue

@@ -1,29 +1,29 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
+import { useMagicKeys, useToggle } from '@vueuse/core'
+import { onMounted, ref, watch } from 'vue'
+import { Content, useData, useRoute, useRouter } from 'vitepress'
+import { type NavItem, docsConfig } from '../config/docs'
+import Logo from '../components/Logo.vue'
+import MobileNav from '../components/MobileNav.vue'
+import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
+
+import Kbd from '../components/Kbd.vue'
+import ThemePopover from '../components/ThemePopover.vue'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/default/ui/command'
+
+import { Button } from '@/lib/registry/default/ui/button'
+import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
+import RadixIconsMoon from '~icons/radix-icons/moon'
+import RadixIconsSun from '~icons/radix-icons/sun'
+import { useConfigStore } from '@/stores/config'
 import { Dialog, DialogContent } from '@/lib/registry/default/ui/dialog'
 import { Toaster as DefaultToaster } from '@/lib/registry/default/ui/toast'
 import { Toaster as NewYorkSonner } from '@/lib/registry/new-york/ui/sonner'
 import { Toaster as NewYorkToaster } from '@/lib/registry/new-york/ui/toast'
 import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
 
-import { useConfigStore } from '@/stores/config'
-import { useMagicKeys, useToggle } from '@vueuse/core'
-import Circle from '~icons/radix-icons/circle'
-
 import File from '~icons/radix-icons/file'
-import RadixIconsGithubLogo from '~icons/radix-icons/github-logo'
-import RadixIconsMoon from '~icons/radix-icons/moon'
-import RadixIconsSun from '~icons/radix-icons/sun'
-import { Content, useData, useRoute, useRouter } from 'vitepress'
-import { onMounted, ref, watch } from 'vue'
-import CodeConfigCustomizer from '../components/CodeConfigCustomizer.vue'
-import Kbd from '../components/Kbd.vue'
-import Logo from '../components/Logo.vue'
-import MobileNav from '../components/MobileNav.vue'
-
-import ThemePopover from '../components/ThemePopover.vue'
-import { docsConfig, type NavItem } from '../config/docs'
+import Circle from '~icons/radix-icons/circle'
 
 const { radius, theme } = useConfigStore()
 // Whenever the component is mounted, update the document class list
@@ -41,7 +41,7 @@ const toggleDark = useToggle(isDark)
 const links = [
   {
     name: 'GitHub',
-    href: 'https://github.com/unovue/shadcn-vue',
+    href: 'https://github.com/radix-vue/shadcn-vue',
     icon: RadixIconsGithubLogo,
   },
   // {
@@ -209,7 +209,7 @@ watch(() => $route.path, (n) => {
             <span class="inline-block ml-2">
               Ported to Vue by
               <a
-                href="https://github.com/unovue"
+                href="https://github.com/radix-vue"
                 target="_blank"
                 class="underline underline-offset-4 font-bold decoration-foreground"
               >
@@ -220,7 +220,7 @@ watch(() => $route.path, (n) => {
             <span class="inline-block ml-2">
               The code source is available on
               <a
-                href="https://github.com/unovue/shadcn-vue"
+                href="https://github.com/radix-vue/shadcn-vue"
                 target="_blank"
                 class="underline underline-offset-4 font-bold decoration-foreground"
               >

apps/www/.vitepress/theme/layout/ThemingLayout.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { Color } from '../types/colors'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
-import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { useConfigStore } from '@/stores/config'
-import { Paintbrush } from 'lucide-vue-next'
 import { onMounted, watch } from 'vue'
+import { Paintbrush } from 'lucide-vue-next'
+import PageHeader from '../components/PageHeader.vue'
+import PageHeaderHeading from '../components/PageHeaderHeading.vue'
+import PageHeaderDescription from '../components/PageHeaderDescription.vue'
 import CustomizerCode from '../components/CustomizerCode.vue'
+import type { Color } from '../types/colors'
+import ThemeCustomizer from '../components/ThemeCustomizer.vue'
 import InlineThemePicker from '../components/InlineThemePicker.vue'
 import PageAction from '../components/PageAction.vue'
-import PageHeader from '../components/PageHeader.vue'
-import PageHeaderDescription from '../components/PageHeaderDescription.vue'
-import PageHeaderHeading from '../components/PageHeaderHeading.vue'
-import ThemeCustomizer from '../components/ThemeCustomizer.vue'
+import { useConfigStore } from '@/stores/config'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/lib/registry/new-york/ui/dialog'
+import { Drawer, DrawerContent, DrawerTrigger } from '@/lib/registry/new-york/ui/drawer'
 
 // Create an array of color values
 const allColors: Color[] = [

apps/www/.vitepress/theme/plugins/utils.ts

@@ -1,7 +1,7 @@
 // Credit to @hairyf https://github.com/hairyf/markdown-it-vitepress-demo
 
-import type { AttributeNode, ElementNode } from '@vue/compiler-core'
 import { baseParse } from '@vue/compiler-core'
+import type { AttributeNode, ElementNode } from '@vue/compiler-core'
 
 export interface GenerateOptions {
   attrs?: string

apps/www/.vitepress/theme/style.css

@@ -6,7 +6,7 @@
 	:root {
 		--font-geist-sans: "geist-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
 			Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
+			
 		--background: 0 0% 100%;
 		--foreground: 240 10% 3.9%;
 		--card: 0 0% 100%;
@@ -28,16 +28,6 @@
 		--ring: 240 5% 64.9%;
 		--radius: 0.5rem;
 
-    --sidebar-background: 0 0% 98%;
-    --sidebar-foreground: 240 5.3% 26.1%;
-    --sidebar-primary: 240 5.9% 10%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 240 4.8% 95.9%;
-    --sidebar-accent-foreground: 240 5.9% 10%;
-    --sidebar-border: 220 13% 91%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-
-
 		--vis-primary-color: var(--primary);
     --vis-secondary-color: 160 81% 40%;
     --vis-text-color: var(--muted-foreground);
@@ -74,22 +64,11 @@
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
     --ring: 240 4.9% 83.9%;
-
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
 
 	* {
 		@apply border-border;
-    scrollbar-width: thin;
-    scrollbar-color: hsl(var(--border)) transparent;
 	}
 	html {
 		-webkit-text-size-adjust: 100%;
@@ -118,6 +97,19 @@
 		src: url("/fonts/Geist/GeistVariableVF.woff2") format("woff2");
 	}
 
+	/* === Scrollbars === */
+
+	::-webkit-scrollbar {
+		@apply w-2;
+		@apply h-2;
+	}
+
+	::-webkit-scrollbar-track {
+		@apply !bg-muted;
+	}
+	::-webkit-scrollbar-thumb {
+		@apply rounded-sm !bg-muted-foreground/30;
+	}
 
 	/* Firefox */
 	/* https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility */
@@ -129,14 +121,14 @@
 		scrollbar-color: hsl(215.4 16.3% 56.9% / 0.3);
 	}
 
-  html.dark .shiki,
-  html.dark .shiki span {
-    color: var(--shiki-dark);
-  }
-  html:not(.dark) .shiki,
-  html:not(.dark) .shiki span {
-    color: var(--shiki-light);
-  }
+	.hide-scrollbar::-webkit-scrollbar {
+		display: none;
+	}
+
+	.hide-scrollbar {
+		-ms-overflow-style: none;
+		scrollbar-width: none;
+	}
 
 	.antialised {
 		-webkit-font-smoothing: antialiased;
@@ -155,7 +147,7 @@
 		@apply absolute w-9 h-9 bg-muted rounded-full font-mono font-medium text-center text-base inline-flex items-center justify-center -indent-px border-4 border-background;
 		@apply -ml-[50px] -mt-1;
 		content: counter(step);
-	}
+	}	
 }
 
 @media (max-width: 640px) {
@@ -165,7 +157,7 @@
 }
 
 div[class^="language-"] {
-	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border
+	@apply mb-4 mt-6 max-h-[650px] overflow-x-auto md:rounded-lg border !bg-secondary-foreground dark:!bg-secondary
 }
 pre {
 	@apply py-4;
@@ -185,7 +177,7 @@ pre code {
 
 pre code .line {
 	@apply px-4 min-h-4 !py-0.5 w-full inline-block leading-[--vp-code-line-height];
-}
+} 
 
 .line-number {
 	@apply !text-[.75rem] !inline-block text-muted-foreground leading-[--vp-code-line-height];

apps/www/.vitepress/theme/styles/vp-doc.css

@@ -350,7 +350,7 @@
   padding: 0 24px; */
   width: calc(100% + 2 * 24px);
   display: inline-block;
-  @apply bg-[hsl(var(--muted))] dark:bg-[hsl(var(--muted))]
+  @apply bg-[hsl(var(--foreground))] dark:bg-[hsl(var(--background)_/_50%)]
 } 
 
 .vp-doc [class*='language-'] code .highlighted.error {

apps/www/__registry__/index.ts

@@ -62,56 +62,56 @@ export const Index = {
     "AutoFormApi": {
       name: "AutoFormApi",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormApi.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormApi.vue"],
     },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormArray.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormArray.vue"],
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormBasic.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormBasic.vue"],
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormConfirmPassword.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormConfirmPassword.vue"],
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormControlled.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormControlled.vue"],
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormDependencies.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormDependencies.vue"],
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormInputWithoutLabel.vue"],
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/default/example/AutoFormSubObject.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/AutoFormSubObject.vue"],
     },
@@ -300,7 +300,7 @@ export const Index = {
     "CalendarForm": {
       name: "CalendarForm",
       type: "components:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/default/example/CalendarForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CalendarForm.vue"],
     },
@@ -314,7 +314,7 @@ export const Index = {
     "CardChat": {
       name: "CardChat",
       type: "components:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
       component: () => import("../src/lib/registry/default/example/CardChat.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CardChat.vue"],
     },
@@ -328,14 +328,14 @@ export const Index = {
     "CardFormDemo": {
       name: "CardFormDemo",
       type: "components:example",
-      registryDependencies: ["button","card","input","label","select"],
+      registryDependencies: ["card","select","input","label","button"],
       component: () => import("../src/lib/registry/default/example/CardFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CardFormDemo.vue"],
     },
     "CardStats": {
       name: "CardStats",
       type: "components:example",
-      registryDependencies: ["card","themes","config"],
+      registryDependencies: ["card","config","themes"],
       component: () => import("../src/lib/registry/default/example/CardStats.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CardStats.vue"],
     },
@@ -356,42 +356,42 @@ export const Index = {
     "CarouselDemo": {
       name: "CarouselDemo",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselDemo.vue"],
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselOrientation.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselOrientation.vue"],
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselPlugin.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselPlugin.vue"],
     },
     "CarouselSize": {
       name: "CarouselSize",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselSize.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselSize.vue"],
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselSpacing.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselSpacing.vue"],
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/default/example/CarouselThumbnails.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CarouselThumbnails.vue"],
     },
@@ -412,14 +412,14 @@ export const Index = {
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
       type: "components:example",
-      registryDependencies: ["button","checkbox","form","toast"],
+      registryDependencies: ["button","form","checkbox","toast"],
       component: () => import("../src/lib/registry/default/example/CheckboxFormMultiple.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CheckboxFormMultiple.vue"],
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
       type: "components:example",
-      registryDependencies: ["button","checkbox","form","toast"],
+      registryDependencies: ["button","form","checkbox","toast"],
       component: () => import("../src/lib/registry/default/example/CheckboxFormSingle.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/CheckboxFormSingle.vue"],
     },
@@ -440,7 +440,7 @@ export const Index = {
     "ComboboxDemo": {
       name: "ComboboxDemo",
       type: "components:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       component: () => import("../src/lib/registry/default/example/ComboboxDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ComboboxDemo.vue"],
     },
@@ -454,14 +454,14 @@ export const Index = {
     "ComboboxForm": {
       name: "ComboboxForm",
       type: "components:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       component: () => import("../src/lib/registry/default/example/ComboboxForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ComboboxForm.vue"],
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
       type: "components:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       component: () => import("../src/lib/registry/default/example/ComboboxPopover.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ComboboxPopover.vue"],
     },
@@ -517,7 +517,7 @@ export const Index = {
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
       type: "components:example",
-      registryDependencies: ["button","dropdown-menu"],
+      registryDependencies: ["dropdown-menu","button"],
       component: () => import("../src/lib/registry/default/example/DataTableDemoColumn.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DataTableDemoColumn.vue"],
     },
@@ -531,35 +531,35 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerDemo.vue"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerForm.vue"],
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
       type: "components:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerWithIndependentMonths.vue"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["calendar","button","popover","select","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerWithPresets.vue"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/default/example/DatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DatePickerWithRange.vue"],
     },
@@ -580,7 +580,7 @@ export const Index = {
     "DialogForm": {
       name: "DialogForm",
       type: "components:example",
-      registryDependencies: ["button","dialog","form","input","toast"],
+      registryDependencies: ["button","form","dialog","input","toast"],
       component: () => import("../src/lib/registry/default/example/DialogForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DialogForm.vue"],
     },
@@ -636,7 +636,7 @@ export const Index = {
     "DrawerDialog": {
       name: "DrawerDialog",
       type: "components:example",
-      registryDependencies: ["button","dialog","drawer","input","label"],
+      registryDependencies: ["button","dialog","drawer","label","input"],
       component: () => import("../src/lib/registry/default/example/DrawerDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/DrawerDialog.vue"],
     },
@@ -706,7 +706,7 @@ export const Index = {
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",
-      registryDependencies: ["button","input"],
+      registryDependencies: ["input","button"],
       component: () => import("../src/lib/registry/default/example/InputWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/InputWithButton.vue"],
     },
@@ -769,28 +769,28 @@ export const Index = {
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/default/example/NumberFieldCurrency.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NumberFieldCurrency.vue"],
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/default/example/NumberFieldDecimal.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NumberFieldDecimal.vue"],
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/default/example/NumberFieldDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NumberFieldDemo.vue"],
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/default/example/NumberFieldDisabled.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NumberFieldDisabled.vue"],
     },
@@ -804,14 +804,14 @@ export const Index = {
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/default/example/NumberFieldPercentage.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/NumberFieldPercentage.vue"],
     },
     "PaginationDemo": {
       name: "PaginationDemo",
       type: "components:example",
-      registryDependencies: ["button","pagination"],
+      registryDependencies: ["pagination","button"],
       component: () => import("../src/lib/registry/default/example/PaginationDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PaginationDemo.vue"],
     },
@@ -839,7 +839,7 @@ export const Index = {
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
-      registryDependencies: ["button","form","pin-input","toast"],
+      registryDependencies: ["pin-input","button","form","toast"],
       component: () => import("../src/lib/registry/default/example/PinInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PinInputFormDemo.vue"],
     },
@@ -853,7 +853,7 @@ export const Index = {
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
-      registryDependencies: ["button","input","label","popover"],
+      registryDependencies: ["popover","button","label","input"],
       component: () => import("../src/lib/registry/default/example/PopoverDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/PopoverDemo.vue"],
     },
@@ -979,7 +979,7 @@ export const Index = {
     "SliderDemo": {
       name: "SliderDemo",
       type: "components:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       component: () => import("../src/lib/registry/default/example/SliderDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/SliderDemo.vue"],
     },
@@ -1014,21 +1014,21 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["button","form","input","select","stepper","toast"],
+      registryDependencies: ["stepper","form","select","input","button","toast"],
       component: () => import("../src/lib/registry/default/example/StepperForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperForm.vue"],
     },
     "StepperHorizental": {
       name: "StepperHorizental",
       type: "components:example",
-      registryDependencies: ["button","stepper"],
+      registryDependencies: ["stepper","button"],
       component: () => import("../src/lib/registry/default/example/StepperHorizental.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperHorizental.vue"],
     },
     "StepperVertical": {
       name: "StepperVertical",
       type: "components:example",
-      registryDependencies: ["button","stepper"],
+      registryDependencies: ["stepper","button"],
       component: () => import("../src/lib/registry/default/example/StepperVertical.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/StepperVertical.vue"],
     },
@@ -1084,7 +1084,7 @@ export const Index = {
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
       type: "components:example",
-      registryDependencies: ["button","form","tags-input","toast"],
+      registryDependencies: ["tags-input","button","form","toast"],
       component: () => import("../src/lib/registry/default/example/TagsInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TagsInputFormDemo.vue"],
     },
@@ -1112,21 +1112,21 @@ export const Index = {
     "TextareaWithButton": {
       name: "TextareaWithButton",
       type: "components:example",
-      registryDependencies: ["button","textarea"],
+      registryDependencies: ["textarea","button"],
       component: () => import("../src/lib/registry/default/example/TextareaWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithButton.vue"],
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
       type: "components:example",
-      registryDependencies: ["label","textarea"],
+      registryDependencies: ["textarea","label"],
       component: () => import("../src/lib/registry/default/example/TextareaWithLabel.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithLabel.vue"],
     },
     "TextareaWithText": {
       name: "TextareaWithText",
       type: "components:example",
-      registryDependencies: ["label","textarea"],
+      registryDependencies: ["textarea","label"],
       component: () => import("../src/lib/registry/default/example/TextareaWithText.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/TextareaWithText.vue"],
     },
@@ -1140,7 +1140,7 @@ export const Index = {
     "ToastDestructive": {
       name: "ToastDestructive",
       type: "components:example",
-      registryDependencies: ["button","toast","use-toast"],
+      registryDependencies: ["button","use-toast","toast"],
       component: () => import("../src/lib/registry/default/example/ToastDestructive.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ToastDestructive.vue"],
     },
@@ -1154,7 +1154,7 @@ export const Index = {
     "ToastWithAction": {
       name: "ToastWithAction",
       type: "components:example",
-      registryDependencies: ["button","toast","use-toast"],
+      registryDependencies: ["button","use-toast","toast"],
       component: () => import("../src/lib/registry/default/example/ToastWithAction.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/ToastWithAction.vue"],
     },
@@ -1364,42 +1364,42 @@ export const Index = {
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/default/example/VDatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VDatePickerDemo.vue"],
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
       type: "components:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
       component: () => import("../src/lib/registry/default/example/VDatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VDatePickerForm.vue"],
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover","select"],
       component: () => import("../src/lib/registry/default/example/VDatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VDatePickerWithPresets.vue"],
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/default/example/VDatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VDatePickerWithRange.vue"],
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/default/example/VDateTimePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VDateTimePickerDemo.vue"],
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/default/example/VRangePickerWithSlot.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/VRangePickerWithSlot.vue"],
     },
@@ -1413,7 +1413,7 @@ export const Index = {
     "DataTable": {
       name: "DataTable",
       type: "components:example",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","card","utils"],
       component: () => import("../src/lib/registry/default/example/Cards/DataTable.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/Cards/DataTable.vue"],
     },
@@ -1483,38 +1483,24 @@ export const Index = {
     "Dashboard05": {
       name: "Dashboard05",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
       component: () => import("../src/lib/registry/default/block/Dashboard05.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Dashboard05.vue"],
     },
     "Dashboard06": {
       name: "Dashboard06",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
       component: () => import("../src/lib/registry/default/block/Dashboard06.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Dashboard06.vue"],
     },
     "Dashboard07": {
       name: "Dashboard07",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
       component: () => import("../src/lib/registry/default/block/Dashboard07.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Dashboard07.vue"],
     },
-    "Sidebar01": {
-      name: "Sidebar01",
-      type: "components:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
-      component: () => import("../src/lib/registry/default/block/Sidebar01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Sidebar01.vue"],
-    },
-    "Sidebar07": {
-      name: "Sidebar07",
-      type: "components:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
-      component: () => import("../src/lib/registry/default/block/Sidebar07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/default/block/Sidebar07.vue"],
-    },
   },  "new-york": {
     "AccordionDemo": {
       name: "AccordionDemo",
@@ -1575,56 +1561,56 @@ export const Index = {
     "AutoFormApi": {
       name: "AutoFormApi",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormApi.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormApi.vue"],
     },
     "AutoFormArray": {
       name: "AutoFormArray",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormArray.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormArray.vue"],
     },
     "AutoFormBasic": {
       name: "AutoFormBasic",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormBasic.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormBasic.vue"],
     },
     "AutoFormConfirmPassword": {
       name: "AutoFormConfirmPassword",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormConfirmPassword.vue"],
     },
     "AutoFormControlled": {
       name: "AutoFormControlled",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormControlled.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormControlled.vue"],
     },
     "AutoFormDependencies": {
       name: "AutoFormDependencies",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormDependencies.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormDependencies.vue"],
     },
     "AutoFormInputWithoutLabel": {
       name: "AutoFormInputWithoutLabel",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormInputWithoutLabel.vue"],
     },
     "AutoFormSubObject": {
       name: "AutoFormSubObject",
       type: "components:example",
-      registryDependencies: ["auto-form","button","toast"],
+      registryDependencies: ["button","toast","auto-form"],
       component: () => import("../src/lib/registry/new-york/example/AutoFormSubObject.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/AutoFormSubObject.vue"],
     },
@@ -1813,7 +1799,7 @@ export const Index = {
     "CalendarForm": {
       name: "CalendarForm",
       type: "components:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/new-york/example/CalendarForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CalendarForm.vue"],
     },
@@ -1827,7 +1813,7 @@ export const Index = {
     "CardChat": {
       name: "CardChat",
       type: "components:example",
-      registryDependencies: ["avatar","button","card","command","dialog","input","tooltip","utils"],
+      registryDependencies: ["card","dialog","command","avatar","tooltip","button","input","utils"],
       component: () => import("../src/lib/registry/new-york/example/CardChat.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CardChat.vue"],
     },
@@ -1841,14 +1827,14 @@ export const Index = {
     "CardFormDemo": {
       name: "CardFormDemo",
       type: "components:example",
-      registryDependencies: ["button","card","input","label","select"],
+      registryDependencies: ["card","select","input","label","button"],
       component: () => import("../src/lib/registry/new-york/example/CardFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CardFormDemo.vue"],
     },
     "CardStats": {
       name: "CardStats",
       type: "components:example",
-      registryDependencies: ["card","themes","config"],
+      registryDependencies: ["card","config","themes"],
       component: () => import("../src/lib/registry/new-york/example/CardStats.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CardStats.vue"],
     },
@@ -1869,42 +1855,42 @@ export const Index = {
     "CarouselDemo": {
       name: "CarouselDemo",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselDemo.vue"],
     },
     "CarouselOrientation": {
       name: "CarouselOrientation",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselOrientation.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselOrientation.vue"],
     },
     "CarouselPlugin": {
       name: "CarouselPlugin",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselPlugin.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselPlugin.vue"],
     },
     "CarouselSize": {
       name: "CarouselSize",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselSize.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselSize.vue"],
     },
     "CarouselSpacing": {
       name: "CarouselSpacing",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselSpacing.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselSpacing.vue"],
     },
     "CarouselThumbnails": {
       name: "CarouselThumbnails",
       type: "components:example",
-      registryDependencies: ["card","carousel"],
+      registryDependencies: ["carousel","card"],
       component: () => import("../src/lib/registry/new-york/example/CarouselThumbnails.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CarouselThumbnails.vue"],
     },
@@ -1925,14 +1911,14 @@ export const Index = {
     "CheckboxFormMultiple": {
       name: "CheckboxFormMultiple",
       type: "components:example",
-      registryDependencies: ["button","checkbox","form","toast"],
+      registryDependencies: ["button","form","checkbox","toast"],
       component: () => import("../src/lib/registry/new-york/example/CheckboxFormMultiple.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CheckboxFormMultiple.vue"],
     },
     "CheckboxFormSingle": {
       name: "CheckboxFormSingle",
       type: "components:example",
-      registryDependencies: ["button","checkbox","form","toast"],
+      registryDependencies: ["button","form","checkbox","toast"],
       component: () => import("../src/lib/registry/new-york/example/CheckboxFormSingle.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/CheckboxFormSingle.vue"],
     },
@@ -1953,7 +1939,7 @@ export const Index = {
     "ComboboxDemo": {
       name: "ComboboxDemo",
       type: "components:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       component: () => import("../src/lib/registry/new-york/example/ComboboxDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ComboboxDemo.vue"],
     },
@@ -1967,14 +1953,14 @@ export const Index = {
     "ComboboxForm": {
       name: "ComboboxForm",
       type: "components:example",
-      registryDependencies: ["button","command","form","popover","toast","utils"],
+      registryDependencies: ["utils","button","command","form","popover","toast"],
       component: () => import("../src/lib/registry/new-york/example/ComboboxForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ComboboxForm.vue"],
     },
     "ComboboxPopover": {
       name: "ComboboxPopover",
       type: "components:example",
-      registryDependencies: ["button","command","popover","utils"],
+      registryDependencies: ["utils","button","command","popover"],
       component: () => import("../src/lib/registry/new-york/example/ComboboxPopover.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ComboboxPopover.vue"],
     },
@@ -2030,7 +2016,7 @@ export const Index = {
     "DataTableDemoColumn": {
       name: "DataTableDemoColumn",
       type: "components:example",
-      registryDependencies: ["button","dropdown-menu"],
+      registryDependencies: ["dropdown-menu","button"],
       component: () => import("../src/lib/registry/new-york/example/DataTableDemoColumn.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DataTableDemoColumn.vue"],
     },
@@ -2044,35 +2030,35 @@ export const Index = {
     "DatePickerDemo": {
       name: "DatePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","calendar","popover","utils"],
+      registryDependencies: ["calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerDemo.vue"],
     },
     "DatePickerForm": {
       name: "DatePickerForm",
       type: "components:example",
-      registryDependencies: ["button","calendar","form","popover","toast","utils"],
+      registryDependencies: ["calendar","button","form","popover","toast","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerForm.vue"],
     },
     "DatePickerWithIndependentMonths": {
       name: "DatePickerWithIndependentMonths",
       type: "components:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerWithIndependentMonths.vue"],
     },
     "DatePickerWithPresets": {
       name: "DatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["button","calendar","popover","select","utils"],
+      registryDependencies: ["calendar","button","popover","select","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerWithPresets.vue"],
     },
     "DatePickerWithRange": {
       name: "DatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["button","popover","range-calendar","utils"],
+      registryDependencies: ["range-calendar","button","popover","utils"],
       component: () => import("../src/lib/registry/new-york/example/DatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DatePickerWithRange.vue"],
     },
@@ -2093,7 +2079,7 @@ export const Index = {
     "DialogForm": {
       name: "DialogForm",
       type: "components:example",
-      registryDependencies: ["button","dialog","form","input","toast"],
+      registryDependencies: ["button","form","dialog","input","toast"],
       component: () => import("../src/lib/registry/new-york/example/DialogForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DialogForm.vue"],
     },
@@ -2149,7 +2135,7 @@ export const Index = {
     "DrawerDialog": {
       name: "DrawerDialog",
       type: "components:example",
-      registryDependencies: ["button","dialog","drawer","input","label"],
+      registryDependencies: ["button","dialog","drawer","label","input"],
       component: () => import("../src/lib/registry/new-york/example/DrawerDialog.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/DrawerDialog.vue"],
     },
@@ -2219,7 +2205,7 @@ export const Index = {
     "InputWithButton": {
       name: "InputWithButton",
       type: "components:example",
-      registryDependencies: ["button","input"],
+      registryDependencies: ["input","button"],
       component: () => import("../src/lib/registry/new-york/example/InputWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/InputWithButton.vue"],
     },
@@ -2282,28 +2268,28 @@ export const Index = {
     "NumberFieldCurrency": {
       name: "NumberFieldCurrency",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/new-york/example/NumberFieldCurrency.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NumberFieldCurrency.vue"],
     },
     "NumberFieldDecimal": {
       name: "NumberFieldDecimal",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/new-york/example/NumberFieldDecimal.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NumberFieldDecimal.vue"],
     },
     "NumberFieldDemo": {
       name: "NumberFieldDemo",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/new-york/example/NumberFieldDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NumberFieldDemo.vue"],
     },
     "NumberFieldDisabled": {
       name: "NumberFieldDisabled",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/new-york/example/NumberFieldDisabled.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NumberFieldDisabled.vue"],
     },
@@ -2317,14 +2303,14 @@ export const Index = {
     "NumberFieldPercentage": {
       name: "NumberFieldPercentage",
       type: "components:example",
-      registryDependencies: ["label","number-field"],
+      registryDependencies: ["number-field","label"],
       component: () => import("../src/lib/registry/new-york/example/NumberFieldPercentage.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/NumberFieldPercentage.vue"],
     },
     "PaginationDemo": {
       name: "PaginationDemo",
       type: "components:example",
-      registryDependencies: ["button","pagination"],
+      registryDependencies: ["pagination","button"],
       component: () => import("../src/lib/registry/new-york/example/PaginationDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/PaginationDemo.vue"],
     },
@@ -2352,7 +2338,7 @@ export const Index = {
     "PinInputFormDemo": {
       name: "PinInputFormDemo",
       type: "components:example",
-      registryDependencies: ["button","form","pin-input","toast"],
+      registryDependencies: ["pin-input","button","form","toast"],
       component: () => import("../src/lib/registry/new-york/example/PinInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/PinInputFormDemo.vue"],
     },
@@ -2366,7 +2352,7 @@ export const Index = {
     "PopoverDemo": {
       name: "PopoverDemo",
       type: "components:example",
-      registryDependencies: ["button","input","label","popover"],
+      registryDependencies: ["popover","button","label","input"],
       component: () => import("../src/lib/registry/new-york/example/PopoverDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/PopoverDemo.vue"],
     },
@@ -2492,7 +2478,7 @@ export const Index = {
     "SliderDemo": {
       name: "SliderDemo",
       type: "components:example",
-      registryDependencies: ["slider","utils"],
+      registryDependencies: ["utils","slider"],
       component: () => import("../src/lib/registry/new-york/example/SliderDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/SliderDemo.vue"],
     },
@@ -2527,21 +2513,21 @@ export const Index = {
     "StepperForm": {
       name: "StepperForm",
       type: "components:example",
-      registryDependencies: ["button","form","input","select","stepper","toast"],
+      registryDependencies: ["stepper","form","select","input","button","toast"],
       component: () => import("../src/lib/registry/new-york/example/StepperForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/StepperForm.vue"],
     },
     "StepperHorizental": {
       name: "StepperHorizental",
       type: "components:example",
-      registryDependencies: ["button","stepper"],
+      registryDependencies: ["stepper","button"],
       component: () => import("../src/lib/registry/new-york/example/StepperHorizental.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/StepperHorizental.vue"],
     },
     "StepperVertical": {
       name: "StepperVertical",
       type: "components:example",
-      registryDependencies: ["button","stepper"],
+      registryDependencies: ["stepper","button"],
       component: () => import("../src/lib/registry/new-york/example/StepperVertical.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/StepperVertical.vue"],
     },
@@ -2597,7 +2583,7 @@ export const Index = {
     "TagsInputFormDemo": {
       name: "TagsInputFormDemo",
       type: "components:example",
-      registryDependencies: ["button","form","tags-input","toast"],
+      registryDependencies: ["tags-input","button","form","toast"],
       component: () => import("../src/lib/registry/new-york/example/TagsInputFormDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TagsInputFormDemo.vue"],
     },
@@ -2625,21 +2611,21 @@ export const Index = {
     "TextareaWithButton": {
       name: "TextareaWithButton",
       type: "components:example",
-      registryDependencies: ["button","textarea"],
+      registryDependencies: ["textarea","button"],
       component: () => import("../src/lib/registry/new-york/example/TextareaWithButton.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TextareaWithButton.vue"],
     },
     "TextareaWithLabel": {
       name: "TextareaWithLabel",
       type: "components:example",
-      registryDependencies: ["label","textarea"],
+      registryDependencies: ["textarea","label"],
       component: () => import("../src/lib/registry/new-york/example/TextareaWithLabel.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TextareaWithLabel.vue"],
     },
     "TextareaWithText": {
       name: "TextareaWithText",
       type: "components:example",
-      registryDependencies: ["label","textarea"],
+      registryDependencies: ["textarea","label"],
       component: () => import("../src/lib/registry/new-york/example/TextareaWithText.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/TextareaWithText.vue"],
     },
@@ -2653,7 +2639,7 @@ export const Index = {
     "ToastDestructive": {
       name: "ToastDestructive",
       type: "components:example",
-      registryDependencies: ["button","toast","use-toast"],
+      registryDependencies: ["button","use-toast","toast"],
       component: () => import("../src/lib/registry/new-york/example/ToastDestructive.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ToastDestructive.vue"],
     },
@@ -2667,7 +2653,7 @@ export const Index = {
     "ToastWithAction": {
       name: "ToastWithAction",
       type: "components:example",
-      registryDependencies: ["button","toast","use-toast"],
+      registryDependencies: ["button","use-toast","toast"],
       component: () => import("../src/lib/registry/new-york/example/ToastWithAction.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/ToastWithAction.vue"],
     },
@@ -2877,42 +2863,42 @@ export const Index = {
     "VDatePickerDemo": {
       name: "VDatePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/new-york/example/VDatePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VDatePickerDemo.vue"],
     },
     "VDatePickerForm": {
       name: "VDatePickerForm",
       type: "components:example",
-      registryDependencies: ["button","form","popover","toast","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","form","popover","toast"],
       component: () => import("../src/lib/registry/new-york/example/VDatePickerForm.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VDatePickerForm.vue"],
     },
     "VDatePickerWithPresets": {
       name: "VDatePickerWithPresets",
       type: "components:example",
-      registryDependencies: ["button","popover","select","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover","select"],
       component: () => import("../src/lib/registry/new-york/example/VDatePickerWithPresets.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VDatePickerWithPresets.vue"],
     },
     "VDatePickerWithRange": {
       name: "VDatePickerWithRange",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/new-york/example/VDatePickerWithRange.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VDatePickerWithRange.vue"],
     },
     "VDateTimePickerDemo": {
       name: "VDateTimePickerDemo",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/new-york/example/VDateTimePickerDemo.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VDateTimePickerDemo.vue"],
     },
     "VRangePickerWithSlot": {
       name: "VRangePickerWithSlot",
       type: "components:example",
-      registryDependencies: ["button","popover","v-calendar","utils"],
+      registryDependencies: ["utils","button","v-calendar","popover"],
       component: () => import("../src/lib/registry/new-york/example/VRangePickerWithSlot.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/VRangePickerWithSlot.vue"],
     },
@@ -2926,7 +2912,7 @@ export const Index = {
     "DataTable": {
       name: "DataTable",
       type: "components:example",
-      registryDependencies: ["button","card","checkbox","dropdown-menu","input","table","utils"],
+      registryDependencies: ["button","checkbox","dropdown-menu","input","table","card","utils"],
       component: () => import("../src/lib/registry/new-york/example/Cards/DataTable.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/Cards/DataTable.vue"],
     },
@@ -2996,37 +2982,23 @@ export const Index = {
     "Dashboard05": {
       name: "Dashboard05",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","checkbox","dropdown-menu","input","pagination","progress","separator","sheet","table","tabs","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","pagination","progress","separator","table","tabs","tooltip","checkbox"],
       component: () => import("../src/lib/registry/new-york/block/Dashboard05.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Dashboard05.vue"],
     },
     "Dashboard06": {
       name: "Dashboard06",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","sheet","table","tabs","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","breadcrumb","sheet","table","tabs","tooltip"],
       component: () => import("../src/lib/registry/new-york/block/Dashboard06.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Dashboard06.vue"],
     },
     "Dashboard07": {
       name: "Dashboard07",
       type: "components:block",
-      registryDependencies: ["badge","breadcrumb","button","card","dropdown-menu","input","label","select","sheet","table","textarea","toggle-group","tooltip"],
+      registryDependencies: ["badge","button","card","dropdown-menu","input","textarea","label","toggle-group","breadcrumb","sheet","table","select","tooltip"],
       component: () => import("../src/lib/registry/new-york/block/Dashboard07.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Dashboard07.vue"],
     },
-    "Sidebar01": {
-      name: "Sidebar01",
-      type: "components:block",
-      registryDependencies: ["breadcrumb","dropdown-menu","label","separator","sidebar"],
-      component: () => import("../src/lib/registry/new-york/block/Sidebar01.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Sidebar01.vue"],
-    },
-    "Sidebar07": {
-      name: "Sidebar07",
-      type: "components:block",
-      registryDependencies: ["avatar","breadcrumb","collapsible","dropdown-menu","separator","sidebar"],
-      component: () => import("../src/lib/registry/new-york/block/Sidebar07.vue").then((m) => m.default),
-      files: ["../src/lib/registry/new-york/block/Sidebar07.vue"],
-    },
   },
 }

apps/www/package.json

@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.11.3",
+  "version": "0.10.5",
   "files": [
     "dist"
   ],
@@ -68,11 +68,11 @@
     "markdown-it": "^14.1.0",
     "pathe": "^1.1.2",
     "rimraf": "^6.0.1",
-    "shiki": "^1.22.1",
+    "shiki": "^1.17.7",
     "tailwind-merge": "^2.5.2",
     "tailwindcss": "^3.4.12",
     "tsx": "^4.19.1",
-    "typescript": "catalog:",
+    "typescript": "^5.6.2",
     "unplugin-icons": "^0.19.3",
     "vitepress": "^1.3.4",
     "vue-component-meta": "^2.1.6",

apps/www/scripts/autogen.ts

@@ -1,9 +1,9 @@
-import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
-import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { join, parse, resolve } from 'node:path'
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
 import { fileURLToPath } from 'node:url'
 import fg from 'fast-glob'
 import MarkdownIt from 'markdown-it'
+import type { ComponentMeta, MetaCheckerOptions, PropertyMeta, PropertyMetaSchema } from 'vue-component-meta'
 import { createComponentMetaChecker } from 'vue-component-meta'
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url))

apps/www/scripts/build-registry.ts

@@ -4,10 +4,10 @@ import { template } from 'lodash-es'
 import { rimraf } from 'rimraf'
 
 import { colorMapping, colors } from '../src/lib/registry/colors'
-import { buildRegistry } from '../src/lib/registry/registry'
 import { registrySchema } from '../src/lib/registry/schema'
 import { styles } from '../src/lib/registry/styles'
 import { themes } from '../src/lib/registry/themes'
+import { buildRegistry } from '../src/lib/registry/registry'
 
 const REGISTRY_PATH = path.join(process.cwd(), 'src/public/registry')
 
@@ -80,17 +80,10 @@ for (const style of styles) {
       continue
 
     const files = item.files?.map((file) => {
-      let content: string = ''
-
-      try {
-        content = fs.readFileSync(
-          path.join(process.cwd(), 'src/lib/registry', style.name, file),
-          'utf8',
-        )
-      }
-      catch (err) {
-        console.log(`'${file}' is missing`)
-      }
+      let content = fs.readFileSync(
+        path.join(process.cwd(), 'src/lib/registry', style.name, file),
+        'utf8',
+      )
 
       // Replace Windows-style newlines with Unix-style newlines
       content = content.replace(/\r\n/g, newLine)
@@ -106,7 +99,7 @@ for (const style of styles) {
       files,
     }
 
-    const payloadStr = `${JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)}\n`
+    const payloadStr = JSON.stringify(payload, null, 2).replace(/\r\n/g, newLine)
 
     fs.writeFileSync(
       path.join(targetPath, `${item.name}.json`),
@@ -202,73 +195,73 @@ export const BASE_STYLES = `@tailwind base;
 export const BASE_STYLES_WITH_VARIABLES = `@tailwind base;
 @tailwind components;
 @tailwind utilities;
-
+ 
 @layer base {
   :root {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
-
+ 
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
-
+ 
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
-
+ 
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
-
+ 
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.light["ring"] %>;
-
+ 
     --radius: 0.5rem;
   }
-
+ 
   .dark {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
-
+ 
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
-
+ 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
-
+ 
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
-
+ 
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.dark["ring"] %>;
   }
 }
-
+ 
 @layer base {
   * {
     @apply border-border;
@@ -290,7 +283,7 @@ for (const baseColor of ['slate', 'gray', 'zinc', 'neutral', 'stone', 'lime']) {
       if (typeof value === 'string') {
         const resolvedColor = value.replace(
           /\{\{base\}\}-/g,
-          `${baseColor}-`,
+					`${baseColor}-`,
         )
         base.inlineColors[mode][key] = resolvedColor
 
@@ -326,64 +319,64 @@ export const THEME_STYLES_WITH_VARIABLES = `
   .theme-<%- theme %> {
     --background: <%- colors.light["background"] %>;
     --foreground: <%- colors.light["foreground"] %>;
-
+ 
     --muted: <%- colors.light["muted"] %>;
     --muted-foreground: <%- colors.light["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.light["popover"] %>;
     --popover-foreground: <%- colors.light["popover-foreground"] %>;
-
+ 
     --card: <%- colors.light["card"] %>;
     --card-foreground: <%- colors.light["card-foreground"] %>;
-
+ 
     --border: <%- colors.light["border"] %>;
     --input: <%- colors.light["input"] %>;
-
+ 
     --primary: <%- colors.light["primary"] %>;
     --primary-foreground: <%- colors.light["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.light["secondary"] %>;
     --secondary-foreground: <%- colors.light["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.light["accent"] %>;
     --accent-foreground: <%- colors.light["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.light["destructive"] %>;
     --destructive-foreground: <%- colors.light["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.light["ring"] %>;
-
+ 
     --radius: 0.5rem;
   }
-
+ 
   .dark .theme-<%- theme %> {
     --background: <%- colors.dark["background"] %>;
     --foreground: <%- colors.dark["foreground"] %>;
-
+ 
     --muted: <%- colors.dark["muted"] %>;
     --muted-foreground: <%- colors.dark["muted-foreground"] %>;
-
+ 
     --popover: <%- colors.dark["popover"] %>;
     --popover-foreground: <%- colors.dark["popover-foreground"] %>;
-
+ 
     --card: <%- colors.dark["card"] %>;
     --card-foreground: <%- colors.dark["card-foreground"] %>;
-
+ 
     --border: <%- colors.dark["border"] %>;
     --input: <%- colors.dark["input"] %>;
-
+ 
     --primary: <%- colors.dark["primary"] %>;
     --primary-foreground: <%- colors.dark["primary-foreground"] %>;
-
+ 
     --secondary: <%- colors.dark["secondary"] %>;
     --secondary-foreground: <%- colors.dark["secondary-foreground"] %>;
-
+ 
     --accent: <%- colors.dark["accent"] %>;
     --accent-foreground: <%- colors.dark["accent-foreground"] %>;
-
+ 
     --destructive: <%- colors.dark["destructive"] %>;
     --destructive-foreground: <%- colors.dark["destructive-foreground"] %>;
-
+ 
     --ring: <%- colors.dark["ring"] %>;
   }`
 

apps/www/src/content/docs/cli.md

@@ -15,7 +15,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
@@ -29,7 +29,7 @@ Configure the import alias for utils: › @/lib/utils
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue init [options]
 
 initialize your project and install dependencies
@@ -50,7 +50,7 @@ npx shadcn-vue@latest add [component]
 
 You will be presented with a list of components to choose from:
 
-```ansi
+```txt
 Which components would you like to add? › Space to select. Return to submit.
 
 ◯  accordion
@@ -67,7 +67,7 @@ Which components would you like to add? › Space to select. Return to submit.
 
 ### Options
 
-```ansi
+```txt
 Usage: shadcn-vue add [options] [components...]
 
 add components to your project
@@ -90,7 +90,7 @@ Use the `update` command to update components in your project. This will overwri
 
 We plan on improving this command in the future to improve the update experience.
 
-```ansi
+```txt
 Usage: shadcn-vue update [options] [components...]
 
 update components in your project

apps/www/src/content/docs/components/auto-form.md

@@ -312,12 +312,12 @@ In `CustomField.vue`
 
 ```vue
 <script setup lang="ts">
-import type { FieldProps } from './interface'
-import { AutoFormLabel } from '@/ui/auto-form'
-import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/form'
-import { Input } from '@/ui/input'
 import { computed } from 'vue'
 import AutoFormLabel from './AutoFormLabel.vue'
+import type { FieldProps } from './interface'
+import { FormControl, FormDescription, FormField, FormItem, FormMessage } from '@/ui/form'
+import { Input } from '@/ui/input'
+import { AutoFormLabel } from '@/ui/auto-form'
 
 const props = defineProps<FieldProps>()
 </script>
@@ -403,10 +403,9 @@ By passing the `form` as props, you can control and use the method provided by `
 
 ```vue
 <script setup lang="ts">
-import { AutoForm } from '@/components/ui/auto-form'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import * as z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
 
 const schema = z.object({
   username: z.string(),

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

@@ -23,8 +23,8 @@ npx shadcn-vue@latest add badge
 
 ```vue
 <script setup lang="ts">
+import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
-import { cva, type VariantProps } from 'class-variance-authority'
 
 defineProps<Props>()
 

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

@@ -23,8 +23,8 @@ npx shadcn-vue@latest add button
 
 ```vue
 <script setup lang="ts">
-import { cn } from '@/lib/utils'
 import { cva } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
   'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',

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

@@ -183,7 +183,7 @@ Use the `@init-api` emit method on `<Carousel />` component to set the instance
 
 You can access it through setting a template ref on the `<Carousel />` component.
 
-```vue:line-numbers {2,5,10}
+```vue:line-numbers {2,5,9}
 <script setup>
 const carouselContainerRef = ref<InstanceType<typeof Carousel> | null>(null)
 

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

@@ -51,12 +51,12 @@ module.exports = {
 
 ```vue
 <script setup lang="ts">
+import { ref } from 'vue'
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
 } from '@/components/ui/collapsible'
-import { ref } from 'vue'
 
 const isOpen = ref(false)
 </script>

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

@@ -22,8 +22,11 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
 
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
 import {
   Command,
   CommandEmpty,
@@ -37,9 +40,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
-import { cn } from '@/lib/utils'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { ref } from 'vue'
 
 const frameworks = [
   { value: 'next.js', label: 'Next.js' },
@@ -76,7 +76,7 @@ const value = ref('')
             <CommandItem
               v-for="framework in frameworks"
               :key="framework.value"
-              :value="framework.value"
+              :value="framework"
               @select="open = false"
             >
               <Check

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

@@ -1,7 +1,7 @@
 ---
 title: Data Table
 description: Powerful table and datagrids built using TanStack Table.
-primitive: https://tanstack.com/table/v8/docs/introduction
+primitive: https://tanstack.com/table/v8/docs/guide/introduction
 ---
 
 <ComponentPreview name="DataTableDemo" />
@@ -102,7 +102,7 @@ export const payments: Payment[] = [
 
 Start by creating the following file structure:
 
-```ansi
+```txt
  components
     └── payments
           ├── columns.ts

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

@@ -17,10 +17,6 @@ npx shadcn-vue@latest add pagination
 
 ```vue
 <script setup lang="ts">
-import {
-  Button,
-} from '@/components/ui/button'
-
 import {
   Pagination,
   PaginationEllipsis,
@@ -31,6 +27,10 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
+
+import {
+  Button,
+} from '@/components/ui/button'
 </script>
 
 <template>

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

@@ -1,12 +0,0 @@
----
-title: Sidebar
-description: A composable, themeable and customizable sidebar component.
----
-
-<BlockPreview name="Sidebar07" ></BlockPreview>
-
-## Installation
-
-```bash
-npx shadcn-vue@latest add sidebar
-```

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

@@ -41,8 +41,8 @@ import { Toaster } from '@/components/ui/sonner'
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/components/ui/button'
 import { toast } from 'vue-sonner'
+import { Button } from '@/components/ui/button'
 </script>
 
 <template>

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

@@ -48,19 +48,6 @@ import { Switch } from '@/components/ui/switch'
 </template>
 ```
 
-# Add icon inside switch thumb
-
-```vue
-<template>
-  <Switch :checked="isDark" @update:checked="toggleTheme">
-    <template #thumb>
-      <Icon v-if="isDark" icon="lucide:moon" class="size-3" />
-      <Icon v-else icon="lucide:sun" class="size-3" />
-    </template>
-  </Switch>
-</template>
-```
-
 ## Examples
 
 ### Form

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

@@ -44,8 +44,8 @@ import { useToast } from '@/components/ui/toast/use-toast'
 ```vue
 <script setup lang="ts">
 import { Button } from '@/components/ui/button'
-import { Toaster } from '@/components/ui/toast'
 import { useToast } from '@/components/ui/toast/use-toast'
+import { Toaster } from '@/components/ui/toast'
 
 const { toast } = useToast()
 </script>

apps/www/src/content/docs/components/v-date-picker.md

@@ -15,19 +15,19 @@ See installation instructions for the [Popover](/docs/components/popover#install
 
 ```vue
 <script setup lang="ts">
+import { format } from 'date-fns'
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
+import { Calendar } from '@/components/ui/v-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/components/ui/popover'
 
-import { Calendar } from '@/components/ui/v-calendar'
-import { cn } from '@/lib/utils'
-import { format } from 'date-fns'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { ref } from 'vue'
-
 const date = ref<Date>()
 </script>
 

apps/www/src/content/docs/contribution.md

@@ -101,13 +101,13 @@ You can use the `pnpm --filter=[WORKSPACE]` command to start the development pro
 
 1. To run the `shadcn-vue.com` website:
 
-```bash
+```
 pnpm dev
 ```
 
 2. To run the `shadcn-vue` cli package:
 
-```bash
+```
 pnpm dev:cli
 ```
 

apps/www/src/content/docs/dark-mode/vitepress.md

@@ -27,9 +27,9 @@ We're using [`useToggle`](https://vueuse.org/shared/useToggle/) from [`@vueuse/c
 
 ```vue
 <script setup lang="ts">
-import { Button } from '@/lib/registry/default/ui/button'
-import { useToggle } from '@vueuse/core'
 import { useData } from 'vitepress'
+import { useToggle } from '@vueuse/core'
+import { Button } from '@/lib/registry/default/ui/button'
 
 const { frontmatter, isDark } = useData()
 const toggleDark = useToggle(isDark)

apps/www/src/content/docs/installation/astro.md

@@ -17,7 +17,7 @@ npm create astro@latest
 
 You will be asked a few questions to configure your project:
 
-```ansi:line-numbers
+```txt:line-numbers
 - Where should we create your new project?
 ./your-app-name
 - How would you like to start your new project?
@@ -99,7 +99,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Astro
 Which style would you like to use? › Default

apps/www/src/content/docs/installation/laravel.md

@@ -25,7 +25,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default

apps/www/src/content/docs/installation/nuxt.md

@@ -33,22 +33,6 @@ npm install -D typescript
 npx nuxi@latest module add @nuxtjs/tailwindcss
 ```
 
-Alternatively, you can manually add `@nuxtjs/tailwindcss` using your dependency manager
-
-```bash
-npm install --save-dev @nuxtjs/tailwindcss
-```
-
-and then to the `modules` section of `nuxt.config.{ts,js}`
-
-```ts
-export default defineNuxtConfig({
-  modules: [
-    '@nuxtjs/tailwindcss'
-  ]
-})
-```
-
 ### Add `Nuxt` module
 
 <br>
@@ -213,7 +197,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default
@@ -231,7 +215,7 @@ Write configuration to components.json. Proceed? > Y/n
 
 Here's the default structure of Nuxt app. You can use this as a reference:
 
-```ansi {6-16,20-21}
+```txt {6-16,20-21}
 .
 ├── pages
 │   ├── index.vue

apps/www/src/content/docs/installation/vite.md

@@ -44,22 +44,28 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
 
   #### `vite.config`
 
-```typescript {2,3,8-12}
-import vue from '@vitejs/plugin-vue'
-import autoprefixer from 'autoprefixer'
-import tailwind from 'tailwindcss'
-import { defineConfig } from 'vite'
+  ```typescript {5,6,9-13}
+  import path from 'node:path'
+  import vue from '@vitejs/plugin-vue'
+  import autoprefixer from 'autoprefixer'
 
-// https://vite.dev/config/
-export default defineConfig({
-  css: {
-    postcss: {
-      plugins: [tailwind(), autoprefixer()],
+  import tailwind from 'tailwindcss'
+  import { defineConfig } from 'vite'
+
+  export default defineConfig({
+    css: {
+      postcss: {
+        plugins: [tailwind(), autoprefixer()],
+      },
     },
-  },
-  plugins: [vue()],
-})
-```
+    plugins: [vue()],
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+      },
+    },
+  })
+  ```
 
   </TabMarkdown>
 
@@ -115,14 +121,14 @@ Add the code below to the vite.config.ts so your app can resolve paths without e
 npm i -D @types/node
 ```
 
-```typescript {1,15-19}
-import { fileURLToPath, URL } from 'node:url'
+```typescript {15-19}
+import path from 'node:path'
 import vue from '@vitejs/plugin-vue'
 import autoprefixer from 'autoprefixer'
+
 import tailwind from 'tailwindcss'
 import { defineConfig } from 'vite'
 
-// https://vite.dev/config/
 export default defineConfig({
   css: {
     postcss: {
@@ -132,9 +138,9 @@ export default defineConfig({
   plugins: [vue()],
   resolve: {
     alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url))
-    }
-  }
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
 })
 ```
 
@@ -154,7 +160,7 @@ npx shadcn-vue@latest init
 
 You will be asked a few questions to configure `components.json`:
 
-```ansi:line-numbers
+```txt:line-numbers
 Would you like to use TypeScript (recommended)? no / yes
 Which framework are you using? Vite / Nuxt / Laravel
 Which style would you like to use? › Default

apps/www/src/examples/authentication/Example.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
 import UserAuthForm from './components/UserAuthForm.vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 </script>
 
 <template>

apps/www/src/examples/authentication/components/UserAuthForm.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import LucideSpinner from '~icons/lucide/loader-2'
+import GitHubLogo from '~icons/radix-icons/github-logo'
+
+import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { Label } from '@/lib/registry/new-york/ui/label'
 
-import { cn } from '@/lib/utils'
-import LucideSpinner from '~icons/lucide/loader-2'
-import GitHubLogo from '~icons/radix-icons/github-logo'
-import { ref } from 'vue'
-
 const isLoading = ref(false)
 async function onSubmit(event: Event) {
   event.preventDefault()

apps/www/src/examples/cards/components/CreateAccount.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import GitHubIcon from '~icons/radix-icons/github-logo'
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -10,7 +11,6 @@ import {
 } from '@/lib/registry/new-york/ui/card'
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { Label } from '@/lib/registry/new-york/ui/label'
-import GitHubIcon from '~icons/radix-icons/github-logo'
 </script>
 
 <template>

apps/www/src/examples/cards/components/GitHubCard.vue

@@ -1,4 +1,9 @@
 <script setup lang="ts">
+import ChevronDownIcon from '~icons/radix-icons/chevron-down'
+import CircleIcon from '~icons/radix-icons/circle'
+import PlusIcon from '~icons/radix-icons/plus'
+import StarIcon from '~icons/radix-icons/star'
+
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -17,11 +22,6 @@ import {
   DropdownMenuTrigger,
 } from '@/lib/registry/new-york/ui/dropdown-menu'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
-
-import ChevronDownIcon from '~icons/radix-icons/chevron-down'
-import CircleIcon from '~icons/radix-icons/circle'
-import PlusIcon from '~icons/radix-icons/plus'
-import StarIcon from '~icons/radix-icons/star'
 </script>
 
 <template>

apps/www/src/examples/cards/components/Notifications.vue

@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import BellIcon from '~icons/radix-icons/bell'
+import EyeNoneIcon from '~icons/radix-icons/eye-none'
+import PersonIcon from '~icons/radix-icons/person'
+
 import {
   Card,
   CardContent,
@@ -6,10 +10,6 @@ import {
   CardHeader,
   CardTitle,
 } from '@/lib/registry/new-york/ui/card'
-import BellIcon from '~icons/radix-icons/bell'
-import EyeNoneIcon from '~icons/radix-icons/eye-none'
-
-import PersonIcon from '~icons/radix-icons/person'
 </script>
 
 <template>

apps/www/src/examples/dashboard/Example.vue

@@ -1,4 +1,12 @@
 <script setup lang="ts">
+import Overview from './components/Overview.vue'
+import DateRangePicker from './components/DateRangePicker.vue'
+import MainNav from './components/MainNav.vue'
+import RecentSales from './components/RecentSales.vue'
+import Search from './components/Search.vue'
+import TeamSwitcher from './components/TeamSwitcher.vue'
+import UserNav from './components/UserNav.vue'
+
 import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Card,
@@ -13,14 +21,6 @@ import {
   TabsList,
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
-import DateRangePicker from './components/DateRangePicker.vue'
-import MainNav from './components/MainNav.vue'
-import Overview from './components/Overview.vue'
-import RecentSales from './components/RecentSales.vue'
-
-import Search from './components/Search.vue'
-import TeamSwitcher from './components/TeamSwitcher.vue'
-import UserNav from './components/UserNav.vue'
 </script>
 
 <template>

apps/www/src/examples/dashboard/components/DateRangePicker.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
 import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+
+import { type Ref, ref } from 'vue'
+import { cn } from '@/lib/utils'
 import { Button } from '@/lib/registry/new-york/ui/button'
+import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
 
-import { RangeCalendar } from '@/lib/registry/new-york/ui/range-calendar'
-import { cn } from '@/lib/utils'
-import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
-import { type Ref, ref } from 'vue'
-
 const df = new DateFormatter('en-US', {
   dateStyle: 'medium',
 })

apps/www/src/examples/dashboard/components/TeamSwitcher.vue

@@ -1,11 +1,17 @@
 <script setup lang="ts">
+import { ref } from 'vue'
+import CaretSortIcon from '~icons/radix-icons/caret-sort'
+import CheckIcon from '~icons/radix-icons/check'
+import PlusCircledIcon from '~icons/radix-icons/plus-circled'
+
+import { cn } from '@/lib/utils'
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from '@/lib/registry/new-york/ui/avatar'
 import { Button } from '@/lib/registry/new-york/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
+
 import {
   Dialog,
   DialogContent,
@@ -15,7 +21,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/lib/registry/new-york/ui/dialog'
-
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/lib/registry/new-york/ui/command'
 import { Input } from '@/lib/registry/new-york/ui/input'
 import { Label } from '@/lib/registry/new-york/ui/label'
 import {
@@ -23,7 +29,6 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
-
 import {
   Select,
   SelectContent,
@@ -31,11 +36,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-import { cn } from '@/lib/utils'
-import CaretSortIcon from '~icons/radix-icons/caret-sort'
-import CheckIcon from '~icons/radix-icons/check'
-import PlusCircledIcon from '~icons/radix-icons/plus-circled'
-import { ref } from 'vue'
 
 const groups = [
   {

apps/www/src/examples/forms/Account.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import AccountForm from './components/AccountForm.vue'
 import FormsLayout from './layouts/FormsLayout.vue'
+import AccountForm from './components/AccountForm.vue'
 </script>
 
 <template>

apps/www/src/examples/forms/Appearance.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import AppearanceForm from './components/AppearanceForm.vue'
 import FormsLayout from './layouts/FormsLayout.vue'
+import AppearanceForm from './components/AppearanceForm.vue'
 </script>
 
 <template>

apps/www/src/examples/forms/Display.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import DisplayForm from './components/DisplayForm.vue'
 import FormsLayout from './layouts/FormsLayout.vue'
+import DisplayForm from './components/DisplayForm.vue'
 </script>
 
 <template>

apps/www/src/examples/forms/Example.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import ProfileForm from './components/ProfileForm.vue'
 import FormsLayout from './layouts/FormsLayout.vue'
+import ProfileForm from './components/ProfileForm.vue'
 </script>
 
 <template>

apps/www/src/examples/forms/Notifications.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import NotificationsForm from './components/NotificationsForm.vue'
 import FormsLayout from './layouts/FormsLayout.vue'
+import NotificationsForm from './components/NotificationsForm.vue'
 </script>
 
 <template>

apps/www/src/examples/forms/components/AccountForm.vue

@@ -1,6 +1,17 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { h, ref } from 'vue'
+import * as z from 'zod'
+import { toDate } from 'radix-vue/date'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Check, ChevronsUpDown } from 'lucide-vue-next'
+import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
+import { cn } from '@/lib/utils'
+
+import RadixIconsCalendar from '~icons/radix-icons/calendar'
+
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
 import {
   Command,
   CommandEmpty,
@@ -9,26 +20,15 @@ import {
   CommandItem,
   CommandList,
 } from '@/lib/registry/new-york/ui/command'
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/new-york/ui/form'
-import { Input } from '@/lib/registry/new-york/ui/input'
+import { Button } from '@/lib/registry/new-york/ui/button'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
 } from '@/lib/registry/new-york/ui/popover'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
 import { toast } from '@/lib/registry/new-york/ui/toast'
 
-import { cn } from '@/lib/utils'
-import { CalendarDate, DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
-import { toTypedSchema } from '@vee-validate/zod'
-import RadixIconsCalendar from '~icons/radix-icons/calendar'
-import { Check, ChevronsUpDown } from 'lucide-vue-next'
-import { toDate } from 'radix-vue/date'
-import { h, ref } from 'vue'
-import * as z from 'zod'
-
 const open = ref(false)
 const dateValue = ref()
 const placeholder = ref()

apps/www/src/examples/forms/components/AppearanceForm.vue

@@ -1,16 +1,16 @@
 <script setup lang="ts">
+import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
 import { RadioGroup, RadioGroupItem } from '@/lib/registry/default/ui/radio-group'
 import { Button, buttonVariants } from '@/lib/registry/new-york/ui/button'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-
 import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
-import { ChevronDownIcon } from '@radix-icons/vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
-import { h } from 'vue'
-import * as z from 'zod'
 
 const appearanceFormSchema = toTypedSchema(z.object({
   theme: z.enum(['light', 'dark'], {

apps/www/src/examples/forms/components/DisplayForm.vue

@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-
-import { toast } from '@/lib/registry/new-york/ui/toast'
-import { toTypedSchema } from '@vee-validate/zod'
-import { useForm } from 'vee-validate'
 import { h } from 'vue'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
 import * as z from 'zod'
 
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Checkbox } from '@/lib/registry/new-york/ui/checkbox'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { toast } from '@/lib/registry/new-york/ui/toast'
+
 const items = [
   {
     id: 'recents',

apps/www/src/examples/forms/components/ProfileForm.vue

@@ -1,7 +1,15 @@
 <script setup lang="ts">
-import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
-import { Button } from '@/lib/registry/new-york/ui/button'
+import { h, ref } from 'vue'
+import { FieldArray, useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import * as z from 'zod'
+import { Cross1Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
 import { Input } from '@/lib/registry/new-york/ui/input'
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/lib/registry/default/ui/form'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
 import {
   Select,
   SelectContent,
@@ -10,16 +18,8 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/lib/registry/new-york/ui/select'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-
+import { Button } from '@/lib/registry/new-york/ui/button'
 import { toast } from '@/lib/registry/new-york/ui/toast'
-import { cn } from '@/lib/utils'
-import { Cross1Icon } from '@radix-icons/vue'
-import { toTypedSchema } from '@vee-validate/zod'
-import { FieldArray, useForm } from 'vee-validate'
-import { h, ref } from 'vue'
-import * as z from 'zod'
 
 const verifiedEmails = ref(['m@example.com', 'm@google.com', 'm@support.com'])
 

apps/www/src/examples/forms/components/SidebarNav.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { cn } from '@/lib/utils'
 import { useRoute } from 'vitepress'
+import { cn } from '@/lib/utils'
+import { Button } from '@/lib/registry/new-york/ui/button'
 
 interface Item {
   title: string

apps/www/src/examples/forms/layouts/FormsLayout.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Separator } from '@/lib/registry/new-york/ui/separator'
 import SidebarNav from '../components/SidebarNav.vue'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
 </script>
 
 <template>

apps/www/src/examples/mail/components/AccountSwitcher.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { Icon } from '@iconify/vue'
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/lib/registry/new-york/ui/select'
 import { cn } from '@/lib/utils'
-import { Icon } from '@iconify/vue'
-import { computed, ref } from 'vue'
 
 interface AccountSwitcherProps {
   isCollapsed: boolean

apps/www/src/examples/mail/components/Mail.vue

@@ -1,9 +1,18 @@
 <script lang="ts" setup>
-import type { Mail } from '../data/mails'
+import {
+  Search,
+} from 'lucide-vue-next'
 
-import { Input } from '@/lib/registry/new-york/ui/input'
-import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
+import { computed, ref } from 'vue'
+import { refDebounced } from '@vueuse/core'
+import type { Mail } from '../data/mails'
+import AccountSwitcher from './AccountSwitcher.vue'
+import MailList from './MailList.vue'
+import MailDisplay from './MailDisplay.vue'
+import Nav, { type LinkProp } from './Nav.vue'
+import { cn } from '@/lib/utils'
 import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Input } from '@/lib/registry/new-york/ui/input'
 import {
   Tabs,
   TabsContent,
@@ -11,16 +20,7 @@ import {
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
 import { TooltipProvider } from '@/lib/registry/new-york/ui/tooltip'
-import { cn } from '@/lib/utils'
-import { refDebounced } from '@vueuse/core'
-import {
-  Search,
-} from 'lucide-vue-next'
-import { computed, ref } from 'vue'
-import AccountSwitcher from './AccountSwitcher.vue'
-import MailDisplay from './MailDisplay.vue'
-import MailList from './MailList.vue'
-import Nav, { type LinkProp } from './Nav.vue'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/lib/registry/new-york/ui/resizable'
 
 interface MailProps {
   accounts: {

apps/www/src/examples/mail/components/MailDisplay.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import type { Mail } from '../data/mails'
-import { Avatar, AvatarFallback } from '@/lib/registry/new-york/ui/avatar'
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { Calendar } from '@/lib/registry/new-york/ui/calendar'
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
-import { Label } from '@/lib/registry/new-york/ui/label'
-import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
-import { Switch } from '@/lib/registry/new-york/ui/switch'
-import { Textarea } from '@/lib/registry/new-york/ui/textarea'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
+import { Archive, ArchiveX, Clock, Forward, MoreVertical, Reply, ReplyAll, Trash2 } from 'lucide-vue-next'
+import { computed } from 'vue'
 import addDays from 'date-fns/addDays'
 import addHours from 'date-fns/addHours'
 import format from 'date-fns/format'
 import nextSaturday from 'date-fns/nextSaturday'
-import { Archive, ArchiveX, Clock, Forward, MoreVertical, Reply, ReplyAll, Trash2 } from 'lucide-vue-next'
-import { computed } from 'vue'
+import type { Mail } from '../data/mails'
+import { Calendar } from '@/lib/registry/new-york/ui/calendar'
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/lib/registry/new-york/ui/dropdown-menu'
+import { Popover, PopoverContent, PopoverTrigger } from '@/lib/registry/new-york/ui/popover'
+import { Avatar, AvatarFallback } from '@/lib/registry/new-york/ui/avatar'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Label } from '@/lib/registry/new-york/ui/label'
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Switch } from '@/lib/registry/new-york/ui/switch'
+import { Textarea } from '@/lib/registry/new-york/ui/textarea'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/lib/registry/new-york/ui/tooltip'
 
 interface MailDisplayProps {
   mail: Mail | undefined

apps/www/src/examples/mail/components/MailList.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
+import { formatDistanceToNow } from 'date-fns'
 import type { Mail } from '../data/mails'
-import { Badge } from '@/lib/registry/new-york/ui/badge'
 import { ScrollArea } from '@/lib/registry/new-york/ui/scroll-area'
 import { cn } from '@/lib/utils'
-import { formatDistanceToNow } from 'date-fns'
+import { Badge } from '@/lib/registry/new-york/ui/badge'
 
 interface MailListProps {
   items: Mail[]

apps/www/src/examples/mail/components/Nav.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
+import { Icon } from '@iconify/vue'
+import { cn } from '@/lib/utils'
 import { buttonVariants } from '@/lib/registry/new-york/ui/button'
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from '@/lib/registry/new-york/ui/tooltip'
-import { cn } from '@/lib/utils'
-import { Icon } from '@iconify/vue'
 
 export interface LinkProp {
   title: string

apps/www/src/examples/music/Example.vue

@@ -1,21 +1,21 @@
 <script setup lang="ts">
-import { Button } from '@/lib/registry/new-york/ui/button'
-import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
-import { Separator } from '@/lib/registry/new-york/ui/separator'
+import AlbumArtwork from './components/AlbumArtwork.vue'
+import Menu from './components/Menu.vue'
+import PodcastEmptyPlaceholder from './components/PodcastEmptyPlaceholder.vue'
+import Sidebar from './components/Sidebar.vue'
+
+import { listenNowAlbums, madeForYouAlbums } from './data/albums'
+import { playlists } from './data/playlists'
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from '@/lib/registry/new-york/ui/tabs'
-
+import { Separator } from '@/lib/registry/new-york/ui/separator'
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { ScrollArea, ScrollBar } from '@/lib/registry/new-york/ui/scroll-area'
 import PlusCircledIcon from '~icons/radix-icons/plus-circled'
-import AlbumArtwork from './components/AlbumArtwork.vue'
-import Menu from './components/Menu.vue'
-import PodcastEmptyPlaceholder from './components/PodcastEmptyPlaceholder.vue'
-import Sidebar from './components/Sidebar.vue'
-import { listenNowAlbums, madeForYouAlbums } from './data/albums'
-import { playlists } from './data/playlists'
 </script>
 
 <template>