{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "choice-card",
  "type": "registry:ui",
  "title": "Choice card",
  "description": "Selectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/choice-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/choice-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ntype ChoiceCardProps = React.ComponentProps<\"button\"> & {\n  title: React.ReactNode\n  description?: React.ReactNode\n  selected?: boolean\n  icon?: React.ReactNode\n}\n\nfunction ChoiceCard({ title, description, selected, icon, className, ...props }: ChoiceCardProps) {\n  return (\n    <button\n      type=\"button\"\n      data-slot=\"choice-card\"\n      aria-pressed={selected || undefined}\n      className={cn(\n        \"flex w-full items-start gap-3 rounded-xl border border-border bg-surface p-4 text-left\",\n        \"shadow-highlight outline-none\",\n        \"transition-[border-color,background-color,box-shadow] duration-[70ms]\",\n        \"hover:border-fg-subtle\",\n        \"focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-bg\",\n        selected && \"border-accent bg-surface shadow-[inset_0_0_0_1px_var(--accent)]\",\n        \"disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {icon ? <span className=\"mt-0.5 text-fg [&_svg]:size-5\">{icon}</span> : null}\n      <span className=\"min-w-0 flex-1\">\n        <span className=\"block text-sm font-medium tracking-[0.005em] text-fg\">{title}</span>\n        {description ? (\n          <span className=\"mt-1 block text-sm leading-[1.55] text-fg\">{description}</span>\n        ) : null}\n      </span>\n    </button>\n  )\n}\nexport { ChoiceCard }\n"
    }
  ]
}