From fc718145ae321df32c005933a1c8fcba3f010a64 Mon Sep 17 00:00:00 2001
From: Roman Hrynevych <82209198+romanhrynevych@users.noreply.github.com>
Date: Fri, 2 Feb 2024 21:18:58 +0200
Subject: [PATCH] refactor: tailwindcss, remove all unnecessary arbitrary
 values, update TailwindCSS to v3.4 (#269)

---
 .github/ISSUE_TEMPLATE/bug-report.yml         |  4 +-
 .github/workflows/publish.yaml                |  5 --
 apps/www/.vitepress/theme/components/Kbd.vue  |  6 +-
 apps/www/.vitepress/theme/config/docs.ts      |  1 -
 .../.vitepress/theme/layout/MainLayout.vue    |  4 +-
 apps/www/.vitepress/theme/style.css           | 90 +++++++++----------
 apps/www/package.json                         |  1 +
 .../src/content/docs/components/skeleton.md   |  4 +-
 .../examples/cards/components/GitHubCard.vue  |  4 +-
 .../forms/components/AppearanceForm.vue       |  4 +-
 apps/www/src/examples/playground/Example.vue  |  2 +-
 .../src/examples/tasks/components/columns.ts  |  6 +-
 .../lib/registry/default/example/CardDemo.vue |  2 +-
 .../registry/default/example/CardStats.vue    |  4 +-
 .../default/example/NavigationMenuDemo.vue    |  2 +-
 .../registry/default/example/ProgressDemo.vue |  2 +-
 .../registry/default/example/SliderDemo.vue   |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../default/ui/dialog/DialogContent.vue       |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../default/ui/menubar/MenubarContent.vue     |  2 +-
 .../default/ui/menubar/MenubarSubContent.vue  |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../default/ui/scroll-area/ScrollBar.vue      |  4 +-
 .../default/ui/select/SelectContent.vue       |  4 +-
 .../registry/default/ui/textarea/Textarea.vue |  2 +-
 .../lib/registry/default/ui/toast/index.ts    |  2 +-
 .../registry/new-york/example/CardDemo.vue    |  2 +-
 .../registry/new-york/example/CardStats.vue   |  4 +-
 .../new-york/example/NavigationMenuDemo.vue   |  2 +-
 .../new-york/example/ProgressDemo.vue         |  2 +-
 .../registry/new-york/example/SliderDemo.vue  |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuContent.vue    |  2 +-
 .../ui/context-menu/ContextMenuSubContent.vue |  2 +-
 .../new-york/ui/dialog/DialogContent.vue      |  2 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  2 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  2 +-
 .../new-york/ui/menubar/MenubarContent.vue    |  2 +-
 .../new-york/ui/menubar/MenubarSubContent.vue |  2 +-
 .../navigation-menu/NavigationMenuTrigger.vue |  2 +-
 .../NavigationMenuViewport.vue                |  2 +-
 .../new-york/ui/scroll-area/ScrollBar.vue     |  4 +-
 .../new-york/ui/select/SelectContent.vue      |  4 +-
 .../registry/new-york/ui/table/TableCell.vue  |  2 +-
 .../registry/new-york/ui/table/TableHead.vue  |  2 +-
 apps/www/src/lib/registry/registry.ts         | 53 +++++++----
 apps/www/src/public/registry/index.json       |  2 +-
 .../registry/styles/default/alert-dialog.json |  2 +-
 .../registry/styles/default/carousel.json     |  2 +-
 .../registry/styles/default/context-menu.json |  2 +-
 .../registry/styles/default/data-table.json   |  4 +-
 .../registry/styles/default/dialog.json       |  2 +-
 .../styles/default/dropdown-menu.json         |  2 +-
 .../public/registry/styles/default/kbd.json   |  4 +-
 .../registry/styles/default/menubar.json      |  2 +-
 .../styles/default/navigation-menu.json       |  2 +-
 .../registry/styles/default/scroll-area.json  |  2 +-
 .../registry/styles/default/select.json       |  2 +-
 .../registry/styles/default/switch.json       |  2 +-
 .../registry/styles/default/textarea.json     |  2 +-
 .../public/registry/styles/default/toast.json |  2 +-
 .../styles/new-york/alert-dialog.json         |  2 +-
 .../registry/styles/new-york/carousel.json    |  2 +-
 .../styles/new-york/context-menu.json         |  2 +-
 .../registry/styles/new-york/dialog.json      |  2 +-
 .../styles/new-york/dropdown-menu.json        |  2 +-
 .../registry/styles/new-york/menubar.json     |  2 +-
 .../styles/new-york/navigation-menu.json      |  2 +-
 .../registry/styles/new-york/scroll-area.json |  2 +-
 .../registry/styles/new-york/select.json      |  2 +-
 .../registry/styles/new-york/switch.json      |  2 +-
 .../registry/styles/new-york/table.json       |  2 +-
 .../registry/styles/new-york/toast.json       |  2 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  2 +-
 .../components/ui/carousel/Carousel.vue       |  1 -
 pnpm-lock.yaml                                | 10 +--
 80 files changed, 174 insertions(+), 167 deletions(-)

diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index d24f3294..54005550 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -19,7 +19,7 @@ body:
       label: Reproduction
       description: |
         A [minimal reproduction](https://stackoverflow.com/help/minimal-reproducible-example) is **required**, otherwise the issue might be closed without further notice. [**Why?**](https://antfu.me/posts/why-reproductions-are-required)
-        
+
         To get started, you can use the StackBlitz and CodeSandbox playgrounds in shadcn-vue demos:
         https://www.shadcn-vue.com/docs/components/accordion.html
 
@@ -52,4 +52,4 @@ body:
       label: Contributes
       options:
         - label: I am willing to submit a PR to fix this issue
-        - label: I am willing to submit a PR with failing tests 
+        - label: I am willing to submit a PR with failing tests
diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index c614d0b5..9d347542 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -17,8 +17,6 @@ on:
       - opened
       # When a labeled '🚀request-deploy' pull request from forked repo, it will be deploy to Cloudflare Pages
       - labeled
-    paths:
-      - 'apps/www/**'
   # Allows you to run this workflow manually from the Actions tab
   # eslint-disable-next-line yml/no-empty-mapping-value
   workflow_dispatch:
@@ -52,9 +50,6 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.sha || github.ref }}
-          fetch-depth: 0
 
       # Run a build step here
       - name: Setup Node.js environment
