@krizaka/ui 2.0.0-beta.5 → 2.0.0

package/registry/card.json

@@ -1,15 +1,431 @@
 {
   "name": "card",
   "type": "primitive",
-  "description": "`Card.*`, `card` (the slots). Server-safe.",
+  "title": "Card",
+  "summary": "The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.",
+  "description": "The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.",
+  "status": "stable",
+  "category": "layout",
+  "platforms": "both",
+  "whenToUse": [
+    "To present one item of a collection: a video, a creator, a guide, a plan.",
+    "As a link to the item (`asChild` + `interactive`): the whole card is one target.",
+    "To group a few figures under a title (`Card.Stat`)."
+  ],
+  "whenNotToUse": [
+    {
+      "when": "To frame a whole page section: use the page layout, not a card around everything."
+    },
+    {
+      "when": "For a single key figure without a frame.",
+      "use": "stat"
+    },
+    {
+      "when": "For a message about the page.",
+      "use": "alert"
+    }
+  ],
+  "bestPractices": [
+    "Build product cards from these parts and override any of them with `className` — never fork the card.",
+    "Keep one primary target per card: either the whole card is a link, or it holds buttons — not both.",
+    "Give `Card.Media` a fixed `aspect` so a grid stays aligned while images load.",
+    "`Card.Image` loads lazily; pass `loading=\"eager\"` (and `fetchPriority=\"high\"`) to the first cards of a page, above the fold.",
+    "`reveal={index}` with one `MotionObserver` per page for the entrance; it is shown at once under reduced motion."
+  ],
+  "accessibility": {
+    "keyboard": [
+      {
+        "keys": "Tab / Enter",
+        "action": "An `asChild` link card is one focusable link that Enter follows."
+      }
+    ],
+    "notes": [
+      "`Card.Title` is a heading (`h3` by default, `as` to change the level) so cards are reachable by heading.",
+      "A card that is a link is named by its content: keep the title first.",
+      "The image fallback is decorative and hidden from assistive technology."
+    ]
+  },
+  "related": [
+    "badge",
+    "stat",
+    "avatar",
+    "skeleton"
+  ],
+  "web": {
+    "entry": "@krizaka/ui/card",
+    "import": "import { Card } from \"@krizaka/ui/card\";",
+    "props": [
+      {
+        "component": "CardRoot",
+        "description": "",
+        "props": [
+          {
+            "name": "asChild",
+            "type": "boolean",
+            "default": null,
+            "description": "Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged.",
+            "required": false
+          },
+          {
+            "name": "interactive",
+            "type": "boolean",
+            "default": null,
+            "description": "The spotlight that follows the pointer and the lift on hover: for a card that is a link.",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "\"md\" | \"lg\" | \"xl\"",
+            "default": "xl",
+            "description": "md · lg · xl.",
+            "required": false
+          },
+          {
+            "name": "reveal",
+            "type": "number",
+            "default": null,
+            "description": "Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most).",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"default\" | \"elevated\" | \"glass\"",
+            "default": "default",
+            "description": "default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardMedia",
+        "description": "",
+        "props": [
+          {
+            "name": "aspect",
+            "type": "\"video\" | \"auto\" | \"square\" | \"portrait\"",
+            "default": "video",
+            "description": "The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardImage",
+        "description": "The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card.",
+        "props": [
+          {
+            "name": "fallback",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown when there is no image: an icon, an illustration (decorative).",
+            "required": false
+          },
+          {
+            "name": "loading",
+            "type": "\"eager\" | \"lazy\"",
+            "default": "lazy",
+            "description": "When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\nof a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).",
+            "required": false
+          },
+          {
+            "name": "src",
+            "type": "string | null",
+            "default": null,
+            "description": "The image's URL; `null` or nothing shows the `fallback`.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardOverlay",
+        "description": "What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light.",
+        "props": [
+          {
+            "name": "corner",
+            "type": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"",
+            "default": "top-left",
+            "description": "The corner of the media it sits in.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardBody",
+        "description": "",
+        "props": [
+          {
+            "name": "padding",
+            "type": "\"none\" | \"sm\" | \"md\" | \"lg\"",
+            "default": "md",
+            "description": "none · sm · md · lg.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardTitle",
+        "description": "",
+        "props": [
+          {
+            "name": "as",
+            "type": "\"h2\" | \"h3\" | \"h4\"",
+            "default": "h3",
+            "description": "The heading level, to fit the page's outline.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardStat",
+        "description": "A figure put forward: the label in capitals, the value in tabular digits.",
+        "props": [
+          {
+            "name": "label",
+            "type": "ReactNode",
+            "default": null,
+            "description": "What the figure is, in small capitals above it (the figure is the children).",
+            "required": true
+          }
+        ]
+      }
+    ],
+    "examples": [
+      {
+        "name": "media-card",
+        "title": "Media card",
+        "description": "An image, badges on the media, a title, a description and a footer.",
+        "path": "examples/card/media-card.tsx",
+        "module": "@krizaka/ui/registry/examples/card/media-card",
+        "code": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Card } from \"@krizaka/ui/card\";\n\n// A self-contained cover (no network).\nconst COVER =\n  \"data:image/svg+xml;utf8,\" +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 160 90\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"#1e3a8a\"/><stop offset=\"1\" stop-color=\"#7c3aed\"/></linearGradient></defs>' +\n      '<rect width=\"160\" height=\"90\" fill=\"url(#g)\"/><circle cx=\"118\" cy=\"30\" r=\"14\" fill=\"#fde68a\"/>' +\n      '<path d=\"M0 90 50 44l30 28 22-18 58 36z\" fill=\"#0f172a\" opacity=\".55\"/></svg>',\n  );\n\nexport default function CardMediaCard() {\n  return (\n    <Card.Root>\n      <Card.Media>\n        <Card.Image src={COVER} />\n        <Card.Overlay>\n          <Badge tone=\"scrim\">4K</Badge>\n        </Card.Overlay>\n        <Card.Overlay corner=\"bottom-right\">\n          <Badge tone=\"scrim\">12:04</Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <Card.Title>Night ride across the city</Card.Title>\n        <Card.Description>Ten minutes of neon, rain and empty avenues, filmed in one take.</Card.Description>\n        <Card.Footer>\n          <span>1.2k views</span>\n          <span aria-hidden>·</span>\n          <span>2 days ago</span>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
+      },
+      {
+        "name": "media-fallback",
+        "title": "Media fallback",
+        "description": "No image: the `fallback` on the accent gradient.",
+        "path": "examples/card/media-fallback.tsx",
+        "module": "@krizaka/ui/registry/examples/card/media-fallback",
+        "code": "import { Card } from \"@krizaka/ui/card\";\n\nconst PlayIcon = () => (\n  <svg viewBox=\"0 0 24 24\" className=\"h-10 w-10\" fill=\"currentColor\" aria-hidden>\n    <path d=\"M8 5v14l11-7z\" />\n  </svg>\n);\n\n// No image: the `fallback` (an icon on the accent gradient), hidden from assistive technology.\nexport default function CardMediaFallback() {\n  return (\n    <Card.Root>\n      <Card.Media aspect=\"square\">\n        <Card.Image src={null} fallback={<PlayIcon />} />\n      </Card.Media>\n      <Card.Body padding=\"sm\">\n        <Card.Title>Untitled draft</Card.Title>\n        <Card.Description>Processing — the cover arrives with the first frame.</Card.Description>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
+      },
+      {
+        "name": "interactive-link",
+        "title": "Interactive link",
+        "description": "`asChild` + `<a>`: the whole card is a link, with the spotlight and the lift.",
+        "path": "examples/card/interactive-link.tsx",
+        "module": "@krizaka/ui/registry/examples/card/interactive-link",
+        "code": "import { Card } from \"@krizaka/ui/card\";\n\n// `asChild` + `<a>`: the whole card is one link; `interactive` adds the spotlight and the lift.\nexport default function CardInteractiveLink() {\n  return (\n    <Card.Root asChild interactive>\n      <a href=\"#guide\">\n        <Card.Body>\n          <Card.Title as=\"h2\">Getting started</Card.Title>\n          <Card.Description>Install the preset, import the primitives, ship both themes.</Card.Description>\n          <Card.Footer>Read the guide →</Card.Footer>\n        </Card.Body>\n      </a>\n    </Card.Root>\n  );\n}\n"
+      },
+      {
+        "name": "stat-card",
+        "title": "Stat card",
+        "description": "Figures put forward with `Card.Stat`, `tone=\"elevated\"`.",
+        "path": "examples/card/stat-card.tsx",
+        "module": "@krizaka/ui/registry/examples/card/stat-card",
+        "code": "import { Card } from \"@krizaka/ui/card\";\n\n// `Card.Stat`: the label in capitals, the value in tabular digits.\nexport default function CardStatCard() {\n  return (\n    <Card.Root tone=\"elevated\">\n      <Card.Body>\n        <Card.Title>This month</Card.Title>\n        <div className=\"grid grid-cols-2 gap-4\">\n          <Card.Stat label=\"Revenue\">€4,812</Card.Stat>\n          <Card.Stat label=\"Supporters\">318</Card.Stat>\n        </div>\n        <Card.Footer>Updated 5 minutes ago</Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
+      },
+      {
+        "name": "reveal-grid",
+        "title": "Reveal grid",
+        "description": "Cards entering in cascade with `reveal` and `MotionObserver`.",
+        "path": "examples/card/reveal-grid.tsx",
+        "module": "@krizaka/ui/registry/examples/card/reveal-grid",
+        "code": "import { MotionObserver } from \"@krizaka/ui\";\nimport { Card } from \"@krizaka/ui/card\";\n\nconst COVER =\n  \"data:image/svg+xml;utf8,\" +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 160 90\"><rect width=\"160\" height=\"90\" fill=\"#4338ca\"/>' +\n      '<circle cx=\"118\" cy=\"30\" r=\"14\" fill=\"#fde68a\"/></svg>',\n  );\n\n// `reveal={index}` + one `MotionObserver` per page: the cards enter in cascade (at once under reduced motion).\nexport default function CardRevealGrid() {\n  return (\n    <>\n      <MotionObserver />\n      <div className=\"grid grid-cols-2 gap-4 sm:grid-cols-3\">\n        {[\"Enter\", \"Reveal\", \"Open\", \"Lift\", \"Glow\", \"Roll\"].map((word, index) => (\n          <Card.Root key={word} reveal={index} interactive radius=\"lg\">\n            <Card.Media aspect=\"video\">\n              <Card.Image src={index % 2 ? null : COVER} />\n            </Card.Media>\n            <Card.Body padding=\"sm\">\n              <Card.Title>{word}</Card.Title>\n              <Card.Description>Step {index + 1} of the signature.</Card.Description>\n            </Card.Body>\n          </Card.Root>\n        ))}\n      </div>\n    </>\n  );\n}\n"
+      }
+    ]
+  },
+  "native": {
+    "entry": "@krizaka/ui/native",
+    "import": "import { Card } from \"@krizaka/ui/native\";",
+    "differences": [
+      "`onPress` on `Card.Root` makes the whole card a button (no `asChild`, no `interactive`).",
+      "Built on `View`, `Image` and `Text`: style with `style`, not `className`.",
+      "No `Card.Stat` and no `reveal`."
+    ],
+    "props": [
+      {
+        "component": "CardRoot",
+        "description": "The frame: the theme's surface, a hairline border, rounded corners; `onPress` makes it a pressable card.",
+        "props": [
+          {
+            "name": "onPress",
+            "type": "((event: GestureResponderEvent) => void) | null",
+            "default": null,
+            "description": "Makes the whole card pressable: a button for screen readers, named by its content (an `aria-label`, if any, must\ncontain the visible title).",
+            "required": false
+          },
+          {
+            "name": "radius",
+            "type": "\"md\" | \"lg\" | \"xl\"",
+            "default": "xl",
+            "description": "The corner radius, from the theme: md · lg · xl (default).",
+            "required": false
+          },
+          {
+            "name": "tone",
+            "type": "\"default\" | \"elevated\"",
+            "default": "default",
+            "description": "`default` (the raised surface) or `elevated` (one step higher, with a shadow).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardMedia",
+        "description": "The media area at the top of a card: a fixed ratio, the `media` role behind (what shows while an image loads).",
+        "props": [
+          {
+            "name": "aspect",
+            "type": "\"auto\" | \"video\" | \"square\" | \"portrait\"",
+            "default": "video",
+            "description": "video (default, 16:9) · square · portrait, or `auto` (the image's own).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardImage",
+        "description": "The image of a media (it fills it), or its `fallback` when there is none. Decorative unless `alt` is given.",
+        "props": [
+          {
+            "name": "fallback",
+            "type": "ReactNode",
+            "default": null,
+            "description": "Shown when there is no image: an icon, an illustration (decorative).",
+            "required": false
+          },
+          {
+            "name": "src",
+            "type": "string | null",
+            "default": null,
+            "description": "The image URI; absent or `null`: the `fallback` on the media colour.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardOverlay",
+        "description": "What sits on the media (badges, a caption), in a corner.",
+        "props": [
+          {
+            "name": "corner",
+            "type": "\"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\"",
+            "default": "top-left",
+            "description": "The corner of the media it sits in: top-left (default) · top-right · bottom-left · bottom-right.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardBody",
+        "description": "",
+        "props": [
+          {
+            "name": "padding",
+            "type": "\"none\" | \"sm\" | \"md\" | \"lg\"",
+            "default": "md",
+            "description": "none · sm · md (default) · lg.",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardTitle",
+        "description": "The card's name: one line, a header for screen readers.",
+        "props": [
+          {
+            "name": "tone",
+            "type": "TxtTone",
+            "default": null,
+            "description": "A text role of the theme (default `text`).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "CardDescription",
+        "description": "",
+        "props": [
+          {
+            "name": "tone",
+            "type": "TxtTone",
+            "default": null,
+            "description": "A text role of the theme (default `text`).",
+            "required": false
+          }
+        ]
+      },
+      {
+        "component": "Card",
+        "description": "`Card.Root/Media/Image/Overlay/Body/Title/Description/Footer` — the web parts, on View, Image and Text.",
+        "props": []
+      }
+    ],
+    "examples": [
+      {
+        "name": "default",
+        "title": "Default",
+        "description": "A media, a body and a footer.",
+        "path": "examples/card/native/default.tsx",
+        "module": "@krizaka/ui/registry/examples/card/native/default",
+        "code": "import { Badge, Card, Txt } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\nexport default function NativeCardDefault() {\n  return (\n    <Card.Root style={{ width: 300 }}>\n      <Card.Media>\n        <Card.Image src={null} />\n        <Card.Overlay corner=\"top-left\">\n          <Badge tone=\"scrim\" dot>\n            Tonight\n          </Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <View>\n          <Card.Title>Night set — vol. 4</Card.Title>\n          <Card.Description>Forty minutes of deep house, recorded live.</Card.Description>\n        </View>\n        <Card.Footer>\n          <Txt variant=\"caption\" tone=\"secondary\">\n            @maya · 2 h ago\n          </Txt>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/card/native/default.dark.png",
+          "light": "examples/card/native/default.light.png"
+        }
+      },
+      {
+        "name": "elevated",
+        "title": "Elevated",
+        "description": "`tone=\"elevated\"`: one step higher, with a shadow.",
+        "path": "examples/card/native/elevated.tsx",
+        "module": "@krizaka/ui/registry/examples/card/native/elevated",
+        "code": "import { Badge, Card, Txt } from \"@krizaka/ui/native\";\nimport { View } from \"react-native\";\n\nexport default function NativeCardElevated() {\n  return (\n    <Card.Root tone=\"elevated\" style={{ width: 300 }}>\n      <Card.Media>\n        <Card.Image src={null} />\n        <Card.Overlay corner=\"top-left\">\n          <Badge tone=\"scrim\" dot>\n            Tonight\n          </Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <View>\n          <Card.Title>Night set — vol. 4</Card.Title>\n          <Card.Description>Forty minutes of deep house, recorded live.</Card.Description>\n        </View>\n        <Card.Footer>\n          <Txt variant=\"caption\" tone=\"secondary\">\n            @maya · 2 h ago\n          </Txt>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/card/native/elevated.dark.png",
+          "light": "examples/card/native/elevated.light.png"
+        }
+      },
+      {
+        "name": "pressable",
+        "title": "Pressable",
+        "description": "`onPress`: the whole card is a button.",
+        "path": "examples/card/native/pressable.tsx",
+        "module": "@krizaka/ui/registry/examples/card/native/pressable",
+        "code": "import { Card } from \"@krizaka/ui/native\";\n\n// `onPress`: the whole card is a button, named by its content.\nexport default function NativeCardPressable() {\n  return (\n    <Card.Root onPress={() => {}} style={{ width: 300 }}>\n      <Card.Body>\n        <Card.Title>Night set — vol. 4</Card.Title>\n        <Card.Description>Tap anywhere on the card.</Card.Description>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/card/native/pressable.dark.png",
+          "light": "examples/card/native/pressable.light.png"
+        }
+      },
+      {
+        "name": "body",
+        "title": "Text and an action",
+        "description": "A body only, with a button.",
+        "path": "examples/card/native/body.tsx",
+        "module": "@krizaka/ui/registry/examples/card/native/body",
+        "code": "import { Button, Card } from \"@krizaka/ui/native\";\n\nexport default function NativeCardBody() {\n  return (\n    <Card.Root radius=\"lg\" style={{ width: 300 }}>\n      <Card.Body padding=\"lg\">\n        <Card.Title>Your wallet</Card.Title>\n        <Card.Description>Top up to support the creators you follow.</Card.Description>\n        <Button variant=\"primary\" label=\"Top up\" />\n      </Card.Body>\n    </Card.Root>\n  );\n}\n",
+        "screenshots": {
+          "dark": "examples/card/native/body.dark.png",
+          "light": "examples/card/native/body.light.png"
+        }
+      }
+    ]
+  },
   "files": [
     {
       "path": "card/card.tsx",
-      "content": "// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const card = tv({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading=\"lazy\" decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n"
+      "content": "// Server-safe: no hook, no context. One `tv` definition with slots: each part takes its slot, and a product overrides\n// any part through `className` (merged last by tailwind-merge).\nimport { Slot } from \"radix-ui\";\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { cn } from \"../cn\";\n\nexport const card = tv({\n  slots: {\n    root:\n      \"group relative flex flex-col overflow-hidden border border-border-default bg-surface-1 text-fg transition-colors \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    media: \"relative overflow-hidden bg-media\",\n    image: \"h-full w-full object-cover transition-transform duration-500 motion-safe:group-hover:scale-105\",\n    fallback: \"flex h-full w-full items-center justify-center bg-linear-to-br from-accent/15 via-media to-accent-2/15 text-accent/60\",\n    overlay: \"absolute z-10 flex items-center gap-1.5\",\n    body: \"relative flex flex-1 flex-col gap-3\",\n    title: \"line-clamp-1 text-sm font-semibold text-fg transition-colors group-hover:text-fg-accent\",\n    description: \"line-clamp-2 text-xs text-fg-secondary\",\n    stat: \"min-w-0\",\n    statLabel: \"text-[10px] font-semibold uppercase tracking-wider text-fg-secondary\",\n    statValue: \"font-display text-xl font-black tabular-nums text-fg\",\n    footer: \"relative mt-auto flex items-center gap-2 border-t border-border-subtle pt-3 text-xs text-fg-secondary\",\n  },\n  variants: {\n    radius: { md: { root: \"rounded-md\" }, lg: { root: \"rounded-lg\" }, xl: { root: \"rounded-xl\" } },\n    tone: { default: {}, elevated: { root: \"bg-surface-2 shadow-md\" }, glass: { root: \"bg-surface-1/70 backdrop-blur-md\" } },\n    interactive: { true: { root: \"kz-spotlight kz-lift hover:border-accent/50\" } },\n    padding: { none: { body: \"p-0\" }, sm: { body: \"p-3\" }, md: { body: \"p-4\" }, lg: { body: \"p-6\" } },\n  },\n  defaultVariants: { radius: \"xl\", tone: \"default\", padding: \"md\" },\n});\n\ntype CardVariants = VariantProps<typeof card>;\n/** The parts without a variant read the default slots: no context, so server-safe. */\nconst slots = card();\n\nexport type CardRootProps = React.ComponentProps<\"div\"> &\n  Pick<CardVariants, \"radius\" | \"tone\" | \"interactive\"> & {\n    /**\n     * md · lg · xl.\n     * @default \"xl\"\n     */\n    radius?: CardVariants[\"radius\"];\n    /**\n     * default (the base surface) · elevated (raised, a shadow) · glass (translucent, blurred).\n     * @default \"default\"\n     */\n    tone?: CardVariants[\"tone\"];\n    /** The spotlight that follows the pointer and the lift on hover: for a card that is a link. */\n    interactive?: CardVariants[\"interactive\"];\n    /** Renders the child (a link, an article) instead of the <div>, with props, classes and ref merged. */\n    asChild?: boolean;\n    /** Enters on scroll (MotionObserver): the index in the grid becomes the delay (50 ms a step, 8 steps at most). */\n    reveal?: number;\n  };\n\nexport function CardRoot({ asChild, reveal, radius, tone, interactive, className, style, ...props }: CardRootProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n  const revealStyle =\n    reveal === undefined ? style : ({ ...style, \"--kz-delay\": `${Math.min(Math.max(reveal, 0), 8) * 50}ms` } as React.CSSProperties);\n  return (\n    <Comp\n      data-reveal={reveal === undefined ? undefined : \"\"}\n      data-interactive={interactive ? \"\" : undefined}\n      style={revealStyle}\n      className={card({ radius, tone, interactive }).root({ className })}\n      {...props}\n    />\n  );\n}\n\nconst ASPECT = { video: \"aspect-video\", square: \"aspect-square\", portrait: \"aspect-[3/4]\", auto: \"\" } as const;\nexport type CardMediaProps = React.ComponentProps<\"div\"> & {\n  /** The ratio of the media: video (16:9) · square · portrait (3:4) · auto (the content's). */\n  aspect?: keyof typeof ASPECT;\n};\n\nexport function CardMedia({ aspect = \"video\", className, ...props }: CardMediaProps) {\n  return <div data-aspect={aspect} className={slots.media({ className: cn(ASPECT[aspect], className) })} {...props} />;\n}\n\nexport type CardImageProps = Omit<React.ComponentProps<\"img\">, \"src\"> & {\n  /** The image's URL; `null` or nothing shows the `fallback`. */\n  src?: string | null;\n  /** Shown when there is no image: an icon, an illustration (decorative). */\n  fallback?: React.ReactNode;\n  /**\n   * When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\n   * of a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).\n   * @default \"lazy\"\n   */\n  loading?: \"lazy\" | \"eager\";\n};\n\n/** The image of a media, or its `fallback` when there is none. `alt` is empty by default: the title names the card. */\nexport function CardImage({ src, alt = \"\", fallback, loading = \"lazy\", className, ...props }: CardImageProps) {\n  if (!src) {\n    return (\n      <div data-fallback=\"\" aria-hidden className={slots.fallback({ className })}>\n        {fallback}\n      </div>\n    );\n  }\n  return <img src={src} alt={alt} loading={loading} decoding=\"async\" className={slots.image({ className })} {...props} />;\n}\n\nconst CORNER = {\n  \"top-left\": \"left-2.5 top-2.5\",\n  \"top-right\": \"right-2.5 top-2.5\",\n  \"bottom-left\": \"bottom-2.5 left-2.5\",\n  \"bottom-right\": \"bottom-2.5 right-2.5\",\n} as const;\nexport type CardOverlayProps = React.ComponentProps<\"div\"> & {\n  /** The corner of the media it sits in. */\n  corner?: keyof typeof CORNER;\n};\n\n/** What sits on the media (badges, a caption). `scrim` and `fg-on-media` are invariant: nothing to do for light. */\nexport function CardOverlay({ corner = \"top-left\", className, ...props }: CardOverlayProps) {\n  return <div data-corner={corner} className={slots.overlay({ className: cn(CORNER[corner], className) })} {...props} />;\n}\n\nexport type CardBodyProps = React.ComponentProps<\"div\"> & {\n  /**\n   * none · sm · md · lg.\n   * @default \"md\"\n   */\n  padding?: CardVariants[\"padding\"];\n};\n\nexport function CardBody({ padding, className, ...props }: CardBodyProps) {\n  return <div className={card({ padding }).body({ className })} {...props} />;\n}\n\nexport type CardTitleProps = React.ComponentProps<\"h3\"> & {\n  /** The heading level, to fit the page's outline. */\n  as?: \"h2\" | \"h3\" | \"h4\";\n};\n\nexport function CardTitle({ as: Tag = \"h3\", className, ...props }: CardTitleProps) {\n  return <Tag className={slots.title({ className })} {...props} />;\n}\n\nexport function CardDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return <p className={slots.description({ className })} {...props} />;\n}\n\nexport type CardStatProps = React.ComponentProps<\"div\"> & {\n  /** What the figure is, in small capitals above it (the figure is the children). */\n  label: React.ReactNode;\n};\n\n/** A figure put forward: the label in capitals, the value in tabular digits. */\nexport function CardStat({ label, className, children, ...props }: CardStatProps) {\n  return (\n    <div className={slots.stat({ className })} {...props}>\n      <p className={slots.statLabel()}>{label}</p>\n      <p className={slots.statValue()}>{children}</p>\n    </div>\n  );\n}\n\nexport function CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div className={slots.footer({ className })} {...props} />;\n}\n\n/** `Card.Root/Media/Image/Overlay/Body/Title/Description/Stat/Footer`. */\nexport const Card = {\n  Root: CardRoot,\n  Media: CardMedia,\n  Image: CardImage,\n  Overlay: CardOverlay,\n  Body: CardBody,\n  Title: CardTitle,\n  Description: CardDescription,\n  Stat: CardStat,\n  Footer: CardFooter,\n};\n"
     },
     {
       "path": "card/index.ts",
       "content": "/** @krizaka/ui/card — `Card.*`, `card` (the slots). Server-safe. */\nexport {\n  Card,\n  card,\n  CardBody,\n  type CardBodyProps,\n  CardDescription,\n  CardFooter,\n  CardImage,\n  type CardImageProps,\n  CardMedia,\n  type CardMediaProps,\n  CardOverlay,\n  type CardOverlayProps,\n  CardRoot,\n  type CardRootProps,\n  CardStat,\n  type CardStatProps,\n  CardTitle,\n  type CardTitleProps,\n} from \"./card\";\n"
+    },
+    {
+      "path": "card/meta.ts",
+      "content": "import type { ComponentMeta } from \"../meta\";\n\nexport const meta = {\n  title: \"Card\",\n  summary: \"The composed chassis of every card: a media with overlays, a body with a title, a description, stats and a footer.\",\n  status: \"stable\",\n  category: \"layout\",\n  platforms: \"both\",\n  whenToUse: [\n    \"To present one item of a collection: a video, a creator, a guide, a plan.\",\n    \"As a link to the item (`asChild` + `interactive`): the whole card is one target.\",\n    \"To group a few figures under a title (`Card.Stat`).\",\n  ],\n  whenNotToUse: [\n    { when: \"To frame a whole page section: use the page layout, not a card around everything.\" },\n    { when: \"For a single key figure without a frame.\", use: \"stat\" },\n    { when: \"For a message about the page.\", use: \"alert\" },\n  ],\n  bestPractices: [\n    \"Build product cards from these parts and override any of them with `className` — never fork the card.\",\n    \"Keep one primary target per card: either the whole card is a link, or it holds buttons — not both.\",\n    \"Give `Card.Media` a fixed `aspect` so a grid stays aligned while images load.\",\n    \"`Card.Image` loads lazily; pass `loading=\\\"eager\\\"` (and `fetchPriority=\\\"high\\\"`) to the first cards of a page, above the fold.\",\n    \"`reveal={index}` with one `MotionObserver` per page for the entrance; it is shown at once under reduced motion.\",\n  ],\n  accessibility: {\n    keyboard: [{ keys: \"Tab / Enter\", action: \"An `asChild` link card is one focusable link that Enter follows.\" }],\n    notes: [\n      \"`Card.Title` is a heading (`h3` by default, `as` to change the level) so cards are reachable by heading.\",\n      \"A card that is a link is named by its content: keep the title first.\",\n      \"The image fallback is decorative and hidden from assistive technology.\",\n    ],\n  },\n  related: [\"badge\", \"stat\", \"avatar\", \"skeleton\"],\n  web: {\n    imports: [\"Card\"],\n    examples: [\n      { name: \"media-card\", title: \"Media card\", description: \"An image, badges on the media, a title, a description and a footer.\" },\n      { name: \"media-fallback\", title: \"Media fallback\", description: \"No image: the `fallback` on the accent gradient.\" },\n      { name: \"interactive-link\", title: \"Interactive link\", description: \"`asChild` + `<a>`: the whole card is a link, with the spotlight and the lift.\" },\n      { name: \"stat-card\", title: \"Stat card\", description: \"Figures put forward with `Card.Stat`, `tone=\\\"elevated\\\"`.\" },\n      { name: \"reveal-grid\", title: \"Reveal grid\", description: \"Cards entering in cascade with `reveal` and `MotionObserver`.\" },\n    ],\n  },\n  native: {\n    imports: [\"Card\"],\n    differences: [\n      \"`onPress` on `Card.Root` makes the whole card a button (no `asChild`, no `interactive`).\",\n      \"Built on `View`, `Image` and `Text`: style with `style`, not `className`.\",\n      \"No `Card.Stat` and no `reveal`.\",\n    ],\n    examples: [\n      { name: \"default\", title: \"Default\", description: \"A media, a body and a footer.\" },\n      { name: \"elevated\", title: \"Elevated\", description: \"`tone=\\\"elevated\\\"`: one step higher, with a shadow.\" },\n      { name: \"pressable\", title: \"Pressable\", description: \"`onPress`: the whole card is a button.\" },\n      { name: \"body\", title: \"Text and an action\", description: \"A body only, with a button.\" },\n    ],\n  },\n} satisfies ComponentMeta;\n"
+    },
+    {
+      "path": "meta.ts",
+      "content": "// The documentation of a component, carried by its code: each primitive has a `meta.ts` beside its source\n// (`src/<name>/meta.ts`; a component that exists only in React Native: `src/native/meta/<name>.ts`). Never built into\n// the package: `scripts/build-registry.mjs` reads them into `registry/<name>.json`, which krizaka.com renders as\n// /docs/ui/<name>, and `scripts/registry.test.mjs` fails when one is missing or incomplete.\n//\n// Why a typed module and not JSDoc tags: the fields are lists and links (`related`, `whenNotToUse[].use`, examples),\n// which a type checks and a comment does not; the file is plain data (erasable TypeScript), so Node reads it without a\n// compiler, and an editor completes it.\n\n/** Every documented component: the web primitives (one entry of the package each) and the native-only ones. */\nexport type ComponentName =\n  | \"alert\"\n  | \"avatar\"\n  | \"badge\"\n  | \"button\"\n  | \"card\"\n  | \"checkbox\"\n  | \"chip\"\n  | \"cn\"\n  | \"command\"\n  | \"confirm-button\"\n  | \"countdown\"\n  | \"dialog\"\n  | \"dropdown-menu\"\n  | \"empty-state\"\n  | \"field\"\n  | \"kbd\"\n  | \"page-header\"\n  | \"popover\"\n  | \"progress\"\n  | \"radio-group\"\n  | \"section-backdrop\"\n  | \"segmented\"\n  | \"separator\"\n  | \"skeleton\"\n  | \"slider\"\n  | \"slot\"\n  | \"spinner\"\n  | \"stat\"\n  | \"switch\"\n  | \"tabs\"\n  | \"theme\"\n  | \"toast\"\n  | \"tooltip\"\n  | \"txt\";\n\n/** Where a component exists: `@krizaka/ui/<name>` (web), `@krizaka/ui/native` (React Native), or both. */\nexport type Platform = \"web\" | \"native\" | \"both\";\n\n/** `stable`: its API only changes in a major. `beta`: it may still change in a minor. */\nexport type Status = \"stable\" | \"beta\";\n\n/** The group of the catalogue. */\nexport type Category = \"actions\" | \"forms\" | \"navigation\" | \"overlays\" | \"feedback\" | \"data-display\" | \"layout\" | \"foundations\";\n\n/**\n * A named example: the file `registry/examples/<component>/<name>.tsx` (web) or\n * `registry/examples/<component>/native/<name>.tsx` (React Native) — at most 40 lines, imported by the stories and\n * shown (live, with its code) by the documentation.\n */\nexport interface Example {\n  /** The file name, kebab-case (`primary`, `icon-button`). */\n  readonly name: string;\n  /** A short title (`Primary`, `Icon button`). */\n  readonly title: string;\n  /** One or two sentences: when this variant is the right one. */\n  readonly description: string;\n}\n\n/** One platform's side of a component. */\nexport interface PlatformDocs {\n  /** The names to import (`[\"Button\", \"IconButton\"]`): from `@krizaka/ui/<name>` on the web, `@krizaka/ui/native` in React Native. */\n  readonly imports: readonly string[];\n  /** The examples, in reading order; the first one is the component's preview. */\n  readonly examples: readonly Example[];\n}\n\n/** The React Native side: the same concept, and what differs from the web API. */\nexport interface NativeDocs extends PlatformDocs {\n  /** What differs from the web API (`label` instead of children…); empty for a native-only component. */\n  readonly differences: readonly string[];\n}\n\nexport interface KeyboardInteraction {\n  /** The keys, as written on a keyboard: `Space`, `Enter`, `Arrow keys`, `Esc`, `Tab`. */\n  readonly keys: string;\n  /** What they do. */\n  readonly action: string;\n}\n\nexport interface ComponentMeta {\n  /** The display name: `Button`, `Dropdown menu`. */\n  readonly title: string;\n  /** One sentence: what it is. */\n  readonly summary: string;\n  readonly status: Status;\n  readonly category: Category;\n  /** Must match the sides below: `both` ⇔ `web` and `native`. */\n  readonly platforms: Platform;\n  /** When to reach for it: concrete situations, one per item. */\n  readonly whenToUse: readonly string[];\n  /** When not to — and what to use instead (`use`), when another component is the answer. */\n  readonly whenNotToUse: readonly { readonly when: string; readonly use?: ComponentName }[];\n  /** How to use it well: wording, placement, composition. */\n  readonly bestPractices: readonly string[];\n  readonly accessibility: {\n    /** The keyboard, when it does more than Tab and Enter. */\n    readonly keyboard: readonly KeyboardInteraction[];\n    /** Roles, names and announcements: what the component does, what the app must provide. */\n    readonly notes: readonly string[];\n  };\n  /** The components a reader of this page should know about. */\n  readonly related: readonly ComponentName[];\n  readonly web?: PlatformDocs;\n  readonly native?: NativeDocs;\n}\n"
     }
   ],
   "dependencies": [
@@ -20,8 +436,8 @@
     "cn"
   ],
   "demo": {
-    "path": "demos/card.tsx",
-    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Card } from \"@krizaka/ui/card\";\n\n// A self-contained cover (no network).\nconst COVER =\n  \"data:image/svg+xml;utf8,\" +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 160 90\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"#1e3a8a\"/><stop offset=\"1\" stop-color=\"#7c3aed\"/></linearGradient></defs>' +\n      '<rect width=\"160\" height=\"90\" fill=\"url(#g)\"/><circle cx=\"118\" cy=\"30\" r=\"14\" fill=\"#fde68a\"/>' +\n      '<path d=\"M0 90 50 44l30 28 22-18 58 36z\" fill=\"#0f172a\" opacity=\".55\"/></svg>',\n  );\n\nexport default function CardDemo() {\n  return (\n    <Card.Root>\n      <Card.Media>\n        <Card.Image src={COVER} />\n        <Card.Overlay>\n          <Badge tone=\"scrim\">4K</Badge>\n        </Card.Overlay>\n        <Card.Overlay corner=\"bottom-right\">\n          <Badge tone=\"scrim\">12:04</Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <Card.Title>Night ride across the city</Card.Title>\n        <Card.Description>Ten minutes of neon, rain and empty avenues, filmed in one take.</Card.Description>\n        <Card.Footer>\n          <span>1.2k views</span>\n          <span aria-hidden>·</span>\n          <span>2 days ago</span>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
+    "path": "examples/card/media-card.tsx",
+    "content": "import { Badge } from \"@krizaka/ui/badge\";\nimport { Card } from \"@krizaka/ui/card\";\n\n// A self-contained cover (no network).\nconst COVER =\n  \"data:image/svg+xml;utf8,\" +\n  encodeURIComponent(\n    '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 160 90\"><defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">' +\n      '<stop offset=\"0\" stop-color=\"#1e3a8a\"/><stop offset=\"1\" stop-color=\"#7c3aed\"/></linearGradient></defs>' +\n      '<rect width=\"160\" height=\"90\" fill=\"url(#g)\"/><circle cx=\"118\" cy=\"30\" r=\"14\" fill=\"#fde68a\"/>' +\n      '<path d=\"M0 90 50 44l30 28 22-18 58 36z\" fill=\"#0f172a\" opacity=\".55\"/></svg>',\n  );\n\nexport default function CardMediaCard() {\n  return (\n    <Card.Root>\n      <Card.Media>\n        <Card.Image src={COVER} />\n        <Card.Overlay>\n          <Badge tone=\"scrim\">4K</Badge>\n        </Card.Overlay>\n        <Card.Overlay corner=\"bottom-right\">\n          <Badge tone=\"scrim\">12:04</Badge>\n        </Card.Overlay>\n      </Card.Media>\n      <Card.Body>\n        <Card.Title>Night ride across the city</Card.Title>\n        <Card.Description>Ten minutes of neon, rain and empty avenues, filmed in one take.</Card.Description>\n        <Card.Footer>\n          <span>1.2k views</span>\n          <span aria-hidden>·</span>\n          <span>2 days ago</span>\n        </Card.Footer>\n      </Card.Body>\n    </Card.Root>\n  );\n}\n"
   },
   "props": [
     {
@@ -89,6 +505,13 @@
           "description": "Shown when there is no image: an icon, an illustration (decorative).",
           "required": false
         },
+        {
+          "name": "loading",
+          "type": "\"eager\" | \"lazy\"",
+          "default": "lazy",
+          "description": "When the browser loads it: `lazy` (default, a card in a list or below the fold) or `eager` for the first cards\nof a page — the image that is the largest contentful paint must not wait (add `fetchPriority=\"high\"`).",
+          "required": false
+        },
         {
           "name": "src",
           "type": "string | null",