{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sf-card",
  "title": "SF Card",
  "description": "Industrial card with 2px borders, hover border highlight",
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "components/sf/sf-card.tsx",
      "content": "import {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { cn } from \"@/lib/utils\";\nimport { BorderDraw } from \"@/components/animation/border-draw\";\n\ninterface SFCardProps extends React.ComponentProps<typeof Card> {\n  hoverable?: boolean;\n  /** Use clockwise magenta border-draw instead of simple color hover */\n  borderDraw?: boolean;\n}\n\n/**\n * Content surface card — FRAME layer container primitive.\n *\n * Renders a bordered card with 2px foreground border and no shadow\n * (SF aesthetic contract: no elevation, only edge definition). Supports\n * optional hover color transition and SIGNAL-layer borderDraw animation.\n *\n * @param hoverable - Enables hover border color transition to primary\n * @param borderDraw - Replaces color hover with SIGNAL borderDraw animation (clockwise magenta stroke)\n * @param className - Merged via cn() after base classes\n *\n * @example\n * <SFCard hoverable>\n *   <SFCardHeader><SFCardTitle>Project Alpha</SFCardTitle></SFCardHeader>\n *   <SFCardContent>Description text</SFCardContent>\n * </SFCard>\n */\nfunction SFCard({ className, hoverable = false, borderDraw = false, ...props }: SFCardProps) {\n  const card = (\n    <Card\n      className={cn(\n        \"border-2 border-foreground bg-background shadow-none\",\n        hoverable && !borderDraw &&\n          \"sf-hoverable transition-colors duration-[var(--duration-fast)] hover:border-primary\",\n        className\n      )}\n      {...props}\n    />\n  );\n\n  if (borderDraw) {\n    return <BorderDraw>{card}</BorderDraw>;\n  }\n\n  return card;\n}\n\n/** Sub-component of SFCard — renders the card header region with reduced bottom padding. */\nfunction SFCardHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardHeader>) {\n  return <CardHeader className={cn(\"pb-3\", className)} {...props} />;\n}\n\n/** Sub-component of SFCard — renders the card title in font-mono uppercase. */\nfunction SFCardTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardTitle>) {\n  return (\n    <CardTitle\n      className={cn(\"font-mono uppercase tracking-wider text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCard — renders the card description in muted foreground at text-xs. */\nfunction SFCardDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardDescription>) {\n  return (\n    <CardDescription\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Sub-component of SFCard — renders the main card body content region with p-4 padding. */\nfunction SFCardContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardContent>) {\n  return <CardContent className={cn(\"p-4\", className)} {...props} />;\n}\n\n/** Sub-component of SFCard — renders the card footer region, flush bottom with no top gap. */\nfunction SFCardFooter({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardFooter>) {\n  return <CardFooter className={cn(\"p-4 pt-0\", className)} {...props} />;\n}\n\nexport {\n  SFCard,\n  SFCardHeader,\n  SFCardTitle,\n  SFCardDescription,\n  SFCardContent,\n  SFCardFooter,\n};\n",
      "type": "registry:ui"
    }
  ],
  "meta": {
    "layer": "frame",
    "pattern": "A"
  },
  "type": "registry:ui"
}