{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checklist-card",
  "type": "registry:ui",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://usva.build/r/card.json",
    "https://usva.build/r/list.json"
  ],
  "files": [
    {
      "path": "checklist-card.tsx",
      "target": "components/ui/checklist-card.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Card } from \"./card\";\nimport { List, ListItem } from \"./list\";\n\nexport interface ChecklistCardProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n  title?: React.ReactNode;\n  items: React.ReactNode[];\n  /** Defaults to a tick. Decorative either way. */\n  marker?: React.ReactNode;\n}\n\n/**\n * A card of reassurances: short claims, each ticked. sisu renders these as bare divs\n * with a bottom border, which reads to a screen reader as loose prose rather than a\n * set of three related items.\n */\nexport const ChecklistCard = React.forwardRef<\n  HTMLDivElement,\n  ChecklistCardProps\n>(({ className, title, items, marker, ...props }, ref) => (\n  <Card ref={ref} className={cn(\"p-4\", className)} {...props}>\n    {title != null && (\n      <h3 className=\"px-3 pt-1 pb-2 text-base font-semibold tracking-[-0.01em] text-ink\">\n        {title}\n      </h3>\n    )}\n    <List marker={marker ?? <TickIcon />} divided>\n      {items.map((item, index) => (\n        <ListItem key={typeof item === \"string\" ? item : index}>\n          {item}\n        </ListItem>\n      ))}\n    </List>\n  </Card>\n));\nChecklistCard.displayName = \"ChecklistCard\";\n\nfunction TickIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2.25\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M20 6 9 17l-5-5\" />\n    </svg>\n  );\n}\n"
    }
  ]
}