{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable",
  "title": "Resizable",
  "description": "Container that users can resize.",
  "dependencies": [
    "react-resizable-panels"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/resizable.tsx",
      "content": "\"use client\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport type {\n  GroupImperativeHandle,\n  PanelImperativeHandle,\n} from \"react-resizable-panels\";\nimport {\n  Group,\n  type GroupProps,\n  Panel,\n  type PanelProps,\n  Separator,\n  type SeparatorProps,\n} from \"react-resizable-panels\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst ResizablePanelGroup = React.forwardRef<\n  GroupImperativeHandle,\n  GroupProps & { direction?: \"horizontal\" | \"vertical\" }\n>(function ResizablePanelGroup({ className, direction, ...props }, ref) {\n  return (\n    <Group\n      className={cn(\n        \"flex h-full w-full touch-manipulation data-[orientation=vertical]:flex-col\",\n        className\n      )}\n      data-slot=\"resizable-panel-group\"\n      groupRef={ref}\n      orientation={direction ?? props.orientation}\n      {...props}\n    />\n  );\n});\n\nconst ResizablePanel = React.forwardRef<PanelImperativeHandle, PanelProps>(\n  function ResizablePanel(props, ref) {\n    return <Panel data-slot=\"resizable-panel\" panelRef={ref} {...props} />;\n  }\n);\n\nfunction ResizableHandle({\n  withHandle,\n  className,\n  ...props\n}: SeparatorProps & {\n  withHandle?: boolean;\n}) {\n  return (\n    <Separator\n      aria-label={(props as any)[\"aria-label\"] ?? \"Resize panel\"}\n      className={cn(\n        \"relative flex w-px touch-manipulation select-none 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-hidden 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=horizontal]:cursor-col-resize data-[orientation=vertical]:cursor-row-resize data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:translate-x-0 data-[orientation=vertical]:after:-translate-y-1/2 [&[data-orientation=vertical]>div]:rotate-90\",\n        className\n      )}\n      data-slot=\"resizable-handle\"\n      {...props}\n    >\n      {withHandle && (\n        <div className=\"z-10 flex h-4 w-3 items-center justify-center rounded-xs border bg-border\">\n          <GripVerticalIcon aria-hidden=\"true\" className=\"size-2.5\" />\n        </div>\n      )}\n    </Separator>\n  );\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle };\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "apiRef": "https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels"
  },
  "docs": "https://github.com/bvaughn/react-resizable-panels",
  "categories": [
    "component"
  ],
  "type": "registry:ui"
}