{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-row",
  "type": "registry:ui",
  "title": "Expandable row",
  "description": "Bordered Tailwind row that expands to reveal details on click, with a rotating chevron and aria-expanded. Can start open and takes any content.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/expandable-row.tsx",
      "type": "registry:ui",
      "target": "components/ui/expandable-row.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon } from \"lucide-react\"\n\nfunction ExpandableRow({\n  title = \"Details\",\n  children,\n  defaultOpen = false,\n  className,\n}: {\n  title?: React.ReactNode\n  children?: React.ReactNode\n  defaultOpen?: boolean\n  className?: string\n}) {\n  const [open, setOpen] = React.useState(defaultOpen)\n  return (\n    <div data-slot=\"expandable-row\" className={cn(\"rounded-xl border border-border bg-surface\", className)}>\n      <button\n        type=\"button\"\n        aria-expanded={open}\n        className=\"flex w-full items-center justify-between gap-3 px-4 py-3 text-left text-sm font-medium text-fg outline-none focus-visible:ring-2 focus-visible:ring-accent\"\n        onClick={() => setOpen((v) => !v)}\n      >\n        {title}\n        <ChevronDownIcon className={cn(\"size-4 text-fg-muted transition-transform duration-[140ms]\", open && \"rotate-180\")} aria-hidden />\n      </button>\n      {open ? <div className=\"border-t border-border px-4 py-3 text-sm text-fg\">{children}</div> : null}\n    </div>\n  )\n}\nexport { ExpandableRow }\n"
    }
  ]
}