{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "resizable",
  "title": "Resizable",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "Draggable split panels with keyboard resizing, nested horizontal and vertical groups, collapsible panels, and a grip that appears on hover and focus.",
  "dependencies": [
    "react-resizable-panels@^3",
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/resizable.tsx",
      "content": "// Ballmac UI: Resizable. https://ui.ballmac.com/components/resizable\n// Based on shadcn/ui Resizable (MIT, Copyright (c) 2023 shadcn) on react-resizable-panels (MIT, Copyright (c) 2023 Brian Vaughn), adding a labelled separator, a larger hit area, a grip that appears on hover and focus, and a visible keyboard focus ring.\n\"use client\";\n\nimport * as React from \"react\";\nimport { GripVertical } from \"lucide-react\";\nimport { Panel, PanelGroup, PanelResizeHandle } from \"react-resizable-panels\";\nimport { cn } from \"@/lib/utils\";\nimport { useMessages } from \"@/lib/ballmac/i18n\";\n\ntype ResizablePanelGroupProps = React.ComponentProps<typeof PanelGroup>;\n/** Container for panels and handles. `direction` is `\"horizontal\"` (side by side) or `\"vertical\"` (stacked). Pass `autoSaveId` to remember sizes. */\nfunction ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps) {\n  return (\n    <PanelGroup\n      data-slot=\"resizable-panel-group\"\n      className={cn(\"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\", className)}\n      {...props}\n    />\n  );\n}\n\ntype ResizablePanelProps = React.ComponentProps<typeof Panel>;\n/** A resizable region. Sizes are percentages: `defaultSize`, `minSize`, `maxSize`, and `collapsible` with `collapsedSize`. */\nfunction ResizablePanel({ className, ...props }: ResizablePanelProps) {\n  return <Panel data-slot=\"resizable-panel\" className={cn(\"min-w-0\", className)} {...props} />;\n}\n\ntype ResizableHandleProps = React.ComponentProps<typeof PanelResizeHandle> & {\n  /** Show a grip icon in the middle of the handle at all times (otherwise it appears on hover and focus). */\n  withHandle?: boolean;\n  /** Accessible name of the separator, for example \"Resize sidebar\". */\n  label?: string;\n};\n/** The draggable divider. Focus it and use the arrow keys, Home and End to resize; Enter collapses a collapsible neighbor. */\nfunction ResizableHandle({ withHandle = false, label, className, ...props }: ResizableHandleProps) {\n  const msg = useMessages()\n  label ??= msg(\"resizable.label\", \"Resize panels\")\n  return (\n    <PanelResizeHandle\n      data-slot=\"resizable-handle\"\n      aria-label={label}\n      className={cn(\n        \"group/handle relative flex w-px shrink-0 items-center justify-center bg-border outline-none transition-colors\",\n        \"after:absolute after:inset-y-0 after:left-1/2 after:w-3 after:-translate-x-1/2\",\n        \"hover:bg-ring/60 data-[resize-handle-state=drag]:bg-ring focus-visible:bg-ring focus-visible:ring-[3px] focus-visible:ring-ring/50\",\n        \"data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full\",\n        \"data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:h-3 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0\",\n        \"[&[data-panel-group-direction=vertical]>div]:rotate-90\",\n        className,\n      )}\n      {...props}\n    >\n      <div\n        aria-hidden=\"true\"\n        className={cn(\n          \"z-10 flex h-5 w-3.5 items-center justify-center rounded-sm border bg-background text-muted-foreground shadow-xs transition-opacity motion-reduce:transition-none\",\n          withHandle\n            ? \"opacity-100\"\n            : \"opacity-0 group-hover/handle:opacity-100 group-focus-visible/handle:opacity-100 group-data-[resize-handle-state=drag]/handle:opacity-100\",\n        )}\n      >\n        <GripVertical className=\"size-3\" />\n      </div>\n    </PanelResizeHandle>\n  );\n}\n\nexport {\n  ResizablePanelGroup,\n  ResizablePanel,\n  ResizableHandle,\n  type ResizablePanelGroupProps,\n  type ResizablePanelProps,\n  type ResizableHandleProps,\n};\n",
      "type": "registry:ui",
      "target": "@components/ballmac/resizable.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "panels",
      "split",
      "layout",
      "resize"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "ResizablePanelGroup with ResizablePanel children separated by ResizableHandle. Sizes are percentages. Give each handle a label.",
      "whenToUse": [
        "IDE, email and file-manager layouts",
        "User-adjustable sidebars and consoles"
      ],
      "whenNotToUse": [
        "Fixed layouts; use plain CSS grid",
        "App navigation; use sidebar"
      ],
      "composesWith": [
        "scroll-area",
        "separator"
      ],
      "a11y": [
        {
          "keys": "ArrowLeft / ArrowRight (ArrowUp / ArrowDown)",
          "action": "Resize by 10% steps from the focused handle"
        },
        {
          "keys": "Home / End",
          "action": "Move to minimum or maximum"
        },
        {
          "keys": "Enter",
          "action": "Collapse or expand a collapsible neighbor"
        }
      ],
      "customization": [
        "direction",
        "defaultSize, minSize, maxSize",
        "collapsible panels",
        "autoSaveId to remember sizes",
        "withHandle grip"
      ]
    },
    "source": {
      "name": "shadcn/ui Resizable",
      "url": "https://github.com/shadcn-ui/ui",
      "license": "MIT",
      "copyright": "Copyright (c) 2023 shadcn",
      "modified": true
    },
    "examples": [
      "resizable-demo",
      "resizable-states"
    ],
    "url": "https://ui.ballmac.com/components/resizable"
  },
  "categories": [
    "layout"
  ],
  "type": "registry:ui"
}