@fairgarden/design 0.1.0-alpha.0

package/components/Card/Card.js

@@ -0,0 +1,239 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { Link } from '../Link';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { isPageGroundPreset, useScope, useScopeAttributes } from '../../utils/scope';
+import styles from './card.module.css';
+/*
+ * Card (§12.2): a self-contained, linked item among peers. Composed from
+ * semantic HTML; no Base UI card primitive exists.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: card.module.css; CVA function `card`.
+ * - Axes: `kind` → editorial | block | entry (v1 subset of editorial |
+ *   event | species | block | promo | entry); `faced` → `faced` (editorial
+ *   only; excluded in the types for block and entry, which are always
+ *   faced); `lead` → `lead` (editorial only: the horizontal lead card);
+ *   `disabled` → `disabled` (a state class in the states layer, unmanaged
+ *   element); `primary`, `secondary` → scales module classes.
+ * - Compound variants: `faced` + `lead` → `facedLead` (the flush photo
+ *   runs down the start edge instead of across the top).
+ * - Defaults: kind editorial, faced false, lead false, disabled false
+ *   (§12.2); color axes none.
+ * - Color fallback: inherits the scope.
+ * - States: CardTitleLink (Link kind="title") owns the underline states
+ *   (§9.3) [D157]; `base:has(titleLink:focus-visible)` → ring outside the
+ *   frame; `faced:has(titleLink:active)` → the face's edge steps to
+ *   --border-size-2 --primary12. Hover is the title link's own
+ *   (--role-link-hover, §9.3) [D181].
+ * - Edge states (the hook composing modules use): the face draws its edge
+ *   in --role-edge, which its Ground publishes: --primary10 on a page
+ *   ground, --primary12 as a light island [D178, D179]; the entry card's
+ *   is a static --border-size-2 --primary12 [D185]. `CardChoice` holds
+ *   an option card's Checkbox or Radio: its `data-checked` steps the edge to
+ *   --border-size-2 --role-select-edge (§10.7), its `data-disabled` draws
+ *   the unavailable edge. `disabled` (or that `data-disabled`) → a
+ *   line-dotted-fine edge in --role-disabled-edge, title and body
+ *   --role-muted, the action removed [D16]. A composing module may set
+ *   `--card-frame` (a width) on the root to draw the outer scope's
+ *   --primary12 frame inset over the face's edge: Pricing's recommended and
+ *   selected tiers (§12.9).
+ * - Parts: base, face, media, leadBody (the lead card's text column),
+ *   entryBody (the entry card's text column), kicker, title, titleLink,
+ *   meta, body, choice, action.
+ * - Scope: `face` is a nested Ground [D178]: `white` on a page ground and
+ *   for block and entry, `paper` inside a field or the night band (Ground
+ *   writes the light island [D149, D179]). Bare cards have no face scope.
+ * - Container: `base` is the inline-size container `card` (the action row's
+ *   360 px stack guard queries it); face padding and the lead layout read
+ *   the ancestor `card-grid` container at 608 / 944 px (§5.10.2). Baseline
+ *   without support: media above text, padding by viewport (--md-n-above /
+ *   --lg-n-above), lead horizontal from --lg-n-above, stack guard at
+ *   --xs-n-below [D163]. Cards fill their grid row, and the action row is
+ *   pinned to the card's bottom (§12.3). The entry card keeps its
+ *   horizontal layout at every width; its host (the Hero) sets the columns.
+ */
+const card = cva(styles.base, {
+    variants: {
+        kind: {
+            editorial: styles.editorial,
+            block: styles.block,
+            entry: styles.entry,
+        },
+        faced: {
+            true: styles.faced,
+        },
+        lead: {
+            true: styles.lead,
+        },
+        disabled: {
+            true: styles.disabled,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    compoundVariants: [{ faced: true, lead: true, class: styles.facedLead }],
+    defaultVariants: {
+        kind: 'editorial',
+        faced: false,
+        lead: false,
+        disabled: false,
+    },
+});
+/**
+ * The card frame. Plain children are fine (`<Card>…</Card>`); the optional
+ * parts `CardMedia`, `CardKicker`, `CardTitle` (+ `CardTitleLink`),
+ * `CardMeta`, `CardBody`, `CardChoice` and `CardFooter` give the §12.2
+ * anatomy and rhythm. Put a
+ * leading `CardMedia` first (a direct child) to run it flush to the frame.
+ * In a grid row, cards share one height and the footer sits at the bottom.
+ *
+ * Renders `<article>`; pass `render={<li />}` or similar to change it. The
+ * root is an inline-size container, so give it a width in shrink-to-fit
+ * contexts (flex items without stretch, floats).
+ */
+export function Card(props) {
+    const { render, ref, className, kind = 'editorial', faced, lead, disabled = false, primary, secondary, children, ...rest } = props;
+    const scope = useScope();
+    const scopeAttributes = useScopeAttributes();
+    const isFaced = kind === 'editorial' && faced === true;
+    const isLead = kind === 'editorial' && lead === true;
+    const isEntry = kind === 'entry';
+    // Faces are white on a page ground; inside a field or the night band an
+    // editorial face is a paper light island (block and entry stay white) [D179, D185].
+    const facePreset = kind === 'editorial' && !isPageGroundPreset(scope.ground) ? 'paper' : 'white';
+    // The lead and entry cards set their media beside a text column; other cards stack.
+    let content = children;
+    if (isLead || isEntry) {
+        const media = [];
+        const text = [];
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child) && child.type === CardMedia)
+                media.push(child);
+            else
+                text.push(child);
+        });
+        content = (React.createElement(React.Fragment, null,
+            media,
+            React.createElement("div", { className: isEntry ? styles.entryBody : styles.leadBody }, text)));
+    }
+    const face = isFaced || kind === 'block' || isEntry ? (React.createElement(Ground, { kind: "face", preset: facePreset, primary: primary ?? undefined, secondary: secondary ?? undefined, render: React.createElement("div", null), className: styles.face }, content)) : (React.createElement("div", { className: styles.face }, content));
+    return useRender({
+        defaultTagName: 'article',
+        render,
+        ref,
+        props: mergeProps({
+            ...scopeAttributes,
+            className: card({
+                kind,
+                faced: isFaced,
+                lead: isLead,
+                disabled,
+                primary,
+                secondary,
+                className,
+            }),
+            children: face,
+        }, rest),
+    });
+}
+/** Photo or drawing (`figure` with an `img`). Flush when first in a faced card; inset in a block card. */
+export function CardMedia(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'figure',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.media, className) }, rest),
+    });
+}
+/**
+ * The kicker above the title (§12.2 part `kicker`): a topic Tag, or a
+ * category in `type-label` caps in --primary12, as on the entry card.
+ */
+export function CardKicker(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.kicker, className) }, rest),
+    });
+}
+/** `type-itemhead` in --primary12. Renders `<h3>`; pass `render={<h2 />}` to fit the outline. */
+export function CardTitle(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.title, className) }, rest),
+    });
+}
+/**
+ * The card's one primary link, inside `CardTitle`. A §9.3 title Link: its
+ * hit area stretches over the whole card; hover, focus and press underline
+ * the title; the card draws the focus ring outside its frame.
+ */
+export function CardTitleLink(props) {
+    const { className, ...rest } = props;
+    return React.createElement(Link, { ...rest, kind: "title", className: cx(styles.titleLink, className) });
+}
+/** Date, format, place joined by "·": `type-caption` in --role-muted. */
+export function CardMeta(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.meta, className) }, rest),
+    });
+}
+/** Two to four lines of `type-body-ui` in --primary12. */
+export function CardBody(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.body, className) }, rest),
+    });
+}
+/**
+ * The option-card indicator slot (§12.2 part `choice`, §10.7): put the
+ * card's Checkbox or Radio here. Its `data-checked` steps the faced edge to
+ * `--border-size-2` in `--role-select-edge`; its `data-disabled` draws the
+ * unavailable edge and mutes the title and body. Sits above the stretched
+ * title link as its own control.
+ */
+export function CardChoice(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.choice, className) }, rest),
+    });
+}
+/**
+ * The action row (§12.2 part `action`): a sm outline Button, or a
+ * "READ MORE ›" standalone Link. Pinned to the card's bottom, so a grid
+ * row's actions align (§12.3); sits above the stretched title link; stacks
+ * below 360 px of card width; removed while the card is `disabled`.
+ */
+export function CardFooter(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.action, className) }, rest),
+    });
+}
+//# sourceMappingURL=Card.js.map

