{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "peek-panel",
  "type": "registry:ui",
  "title": "Peek panel",
  "description": "A right side detail panel with a titled header, a close button and a scrollable body for previewing a record without leaving the list. Tailwind styled.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://ui.minidev.pro/r/icon-button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/peek-panel.tsx",
      "type": "registry:ui",
      "target": "components/ui/peek-panel.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { IconButton } from \"@/components/ui/icon-button\"\n\nfunction PeekPanel({\n  title,\n  children,\n  onClose,\n  className,\n}: {\n  title: string\n  children: React.ReactNode\n  onClose?: () => void\n  className?: string\n}) {\n  return (\n    <aside\n      data-slot=\"peek-panel\"\n      aria-label={title}\n      className={cn(\n        \"flex h-full w-full max-w-md flex-col border-l border-border bg-surface shadow-highlight\",\n        className\n      )}\n    >\n      <div className=\"flex h-12 items-center justify-between border-b border-border px-4\">\n        <h2 className=\"text-sm font-medium text-fg\">{title}</h2>\n        <IconButton type=\"button\" size=\"icon-sm\" variant=\"ghost\" aria-label=\"Close peek\" onClick={onClose}>\n          <XIcon />\n        </IconButton>\n      </div>\n      <div className=\"flex-1 overflow-auto p-4\">{children}</div>\n    </aside>\n  )\n}\nexport { PeekPanel }\n"
    }
  ]
}