docs(www): add resizable control example

apps/www/content/docs/components/resizable.mdx

@@ -127,3 +127,55 @@ export default function Example() {
   )
 }
 ```
+
+### Control
+
+You can control the panel status by using refs.
+
+<ComponentPreview
+  name="resizable-control"
+  description="A group of resizable panels with a button to control the panel."
+/>
+
+```tsx showLineNumbers {11,34,13-21}
+import { useRef } from "react"
+import { Button } from "@/components/ui/button"
+import { ImperativePanelHandle } from "react-resizable-panels"
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
+export default function Example() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup direction="horizontal">
+            <ResizablePanel>
+                <Button onClick={toggleLeftPanel}>
+                    Toggle Left Panel
+                </Button>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                Left Panel
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}
+```

apps/www/registry/default/example/resizable-control.tsx

@@ -0,0 +1,47 @@
+import { useRef } from "react"
+import { Button } from "@/registry/default/ui/button"
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/registry/default/ui/resizable"
+import { ImperativePanelHandle } from "react-resizable-panels"
+
+export default function ResizableDemo() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup
+            direction="horizontal"
+            className="max-w-md rounded-lg border md:min-w-[450px]"
+        >
+            <ResizablePanel>
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    <Button onClick={toggleLeftPanel}>
+                        Toggle Left Panel
+                    </Button>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    Left Resizable Panel
+                </div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}

apps/www/registry/new-york/example/resizable-control.tsx

@@ -0,0 +1,47 @@
+import {
+    ResizableHandle,
+    ResizablePanel,
+    ResizablePanelGroup,
+} from "@/registry/new-york/ui/resizable"
+import { useRef } from "react"
+import { Button } from "@/registry/new-york/ui/button"
+import { ImperativePanelHandle } from "react-resizable-panels"
+
+export default function ResizableDemo() {
+    const leftPanelRef = useRef<ImperativePanelHandle>(null)
+
+    const toggleLeftPanel = () => {
+        if (leftPanelRef.current) {
+            if (leftPanelRef.current.isCollapsed()) {
+                leftPanelRef.current.expand()
+            } else {
+                leftPanelRef.current.collapse()
+            }
+        }
+    }
+
+    return (
+        <ResizablePanelGroup
+            direction="horizontal"
+            className="max-w-md rounded-lg border md:min-w-[450px]"
+        >
+            <ResizablePanel>
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    <Button onClick={toggleLeftPanel}>
+                        Toggle Left Panel
+                    </Button>
+                </div>
+            </ResizablePanel>
+            <ResizableHandle />
+            <ResizablePanel
+                defaultSize={50}
+                collapsible={true}
+                ref={leftPanelRef}
+            >
+                <div className="flex h-[200px] items-center justify-center p-6">
+                    Left Resizable Panel
+                </div>
+            </ResizablePanel>
+        </ResizablePanelGroup>
+    )
+}

apps/www/registry/registry-examples.ts

@@ -962,6 +962,17 @@ export const examples: Registry = [
       },
     ],
   },
+  {
+    name: "resizable-control",
+    type: "registry:example",
+    registryDependencies: ["resizable"],
+    files: [
+      {
+        path: "example/resizable-control.tsx",
+        type: "registry:example",
+      },
+    ],
+  },
   {
     name: "scroll-area-demo",
     type: "registry:example",