{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-cards",
  "title": "Expandable Cards",
  "description": "Cards that expand on click to reveal additional content.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/expandable-cards/expandable-cards.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\n/** Single expandable card entry. */\nexport type ExpandableCardItem = {\n  /** Revealed content shown while expanded. */\n  content: React.ReactNode;\n  /** Supporting text shown under the title. */\n  description?: string;\n  /** Stable identifier used to track the open card. */\n  id: string;\n  /** Header label and toggle. */\n  title: string;\n};\n\n/** Props for {@link ExpandableCards}. */\nexport type ExpandableCardsProps = React.ComponentPropsWithoutRef<\"div\"> & {\n  /** Cards rendered as an accordion-like stack. */\n  cards: ExpandableCardItem[];\n};\n\n/**\n * Stack of cards that expand to reveal content with a height transition.\n *\n * Respects `prefers-reduced-motion`: panels open without animating.\n *\n * @example\n * ```tsx\n * <ExpandableCards cards={items} />\n * ```\n */\nexport const ExpandableCards = ({\n  cards,\n  className,\n  ref,\n  ...props\n}: ExpandableCardsProps & { ref?: React.Ref<HTMLDivElement> }) => {\n  const [expandedId, setExpandedId] = React.useState<null | string>(null);\n\n  const toggle = (id: string): void => {\n    setExpandedId((current) => (current === id ? null : id));\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)} ref={ref} {...props}>\n      {cards.map((card) => (\n        <ExpandableCard\n          card={card}\n          expanded={expandedId === card.id}\n          key={card.id}\n          onToggle={toggle}\n        />\n      ))}\n    </div>\n  );\n};\nExpandableCards.displayName = \"ExpandableCards\";\n\nfunction ExpandableCard({\n  card,\n  expanded,\n  onToggle,\n}: {\n  card: ExpandableCardItem;\n  expanded: boolean;\n  onToggle: (id: string) => void;\n}) {\n  return (\n    <div className=\"overflow-hidden rounded-xl border bg-card text-card-foreground shadow-sm\">\n      <button\n        aria-expanded={expanded}\n        className=\"flex w-full flex-col items-start gap-1 p-4 text-left transition-colors hover:bg-accent hover:text-accent-foreground\"\n        onClick={() => {\n          onToggle(card.id);\n        }}\n        type=\"button\"\n      >\n        <span className=\"font-medium\">{card.title}</span>\n        {card.description === undefined ? null : (\n          <span className=\"text-sm text-muted-foreground\">\n            {card.description}\n          </span>\n        )}\n      </button>\n      <div\n        className={cn(\n          \"grid transition-all duration-300 motion-reduce:transition-none\",\n          expanded ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"px-4 pb-4 text-sm text-muted-foreground\">\n            {card.content}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component",
  "version": "0.2.1",
  "stability": "stable"
}