@fairgarden/design 0.1.0-0.canary.0

package/data/stat/stat.module.css

@@ -0,0 +1,299 @@
+/*
+ * Stat block (§12.10; typography §8.8; counts §5.10.2). CVA function
+ * `statBlock`. Pure type, so it works on every ground: every text is
+ * --primary12; cell rules are --role-hairline; only the hero's mount takes
+ * the secondary (front disc --secondary9, under-disc --secondary7, the
+ * numeral on it --secondary-contrast). Colors are role variables only.
+ *
+ * Column counts: cells span a 12-track grid on the `stat-row` container
+ * (the root), so the cells can query it. `--stat-span` is a track count.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.numeral {
+  composes: typeStat from '../../utils/type.module.css';
+}
+
+.numeralCompact {
+  composes: typeStatCompact from '../../utils/type.module.css';
+}
+
+.unit {
+  composes: typeLead from '../../utils/type.module.css';
+}
+
+.unitCompact {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.qualifier {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.delta {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.source {
+  composes: typeSmall from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .label,
+  .numeral,
+  .numeralCompact,
+  .unit,
+  .unitCompact,
+  .qualifier,
+  .delta,
+  .source {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .unit,
+  .unitCompact {
+    line-height: inherit;
+  }
+
+  /* Change: a ▲ or ▼ at --size-px-3 plus words, never color alone. */
+  .delta {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .deltaGlyph {
+    flex: none;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    fill: currentColor;
+  }
+
+  @media (forced-colors: active) {
+    .deltaGlyph {
+      forced-color-adjust: none;
+      fill: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /* Row: rule-topped cells like spec cells; --border-size-1 --role-hairline. */
+  .row {
+    container: stat-row / inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--fgd-space-margin);
+    row-gap: var(--size-px-5);
+  }
+
+  .cell {
+    --stat-span: 12;
+
+    grid-column: span var(--stat-span);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+    padding-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Four or more stats: every figure compact, at every width (§8.8). */
+  .compact .cell {
+    gap: var(--size-px-1);
+  }
+
+  /* Baseline, no container queries: four 2 × 2 (1-up past 5 characters), never auto-fit. */
+  .countTwo .cell,
+  .countFour .cell {
+    --stat-span: 6;
+  }
+
+  .long .cell {
+    --stat-span: 12;
+  }
+
+  @media (min-width: 768px) {
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .threeShort .cell {
+      --stat-span: 4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+  }
+
+  @media (max-width: 359.98px) {
+    .base .cell {
+      --stat-span: 12;
+    }
+  }
+
+  /* Container thresholds on stat-row (§5.10.2) refine the baseline. */
+  @container stat-row (width < 360px) {
+    .base .cell {
+      --stat-span: 12;
+    }
+  }
+
+  @container stat-row (360px <= width < 768px) {
+    .countTwo .cell,
+    .countFour .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell,
+    .long .cell {
+      --stat-span: 12;
+    }
+  }
+
+  @container stat-row (768px <= width < 1024px) {
+    .countTwo .cell,
+    .countFour .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 12;
+    }
+
+    .threeShort .cell {
+      --stat-span: 4;
+    }
+  }
+
+  @container stat-row (width >= 1024px) {
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+  }
+
+  /* Hero: one numeral centered on the blob mount (§6.6), a caption below. */
+  .hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--size-px-2-5);
+    text-align: center;
+  }
+
+  .mount {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: var(--fgd-size-art-s);
+    aspect-ratio: 142 / 140;
+  }
+
+  .mountArt {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+
+  .mountFront {
+    fill: var(--secondary9);
+  }
+
+  .mountUnder {
+    fill: var(--secondary7);
+  }
+
+  .hero .numeral,
+  .hero .unit {
+    position: relative;
+    color: var(--secondary-contrast);
+  }
+
+  .caption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  /* Inline: the numeral in running text, its qualifier at the text's size. */
+  .inline {
+    display: inline;
+  }
+
+  .numeralInline {
+    font-weight: var(--font-weight-7);
+    font-variant-numeric: var(--fgd-numerals-data);
+  }
+
+  .inline .qualifier {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Blocks print 4-up if the figures fit, else 2 × 2; cells never split (§8.8, §5.12). */
+    .cell {
+      --stat-span: 12;
+
+      break-inside: avoid;
+    }
+
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+
+    .long .cell {
+      --stat-span: 6;
+    }
+
+    /* The mount is decoration: hidden, so the remap cannot turn its discs black; the numeral stays. */
+    .mountArt {
+      display: none;
+    }
+
+    .hero {
+      break-inside: avoid;
+    }
+  }
+}

package/data/table/Table.d.ts

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const table: (props?: ({
+    strategy?: "scroll" | "stack" | "fit" | "prioritize" | null | undefined;
+    grid?: boolean | null | undefined;
+    density?: "default" | "compact" | null | undefined;
+    interactive?: boolean | null | undefined;
+    onSolid?: boolean | null | undefined;
+    expanded?: 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 TableVariants = VariantProps<typeof table>;
+/** The column's sort state, mirrored to `aria-sort`. */
+export type TableSort = 'ascending' | 'descending' | 'none';
+/** Props for Table: `table` props, the strategy, density and color axes, and the chrome around the table. */
+export type TableProps = Omit<React.ComponentPropsWithRef<'table'>, 'className'> & {
+    /** Class for the root wrapper (the container that holds the cue, the Scroll Area and the notes). */
+    className?: string;
+    /**
+     * The responsive strategy (§8.2), one per table. `stack` (default, for
+     * records): below 768 px of the table's width each row becomes a block,
+     * its row header over a leader list of header → value. `fit`: ≤ 4 short
+     * columns, a table at every width. `scroll`: comparison matrices; the
+     * first column stays pinned while the rest scrolls. `prioritize`: cells
+     * marked `optional` hide behind a "Show All n Columns" toggle; they always
+     * print.
+     */
+    strategy?: TableVariants['strategy'];
+    /** The full matrix grid (`--border-size-1` `--role-rule`), for matrices only: marks in cells, centered headers. */
+    grid?: boolean;
+    /**
+     * `compact`: `--size-px-2` × `--size-px-2-5` cell padding, rows at least
+     * 32 px, `--role-rule` row rules. `default`: `--size-px-2-5` ×
+     * `--size-px-3`. Never defaulted: omitted, the table follows its scope's
+     * density (a Ground's `density`, through the `--fgd-table-*` tokens).
+     */
+    density?: TableVariants['density'];
+    /** Rows are click targets: `--role-rule` row rules and rows at least 44 px tall. */
+    interactive?: boolean;
+    /**
+     * The table sits on a saturated ground (≤ 5 rows, one ink): row rules
+     * become `line-dotted-fine` in `--role-rule`. Longer data belongs on a
+     * nested `white` Ground.
+     */
+    onSolid?: boolean;
+    /**
+     * Primary Radix scale: every rule, text and the row bar. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: TableVariants['primary'];
+    /** Secondary Radix scale: unused by the table itself. Never defaulted. */
+    secondary?: TableVariants['secondary'];
+    /**
+     * A text cue above a table that scrolls, e.g. "Scroll for 3 more columns
+     * →". Shown only while the table overflows.
+     */
+    scrollCue?: React.ReactNode;
+    /** `prioritize` only: the toggle label while optional columns are hidden. Default "Show All n Columns". */
+    showAllLabel?: string;
+    /** `prioritize` only: the toggle label while they show. Default "Show Fewer Columns". */
+    showFewerLabel?: string;
+    /**
+     * Notes below the table, kept in its own notes block: "Source:" and
+     * "Note:" lines in `type-small` and lettered cell notes (§8.12). Define
+     * "—" (empty cell) here.
+     */
+    notes?: React.ReactNode;
+};
+/**
+ * A three-rule data table: a `--border-size-2` `--primary12` frame above and
+ * below, a `--border-size-1` `--primary12` header rule and hairline row rules,
+ * with no verticals and no zebra stripes [D83]. More than 10 body rows switch
+ * to the five-row cadence. Text cells wrap and are never truncated; numbers
+ * are right-aligned lining tabular figures; an empty cell shows "—".
+ *
+ * Compose `TableCaption`, `TableHead`, `TableBody` and `TableFoot` inside;
+ * rows are `TableRow`, cells `TableHeaderCell` and `TableCell`.
+ */
+export declare function Table(props: TableProps): React.JSX.Element;
+/** Props for TableCaption: `caption` props plus the label and the scope note. */
+export type TableCaptionProps = React.ComponentPropsWithRef<'caption'> & {
+    /** The table label, e.g. "Table 2", in `type-data`. */
+    label?: React.ReactNode;
+    /** A scope note for units or time zone, in `type-caption`. */
+    note?: React.ReactNode;
+};
+/**
+ * The caption block above the table: label ("Table 2"), title (the
+ * children, `type-subhead`) and an optional scope note. It stays in view
+ * while a wide table scrolls.
+ */
+export declare function TableCaption(props: TableCaptionProps): React.JSX.Element;
+/** Props for TableHead: `thead` props. */
+export type TableHeadProps = React.ComponentPropsWithRef<'thead'>;
+/** The header row group; its last row carries the header rule. Repeats on every printed page. */
+export declare function TableHead(props: TableHeadProps): React.JSX.Element;
+/** Props for TableBody: `tbody` props plus the cadence override. */
+export type TableBodyProps = React.ComponentPropsWithRef<'tbody'> & {
+    /**
+     * The five-row cadence: dotted `--role-rule` rules between rows and a
+     * solid one after every fifth row. Default: on when the body holds more
+     * than 10 rows.
+     */
+    cadence?: boolean;
+};
+/** The body row group. Row rules are hairlines; over 10 rows they follow the five-row cadence. */
+export declare function TableBody(props: TableBodyProps): React.JSX.Element;
+/** Props for TableFoot: `tfoot` props. */
+export type TableFootProps = React.ComponentPropsWithRef<'tfoot'>;
+/** The total row group, opened by the `line-double-hair` total rule. */
+export declare function TableFoot(props: TableFootProps): React.JSX.Element;
+/** Props for TableRow: `tr` props plus the selected and inactive states. */
+export type TableRowProps = React.ComponentPropsWithRef<'tr'> & {
+    /**
+     * Draws the `--border-size-2-25` row bar at the start edge. A row holding a
+     * checked Checkbox, or the `:target` of a link (give it an `id`), shows
+     * the bar without this prop.
+     */
+    selected?: boolean;
+    /** Sets the row in `--role-muted`. Always add a word ("Sold out"): never tone alone. */
+    inactive?: boolean;
+};
+/** A table row. Its cells learn their column, so stacked records can repeat the header labels. */
+export declare function TableRow(props: TableRowProps): React.JSX.Element;
+interface CellCommonProps {
+    /** Right-aligned lining tabular figures that never wrap; use fixed decimals per column. */
+    numeric?: boolean;
+    /** `prioritize` tables: hidden until "Show All n Columns"; always printed. */
+    optional?: boolean;
+}
+/** Props for TableHeaderCell: `th` props, alignment, and the sort state. */
+export type TableHeaderCellProps = React.ComponentPropsWithRef<'th'> & CellCommonProps & {
+    /**
+     * Makes the column header a sort button: its label keeps the header's
+     * caps [D165], a ▲ or ▼ follows it, and `aria-sort` carries the state.
+     */
+    sort?: TableSort;
+    /** Called when the sort button is pressed; the caller updates `sort` and the rows. */
+    onSort?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The sort state as words, appended to the button's accessible name.
+     * Default ", sorted ascending", ", sorted descending" or ", not sorted".
+     */
+    sortStateLabel?: string;
+};
+/**
+ * A header cell. In the head it is a column header (`type-label` caps,
+ * bottom-aligned, aligned like its data; put units here, "Mass (kg)"); in
+ * the body or foot it is a row header (`type-body-ui` at weight 600).
+ */
+export declare function TableHeaderCell(props: TableHeaderCellProps): React.JSX.Element;
+/** Props for TableCell: `td` props, alignment, and the stacked label. */
+export type TableCellProps = React.ComponentPropsWithRef<'td'> & CellCommonProps & {
+    /**
+     * The column's label in stacked records. Default: the column header's
+     * text, read from `TableHead`.
+     */
+    label?: React.ReactNode;
+};
+/** A data cell in `type-body-ui` with lining tabular figures. Never leave one blank: write "—" and define it in the notes. */
+export declare function TableCell(props: TableCellProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Table.d.ts.map

package/data/table/Table.d.ts.map

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