package/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,IAAI,EAAkB,MAAM,SAAS,CAAA;AAC9C,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACpF,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC5B,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,SAAS,EAAE,MAAM,CAAC,SAAS;YAC3B,KAAK,EAAE,MAAM,CAAC,KAAK;YACnB,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB;QACD,KAAK,EAAE;YACL,IAAI,EAAE,MAAM,CAAC,KAAK;SACnB;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM,CAAC,IAAI;SAClB;QACD,QAAQ,EAAE;YACR,IAAI,EAAE,MAAM,CAAC,QAAQ;SACtB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,gBAAgB,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,CAAC;IACxE,eAAe,EAAE;QACf,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,KAAK;QACZ,IAAI,EAAE,KAAK;QACX,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAA;AAoEF;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,MAAM,EACJ,MAAM,EACN,GAAG,EACH,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAA;IAE5C,MAAM,OAAO,GAAG,IAAI,KAAK,WAAW,IAAI,KAAK,KAAK,IAAI,CAAA;IACtD,MAAM,MAAM,GAAG,IAAI,KAAK,WAAW,IAAI,IAAI,KAAK,IAAI,CAAA;IACpD,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAA;IAChC,wEAAwE;IACxE,oFAAoF;IACpF,MAAM,UAAU,GAAG,IAAI,KAAK,WAAW,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;IAEhG,oFAAoF;IACpF,IAAI,OAAO,GAAoB,QAAQ,CAAA;IACvC,IAAI,MAAM,IAAI,OAAO,EAAE,CAAC;QACtB,MAAM,KAAK,GAAsB,EAAE,CAAA;QACnC,MAAM,IAAI,GAAsB,EAAE,CAAA;QAClC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;YACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,SAAS;gBAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;;gBACzE,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC,CAAC,CAAA;QACF,OAAO,GAAG,CACR;YACG,KAAK;YACN,6BAAK,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,IAAG,IAAI,CAAO,CACzE,CACJ,CAAA;IACH,CAAC;IAED,MAAM,IAAI,GACR,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,OAAO,CAAC,CAAC,CAAC,CACvC,oBAAC,MAAM,IACL,IAAI,EAAC,MAAM,EACX,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,OAAO,IAAI,SAAS,EAC7B,SAAS,EAAE,SAAS,IAAI,SAAS,EACjC,MAAM,EAAE,gCAAO,EACf,SAAS,EAAE,MAAM,CAAC,IAAI,IAErB,OAAO,CACD,CACV,CAAC,CAAC,CAAC,CACF,6BAAK,SAAS,EAAE,MAAM,CAAC,IAAI,IAAG,OAAO,CAAO,CAC7C,CAAA;IAEH,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,SAAS;QACzB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CACf;YACE,GAAG,eAAe;YAClB,SAAS,EAAE,IAAI,CAAC;gBACd,IAAI;gBACJ,KAAK,EAAE,OAAO;gBACd,IAAI,EAAE,MAAM;gBACZ,QAAQ;gBACR,OAAO;gBACP,SAAS;gBACT,SAAS;aACV,CAAC;YACF,QAAQ,EAAE,IAAI;SACf,EACD,IAAI,CACL;KACF,CAAC,CAAA;AACJ,CAAC;AAKD,0GAA0G;AAC1G,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,QAAQ;QACxB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAW,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC9E,CAAC,CAAA;AACJ,CAAC;AAKD;;;GAGG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,GAAG;QACnB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAM,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC1E,CAAC,CAAA;AACJ,CAAC;AAKD,iGAAiG;AACjG,MAAM,UAAU,SAAS,CAAC,KAAqB;IAC7C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,IAAI;QACpB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAO,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC1E,CAAC,CAAA;AACJ,CAAC;AAKD;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACpC,OAAO,oBAAC,IAAI,OAAK,IAAI,EAAE,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,SAAS,CAAC,GAAI,CAAA;AACpF,CAAC;AAKD,yEAAyE;AACzE,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,GAAG;QACnB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAM,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KACxE,CAAC,CAAA;AACJ,CAAC;AAKD,0DAA0D;AAC1D,MAAM,UAAU,QAAQ,CAAC,KAAoB;IAC3C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC1E,CAAC,CAAA;AACJ,CAAC;AAKD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC5E,CAAC,CAAA;AACJ,CAAC;AAKD;;;;;GAKG;AACH,MAAM,UAAU,UAAU,CAAC,KAAsB;IAC/C,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IACjD,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,KAAK;QACrB,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CAAQ,EAAE,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,EAAE,EAAE,IAAI,CAAC;KAC5E,CAAC,CAAA;AACJ,CAAC"}