diff --git a/apps/www/.vitepress/theme/components/Kbd.vue b/apps/www/.vitepress/theme/components/Kbd.vue
index 7e3bd02c..55428107 100644
--- a/apps/www/.vitepress/theme/components/Kbd.vue
+++ b/apps/www/.vitepress/theme/components/Kbd.vue
@@ -18,9 +18,9 @@ const kbdClass = computed(() => {
     {
       variants: {
         size: {
-          xs: 'min-h-[16px] text-[10px] h-4 px-1',
-          sm: 'min-h-[20px] text-[11px] h-5 px-1',
-          md: 'min-h-[24px] text-[12px] h-6 px-1.5',
+          xs: 'min-h-4 text-[10px] h-4 px-1',
+          sm: 'min-h-5 text-[11px] h-5 px-1',
+          md: 'min-h-6 text-[12px] h-6 px-1.5',
         },
       },
     },
diff --git a/apps/www/.vitepress/theme/config/docs.ts b/apps/www/.vitepress/theme/config/docs.ts
index 646cc85a..4f69dc39 100644
--- a/apps/www/.vitepress/theme/config/docs.ts
+++ b/apps/www/.vitepress/theme/config/docs.ts
@@ -328,7 +328,6 @@ export const docsConfig: DocsConfig = {
         {
           title: 'Toast',
           href: '/docs/components/toast',
-          label: 'New',
           items: [],
         },
         {
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 946f26bb..8ff32f0d 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -135,7 +135,7 @@ watch(() => $route.path, (n) => {
               :href="link.href" target="_blank"
               :variant="'ghost'" :size="'icon'"
             >
-              <component :is="link.icon" class="w-[20px] h-[20px]" />
+              <component :is="link.icon" class="w-[20px] h-5" />
             </Button>
 
             <Button
@@ -146,7 +146,7 @@ watch(() => $route.path, (n) => {
             >
               <component
                 :is="isDark ? RadixIconsSun : RadixIconsMoon"
-                class="w-[20px] h-[20px] text-foreground"
+                class="w-[20px] h-5 text-foreground"
               />
             </Button>
           </div>
diff --git a/apps/www/.vitepress/theme/style.css b/apps/www/.vitepress/theme/style.css
index c1b2d159..fddd8cfb 100644
--- a/apps/www/.vitepress/theme/style.css
+++ b/apps/www/.vitepress/theme/style.css
@@ -5,49 +5,49 @@
 
 @layer base {
 	:root {
-		--background: 0 0% 100%;
-		--foreground: 240 10% 3.9%;
-		--card: 0 0% 100%;
-		--card-foreground: 240 10% 3.9%;
-		--popover: 0 0% 100%;
-		--popover-foreground: 240 10% 3.9%;
-		--primary: 240 5.9% 10%;
-		--primary-foreground: 0 0% 98%;
-		--secondary: 240 4.8% 95.9%;
-		--secondary-foreground: 240 5.9% 10%;
-		--muted: 240 4.8% 95.9%;
-		--muted-foreground: 240 3.8% 46.1%;
-		--accent: 240 4.8% 95.9%;
-		--accent-foreground: 240 5.9% 10%;
-		--destructive: 0 84.2% 60.2%;
-		--destructive-foreground: 0 0% 98%;
-		--border: 240 5.9% 90%;
-		--input: 240 5.9% 90%;
-		--ring: 240 5% 64.9%;
-		--radius: 0.5rem;
-	}
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 72.22% 50.59%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5% 64.9%;
+    --radius: 0.5rem;
+  }
 
-	.dark {
-		--background: 240 10% 3.9%;
-		--foreground: 0 0% 98%;
-		--card: 240 10% 3.9%;
-		--card-foreground: 0 0% 98%;
-		--popover: 240 10% 3.9%;
-		--popover-foreground: 0 0% 98%;
-		--primary: 0 0% 98%;
-		--primary-foreground: 240 5.9% 10%;
-		--secondary: 240 3.7% 15.9%;
-		--secondary-foreground: 0 0% 98%;
-		--muted: 240 3.7% 15.9%;
-		--muted-foreground: 240 5% 64.9%;
-		--accent: 240 3.7% 15.9%;
-		--accent-foreground: 0 0% 98%;
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 0 85.7% 97.3%;
-		--border: 240 3.7% 15.9%;
-		--input: 240 3.7% 15.9%;
-		--ring: 240 4.9% 83.9%;
-	}
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
 
 
 	* {
@@ -116,7 +116,7 @@
 
 	.step:before {
 		@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-[-4px];
+		@apply -ml-[50px] -mt-1;
 		content: counter(step);
 	}	
 }
@@ -139,7 +139,7 @@ pre code {
 }
 
 pre code .line {
-	@apply  px-4 min-h-[1.5rem] !py-0.5 w-full inline-block;
+	@apply  px-4 min-h-6 !py-0.5 w-full inline-block;
 } 
 
 .line-number {
@@ -149,4 +149,4 @@ pre code .line {
 ::view-transition-old(root),
 ::view-transition-new(root) {
   animation-duration: 0.3s;
-}
\ No newline at end of file
+}
diff --git a/apps/www/package.json b/apps/www/package.json
index b4cbca68..ba163c0f 100644
--- a/apps/www/package.json
+++ b/apps/www/package.json
@@ -56,6 +56,7 @@
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.17",
     "lodash.template": "^4.5.0",
+    "oxc-parser": "^0.2.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shiki": "^1.0.0-beta.3",
diff --git a/apps/www/src/content/docs/components/skeleton.md b/apps/www/src/content/docs/components/skeleton.md
index af07e1b8..628ba177 100644
--- a/apps/www/src/content/docs/components/skeleton.md
+++ b/apps/www/src/content/docs/components/skeleton.md
@@ -37,6 +37,6 @@ import { Skeleton } from '@/components/ui/skeleton'
 </script>
 
 <template>
-  <Skeleton class="w-[100px] h-[20px] rounded-full" />
+  <Skeleton class="w-[100px] h-5 rounded-full" />
 </template>
-```
\ No newline at end of file
+```
diff --git a/apps/www/src/examples/cards/components/GitHubCard.vue b/apps/www/src/examples/cards/components/GitHubCard.vue
index 62c7b3a4..30450833 100644
--- a/apps/www/src/examples/cards/components/GitHubCard.vue
+++ b/apps/www/src/examples/cards/components/GitHubCard.vue
@@ -26,7 +26,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
 
 <template>
   <Card>
-    <CardHeader class="grid grid-cols-[1fr_110px] items-start gap-4 space-y-0">
+    <CardHeader class="grid grid-cols-[minmax(0,1fr)_110px] items-start gap-4 space-y-0">
       <div class="space-y-1">
         <CardTitle>shadcn/ui</CardTitle>
         <CardDescription>
@@ -39,7 +39,7 @@ import { Separator } from '@/lib/registry/new-york/ui/separator'
           <StarIcon class="mr-2 h-4 w-4" />
           Star
         </Button>
-        <Separator orientation="vertical" class="h-[20px]" />
+        <Separator orientation="vertical" class="h-5" />
         <DropdownMenu>
           <DropdownMenuTrigger as-child>
             <Button variant="secondary" class="px-2 shadow-none">
diff --git a/apps/www/src/examples/forms/components/AppearanceForm.vue b/apps/www/src/examples/forms/components/AppearanceForm.vue
index 0884a899..9a37f15c 100644
--- a/apps/www/src/examples/forms/components/AppearanceForm.vue
+++ b/apps/www/src/examples/forms/components/AppearanceForm.vue
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
               <div class="items-center rounded-md border-2 border-muted p-1 hover:border-accent">
                 <div class="space-y-2 rounded-sm bg-[#ecedef] p-2">
                   <div class="space-y-2 rounded-md bg-white p-2 shadow-sm">
-                    <div class="h-2 w-[80px] rounded-lg bg-[#ecedef]" />
+                    <div class="h-2 w-20 rounded-lg bg-[#ecedef]" />
                     <div class="h-2 w-[100px] rounded-lg bg-[#ecedef]" />
                   </div>
                   <div class="flex items-center space-x-2 rounded-md bg-white p-2 shadow-sm">
@@ -127,7 +127,7 @@ const onSubmit = handleSubmit((values) => {
               <div class="items-center rounded-md border-2 border-muted bg-popover p-1 hover:bg-accent hover:text-accent-foreground">
                 <div class="space-y-2 rounded-sm bg-slate-950 p-2">
                   <div class="space-y-2 rounded-md bg-slate-800 p-2 shadow-sm">
-                    <div class="h-2 w-[80px] rounded-lg bg-slate-400" />
+                    <div class="h-2 w-20 rounded-lg bg-slate-400" />
                     <div class="h-2 w-[100px] rounded-lg bg-slate-400" />
                   </div>
                   <div class="flex items-center space-x-2 rounded-md bg-slate-800 p-2 shadow-sm">
diff --git a/apps/www/src/examples/playground/Example.vue b/apps/www/src/examples/playground/Example.vue
index d30c2e12..915a69bf 100644
--- a/apps/www/src/examples/playground/Example.vue
+++ b/apps/www/src/examples/playground/Example.vue
@@ -57,7 +57,7 @@ import CounterClockwiseClockIcon from '~icons/radix-icons/counter-clockwise-cloc
     <Separator />
     <Tabs default-value="complete" class="flex-1">
       <div class="container h-full py-6">
-        <div class="grid h-full items-stretch gap-6 md:grid-cols-[1fr_200px]">
+        <div class="grid h-full items-stretch gap-6 md:grid-cols-[minmax(0,1fr)_200px]">
           <div class="hidden flex-col space-y-4 sm:flex md:order-2">
             <div class="grid gap-2">
               <HoverCard :open-delay="200">
diff --git a/apps/www/src/examples/tasks/components/columns.ts b/apps/www/src/examples/tasks/components/columns.ts
index 70c14109..181f34b9 100644
--- a/apps/www/src/examples/tasks/components/columns.ts
+++ b/apps/www/src/examples/tasks/components/columns.ts
@@ -12,16 +12,16 @@ export const columns: ColumnDef<Task>[] = [
   {
     id: 'select',
     header: ({ table }) => h(Checkbox,
-      { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-[2px]' }),
+      { 'checked': table.getIsAllPageRowsSelected(), 'onUpdate:checked': value => table.toggleAllPageRowsSelected(!!value), 'ariaLabel': 'Select all', 'class': 'translate-y-0.5' }),
     cell: ({ row }) => h(Checkbox,
-      { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-[2px]' }),
+      { 'checked': row.getIsSelected(), 'onUpdate:checked': value => row.toggleSelected(!!value), 'ariaLabel': 'Select row', 'class': 'translate-y-0.5' }),
     enableSorting: false,
     enableHiding: false,
   },
   {
     accessorKey: 'id',
     header: ({ column }) => h(DataTableColumnHeader, { column, title: 'Task' }),
-    cell: ({ row }) => h('div', { class: 'w-[80px]' }, row.getValue('id')),
+    cell: ({ row }) => h('div', { class: 'w-20' }, row.getValue('id')),
     enableSorting: false,
     enableHiding: false,
   },
diff --git a/apps/www/src/lib/registry/default/example/CardDemo.vue b/apps/www/src/lib/registry/default/example/CardDemo.vue
index 1e3c5bc9..81e6eff7 100644
--- a/apps/www/src/lib/registry/default/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/default/example/CardDemo.vue
@@ -51,7 +51,7 @@ const notifications = [
       <div>
         <div
           v-for="(notification, index) in notifications" :key="index"
-          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+          class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
         >
           <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
           <div class="space-y-1">
diff --git a/apps/www/src/lib/registry/default/example/CardStats.vue b/apps/www/src/lib/registry/default/example/CardStats.vue
index 772db8eb..b1d043dd 100644
--- a/apps/www/src/lib/registry/default/example/CardStats.vue
+++ b/apps/www/src/lib/registry/default/example/CardStats.vue
@@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
           +20.1% from last month
         </p>
 
-        <div class="h-[80px]">
+        <div class="h-20">
           <VisXYContainer
             height="80px"
             :data="data" :margin="{
@@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
           +54.8% from last month
         </p>
 
-        <div class="mt-4 h-[80px]">
+        <div class="mt-4 h-20">
           <VisXYContainer
             height="80px" :data="data" :style="{
               '--theme-primary': `hsl(${
diff --git a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
index de8b0a22..cee73472 100644
--- a/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/default/example/NavigationMenuDemo.vue
@@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
       <NavigationMenuItem>
         <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
             <li class="row-span-3">
               <NavigationMenuLink as-child>
                 <a
diff --git a/apps/www/src/lib/registry/default/example/ProgressDemo.vue b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
index 744c9f49..110c3978 100644
--- a/apps/www/src/lib/registry/default/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/default/example/ProgressDemo.vue
@@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
 </script>
 
 <template>
-  <Progress v-model="progress" class="w-[60%]" />
+  <Progress v-model="progress" class="w-3/5" />
 </template>
diff --git a/apps/www/src/lib/registry/default/example/SliderDemo.vue b/apps/www/src/lib/registry/default/example/SliderDemo.vue
index 3a6fc2be..219c6a7c 100644
--- a/apps/www/src/lib/registry/default/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/default/example/SliderDemo.vue
@@ -11,6 +11,6 @@ const modelValue = ref([50])
     v-model="modelValue"
     :max="100"
     :step="1"
-    :class="cn('w-[60%]', $attrs.class ?? '')"
+    :class="cn('w-3/5', $attrs.class ?? '')"
   />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
index 5a5dcdf7..9f09909e 100644
--- a/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
index 441c72eb..4651fb3d 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuContent.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       v-bind="forwarded"
       :class="cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )"
     >
diff --git a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
index 2cddc5ce..744388b0 100644
--- a/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/context-menu/ContextMenuSubContent.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
index 20981efa..7b3aeaba 100644
--- a/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
index 04f4a127..b33d58eb 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuContent.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
index a730438c..446f9fb5 100644
--- a/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
index 03061025..a529f149 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarContent.vue
@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
index 028ed4c9..0a0ad68e 100644
--- a/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/default/ui/menubar/MenubarSubContent.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
index 20c57b9e..8abf60d1 100644
--- a/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/default/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
index f5e366a6..efaaee2d 100644
--- a/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/default/ui/scroll-area/ScrollBar.vue
@@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
          orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
index 64809a28..5a4eb446 100644
--- a/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/default/ui/select/SelectContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
index ddf8dd01..b72cb7e7 100644
--- a/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
+++ b/apps/www/src/lib/registry/default/ui/textarea/Textarea.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
 </template>
diff --git a/apps/www/src/lib/registry/default/ui/toast/index.ts b/apps/www/src/lib/registry/default/ui/toast/index.ts
index ddfdfbf3..dd097c54 100644
--- a/apps/www/src/lib/registry/default/ui/toast/index.ts
+++ b/apps/www/src/lib/registry/default/ui/toast/index.ts
@@ -14,7 +14,7 @@ export { toast, useToast } from './use-toast'
 import { type VariantProps, cva } from 'class-variance-authority'
 
 export const toastVariants = cva(
-  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[--radix-toast-swipe-end-x] data-[swipe=move]:translate-x-[--radix-toast-swipe-move-x] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
   {
     variants: {
       variant: {
diff --git a/apps/www/src/lib/registry/new-york/example/CardDemo.vue b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
index 6d1b36ce..ad8c0883 100644
--- a/apps/www/src/lib/registry/new-york/example/CardDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardDemo.vue
@@ -50,7 +50,7 @@ const notifications = [
       <div>
         <div
           v-for="(notification, index) in notifications" :key="index"
-          class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
+          class="mb-4 grid grid-cols-[25px_minmax(0,1fr)] items-start pb-4 last:mb-0 last:pb-0"
         >
           <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
           <div class="space-y-1">
diff --git a/apps/www/src/lib/registry/new-york/example/CardStats.vue b/apps/www/src/lib/registry/new-york/example/CardStats.vue
index 540a627e..e95ebb2c 100644
--- a/apps/www/src/lib/registry/new-york/example/CardStats.vue
+++ b/apps/www/src/lib/registry/new-york/example/CardStats.vue
@@ -43,7 +43,7 @@ const lineY = (d: Data) => d.revenue
           +20.1% from last month
         </p>
 
-        <div class="h-[80px]">
+        <div class="h-20">
           <VisXYContainer
             height="80px"
             :data="data" :margin="{
@@ -79,7 +79,7 @@ const lineY = (d: Data) => d.revenue
           +54.8% from last month
         </p>
 
-        <div class="mt-4 h-[80px]">
+        <div class="mt-4 h-20">
           <VisXYContainer
             height="80px" :data="data" :style="{
               '--theme-primary': `hsl(${
diff --git a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
index 19694063..1aa57522 100644
--- a/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/NavigationMenuDemo.vue
@@ -55,7 +55,7 @@ const components: { title: string; href: string; description: string }[] = [
       <NavigationMenuItem>
         <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
         <NavigationMenuContent>
-          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+          <ul class="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[minmax(0,.75fr)_minmax(0,1fr)]">
             <li class="row-span-3">
               <NavigationMenuLink as-child>
                 <a
diff --git a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
index 125c32f3..76cb5cfb 100644
--- a/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/ProgressDemo.vue
@@ -11,5 +11,5 @@ watchEffect((cleanupFn) => {
 </script>
 
 <template>
-  <Progress v-model="progress" class="w-[60%]" />
+  <Progress v-model="progress" class="w-3/5" />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
index e4f38a77..a8447351 100644
--- a/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
+++ b/apps/www/src/lib/registry/new-york/example/SliderDemo.vue
@@ -11,6 +11,6 @@ const modelValue = ref([50])
     v-model="modelValue"
     :max="100"
     :step="1"
-    :class="cn('w-[60%]', $attrs.class ?? '')"
+    :class="cn('w-3/5', $attrs.class ?? '')"
   />
 </template>
diff --git a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
index 962124d7..afc76e58 100644
--- a/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogContent.vue
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
index d926efd8..df946223 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuContent.vue
@@ -26,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     <ContextMenuContent
       v-bind="forwarded"
       :class="cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )"
     >
diff --git a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
index aa248fec..49cdfff3 100644
--- a/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/context-menu/ContextMenuSubContent.vue
@@ -25,7 +25,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     v-bind="forwarded"
     :class="
       cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
index 35fa84c4..d8699c29 100644
--- a/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dialog/DialogContent.vue
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
index 04f4a127..b33d58eb 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuContent.vue
@@ -30,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <DropdownMenuPortal>
     <DropdownMenuContent
       v-bind="forwarded"
-      :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
     >
       <slot />
     </DropdownMenuContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
index a730438c..446f9fb5 100644
--- a/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -23,7 +23,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <DropdownMenuSubContent
     v-bind="forwarded"
-    :class="cn('z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
   >
     <slot />
   </DropdownMenuSubContent>
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
index 03061025..a529f149 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarContent.vue
@@ -32,7 +32,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
index 66d816cf..9818d201 100644
--- a/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/menubar/MenubarSubContent.vue
@@ -28,7 +28,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
index 3b4b13b0..3c37c3d6 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuTrigger.vue
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <ChevronDownIcon
-      class="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      class="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuTrigger>
diff --git a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
index 7c2a9470..db240ccc 100644
--- a/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
+++ b/apps/www/src/lib/registry/new-york/ui/navigation-menu/NavigationMenuViewport.vue
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps)
       v-bind="forwardedProps"
       :class="
         cn(
-          'origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]',
+          'origin-top-center relative mt-1.5 h-[--radix-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--radix-navigation-menu-viewport-width]',
           props.class,
         )
       "
diff --git a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
index f5e366a6..efaaee2d 100644
--- a/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
+++ b/apps/www/src/lib/registry/new-york/ui/scroll-area/ScrollBar.vue
@@ -20,9 +20,9 @@ const delegatedProps = computed(() => {
     :class="
       cn('flex touch-none select-none transition-colors',
          orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
          orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-[1px]',
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
          props.class)"
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
diff --git a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
index 64809a28..5a4eb446 100644
--- a/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
+++ b/apps/www/src/lib/registry/new-york/ui/select/SelectContent.vue
@@ -35,7 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }" :class="cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper'
           && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
         props.class,
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       "
     >
       <SelectScrollUpButton />
-      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]')">
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
         <slot />
       </SelectViewport>
       <SelectScrollDownButton />
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
index 93cd12da..40c1f43e 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableCell.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
   <td
     :class="
       cn(
-        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
         props.class,
       )
     "
diff --git a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
index e0b80d16..11fb1010 100644
--- a/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
+++ b/apps/www/src/lib/registry/new-york/ui/table/TableHead.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
     <slot />
   </th>
 </template>
diff --git a/apps/www/src/lib/registry/registry.ts b/apps/www/src/lib/registry/registry.ts
index 6f35d036..2205d062 100644
--- a/apps/www/src/lib/registry/registry.ts
+++ b/apps/www/src/lib/registry/registry.ts
@@ -1,6 +1,7 @@
 import { readFile, readdir } from 'node:fs/promises'
 import { join, normalize, resolve } from 'pathe'
 import { compileScript, parse } from 'vue/compiler-sfc'
+import oxc from 'oxc-parser'
 
 import type { Registry } from '../../lib/registry'
 
@@ -135,31 +136,47 @@ async function buildUIRegistry(componentPath: string, componentName: string) {
 
 async function getDependencies(filename: string) {
   const code = await readFile(filename, { encoding: 'utf8' })
-  const parsed = parse(code, { filename })
 
   const registryDependencies = new Set<string>()
   const dependencies = new Set<string>()
 
-  if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
-    const compiled = compileScript(parsed.descriptor, { id: '' })
+  const populateDeps = (source: string) => {
+    const peerDeps = DEPENDENCIES.get(source)
+    const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
+    if (peerDeps !== undefined) {
+      if (taggedDeps !== undefined)
+        dependencies.add(taggedDeps)
+      else
+        dependencies.add(source)
+      peerDeps.forEach(dep => dependencies.add(dep))
+    }
 
-    Object.values(compiled.imports!).forEach((value) => {
-      const source = value.source
-      const peerDeps = DEPENDENCIES.get(source)
-      const taggedDeps = DEPENDENCIES_WITH_TAGS.get(source)
-      if (peerDeps !== undefined) {
-        if (taggedDeps !== undefined)
-          dependencies.add(taggedDeps)
-        else
-          dependencies.add(source)
-        peerDeps.forEach(dep => dependencies.add(dep))
-      }
+    if (source.startsWith(REGISTRY_DEPENDENCY)) {
+      const component = source.split('/').at(-1)!
+      registryDependencies.add(component)
+    }
+  }
 
-      if (source.startsWith(REGISTRY_DEPENDENCY)) {
-        const component = source.split('/').at(-1)!
-        registryDependencies.add(component)
-      }
+  if (filename.endsWith('.ts')) {
+    const ast = oxc.parseSync(code, {
+      sourceType: 'module',
+      sourceFilename: filename,
     })
+
+    const sources = JSON.parse(ast.program).body.filter((i: any) => i.type === 'ImportDeclaration').map((i: any) => i.source)
+    sources.forEach((source: any) => {
+      populateDeps(source.value)
+    })
+  }
+  else {
+    const parsed = parse(code, { filename })
+    if (parsed.descriptor.script?.content || parsed.descriptor.scriptSetup?.content) {
+      const compiled = compileScript(parsed.descriptor, { id: '' })
+
+      Object.values(compiled.imports!).forEach((value) => {
+        populateDeps(value.source)
+      })
+    }
   }
 
   return { registryDependencies, dependencies }
diff --git a/apps/www/src/public/registry/index.json b/apps/www/src/public/registry/index.json
index d6b78da7..5b16fa1e 100644
--- a/apps/www/src/public/registry/index.json
+++ b/apps/www/src/public/registry/index.json
@@ -651,4 +651,4 @@
     ],
     "type": "components:ui"
   }
-]
\ No newline at end of file
+]
diff --git a/apps/www/src/public/registry/styles/default/alert-dialog.json b/apps/www/src/public/registry/styles/default/alert-dialog.json
index eb365c4e..96a0087e 100644
--- a/apps/www/src/public/registry/styles/default/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/default/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/carousel.json b/apps/www/src/public/registry/styles/default/carousel.json
index f49cc2e0..45584196 100644
--- a/apps/www/src/public/registry/styles/default/carousel.json
+++ b/apps/www/src/public/registry/styles/default/carousel.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/context-menu.json b/apps/www/src/public/registry/styles/default/context-menu.json
index 971bba3a..6d2c9b81 100644
--- a/apps/www/src/public/registry/styles/default/context-menu.json
+++ b/apps/www/src/public/registry/styles/default/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/data-table.json b/apps/www/src/public/registry/styles/default/data-table.json
index 6f15fbca..f1366992 100644
--- a/apps/www/src/public/registry/styles/default/data-table.json
+++ b/apps/www/src/public/registry/styles/default/data-table.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "name": "DataTable.vue",
-      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-[18rem]\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :checked=\"column.getIsVisible()\"\n            @update:checked=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :col-span=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport {\n  type ColumnDef,\n  FlexRender,\n  type SortingState,\n  getCoreRowModel,\n  getFilteredRowModel,\n  getPaginationRowModel,\n  getSortedRowModel,\n  useVueTable,\n} from '@tanstack/vue-table'\nimport { computed, ref } from 'vue'\nimport {\n  ArrowDownNarrowWide,\n  ArrowUpDown,\n  ArrowUpNarrowWide,\n  ChevronLeft,\n  ChevronRight,\n  ChevronsLeft,\n  ChevronsRight,\n  X,\n} from 'lucide-vue-next'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableEmpty,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '../table'\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../dropdown-menu'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n} from '../select'\nimport { Input } from '../input'\nimport { Button } from '../button'\nimport RadixIconsMixerHorizontal from '~icons/radix-icons/mixer-horizontal'\n\ninterface tableProps {\n  data: any[]\n  columns: ColumnDef<any>[]\n}\n\nconst props = defineProps<tableProps>()\n\nconst sorting = ref<SortingState>([])\nconst globalFilter = ref('')\nconst columnVisibility = ref({})\nconst rowSelection = ref({})\nconst pageSizes = computed(() => [10, 20, 30, 40, 50])\n\nconst table = useVueTable({\n  data: props.data,\n  columns: props.columns,\n  state: {\n    get sorting() {\n      return sorting.value\n    },\n    get globalFilter() {\n      return globalFilter.value\n    },\n    get columnVisibility() {\n      return columnVisibility.value\n    },\n    get rowSelection() {\n      return rowSelection.value\n    },\n  },\n  onSortingChange: (updaterOrValue) => {\n    sorting.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(sorting.value)\n        : updaterOrValue\n  },\n  onGlobalFilterChange: (updaterOrValue) => {\n    globalFilter.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(globalFilter.value)\n        : updaterOrValue\n  },\n  onRowSelectionChange: (updaterOrValue) => {\n    rowSelection.value\n      = typeof updaterOrValue === 'function'\n        ? updaterOrValue(rowSelection.value)\n        : updaterOrValue\n  },\n  getCoreRowModel: getCoreRowModel(),\n  getSortedRowModel: getSortedRowModel(),\n  getPaginationRowModel: getPaginationRowModel(),\n  getFilteredRowModel: getFilteredRowModel(),\n})\n\nfunction toggleColumnVisibility(column: any) {\n  columnVisibility.value = {\n    ...columnVisibility.value,\n    [column.id]: !column.getIsVisible(),\n  }\n}\n\nconst pageSize = computed({\n  get() {\n    return table.getState().pagination.pageSize.toString()\n  },\n  set(value) {\n    table.setPageSize(Number(value))\n  },\n})\n</script>\n\n<template>\n  <div class=\"flex items-center justify-between\">\n    <div class=\"flex flex-1 items-center space-x-2\">\n      <div class=\"w-full max-w-72\">\n        <Input\n          v-model:value=\"globalFilter\"\n          placeholder=\"Filter tasks...\"\n          class=\"h-8\"\n        />\n      </div>\n      <Button\n        v-if=\"globalFilter\"\n        variant=\"ghost\"\n        class=\"h-8\"\n        @click=\"globalFilter = ''\"\n      >\n        <span class=\"text-xs\">Reset</span>\n        <X class=\"w-4 h-4 ml-1\" />\n      </Button>\n    </div>\n    <DropdownMenu>\n      <DropdownMenuTrigger>\n        <Button variant=\"outline\" class=\"h-8\">\n          <RadixIconsMixerHorizontal class=\"w-3.5 h-3.5 mr-2\" />\n          <span class=\"text-xs\">View</span>\n        </Button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" class=\"w-40\">\n        <DropdownMenuLabel> Toggle Columns </DropdownMenuLabel>\n        <DropdownMenuSeparator />\n        <DropdownMenuGroup>\n          <DropdownMenuCheckboxItem\n            v-for=\"column in table\n              .getAllColumns()\n              .filter((column) => !column.getCanHide())\"\n            :key=\"column.id\"\n            :checked=\"column.getIsVisible()\"\n            @update:checked=\"toggleColumnVisibility(column)\"\n          >\n            <span class=\"text-sm\">{{ column.columnDef.header }}</span>\n          </DropdownMenuCheckboxItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  </div>\n\n  <Table class=\"mt-4 rounded-md border border-border\">\n    <TableHeader>\n      <TableRow\n        v-for=\"headerGroup in table.getHeaderGroups()\"\n        :key=\"headerGroup.id\"\n      >\n        <TableHead\n          v-for=\"header in headerGroup.headers\"\n          :key=\"header.id\"\n          class=\"h-10 px-2.5\"\n          :col-span=\"header.colSpan\"\n        >\n          <template v-if=\"!header.isPlaceholder\">\n            <div class=\"flex items-center space-x-2\">\n              <Button\n                v-if=\"header.column.getCanSort()\"\n                variant=\"ghost\"\n                class=\"h-8 -translate-x-3\"\n                @click=\"header.column.getToggleSortingHandler()?.($event)\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n                <ArrowUpDown\n                  v-if=\"\n                    header.column.getCanSort() && !header.column.getIsSorted()\n                  \"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowUpNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'asc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n                <ArrowDownNarrowWide\n                  v-if=\"header.column.getIsSorted() === 'desc'\"\n                  class=\"w-3.5 h-3.5 ml-1.5 text-muted\"\n                />\n              </Button>\n              <span\n                v-else\n                class=\"flex items-center justify-center h-8 text-foreground\"\n              >\n                <FlexRender\n                  :render=\"header.column.columnDef.header\"\n                  :props=\"header.getContext()\"\n                />\n              </span>\n            </div>\n          </template>\n        </TableHead>\n      </TableRow>\n    </TableHeader>\n\n    <TableBody>\n      <TableRow\n        v-for=\"row in table.getRowModel().rows\"\n        :key=\"row.id\"\n        :class=\"row.getIsSelected() ? 'bg-outline-hover' : ''\"\n      >\n        <TableCell\n          v-for=\"cell in row.getVisibleCells()\"\n          :key=\"cell.id\"\n          class=\"p-2.5\"\n        >\n          <FlexRender\n            :render=\"cell.column.columnDef.cell\"\n            :props=\"cell.getContext()\"\n          />\n        </TableCell>\n      </TableRow>\n\n      <TableEmpty\n        v-if=\"table.getRowModel().rows.length === 0\"\n        :colspan=\"table.getAllLeafColumns().length\"\n      >\n        No data available.\n      </TableEmpty>\n    </TableBody>\n  </Table>\n\n  <div class=\"flex items-center justify-end px-2 my-6\">\n    <div class=\"flex-1 text-sm text-muted\">\n      <span>\n        {{ table.getFilteredSelectedRowModel().rows.length }} of {{ \" \" }}\n        {{ table.getFilteredRowModel().rows.length }} row(s) selected\n      </span>\n    </div>\n    <div class=\"flex items-center space-x-6 lg:space-x-8\">\n      <div class=\"md:flex items-center space-x-2 hidden\">\n        <p class=\"text-sm font-medium text-foreground\">\n          Rows per page:\n        </p>\n        <Select v-model=\"pageSize\">\n          <SelectTrigger class=\"h-8 w-[70px]\">\n            {{ table.getState().pagination.pageSize }}\n          </SelectTrigger>\n          <SelectContent side=\"top\" align=\"start\">\n            <SelectGroup>\n              <SelectItem\n                v-for=\"pageSize in pageSizes\"\n                :key=\"pageSize\"\n                :value=\"`${pageSize}`\"\n              >\n                {{ pageSize }}\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div\n        class=\"flex text-foreground items-center justify-center text-sm font-medium\"\n      >\n        Page {{ table.getState().pagination.pageIndex + 1 }} of\n        {{ table.getPageCount() }}\n      </div>\n\n      <div class=\"flex items-center space-x-2\">\n        <Button\n          variant=\"outline\"\n          title=\"First page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.setPageIndex(0)\"\n        >\n          <ChevronsLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Previous page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanPreviousPage()\"\n          @click=\"table.previousPage()\"\n        >\n          <ChevronLeft class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Next page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.nextPage()\"\n        >\n          <ChevronRight class=\"w-4 h-4\" />\n        </Button>\n        <Button\n          variant=\"outline\"\n          title=\"Last page\"\n          class=\"h-8 w-8 p-0\"\n          :disabled=\"!table.getCanNextPage()\"\n          @click=\"table.setPageIndex(table.getPageCount() - 1)\"\n        >\n          <ChevronsRight class=\"w-4 h-4\" />\n        </Button>\n      </div>\n    </div>\n  </div>\n</template>\n"
     },
     {
       "name": "index.ts",
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dialog.json b/apps/www/src/public/registry/styles/default/dialog.json
index f4b3b8c7..6102064c 100644
--- a/apps/www/src/public/registry/styles/default/dialog.json
+++ b/apps/www/src/public/registry/styles/default/dialog.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/dropdown-menu.json b/apps/www/src/public/registry/styles/default/dropdown-menu.json
index 44e56edf..8393653d 100644
--- a/apps/www/src/public/registry/styles/default/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/default/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/kbd.json b/apps/www/src/public/registry/styles/default/kbd.json
index db9ad268..2eeafdda 100644
--- a/apps/www/src/public/registry/styles/default/kbd.json
+++ b/apps/www/src/public/registry/styles/default/kbd.json
@@ -5,7 +5,7 @@
   "files": [
     {
       "name": "Kbd.vue",
-      "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n  as?: string\n  size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n  as: 'kbd',\n  size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n  return cva(\n    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n    {\n      variants: {\n        size: {\n          xs: 'min-h-[16px] text-[10px] h-4 px-1',\n          sm: 'min-h-[20px] text-[11px] h-5 px-1',\n          md: 'min-h-[24px] text-[12px] h-6 px-1.5',\n        },\n      },\n    },\n  )({\n    size: props.size,\n  })\n})\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"kbdClass\">\n    <slot />\n  </component>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { cva } from 'class-variance-authority'\nimport { computed } from 'vue'\n\ninterface KbdProps {\n  as?: string\n  size?: 'xs' | 'sm' | 'md'\n}\n\nconst props = withDefaults(defineProps<KbdProps>(), {\n  as: 'kbd',\n  size: 'sm',\n})\n\nconst kbdClass = computed(() => {\n  return cva(\n    'inline-flex items-center font-sans justify-center text-foreground rounded font-semibold bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700',\n    {\n      variants: {\n        size: {\n          xs: 'min-h-4 text-[10px] h-4 px-1',\n          sm: 'min-h-5 text-[11px] h-5 px-1',\n          md: 'min-h-6 text-[12px] h-6 px-1.5',\n        },\n      },\n    },\n  )({\n    size: props.size,\n  })\n})\n</script>\n\n<template>\n  <component :is=\"props.as\" :class=\"kbdClass\">\n    <slot />\n  </component>\n</template>\n"
     },
     {
       "name": "index.ts",
@@ -13,4 +13,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/menubar.json b/apps/www/src/public/registry/styles/default/menubar.json
index c816fcbc..fbe86bd2 100644
--- a/apps/www/src/public/registry/styles/default/menubar.json
+++ b/apps/www/src/public/registry/styles/default/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/navigation-menu.json b/apps/www/src/public/registry/styles/default/navigation-menu.json
index 32d828b7..872a0458 100644
--- a/apps/www/src/public/registry/styles/default/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/default/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/scroll-area.json b/apps/www/src/public/registry/styles/default/scroll-area.json
index a717c4ea..326298b5 100644
--- a/apps/www/src/public/registry/styles/default/scroll-area.json
+++ b/apps/www/src/public/registry/styles/default/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/select.json b/apps/www/src/public/registry/styles/default/select.json
index d8df5cb7..e412f47d 100644
--- a/apps/www/src/public/registry/styles/default/select.json
+++ b/apps/www/src/public/registry/styles/default/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/switch.json b/apps/www/src/public/registry/styles/default/switch.json
index 3b09a00e..006f0b0a 100644
--- a/apps/www/src/public/registry/styles/default/switch.json
+++ b/apps/www/src/public/registry/styles/default/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/textarea.json b/apps/www/src/public/registry/styles/default/textarea.json
index 57c8fb8c..1f76c526 100644
--- a/apps/www/src/public/registry/styles/default/textarea.json
+++ b/apps/www/src/public/registry/styles/default/textarea.json
@@ -17,4 +17,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/default/toast.json b/apps/www/src/public/registry/styles/default/toast.json
index 7abff558..4c7ea5f3 100644
--- a/apps/www/src/public/registry/styles/default/toast.json
+++ b/apps/www/src/public/registry/styles/default/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/alert-dialog.json b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
index f79d3a78..3941d10f 100644
--- a/apps/www/src/public/registry/styles/new-york/alert-dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/alert-dialog.json
@@ -48,4 +48,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/carousel.json b/apps/www/src/public/registry/styles/new-york/carousel.json
index 530ca629..b14b3512 100644
--- a/apps/www/src/public/registry/styles/new-york/carousel.json
+++ b/apps/www/src/public/registry/styles/new-york/carousel.json
@@ -40,4 +40,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/context-menu.json b/apps/www/src/public/registry/styles/new-york/context-menu.json
index bc2cc5e2..f54fa1fd 100644
--- a/apps/www/src/public/registry/styles/new-york/context-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/context-menu.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/dialog.json b/apps/www/src/public/registry/styles/new-york/dialog.json
index 254ba0bd..6ab4c5b3 100644
--- a/apps/www/src/public/registry/styles/new-york/dialog.json
+++ b/apps/www/src/public/registry/styles/new-york/dialog.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
index 7ad3075b..df16ad60 100644
--- a/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/dropdown-menu.json
@@ -67,4 +67,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/menubar.json b/apps/www/src/public/registry/styles/new-york/menubar.json
index 82c536df..d0a58952 100644
--- a/apps/www/src/public/registry/styles/new-york/menubar.json
+++ b/apps/www/src/public/registry/styles/new-york/menubar.json
@@ -71,4 +71,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/navigation-menu.json b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
index 22142536..692b7f79 100644
--- a/apps/www/src/public/registry/styles/new-york/navigation-menu.json
+++ b/apps/www/src/public/registry/styles/new-york/navigation-menu.json
@@ -43,4 +43,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/scroll-area.json b/apps/www/src/public/registry/styles/new-york/scroll-area.json
index a717c4ea..326298b5 100644
--- a/apps/www/src/public/registry/styles/new-york/scroll-area.json
+++ b/apps/www/src/public/registry/styles/new-york/scroll-area.json
@@ -19,4 +19,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/select.json b/apps/www/src/public/registry/styles/new-york/select.json
index a17cfb57..699d9611 100644
--- a/apps/www/src/public/registry/styles/new-york/select.json
+++ b/apps/www/src/public/registry/styles/new-york/select.json
@@ -55,4 +55,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/switch.json b/apps/www/src/public/registry/styles/new-york/switch.json
index 7cc55c5b..14e290e0 100644
--- a/apps/www/src/public/registry/styles/new-york/switch.json
+++ b/apps/www/src/public/registry/styles/new-york/switch.json
@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/table.json b/apps/www/src/public/registry/styles/new-york/table.json
index 6ad9f35f..a6435e70 100644
--- a/apps/www/src/public/registry/styles/new-york/table.json
+++ b/apps/www/src/public/registry/styles/new-york/table.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/apps/www/src/public/registry/styles/new-york/toast.json b/apps/www/src/public/registry/styles/new-york/toast.json
index a0c0fee5..b297aae8 100644
--- a/apps/www/src/public/registry/styles/new-york/toast.json
+++ b/apps/www/src/public/registry/styles/new-york/toast.json
@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
\ No newline at end of file
+}
diff --git a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
index fde4167f..974f825a 100644
--- a/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue
@@ -24,7 +24,7 @@ const emitsAsProps = useEmitAsProps(emits)
       v-bind="{ ...props, ...emitsAsProps }"
       :class="
         cn(
-          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
           props.class,
         )
       "
diff --git a/packages/module/playground/components/ui/carousel/Carousel.vue b/packages/module/playground/components/ui/carousel/Carousel.vue
index c88d61ad..b6147c27 100644
--- a/packages/module/playground/components/ui/carousel/Carousel.vue
+++ b/packages/module/playground/components/ui/carousel/Carousel.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import emblaCarouselVue from 'embla-carousel-vue'
 import { useProvideCarousel } from './useCarousel'
 import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
 import { cn } from '@/lib/utils'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c42dfad8..adc9a366 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -162,6 +162,9 @@ importers:
       lodash.template:
         specifier: ^4.5.0
         version: 4.5.0
+      oxc-parser:
+        specifier: ^0.2.0
+        version: 0.2.0
       pathe:
         specifier: ^1.1.2
         version: 1.1.2
@@ -3224,7 +3227,6 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-darwin-x64@0.2.0:
@@ -3232,7 +3234,6 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-linux-arm64-gnu@0.2.0:
@@ -3240,7 +3241,6 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-linux-x64-gnu@0.2.0:
@@ -3248,7 +3248,6 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-win32-arm64-msvc@0.2.0:
@@ -3256,7 +3255,6 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@oxc-parser/binding-win32-x64-msvc@0.2.0:
@@ -3264,7 +3262,6 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
-    dev: false
     optional: true
 
   /@parcel/watcher-android-arm64@2.3.0:
@@ -11206,7 +11203,6 @@ packages:
       '@oxc-parser/binding-linux-x64-gnu': 0.2.0
       '@oxc-parser/binding-win32-arm64-msvc': 0.2.0
       '@oxc-parser/binding-win32-x64-msvc': 0.2.0
-    dev: false
 
   /p-finally@1.0.0:
     resolution: {integrity: sha512-LICb2p9CB7FS+0eR1oqWnHhp0FljGLZCWBE9aix0Uye9W8LTQPwMTYVGWQWIw9RdQiDg4+epXQODwIYJtSJaow==}