add Resize

components/s/resizable/ResizableHandle.vue

+<script setup lang="ts">
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+
+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-gray-200 dark:bg-gray-800 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 bg-gray-200 dark:bg-gray-800">
+        <UIcon name="i-heroicons-ellipsis-vertical-20-solid" class="w-2.5 h-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

components/s/resizable/ResizablePanel.js

+import { SplitterPanel } from 'radix-vue'
+export default SplitterPanel
\ No newline at end of file

components/s/resizable/ResizablePanelGroup.vue

+<script setup lang="ts">
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+
+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>

pages/mdc.vue

 <template>
-  <ScrollArea class="h-72 w-48 rounded-md border">
-    <div class="p-4">
-      <h4 class="mb-4 text-sm font-medium leading-none">
-        Tags
-      </h4>
-
-      <div v-for="tag in tags" :key="tag">
-        <div class="text-sm">
-          {{ tag }}
+  <SResizablePanelGroup
+    id="demo-group-1"
+    direction="horizontal"
+    class="max-w-md rounded-lg border"
+  >
+    <SResizablePanel id="demo-panel-1" :default-size="50">
+      <div class="flex h-[200px] items-center justify-center p-6">
+        <span class="font-semibold">One</span>
       </div>
-        <UDivider class="my-2" />
+    </SResizablePanel>
+    <SResizableHandle id="demo-handle-1" />
+    <SResizablePanel id="demo-panel-2" :default-size="50">
+      <SResizablePanelGroup id="demo-group-2" direction="vertical">
+        <SResizablePanel id="demo-panel-3" :default-size="25">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Two</span>
           </div>
+        </SResizablePanel>
+        <SResizableHandle id="demo-handle-2" />
+        <SResizablePanel id="demo-panel-4" :default-size="75">
+          <div class="flex h-full items-center justify-center p-6">
+            <span class="font-semibold">Three</span>
           </div>
-  </ScrollArea>
+        </SResizablePanel>
+      </SResizablePanelGroup>
+    </SResizablePanel>
+  </SResizablePanelGroup>
 </template>
\ No newline at end of file
-
-<script setup lang="ts">
-const tags = Array.from({ length: 50 }).map(
-  (_, i, a) => `v1.2.0-beta.${a.length - i}`,
-)
-</script>
\ No newline at end of file