{"$schema":"https://ui.logic2b.com/schema/registry-item.json","name":"resizable","type":"registry:ui","description":"Resizable split panels the user can drag to resize, horizontal or vertical, built on react-resizable-panels. Use for split views like a code editor's sidebar/pane layout. Parts: ResizablePanelGroup (root, direction), ResizablePanel, ResizableHandle (withHandle for a visible grip).","dependencies":["react-resizable-panels","lucide-react"],"registryDependencies":["utils"],"files":[{"path":"ui/resizable.tsx","type":"registry:ui","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport {\n  Group as ResizablePanelGroupPrimitive,\n  Panel as ResizablePanelPrimitive,\n  Separator as ResizableSeparatorPrimitive,\n} from \"react-resizable-panels\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst ResizableDirectionContext = React.createContext<\n  \"horizontal\" | \"vertical\"\n>(\"horizontal\")\n\nfunction ResizablePanelGroup({\n  className,\n  direction = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof ResizablePanelGroupPrimitive> & {\n  direction?: \"horizontal\" | \"vertical\"\n}) {\n  return (\n    <ResizableDirectionContext.Provider value={direction}>\n      <ResizablePanelGroupPrimitive\n        data-slot=\"resizable-panel-group\"\n        orientation={direction}\n        className={cn(\n          \"flex h-full w-full\",\n          direction === \"vertical\" && \"flex-col\",\n          className\n        )}\n        {...props}\n      />\n    </ResizableDirectionContext.Provider>\n  )\n}\n\nfunction ResizablePanel({\n  style,\n  ...props\n}: React.ComponentProps<typeof ResizablePanelPrimitive>) {\n  return (\n    <ResizablePanelPrimitive\n      data-slot=\"resizable-panel\"\n      style={{ overflow: \"hidden\", ...style }}\n      {...props}\n    />\n  )\n}\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: React.ComponentProps<typeof ResizableSeparatorPrimitive> & {\n  withHandle?: boolean\n}) {\n  const direction = React.useContext(ResizableDirectionContext)\n  const isVertical = direction === \"vertical\"\n\n  return (\n    <ResizableSeparatorPrimitive\n      data-slot=\"resizable-handle\"\n      className={cn(\n        \"bg-border focus-visible:ring-ring relative flex items-center justify-center after:absolute focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden\",\n        isVertical\n          ? \"h-px w-full after:inset-x-0 after:top-1/2 after:h-1 after:-translate-y-1/2 after:translate-x-0\"\n          : \"w-px after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2\",\n        className\n      )}\n      {...props}\n    >\n      {withHandle && (\n        <div\n          className={cn(\n            \"bg-border z-10 flex items-center justify-center rounded-xs border\",\n            isVertical ? \"h-3 w-4 rotate-90\" : \"h-4 w-3\"\n          )}\n        >\n          <GripVerticalIcon className=\"size-2.5\" />\n        </div>\n      )}\n    </ResizableSeparatorPrimitive>\n  )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"}],"categories":["layout"],"accessibility":{"support":"primitive","pattern":"separator","primitive":"React Resizable Panels","keyboard":[{"keys":["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"],"action":"Move within the composite control."},{"keys":["Home","End"],"action":"Move the separator to its supported extent."}],"aria":["Handles expose separator semantics, orientation and value information."],"consumer":["Give handles an accessible label when adjacent panel context is ambiguous."]},"api":{"source":"src/ui/resizable.tsx","exports":[{"name":"ResizablePanelGroup","kind":"component","propsType":"React.ComponentProps<typeof ResizablePanelGroupPrimitive> & { direction?: \"horizontal\" | \"vertical\" }","props":[{"name":"direction","type":"\"horizontal\" | \"vertical\"","required":false,"default":"\"horizontal\""}]},{"name":"ResizablePanel","kind":"component","propsType":"React.ComponentProps<typeof ResizablePanelPrimitive>"},{"name":"ResizableHandle","kind":"component","propsType":"React.ComponentProps<typeof ResizableSeparatorPrimitive> & { withHandle?: boolean }","props":[{"name":"withHandle","type":"boolean","required":false}]}]}}