@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/actions/toggle/toggle.module.css

@@ -0,0 +1,285 @@
+/*
+ * Toggle (§9.4). CVA function `toggle`. Parts: `base` (the button: edge,
+ * radius, focus ring), `label`, `icon`, `glyph` (the leading ✓ / ● shown
+ * when pressed, or the icon toggle's swapped icon), and `edge` /
+ * `edgeLine`, the SVG that draws the disabled `line-dotted-fine` edge as
+ * true dots [D36, D68]. Toggles and segments select by the inverse pair on
+ * every ground; filter chips by --role-select [D96].
+ *
+ * Colors are role variables only. Local custom properties carry dimensions:
+ *   --toggle-height       size classes publish it
+ *   --toggle-rest-edge    the variant's rest edge (2 / 1.5 / 0 px)
+ *   --toggle-edge         the current edge; the padding absorbs every step,
+ *                         so selection draws inside and never moves the label
+ *   --toggle-edge-radius  radius the disabled dotted edge follows
+ * Label case is authored, never set here [D160].
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.sm {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+.md {
+  composes: typeButton from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --toggle-rest-edge: var(--border-size-2);
+    --toggle-edge: var(--toggle-rest-edge);
+    --toggle-edge-radius: calc(var(--toggle-height) / 2);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    block-size: var(--toggle-height);
+    min-inline-size: var(--fgd-size-hit);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: calc(var(--size-px-3) + var(--toggle-rest-edge) - var(--toggle-edge));
+    border: var(--toggle-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    white-space: nowrap;
+    appearance: none;
+  }
+
+  /* Every target reaches --fgd-size-hit; a smaller toggle extends it invisibly [D43]. */
+  .base::after {
+    content: '';
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    translate: -50% -50%;
+  }
+
+  /* The bare-text hover underline's color, weight and offset, where soft fills drop (§9.4) [D181]. */
+  .label {
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .icon,
+  .glyph {
+    flex: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--toggle-edge-radius) - var(--fgd-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /*
+   * Hover and press transitions [D181]: --fgd-duration-quick, --ease-out-3,
+   * for edges and underlines only. The fill rests at none and the pressed
+   * ink swaps with it, so both step at once [D205].
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    .base,
+    .label {
+      transition-property: border-color, text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Size: height and type role; labels rest at --font-weight-6. */
+  .sm {
+    --toggle-height: var(--size-px-7);
+    --type-weight: var(--font-weight-6);
+  }
+
+  .md {
+    --toggle-height: var(--fgd-size-control-md);
+    --type-weight: var(--font-weight-6);
+  }
+
+  /* The text toggle: an outline-Button pill, --border-size-2 --primary12. */
+  .outline {
+    --toggle-rest-edge: var(--border-size-2);
+  }
+
+  /* The segment: a joined cell with no edge of its own; the group draws the container. */
+  .segment {
+    --toggle-rest-edge: 0px;
+
+    border-radius: var(--radius-0);
+  }
+
+  /* The filter chip: a quiet --border-size-1-5 --role-rule rest edge (a required boundary [D17]). */
+  .chip {
+    --toggle-rest-edge: var(--border-size-1-5);
+
+    border-color: var(--role-rule);
+  }
+
+  /* The icon toggle: a circle, width = height, glyph centered; the label is the accessible name. */
+  .iconOnly {
+    inline-size: var(--toggle-height);
+    min-inline-size: 0;
+    padding-inline: 0;
+  }
+
+  .iconOnly .label {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+
+@layer states {
+  /* The glyph shows only when pressed; an icon toggle swaps its icon for it. */
+  .base:not([data-pressed]) .glyph {
+    display: none;
+  }
+
+  .iconOnly[data-pressed] .icon {
+    display: none;
+  }
+
+  /*
+   * Hover (not disabled) [D181]: a fill or ink change; the edge weight
+   * never changes and nothing transforms.
+   * - Off text toggle and segment: the outline hover, a --primary3 fill
+   *   (--role-soft-hover); where soft fills drop the label takes the
+   *   bare-text underline instead (--fgd-soft-hover-line).
+   * - Off filter chip: the edge steps --role-rule → --primary12 at the same
+   *   --border-size-1-5 weight [D140], with the soft fill where it applies.
+   * - Icon toggle: the glyph swaps to the next tier's weight (Icon
+   *   weight="interactive", hosted by the toggle); no fill.
+   * - On (data-pressed): the inverse pair's fill moves to --primary11, a
+   *   selected chip's to --role-select-hover; label, mark and edge stay.
+   *   A press in progress keeps the momentary inverse pair below.
+   */
+  .outline:not([data-disabled], [data-pressed], .iconOnly):hover,
+  .segment:not([data-disabled], [data-pressed], .iconOnly):hover {
+    background-color: var(--role-soft-hover);
+  }
+
+  .outline:not([data-disabled], [data-pressed], .iconOnly):hover .label,
+  .segment:not([data-disabled], [data-pressed], .iconOnly):hover .label {
+    text-decoration-line: var(--fgd-soft-hover-line);
+  }
+
+  .chip:not([data-disabled], [data-pressed]):hover {
+    border-color: var(--primary12);
+    background-color: var(--role-soft-hover);
+  }
+
+  .base[data-pressed]:not([data-disabled], :active):hover {
+    background-color: var(--primary11);
+  }
+
+  .chip[data-pressed]:not([data-disabled], :active):hover {
+    background-color: var(--role-select-hover);
+  }
+
+  /* Forced colors flatten fills and inks, so a hover adds a --border-size-2 outline [D181]. */
+  @media (forced-colors: active) {
+    .base:not([data-disabled], .iconOnly):hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: var(--border-size-2);
+    }
+  }
+
+  /*
+   * Selected (data-pressed): a --border-size-2-25 inside edge, the glyph and
+   * --font-weight-7. Toggles and segments take the inverse pair; the edge
+   * matches the fill on screen and carries the state in print.
+   */
+  .base[data-pressed] {
+    --toggle-edge: var(--border-size-2-25);
+    --type-weight: var(--font-weight-7);
+
+    border-color: var(--primary12);
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* The selected filter chip: --role-select fill, --role-select-mark label and ✓, --role-select-edge [D96]. */
+  .chip[data-pressed] {
+    border-color: var(--role-select-edge);
+    background-color: var(--role-select);
+    color: var(--role-select-mark);
+  }
+
+  /* Pressed (momentary): the inverse pair; the edge is unchanged [D84]. */
+  .base:not([data-disabled]):active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset, drawn above neighbours [D45]. */
+  .base:focus-visible {
+    z-index: 1;
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /*
+   * Disabled: fill removed, --role-muted label, the dotted edge in
+   * --role-rule (--primary12 on one-ink grounds [D85]); a segment keeps no
+   * edge. Never dimmed [D16]. A selected item is never disabled.
+   */
+  .base[data-disabled] {
+    --toggle-edge: 0px;
+
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+  }
+
+  .base[data-disabled] > .edge {
+    display: block;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Hidden: the result prints as a caption ("View: Month") (§9.4). */
+    .base {
+      display: none;
+    }
+  }
+}

package/actions/toggle-group/ToggleGroup.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+export declare const toggleGroup: (props?: ({
+    variant?: "outline" | "chip" | "segmented" | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleGroupVariants = VariantProps<typeof toggleGroup>;
+/**
+ * Props for ToggleGroup: Base UI ToggleGroup props plus the variant, color
+ * axes and an optional visible group label.
+ */
+export type ToggleGroupProps<Value extends string = string> = BaseToggleGroup.Props<Value> & {
+    /**
+     * `outline` (default): separate text toggles. `segmented`: joined cells
+     * in one `--border-size-2` container, for 2–4 options (4+ belong in a
+     * Select). `chip`: filter chips that wrap and never scroll.
+     */
+    variant?: ToggleGroupVariants['variant'];
+    /** Primary Radix scale for the group and its toggles. Never defaulted [D133]. */
+    primary?: ToggleGroupVariants['primary'];
+    /** Secondary Radix scale: the selected chips' --role-select. Never defaulted. */
+    secondary?: ToggleGroupVariants['secondary'];
+    /**
+     * A visible group label (`type-field-label`, title case), rendered
+     * before the group and wired with `aria-labelledby`. It may echo the
+     * value ("Size: M"). Omit it and pass `aria-label` or `aria-labelledby`
+     * instead where the label lives elsewhere.
+     */
+    label?: React.ReactNode;
+};
+/**
+ * A Base UI Toggle Group of Toggles, single (default) or `multiple`. The
+ * group passes `segment` or `chip` to its Toggles and tells them whether
+ * the pressed mark is ● (single) or ✓ (multiple). Use it for immediate,
+ * reversible view changes and filters, never to switch panels (Tabs).
+ * The outline and chip roots are inline-size containers, so give them a
+ * width in shrink-to-fit layouts; the segmented root sizes to its cells.
+ */
+export declare function ToggleGroup<Value extends string>(props: ToggleGroupProps<Value>): React.JSX.Element;
+export {};
+//# sourceMappingURL=ToggleGroup.d.ts.map

package/actions/toggle-group/ToggleGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.d.ts","sourceRoot":"","sources":["../../src/actions/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAC5E,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAsCjE,eAAO,MAAM,WAAW;;;;8EActB,CAAA;AAEF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA;AAQ3D;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,KAAK,SAAS,MAAM,GAAG,MAAM,IAAI,eAAe,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG;IAC3F;;;;OAIG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC,iFAAiF;IACjF,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC,iFAAiF;IACjF,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAC5C;;;;;OAKG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,SAAS,MAAM,EAAE,KAAK,EAAE,gBAAgB,CAAC,KAAK,CAAC,qBAyD/E"}

package/actions/toggle-group/ToggleGroup.js

@@ -0,0 +1,85 @@
+'use client';
+import * as React from 'react';
+import { ToggleGroup as BaseToggleGroup } from '@base-ui/react/toggle-group';
+import { cva } from 'class-variance-authority';
+import { ToggleItemContext } from '../toggle';
+import { resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './toggle-group.module.css';
+/*
+ * Toggle Group (§9.4): separate toggles, the segmented control and the
+ * filter-chip group. §9.4 owns filter chips and segments.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: toggle-group.module.css; CVA function `toggleGroup`.
+ * - Axes: `variant` → outline | segmented | chip (separate toggles; the
+ *   joined container; the wrapping chip layout); `primary`, `secondary` →
+ *   scales module classes, inherited by the toggles. Orientation is Base
+ *   UI's own prop (data-orientation), not an axis.
+ * - Compound variants: none.
+ * - Defaults: variant outline; color axes none [D133].
+ * - Color fallback: inherits the scope.
+ * - States: data-orientation → which edge carries the dividers;
+ *   data-multiple → the toggles show ✓ rather than ● (passed through
+ *   context); data-disabled → the dotted divider pair. A divider next to
+ *   the pressed cell is hidden.
+ * - Parts: base (the group container), divider, groupLabel.
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `toggle-group` for the
+ *   outline and chip layouts (chips flex-wrap and never scroll). The
+ *   segmented container hugs its labels from 768 px, which an inline-size
+ *   container cannot do, so it is not one: it reads its nearest ancestor
+ *   container, with an --md-n-above viewport fallback; 2–3 equal cells at
+ *   baseline (§5.10.2) [D163].
+ */
+export const toggleGroup = cva(styles.base, {
+    variants: {
+        variant: {
+            outline: styles.outline,
+            segmented: styles.segmented,
+            chip: styles.chip,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        variant: 'outline',
+    },
+});
+const itemVariants = {
+    outline: 'outline',
+    segmented: 'segment',
+    chip: 'chip',
+};
+/**
+ * A Base UI Toggle Group of Toggles, single (default) or `multiple`. The
+ * group passes `segment` or `chip` to its Toggles and tells them whether
+ * the pressed mark is ● (single) or ✓ (multiple). Use it for immediate,
+ * reversible view changes and filters, never to switch panels (Tabs).
+ * The outline and chip roots are inline-size containers, so give them a
+ * width in shrink-to-fit layouts; the segmented root sizes to its cells.
+ */
+export function ToggleGroup(props) {
+    const { variant, primary, secondary, label, className, children, multiple = false, ...rest } = props;
+    const scope = useScopeAttributes();
+    const labelId = React.useId();
+    const resolvedVariant = variant ?? 'outline';
+    const item = React.useMemo(() => ({ variant: itemVariants[resolvedVariant], multiple }), [resolvedVariant, multiple]);
+    const variants = { variant: resolvedVariant, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => toggleGroup({ ...variants, className: extra }));
+    // Segmented cells are divided by --border-size-1 rules between them.
+    const items = resolvedVariant === 'segmented'
+        ? React.Children.toArray(children).flatMap((child, index) => index === 0
+            ? [child]
+            : [
+                React.createElement("span", { key: `divider-${index}`, className: styles.divider, "aria-hidden": "true" }),
+                child,
+            ])
+        : children;
+    return (React.createElement(ToggleItemContext.Provider, { value: item },
+        label == null ? null : (React.createElement("span", { id: labelId, className: styles.groupLabel }, label)),
+        React.createElement(BaseToggleGroup, { "aria-labelledby": label == null ? undefined : labelId, ...rest, ...scope, multiple: multiple, className: resolvedClassName }, items)));
+}
+//# sourceMappingURL=ToggleGroup.js.map

package/actions/toggle-group/ToggleGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleGroup.js","sourceRoot":"","sources":["../../src/actions/toggle-group/ToggleGroup.tsx"],"names":[],"mappings":"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"}

package/actions/toggle-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/toggle-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/actions/toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/actions/toggle-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}

package/content/card/Card.d.ts

@@ -0,0 +1,137 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type LinkProps } from '../../actions/link';
+declare const card: (props?: ({
+    kind?: "block" | "entry" | "editorial" | null | undefined;
+    faced?: boolean | null | undefined;
+    lead?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type CardVariants = VariantProps<typeof card>;
+type CardKindProps = {
+    /** Editorial (default): open (bare) by default per §12.2; `faced` adds the face and edge. */
+    kind?: 'editorial';
+    /**
+     * Adds the face (a nested `white` Ground on a page ground, a `paper`
+     * light island inside a field or the night band) and its
+     * `--role-edge` edge. Editorial only. Default `false`: the open card
+     * (§12.2).
+     */
+    faced?: boolean;
+    /**
+     * The single lead card of a grid: horizontal, media 5 columns and
+     * text 7, once its `card-grid` container reaches 944 px (viewport
+     * fallback `--lg-n-above`); stacked below. Editorial only. Default
+     * `false`.
+     */
+    lead?: boolean;
+} | {
+    /** Block edge: featured cards only, one card family per page on 1–3 cards [D174]. */
+    kind: 'block';
+    /** Not available on block cards, which always draw their block edge. */
+    faced?: never;
+    /** Not available on block cards. */
+    lead?: never;
+} | {
+    /**
+     * Entry [D185]: compact and horizontal, a `white` face (a light
+     * island on the night hero) with a static `--border-size-2`
+     * `--primary12` edge. A leading `CardMedia` is the square image, flush
+     * to the start edge and as tall as the card; then a `CardKicker`
+     * (the category) and a `CardTitle` with its link. Used only as a
+     * hero's entry cards (§11.9).
+     */
+    kind: 'entry';
+    /** Not available on entry cards, which are always faced. */
+    faced?: never;
+    /** Not available on entry cards. */
+    lead?: never;
+};
+/** Props for Card: `article` props, `render`, and the kind, face and color axes. */
+export type CardProps = useRender.ComponentProps<'article'> & {
+    /**
+     * Primary Radix scale for the card and its face: text, rules and edges.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: CardVariants['primary'];
+    /**
+     * Secondary Radix scale for the card and its face: the accents, such as
+     * the title link's underline. Never defaulted; omitted, it inherits the scope.
+     */
+    secondary?: CardVariants['secondary'];
+    /**
+     * Unavailable (a sold-out product, a past event): title and body in
+     * `--role-muted`, a `line-dotted-fine` edge, the action removed; the photo
+     * is untouched and nothing fades [D16]. Add the status word as a Badge.
+     * Default `false`.
+     */
+    disabled?: boolean;
+} & CardKindProps;
+/**
+ * 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 declare function Card(props: CardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardMedia: `figure` props and `render`. */
+export type CardMediaProps = useRender.ComponentProps<'figure'>;
+/** Photo or drawing (`figure` with an `img`). Flush when first in a faced card; inset in a block card. */
+export declare function CardMedia(props: CardMediaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardKicker: paragraph props and `render`. */
+export type CardKickerProps = useRender.ComponentProps<'p'>;
+/**
+ * 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 declare function CardKicker(props: CardKickerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardTitle: heading props and `render` (default `<h3>`). */
+export type CardTitleProps = useRender.ComponentProps<'h3'>;
+/** `type-itemhead` in --primary12. Renders `<h3>`; pass `render={<h2 />}` to fit the outline. */
+export declare function CardTitle(props: CardTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardTitleLink: Link props except `kind`, which is always `title`. */
+export type CardTitleLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * 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 declare function CardTitleLink(props: CardTitleLinkProps): React.JSX.Element;
+/** Props for CardMeta: paragraph props and `render`. */
+export type CardMetaProps = useRender.ComponentProps<'p'>;
+/** Date, format, place joined by "·": `type-caption` in --role-muted. */
+export declare function CardMeta(props: CardMetaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardBody: `div` props and `render`. */
+export type CardBodyProps = useRender.ComponentProps<'div'>;
+/** Two to four lines of `type-body-ui` in --primary12. */
+export declare function CardBody(props: CardBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardChoice: `div` props and `render`. */
+export type CardChoiceProps = useRender.ComponentProps<'div'>;
+/**
+ * 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 declare function CardChoice(props: CardChoiceProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for CardFooter: `div` props and `render`. */
+export type CardFooterProps = useRender.ComponentProps<'div'>;
+/**
+ * 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 declare function CardFooter(props: CardFooterProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Card.d.ts.map

package/content/card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/content/card/Card.tsx"],"names":[],"mappings":"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"}