{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable",
  "title": "Resizable",
  "description": "Accessible resizable panel groups and layouts with keyboard support.",
  "dependencies": [
    "react-resizable-panels",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/resizable.tsx",
      "content": "\"use client\";\n\nimport { GripVerticalIcon } from \"lucide-react\";\nimport {\n  Group as BaseGroup,\n  Panel as BasePanel,\n  Separator as BaseSeparator,\n  type GroupProps,\n  type PanelProps,\n  type SeparatorProps,\n} from \"react-resizable-panels\";\nimport { cn } from \"@/registry/lib/utils\";\n\nfunction ResizableGroup({\n  orientation = \"horizontal\",\n  className,\n  ...props\n}: GroupProps) {\n  return (\n    <BaseGroup\n      className={cn(\"flex h-full w-full\", className)}\n      data-slot=\"resizable-panel-group\"\n      orientation={orientation}\n      {...props}\n    />\n  );\n}\n\nfunction ResizablePanel(props: PanelProps) {\n  return <BasePanel data-slot=\"resizable-panel\" {...props} />;\n}\n\nfunction ResizableSeparator({\n  className,\n  withHandle,\n  ...props\n}: SeparatorProps & {\n  withHandle?: boolean;\n}) {\n  return (\n    <BaseSeparator\n      className={cn(\n        \"relative flex items-center justify-center outline-none group bg-border\",\n        \"focus-visible:bg-primary/40 data-[separator='active']:bg-primary/40 data-[separator='inactive']:bg-border\",\n        \"aria-[orientation=vertical]:w-px aria-[orientation=vertical]:h-auto\",\n        \"aria-[orientation=vertical]:after:w-4 aria-[orientation=vertical]:after:h-full aria-[orientation=vertical]:after:-left-1.5\",\n        \"aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full\",\n        \"aria-[orientation=horizontal]:after:h-4 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:-top-1.5\",\n        \"after:absolute after:inset-0 after:flex after:items-center after:justify-center\",\n        className,\n      )}\n      data-slot=\"resizable-separator\"\n      {...props}\n    >\n      {withHandle && (\n        <div\n          className={cn(\n            \"relative z-10 bg-background flex items-center justify-center rounded-xs border\",\n            \"group-aria-[orientation=vertical]:h-4 group-aria-[orientation=vertical]:w-3\",\n            \"group-aria-[orientation=horizontal]:h-3 group-aria-[orientation=horizontal]:w-4\",\n          )}\n        >\n          <GripVerticalIcon\n            className={cn(\n              \"size-3 text-muted-foreground\",\n              \"group-data-[separator='active']:text-foreground\",\n              \"group-aria-[orientation=horizontal]:rotate-90\",\n            )}\n          />\n        </div>\n      )}\n    </BaseSeparator>\n  );\n}\n\nexport { ResizableGroup, ResizablePanel, ResizableSeparator };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}