Merge branch 'dev' into dark-mode

.vscode/extensions.json

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

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

@@ -286,6 +286,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/radio-group',
           items: [],
         },
+        {
+          title: 'Resizable',
+          href: '/docs/components/resizable',
+          label: 'New',
+          items: [],
+        },
         {
           title: 'Scroll Area',
           href: '/docs/components/scroll-area',

apps/www/__registry__/index.ts

@@ -591,6 +591,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/example/RangePickerWithSlot.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/example/RangePickerWithSlot.vue"],
     },
+    "ResizableDemo": {
+      name: "ResizableDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/default/example/ResizableDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/ResizableDemo.vue"],
+    },
+    "ResizableHandleDemo": {
+      name: "ResizableHandleDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/default/example/ResizableHandleDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/ResizableHandleDemo.vue"],
+    },
+    "ResizableVerticalDemo": {
+      name: "ResizableVerticalDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/default/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/example/ResizableVerticalDemo.vue"],
+    },
     "ScrollAreaDemo": {
       name: "ScrollAreaDemo",
       type: "components:example",
@@ -1600,6 +1621,27 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/example/RangePickerWithSlot.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/example/RangePickerWithSlot.vue"],
     },
+    "ResizableDemo": {
+      name: "ResizableDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/new-york/example/ResizableDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/ResizableDemo.vue"],
+    },
+    "ResizableHandleDemo": {
+      name: "ResizableHandleDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/new-york/example/ResizableHandleDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/ResizableHandleDemo.vue"],
+    },
+    "ResizableVerticalDemo": {
+      name: "ResizableVerticalDemo",
+      type: "components:example",
+      registryDependencies: ["resizable"],
+      component: () => import("../src/lib/registry/new-york/example/ResizableVerticalDemo.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/example/ResizableVerticalDemo.vue"],
+    },
     "ScrollAreaDemo": {
       name: "ScrollAreaDemo",
       type: "components:example",

apps/www/package.json

@@ -1,7 +1,7 @@
 {
   "name": "www",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "files": [
     "dist"
   ],
@@ -31,7 +31,7 @@
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-vue": "^8.0.0",
     "lucide-vue-next": "^0.276.0",
-    "radix-vue": "^1.4.9",
+    "radix-vue": "^1.5.0",
     "tailwindcss-animate": "^1.0.7",
     "v-calendar": "^3.1.2",
     "vaul-vue": "^0.1.0",
@@ -42,9 +42,9 @@
     "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@iconify-json/radix-icons": "^1.1.11",
+    "@iconify-json/radix-icons": "^1.1.14",
-    "@iconify-json/tabler": "^1.1.89",
+    "@iconify-json/tabler": "^1.1.106",
-    "@iconify/json": "^2.2.108",
+    "@iconify/json": "^2.2.189",
     "@iconify/vue": "^4.1.1",
     "@shikijs/transformers": "^1.1.7",
     "@types/lodash.template": "^4.5.3",
@@ -56,7 +56,7 @@
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "^10.4.18",
     "lodash.template": "^4.5.0",
-    "oxc-parser": "^0.7.0",
+    "oxc-parser": "^0.8.0",
     "pathe": "^1.1.2",
     "rimraf": "^5.0.5",
     "shiki": "^1.1.7",
@@ -65,8 +65,8 @@
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
     "unplugin-icons": "^0.18.5",
-    "vite": "^5.1.4",
+    "vite": "^5.1.5",
     "vitepress": "^1.0.0-rc.44",
-    "vue-tsc": "^2.0.3"
+    "vue-tsc": "^2.0.5"
   }
 }

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

