{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card",
  "type": "registry:ui",
  "title": "Card",
  "description": "Fluent 2-styled card with shadcn APIs. Seven composable parts (Card, CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter), Fluent resting elevation (shadow-4) and rounded-lg border.",
  "author": "graundtech <https://github.com/graundtech/fluent2-react-kit>",
  "registryDependencies": [
    "https://fluent2-react-kit.graund.io/r/utils.json"
  ],
  "files": [
    {
      "path": "components/ui/card.tsx",
      "type": "registry:ui",
      "target": "components/ui/card.tsx",
      "content": "import type { ComponentProps } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Card — Fluent 2-styled, shadcn-API card family.\n *\n * Structure matches shadcn/ui's current Card exactly: seven composable parts\n * (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`,\n * `CardContent`, `CardFooter`), each a plain `<div>` carrying its own\n * `data-slot`. `CardHeader` is a grid so an optional `CardAction` can sit in\n * its own column/row-span without extra markup (shadcn's `has-data-[slot=...]`\n * trick) — see https://ui.shadcn.com/docs/components/card.\n *\n * Fluent 2 aesthetics layered on top of that skeleton:\n * - `rounded-lg` + `border` + `shadow-4` (Fluent's resting elevation for a\n *   filled card — https://storybooks.fluentui.dev/react/?path=/docs/components-card--docs)\n *   instead of shadcn's default `rounded-xl` + `shadow-sm`.\n * - `bg-card text-card-foreground` (shadcn semantic tokens, re-pointed for\n *   dark mode by tokens.css).\n * - `CardTitle` is `font-semibold` (Fluent card titles are weight 600).\n * - Spacing: Fluent's own medium card padding is 12px (`p-3`), noticeably\n *   tighter than shadcn's 24px (`p-6`) default. We split the difference and\n *   land on 16px (`gap-4` / `p-4` / `px-4`) — visibly tighter than shadcn so\n *   the Fluent influence reads, while keeping enough breathing room that the\n *   header/content/footer rhythm still feels like the familiar shadcn\n *   composition (a straight 12px port felt cramped next to Button's 32px\n *   controls). Document this if you change it.\n *\n * No `variant`/`size` props: shadcn's Card ships none, so there is no `cva`\n * table here (unlike Button) — every part is a plain function component.\n *\n * `interactive` (kit extension): Fluent cards have hover/pressed states when\n * clickable; passing `interactive` raises the resting `shadow-4` to `shadow-8`\n * on hover (Fluent's interactive-card elevation step) with a pointer cursor\n * and `data-interactive` hook. Visual-only — semantics/focus come from what\n * you compose it with (wrap in an `<a>`/`<button>` or add role/tabIndex).\n *\n * Server-safe: no `\"use client\"`, no hooks — the React import is type-only.\n */\n\nfunction Card({\n  className,\n  interactive = false,\n  ...props\n}: ComponentProps<\"div\"> & {\n  /** Fluent interactive-card elevation states (hover raises to shadow-8). */\n  interactive?: boolean;\n}) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-interactive={interactive || undefined}\n      className={cn(\n        \"flex flex-col gap-4 rounded-lg border bg-card py-4 text-card-foreground shadow-4\",\n        interactive &&\n          \"cursor-pointer transition-shadow duration-fast ease-ease hover:shadow-8 active:shadow-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\"font-semibold leading-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-4\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\"flex items-center px-4 [.border-t]:pt-4\", className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n"
    }
  ]
}