{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "resizable",
"title": "Resizable",
"description": "Panel groups with draggable handles for resizing, built on react-resizable-panels.",
"dependencies": [
"react-resizable-panels@^4.12.2"
],
"registryDependencies": [
"@pestoui/style",
"@pestoui/utils"
],
"files": [
{
"path": "pestoui/ui/resizable.tsx",
"content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n}: ResizablePrimitive.GroupProps) {\n return (\n \n )\n}\n\nfunction ResizablePanel({ ...props }: ResizablePrimitive.PanelProps) {\n return \n}\n\n/* Motion: the grip grows along its own long axis as the pointer enters the\n hit region, and grows again while a drag is in progress. The underlying\n primitive publishes its own state on `data-separator` (inactive / hover /\n focus / active / disabled), which is what makes this expressible without a\n single line of React — the drag state in particular survives the pointer\n leaving the handle, so the grip stays large for the whole drag instead of\n snapping back the moment the cursor outruns it.\n\n Enters on the press spring, returns on the shorter exit tween, and the drag\n step is larger than the hover step so the two states are distinguishable\n rather than one being a slightly warmer version of the other.\n\n `scale-y` rather than a height change on purpose: height would reflow the\n flex row between the two panels on every hover. The rotation applied in the\n horizontal orientation costs nothing here — individual transform properties\n scale in the element's local space before rotating, so the grip grows along\n its own length in both directions without a second rule.\n\n The bare 1px separator (no `withHandle`) is left static. Anything that could\n register at that width means either scaling a hairline, which just blurs it,\n or shifting its colour — out of scope for a motion pass. The cursor change\n the primitive already performs is the affordance there. */\nfunction ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizablePrimitive.SeparatorProps & {\n withHandle?: boolean\n}) {\n return (\n div]:rotate-90\",\n className\n )}\n {...props}\n >\n {withHandle && (\n \n )}\n \n )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
"type": "registry:ui"
}
],
"type": "registry:ui"
}