feat: resizable (splitter)

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

@@ -275,6 +275,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

@@ -556,6 +556,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",
@@ -1509,6 +1530,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/src/content/docs/components/resizable.md

@@ -0,0 +1,105 @@
+---
+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:
+
+</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

@@ -445,6 +445,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": [],
@@ -685,4 +698,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/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"
+}