@fairgarden/design 0.1.0-0.canary.0

package/content/timeline/timeline.module.css

@@ -0,0 +1,428 @@
+/*
+ * Timeline & Agenda (§12.14). The root `base` is the inline-size container
+ * `timeline`; the entry layout queries it. Parts: base, list, entry, end
+ * (the ongoing terminal row), dateKey, rail, marker (the box holding the
+ * shared utils/Ornament markers, each tagged markerOrigin, markerWaypoint,
+ * markerTerminal or markerCurrent; markerFixed when set by a prop), spineBox
+ * and spine (the dashed SVG line), body, title, titleLink
+ * (a title Link), text, caption, dateStack (dateMonth, dateDay,
+ * dateWeekday); agenda: day, dateHead, scope, session, sessionMarker,
+ * sessionBody, sessionTitle, meta, description. Colors are role variables
+ * only; local custom properties carry dimensions only:
+ *   --timeline-rail   the spine column's width (the marker box)
+ *   --timeline-gap    the gap either side of the spine column
+ */
+
+/* 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. */
+.dateKey {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.title {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.text {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.caption {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.dateMonth {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.dateDay {
+  composes: typeStatCompact from '../../utils/type.module.css';
+}
+
+.dateWeekday {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.dateHead {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.scope {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.sessionTitle {
+  composes: typeItemhead from '../../utils/type.module.css';
+}
+
+.meta {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+/* Path: --border-size-2, 5 on / 4 off, round caps [D66]; set on the SVG line. */
+.spine {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    --timeline-rail: var(--size-px-3);
+    --timeline-gap: var(--size-px-3);
+
+    container: timeline / inline-size;
+    /* Size containment leaves no intrinsic width: fill the box, never collapse as a flex or shrink-to-fit item. */
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Baseline (§1.11.11): spine at the start margin, the date above the title. */
+  .entry,
+  .end {
+    position: relative; /* a stretched title link covers the entry */
+    display: grid;
+    grid-template-columns: var(--timeline-rail) minmax(0, 1fr);
+    grid-template-areas:
+      'rail key'
+      'rail body';
+    column-gap: var(--timeline-gap);
+  }
+
+  .dateKey {
+    grid-area: key;
+    min-inline-size: 0;
+    padding-block-end: var(--size-px-1);
+    color: var(--primary12);
+  }
+
+  .rail {
+    grid-area: rail;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-block-start: var(--size-px-1);
+  }
+
+  /* Markers (§4.7) in --primary12, centered in the rail's box; the shape is picked below.
+     Geometry, stroke and size come from the shared ornament utilities. */
+  .marker {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--timeline-rail);
+    block-size: var(--timeline-rail);
+    color: var(--primary12);
+  }
+
+  .marker .markerOrigin,
+  .marker .markerTerminal,
+  .marker .markerCurrent {
+    display: none;
+  }
+
+  /* The spine segment: it stops --size-px-1 before and after each marker, and its
+     dash phase restarts past it (§4.7.2). Straight; never scaled. */
+  .spineBox {
+    display: block;
+    flex: 1 1 auto;
+    inline-size: var(--border-size-2);
+    min-block-size: var(--size-px-3);
+    margin-block: var(--size-px-1);
+    overflow: visible;
+  }
+
+  .spine {
+    fill: none;
+    stroke: var(--role-accent);
+  }
+
+  .body {
+    grid-area: body;
+    min-inline-size: 0;
+    max-inline-size: var(--fgd-measure-reading);
+    padding-block-end: var(--size-px-7);
+  }
+
+  .title {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .text {
+    margin: var(--size-px-2) 0 0;
+    color: var(--primary12);
+  }
+
+  .caption {
+    margin: var(--size-px-3) 0 0;
+    color: var(--primary12);
+  }
+
+  /* Viewport fallback: the key column from --md-n-above; 3 / gutter / 7 from --lg-n-above. */
+  @media (min-width: 768px) {
+    .entry,
+    .end {
+      grid-template-columns: minmax(0, 2fr) var(--timeline-rail) minmax(0, 6fr);
+      grid-template-areas: 'key rail body';
+    }
+
+    .dateKey {
+      padding-block-end: 0;
+      text-align: end;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .entry,
+    .end {
+      grid-template-columns: minmax(0, 3fr) var(--timeline-rail) minmax(0, 7fr) minmax(0, 2fr);
+      grid-template-areas: 'key rail body .';
+    }
+  }
+
+  /* Container (§5.10.2): dates above titles below 768 px; key 2/8 from 768; key 3, spine
+     in the gutter, entries 7 from 1024. */
+  @container timeline (width < 768px) {
+    .entry,
+    .end {
+      grid-template-columns: var(--timeline-rail) minmax(0, 1fr);
+      grid-template-areas:
+        'rail key'
+        'rail body';
+    }
+
+    .dateKey {
+      padding-block-end: var(--size-px-1);
+      text-align: start;
+    }
+  }
+
+  @container timeline (768px <= width < 1024px) {
+    .entry,
+    .end {
+      grid-template-columns: minmax(0, 2fr) var(--timeline-rail) minmax(0, 6fr);
+      grid-template-areas: 'key rail body';
+    }
+
+    .dateKey {
+      padding-block-end: 0;
+      text-align: end;
+    }
+  }
+
+  @container timeline (width >= 1024px) {
+    .entry,
+    .end {
+      grid-template-columns: minmax(0, 3fr) var(--timeline-rail) minmax(0, 7fr) minmax(0, 2fr);
+      grid-template-areas: 'key rail body .';
+    }
+
+    .dateKey {
+      padding-block-end: 0;
+      text-align: end;
+    }
+  }
+}
+
+@layer variants {
+  /* Trail: origin at the first entry, terminal at the last (past it when ongoing). */
+  .trail .entry:first-child .markerOrigin {
+    display: block;
+  }
+
+  .trail .entry:first-child .markerWaypoint {
+    display: none;
+  }
+
+  .trail .entry:last-child .markerTerminal {
+    display: block;
+  }
+
+  .trail .entry:last-child .markerWaypoint,
+  .trail .entry:last-child .markerOrigin {
+    display: none;
+  }
+
+  .trail .entry:last-child .spineBox {
+    display: none;
+  }
+
+  .ongoing .end .rail {
+    padding-block-start: 0;
+  }
+
+  /* Date block: a fixed key column at every width, no spine. */
+  .dateBlock .rail {
+    display: none;
+  }
+
+  .dateBlock .entry {
+    grid-template-columns: var(--size-px-9) minmax(0, 1fr);
+    grid-template-areas: 'key body';
+  }
+
+  .dateBlock .dateKey {
+    padding-block-end: 0;
+    text-align: start;
+  }
+
+  .dateStack {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    color: var(--primary12);
+  }
+
+  .dateMonth,
+  .dateDay,
+  .dateWeekday {
+    color: var(--primary12);
+  }
+
+  /*
+   * Agenda: date head → scope caption → sessions, each led by the »
+   * marker. Rhythm: marker → 24 → title → 40 → description → 56 → next.
+   */
+  .day + .day {
+    margin-block-start: var(--size-px-8-5);
+  }
+
+  .dateHead {
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  .scope {
+    margin: var(--size-px-2) 0 var(--size-px-5);
+    color: var(--primary12);
+  }
+
+  .agenda .list {
+    display: grid;
+    gap: var(--size-px-8-5);
+  }
+
+  .session {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--fgd-size-icon-block) minmax(0, 1fr);
+    column-gap: var(--size-px-5);
+    align-items: start;
+  }
+
+  .sessionMarker {
+    display: block;
+    inline-size: var(--fgd-size-icon-block);
+    block-size: var(--fgd-size-icon-block);
+    overflow: visible;
+    fill: none;
+    stroke: var(--role-accent);
+    stroke-width: var(--border-size-2);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .sessionBody {
+    min-inline-size: 0;
+    max-inline-size: var(--fgd-measure-reading);
+  }
+
+  .sessionTitle {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .meta {
+    margin: var(--size-px-1) 0 0;
+    color: var(--primary12);
+  }
+
+  .description {
+    margin: var(--size-px-7-5) 0 0;
+    color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* Current: the solid "now" dot alone; its dated label says the same in words [D58]. */
+  .current .markerCurrent {
+    display: block;
+  }
+
+  .current .markerOrigin,
+  .current .markerWaypoint,
+  .current .markerTerminal {
+    display: none;
+  }
+
+  /* Past and planned keep their waypoint X (or origin / terminal); words tell them apart. */
+  .past .markerCurrent,
+  .planned .markerCurrent {
+    display: none;
+  }
+
+  /* A marker set by the `marker` prop is the only shape rendered. */
+  .marker .markerFixed {
+    display: block;
+  }
+
+  /* A linked entry's ring sits around the entry, keyboard only [D45]. */
+  .entry .titleLink:focus-visible {
+    outline: none;
+  }
+
+  .entry:has(.titleLink:focus-visible) {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Entries never split; the date column prints left; every marker prints black. */
+    .entry,
+    .end {
+      grid-template-columns: minmax(0, 2fr) var(--timeline-rail) minmax(0, 6fr);
+      grid-template-areas: 'key rail body';
+      break-inside: avoid;
+    }
+
+    .dateKey {
+      padding-block-end: 0;
+      text-align: end;
+    }
+
+    .dateBlock .entry {
+      grid-template-columns: var(--size-px-9) minmax(0, 1fr);
+      grid-template-areas: 'key body';
+    }
+
+    /* The spine prints like the trail: 0.75 pt with 3 / 2.5 pt dashes [D142]. */
+    .spine {
+      stroke-width: var(--fgd-print-trail-stroke);
+      stroke-dasharray: var(--fgd-print-trail-dash) var(--fgd-print-trail-gap);
+      stroke-linecap: butt;
+    }
+
+    .dateHead {
+      break-after: avoid;
+    }
+
+    .session {
+      break-inside: avoid;
+    }
+  }
+}

package/data/chart/Chart.d.ts

@@ -0,0 +1,135 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type SequentialStep, type SeriesSlot } from '../../utils/seriesPatterns';
+export type { SeriesSlot, SequentialStep };
+export declare const chart: (props?: ({
+    kind?: "area" | "line" | "column" | "bar" | null | undefined;
+    oneInk?: 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 ChartVariants = VariantProps<typeof chart>;
+/** The chart's structural build. */
+export type ChartKind = NonNullable<ChartVariants['kind']>;
+/** One series: a numeric field of the rows, drawn in one pattern slot. */
+export interface ChartSeries<Key extends string = string> {
+    /** The row field holding this series' values. */
+    key: Key;
+    /** The series name: direct label, legend entry, tooltip and table column head. */
+    name: string;
+    /**
+     * The pattern slot (§8.7): 1 solid, 2 hatch 45°, 3 dot screen, 4 hatch
+     * 0°, 5 crossed hatch, 6 outline ("Other", always the remainder).
+     * Default: the series' position, so the first series is the emphasis
+     * series. A series keeps its slot on screen, in print and in the legend.
+     */
+    slot?: SeriesSlot;
+}
+/** A sequential encoding: each row's step, 1–5, drawn as a stepped fill (§8.7). */
+export interface ChartSteps<Key extends string = string> {
+    /** The row field holding the step, an integer from 1 to 5. */
+    key: Key;
+    /** The step's name, for the tooltip and the data-table column head. */
+    name: string;
+    /** End labels of the stepped legend, e.g. `['0/8', '8/8 planted']`. */
+    labels?: readonly [React.ReactNode, React.ReactNode];
+}
+type FieldKey<Row> = Extract<keyof Row, string>;
+/** Props for Chart: `div` props plus the data, the encoding and the figure text. */
+export type ChartProps<Row extends object = Record<string, unknown>> = Omit<React.ComponentPropsWithRef<'div'>, 'children'> & {
+    /**
+     * `bar` (default): horizontal bars, labels left, values at the bar ends,
+     * the form preferred on mobile. `column`: horizontal bars below 1024 px of
+     * the container and in print, columns from 1024 px. `line`: lines told
+     * apart by point markers (● ○ ■ □ ▲), never by dashes. `area`: stacked
+     * areas; several series always stack, because patterns never overlap.
+     */
+    kind?: ChartVariants['kind'];
+    /** The rows, one per category, in display order. */
+    data: readonly Row[];
+    /** The row field naming each category (bar label, column or time tick). */
+    categoryKey: FieldKey<Row>;
+    /** Head of the category column in the data table. Default "Category". */
+    categoryLabel?: string;
+    /**
+     * The series, in the semantic order: at most 4 (6 at the hard limit;
+     * beyond that, small multiples). Extra series are not drawn.
+     */
+    series: readonly ChartSeries<FieldKey<Row>>[];
+    /** The figure caption, which is the chart's title: say what to notice. */
+    caption: React.ReactNode;
+    /** The figure label, e.g. "Fig. 3", on its own line above the caption. */
+    figureLabel?: React.ReactNode;
+    /** Source and method notes, e.g. "Source: Trail counters, 2026." */
+    source?: React.ReactNode;
+    /** Value axis title with its units, e.g. "Visitors (thousands)". */
+    valueLabel?: string;
+    /**
+     * Formats every value: labels, ticks, tooltip and table. Default: grouped
+     * digits (`toLocaleString('en-US')`).
+     */
+    formatValue?: (value: number) => string;
+    /** Stacks bar and column series into one bar per category. Area series always stack. */
+    stacked?: boolean;
+    /**
+     * Single highlight: this series takes slot 1 and every other series
+     * slot 6 (outline), the preferred form for "one against the rest".
+     */
+    highlight?: FieldKey<Row>;
+    /**
+     * A sequential encoding for a single-series bar or column chart: each bar
+     * takes its row's step fill (secondary 4 / 6 / 8 / 11 / 12 on screen), and
+     * its print pattern as a print-only layer.
+     */
+    steps?: ChartSteps<FieldKey<Row>>;
+    /**
+     * Direct labels (`LabelList`): values at bar ends, series names and last
+     * values at line ends, names inside areas. Default `true`.
+     */
+    labels?: boolean;
+    /**
+     * The custom legend above the chart (beside it from 1024 px), with 16 px
+     * swatches showing the fill drawn. Default: shown for grouped or stacked
+     * bars with more than one series, where direct labels cannot name them.
+     */
+    legend?: boolean;
+    /**
+     * Plot height in px on screen. Default: bars from their rows (16 px bars),
+     * other charts 320.
+     */
+    height?: number;
+    /** Plot height in px in print. Default: the screen height. */
+    printHeight?: number;
+    /**
+     * Forces one ink: every slot in --primary12 and sequential cells as
+     * patterns. Not needed for the ground: the scope already draws one ink
+     * everywhere but a light base (`paper`, `white`) or a nested `white`
+     * plate (§8.7). Default `false`.
+     */
+    oneInk?: ChartVariants['oneInk'];
+    /**
+     * Primary Radix scale: even slots, slot 6, edges, axes and labels. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ChartVariants['primary'];
+    /**
+     * Secondary Radix scale: odd slots and sequential steps. Keep step 11 at
+     * 3:1 on the ground (§2 pairing matrix) [D128]. Never defaulted.
+     */
+    secondary?: ChartVariants['secondary'];
+    /** The data-table trigger label. Default "Show Data Table". */
+    tableLabel?: React.ReactNode;
+    /** The trigger label while the table is open. Default "Hide Data Table". */
+    tableOpenLabel?: React.ReactNode;
+};
+/**
+ * A chart figure (§8.7) built with Recharts [D167]. Categories are told
+ * apart by the `pattern-series` slots, on screen as in print: odd slots in
+ * --secondary11, even in --primary12, slot 1 solid, slot 6 outline, every
+ * shape edged in --border-size-1 --primary12 [D125]. Values are labelled
+ * directly; the tooltip and the keyboard accessibility layer repeat them;
+ * the "Show Data Table" Collapsible holds them all. The chart follows its
+ * container's width on screen and prints at a fixed 174 mm, animation off.
+ */
+export declare function Chart<Row extends object = Record<string, unknown>>(props: ChartProps<Row>): React.JSX.Element;
+//# sourceMappingURL=Chart.d.ts.map

package/data/chart/Chart.d.ts.map

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