Card

1import * as React from 'react';
2 
3// @interlace/card v1.2.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/card
5// What changed since: https://ds.interlace.tools/c/card#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Card
10 *
11 * A bordered, rounded content surface with header / title / description /
12 * action / content / footer parts. The surface, radius and border come from
13 * `Box`; the card owns only its column layout, its padding and its shadow.
14 *
15 * A `loading` card renders the shape-matched `Skeleton variant="card"`
16 * instead, so a card grid does not shift when the data lands.
17 *
18 * ## Anatomy
19 *
20 *   Card                             (Box — surface=card, radius=lg, border, flex-col gap-6 py-6)
21 *     ├─ CardHeader                  (grid — @container/card-header, px-6)
22 *     │    ├─ CardTitle
23 *     │    ├─ CardDescription
24 *     │    └─ CardAction             (col 2, spans both header rows)
25 *     ├─ CardContent                 (px-6)
26 *     └─ CardFooter                  (flex, px-6)
27 *
28 * The header is a one-column grid until a `CardAction` is present:
29 * `has-data-[slot=card-action]` switches it to `[1fr_auto]`, so the action
30 * column is created by the child that needs it rather than by a prop.
31 *
32 * ## What the card does not give you
33 *
34 * `CardTitle` is a `<div>`, not a heading. It carries the type treatment and
35 * nothing else, so a card that participates in the document outline needs the
36 * caller to put a real `<h2>`/`<h3>` inside it. Only `Card` takes `loading` —
37 * the parts have no state contract of their own.
38 *
39 * | Rule | Concept                          | Where in this file                                          |
40 * | ---- | -------------------------------- | ----------------------------------------------------------- |
41 * | R4   | Extends native el                | `React.ComponentProps<'div'>` on every part                 |
42 * | R6   | data-slot per part               | card / -header / -title / -description / -action / -content / -footer |
43 * | R7   | cn + ...rest                     | `cn('px-6', className)` + `{...props}` on each part         |
44 * | R10  | Composition seam                 | header layout keys off the `card-action` slot, not a prop   |
45 * | R12  | Reuse over wrap                  | `Box` owns surface + radius + border; `Skeleton` owns loading |
46// … truncated