@@ -0,0 +1,117 @@
+---
+title: Resizable
+description: Accessible resizable panel groups and layouts with keyboard support.
+source: apps/www/src/lib/registry/default/ui/resizable
+primitive: https://www.radix-vue.com/components/splitter.html
+---
+
+<ComponentPreview name="ResizableDemo" />
+
+## Installation
+
+<TabPreview name="CLI">
+<template #CLI>
+
+```bash
+npx shadcn-vue@latest add resizable
+```
+</template>
+
+<template #Manual>
+
+<Steps>
+
+### Install the following dependency:
+
+```bash
+npm install radix-vue
+```
+
+### Copy and paste the following code into your project:
+
+`index.ts`
+
+<<< @/lib/registry/default/ui/resizable/index.ts
+
+`ResizablePanelGroup.vue`
+
+<<< @/lib/registry/default/ui/resizable/ResizablePanelGroup.vue
+
+`ResizableHandle.vue`
+
+<<< @/lib/registry/default/ui/resizable/ResizableHandle.vue
+
+</Steps>
+
+</template>
+</TabPreview>
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup direction="horizontal">
+    <ResizablePanel>One</ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel>Two</ResizablePanel>
+  </ResizablePanelGroup>
+</template>
+```
+
+## Examples
+
+### Vertical
+
+Use the direction prop to set the direction of the resizable panels.
+
+<ComponentPreview name="ResizableVerticalDemo" />
+
+```vue:line-numbers {10}
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup direction="horizontal">
+    <ResizablePanel>One</ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel>Two</ResizablePanel>
+  </ResizablePanelGroup>
+</template>
+```
+
+### Handle
+
+You can set or hide the handle by using the withHandle prop on the ResizableHandle component.
+
+<ComponentPreview name="ResizableHandleDemo" />
+
+```vue:line-numbers {12}
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/components/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup direction="horizontal">
+    <ResizablePanel>One</ResizablePanel>
+    <ResizableHandle with-handle />
+    <ResizablePanel>Two</ResizablePanel>
+  </ResizablePanelGroup>
+</template>
+```

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/default/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="horizontal"
+    class="max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="50">
+      <div class="flex h-[200px] items-center justify-center p-6">
+        <span class="font-semibold">One</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel :default-size="50">
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel :default-size="25">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Two</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel :default-size="75">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Three</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/default/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="horizontal"
+    class="min-h-[200px] max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="25">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Sidebar</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle with-handle />
+    <ResizablePanel :default-size="75">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/default/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="vertical"
+    class="min-h-[200px] max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="25">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Header</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel :default-size="75">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

apps/www/src/lib/registry/default/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { GripVertical } from 'lucide-vue-next'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

apps/www/src/lib/registry/default/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>

apps/www/src/lib/registry/default/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'

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

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/new-york/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="horizontal"
+    class="max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="50">
+      <div class="flex h-[200px] items-center justify-center p-6">
+        <span class="font-semibold">One</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel :default-size="50">
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel :default-size="25">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Two</span>
+          </div>
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel :default-size="75">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Three</span>
+          </div>
+        </ResizablePanel>
+      </ResizablePanelGroup>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/new-york/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="horizontal"
+    class="min-h-[200px] max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="25">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Sidebar</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle with-handle />
+    <ResizablePanel :default-size="75">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from '@/lib/registry/new-york/ui/resizable'
+</script>
+
+<template>
+  <ResizablePanelGroup
+    direction="vertical"
+    class="min-h-[200px] max-w-md rounded-lg border"
+  >
+    <ResizablePanel :default-size="25">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Header</span>
+      </div>
+    </ResizablePanel>
+    <ResizableHandle />
+    <ResizablePanel :default-size="75">
+      <div class="flex h-full items-center justify-center p-6">
+        <span class="font-semibold">Content</span>
+      </div>
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>

apps/www/src/lib/registry/new-york/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

apps/www/src/lib/registry/new-york/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>

apps/www/src/lib/registry/new-york/ui/resizable/index.ts

@@ -0,0 +1,3 @@
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'

apps/www/src/public/registry/index.json

@@ -463,6 +463,19 @@
     ],
     "type": "components:ui"
   },
+  {
+    "name": "resizable",
+    "dependencies": [],
+    "registryDependencies": [
+      "utils"
+    ],
+    "files": [
+      "ui/resizable/ResizableHandle.vue",
+      "ui/resizable/ResizablePanelGroup.vue",
+      "ui/resizable/index.ts"
+    ],
+    "type": "components:ui"
+  },
   {
     "name": "scroll-area",
     "dependencies": [],
@@ -703,4 +716,4 @@
     ],
     "type": "components:ui"
   }
-]
+]

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

@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

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

@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "resizable",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "ResizableHandle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { GripVertical } from 'lucide-vue-next'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <GripVertical class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
+    },
+    {
+      "name": "ResizablePanelGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

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

@@ -47,4 +47,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

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

@@ -39,4 +39,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "resizable",
+  "dependencies": [],
+  "registryDependencies": [
+    "utils"
+  ],
+  "files": [
+    {
+      "name": "ResizableHandle.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'\nimport { DragHandleDots2Icon } from '@radix-icons/vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()\nconst emits = defineEmits<SplitterResizeHandleEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterResizeHandle v-bind=\"forwarded\" :class=\"cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)\">\n    <template v-if=\"props.withHandle\">\n      <div class=\"z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border\">\n        <DragHandleDots2Icon class=\"h-2.5 w-2.5\" />\n      </div>\n    </template>\n  </SplitterResizeHandle>\n</template>\n"
+    },
+    {
+      "name": "ResizablePanelGroup.vue",
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()\nconst emits = defineEmits<SplitterGroupEmits>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n  return delegated\n})\n\nconst forwarded = useForwardPropsEmits(delegatedProps, emits)\n</script>\n\n<template>\n  <SplitterGroup v-bind=\"forwarded\" :class=\"cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)\">\n    <slot />\n  </SplitterGroup>\n</template>\n"
+    },
+    {
+      "name": "index.ts",
+      "content": "export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'\nexport { default as ResizableHandle } from './ResizableHandle.vue'\nexport { SplitterPanel as ResizablePanel } from 'radix-vue'\n"
+    }
+  ],
+  "type": "components:ui"
+}

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

@@ -15,4 +15,4 @@
     }
   ],
   "type": "components:ui"
-}
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "private": true,
   "packageManager": "pnpm@8.15.4",
   "license": "MIT",

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -48,7 +48,7 @@
     "@babel/core": "^7.24.0",
     "@babel/parser": "^7.24.0",
     "@vue/compiler-sfc": "^3.4",
-    "c12": "^1.9.0",
+    "c12": "^1.10.0",
     "commander": "^12.0.0",
     "consola": "^3.2.3",
     "detype": "npm:detypes@^0.7.9",
@@ -62,7 +62,7 @@
     "ora": "^8.0.1",
     "pathe": "^1.1.2",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.4.9",
+    "radix-vue": "^1.5.0",
     "ts-morph": "^21.0.1",
     "tsconfig-paths": "^4.2.0",
     "zod": "^3.22.4"
@@ -72,12 +72,12 @@
     "@types/diff": "^5.0.9",
     "@types/fs-extra": "^11.0.4",
     "@types/lodash.template": "^4.5.3",
-    "@types/node": "^20.11.24",
+    "@types/node": "^20.11.25",
     "@types/prompts": "^2.4.9",
     "@vitest/ui": "^0.34.4",
     "tsup": "^8.0.2",
-    "type-fest": "^4.10.3",
+    "type-fest": "^4.11.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "vite-tsconfig-paths": "^4.3.1"
   }
 }

packages/cli/src/utils/get-config.ts

@@ -111,7 +111,7 @@ export async function getRawConfig(cwd: string): Promise<RawConfig | null> {
   try {
     const configResult = await c12LoadConfig({
       name: 'components',
-      configFile: 'components',
+      configFile: 'components.json',
       cwd,
     })
 

packages/cli/src/utils/get-package-info.ts

@@ -1,7 +1,7 @@
 import { fileURLToPath } from 'node:url'
 import path from 'pathe'
 import fs from 'fs-extra'
-import { type PackageJson } from 'type-fest'
+import type { PackageJson } from 'type-fest'
 
 export function getPackageInfo() {
   const packageJsonPath = getPackageFilePath('../package.json')

packages/module/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-nuxt",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.10.1",
   "description": "Add shadcn-vue module to Nuxt",
   "publishConfig": {
     "access": "public"