@fairgarden/design 0.1.0-alpha.0

package/components/Switch/Switch.js

@@ -0,0 +1,82 @@
+'use client';
+import * as React from 'react';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './switch.module.css';
+/*
+ * Switch (§10.9).
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: switch.module.css; CVA function `switchRoot` (`switch` is a
+ *   reserved word).
+ * - Axes: `kind` → row | inline (label left, switch right, hairline row
+ *   rule; switch then label) [D155]; `primary`, `secondary` → scales
+ *   module classes.
+ * - Compound variants: none.
+ * - Defaults: kind row; color axes none [D133].
+ * - Color fallback: inherits the scope; its secondary drives the on state
+ *   through the --role-select aliases.
+ * - States: data-checked → track fill --role-select, edge --ds-stroke-3
+ *   --role-select-edge, thumb a --role-select-mark disc at the end;
+ *   :hover (not disabled, read-only or busy) [D181] → off track fill
+ *   --role-soft-hover (--primary3 where soft fills apply), on track fill
+ *   --role-select-hover, edges and thumb unchanged, label the bare-text
+ *   underline; :focus-visible on the track → ring; data-disabled →
+ *   dotted track, --role-muted ring; data-readonly → rest roles, no hover;
+ *   aria-busy (from the consumer, as on Button) → state word "Saving…",
+ *   read-only (inert), rest roles.
+ * - Parts: base (the row, a <label>), track (Switch.Root), thumb, label,
+ *   state, description, and edge / edgeLine (the disabled dotted track).
+ * - Scope: none.
+ * - Container: none; inherits its context. A settings list's wrapper, not
+ *   the Switch, is the `settings-list` container [D163].
+ */
+export const switchRoot = cva(styles.base, {
+    variants: {
+        kind: {
+            row: styles.row,
+            inline: styles.inline,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'row',
+    },
+});
+const defaultStateLabels = { on: 'On', off: 'Off' };
+/**
+ * A Base UI Switch for a setting that takes effect the moment it flips.
+ * Off → on changes position, thumb shape (ring → disc), edge weight and
+ * fill, so state is never fill alone [D15]. While the change is saving,
+ * pass `aria-busy`: the state word reads "Saving…" and the switch is
+ * inert; on failure revert `checked` and explain in a toast (§10.17).
+ */
+export function Switch(props) {
+    const { kind, primary, secondary, className, children, description, stateLabels = defaultStateLabels, busyLabel = 'Saving…', checked: checkedProp, defaultChecked, onCheckedChange, readOnly, ...rest } = props;
+    const scope = useScopeAttributes();
+    const busy = rest['aria-busy'] === true || rest['aria-busy'] === 'true';
+    // The state word needs the value, so the switch is always controlled
+    // underneath; an uncontrolled caller keeps `defaultChecked` semantics.
+    const [uncontrolled, setUncontrolled] = React.useState(defaultChecked ?? false);
+    const isControlled = checkedProp !== undefined;
+    const checked = isControlled ? checkedProp : uncontrolled;
+    const handleCheckedChange = (next, details) => {
+        onCheckedChange?.(next, details);
+        if (!isControlled && !details.isCanceled)
+            setUncontrolled(next);
+    };
+    const word = busy ? busyLabel : checked ? stateLabels.on : stateLabels.off;
+    return (React.createElement("label", { ...scope, className: switchRoot({ kind, primary, secondary, className }) },
+        children == null ? null : React.createElement("span", { className: styles.label }, children),
+        React.createElement("span", { className: styles.state, "aria-hidden": "true" }, word),
+        React.createElement(BaseSwitch.Root, { ...rest, checked: checked, onCheckedChange: handleCheckedChange, readOnly: readOnly || busy, className: styles.track },
+            React.createElement(BaseSwitch.Thumb, { className: styles.thumb }),
+            React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+                React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" }))),
+        description == null ? null : (React.createElement("span", { className: styles.description }, description))));
+}
+//# sourceMappingURL=Switch.js.map

package/components/Switch/Switch.js.map

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

package/components/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Switch';
+//# sourceMappingURL=index.d.ts.map

package/components/Switch/index.d.ts.map

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

package/components/Switch/index.js

@@ -0,0 +1,2 @@
+export * from './Switch';
+//# sourceMappingURL=index.js.map

package/components/Switch/index.js.map

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

package/components/Switch/switch.module.css

@@ -0,0 +1,285 @@
+/*
+ * Switch (§10.9). CVA function `switchRoot`. The root `base` is the row, a
+ * <label> wrapping Switch.Root (`track`), so the whole row is the hit
+ * target; the row reads the track's Base UI attributes through :has() and
+ * writes no state of its own. Parts: base, track, thumb, label, state (the
+ * "On" / "Off" word), description, and edge / edgeLine, the SVG that draws
+ * the disabled `line-dotted-fine` track as true dots [D36, D68].
+ *
+ * Colors are role variables only. Local custom properties carry dimensions:
+ *   --switch-edge         track edge width (2 off, 3 on)
+ *   --switch-edge-radius  radius the disabled dotted edge follows
+ *   --switch-travel       thumb travel from start to end
+ * The first grid row is one label line (1lh), so the track and the state
+ * word sit on the label's first line however far a long label wraps.
+ */
+
+/* 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. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.state {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    position: relative; /* holds Base UI's hidden input */
+    display: grid;
+    grid-template-rows: 1lh auto auto;
+    align-items: start;
+    align-content: center;
+    box-sizing: border-box;
+    min-block-size: var(--ds-size-hit);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .description {
+    grid-area: description;
+    margin-block-start: var(--size-px-1);
+  }
+
+  .state {
+    grid-area: state;
+    align-self: center;
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* The track: --ds-size-hit × --size-px-5, --radius-round, a --border-size-2 --primary12 edge. */
+  .track {
+    --switch-edge: var(--border-size-2);
+    --switch-edge-radius: calc(var(--size-px-5) / 2);
+    --switch-travel: calc(var(--ds-size-hit) - var(--size-px-3) - 2 * var(--size-px-1));
+
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--size-px-5);
+    border: var(--switch-edge) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background: none;
+  }
+
+  /*
+   * The thumb: --size-px-3 inset --size-px-1 from the track's outer edge
+   * [D40]. Off, a hollow --border-size-2 --primary12 ring at the start.
+   * Its offsets subtract the edge, so edge steps never move it.
+   */
+  .thumb {
+    position: absolute;
+    inset-block-start: calc(var(--size-px-1) - var(--switch-edge));
+    inset-inline-start: calc(var(--size-px-1) - var(--switch-edge));
+    display: block;
+    box-sizing: border-box;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-round);
+    background: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--ds-dot-fine) / 2);
+    inset-inline-start: calc(var(--ds-dot-fine) / 2);
+    inline-size: calc(100% - var(--ds-dot-fine));
+    block-size: calc(100% - var(--ds-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--switch-edge-radius) - var(--ds-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /* Travel and hover at --ds-duration-quick with --ease-out-3; instant under reduced motion [D181]. */
+  @media (prefers-reduced-motion: no-preference) {
+    .track,
+    .thumb {
+      transition-property: inset-inline-start, border-color, background-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .label {
+      transition-property: text-decoration-color;
+      transition-duration: var(--ds-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Row: label left, state word and switch right, a --role-hairline rule under the row. */
+  .row {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-areas:
+      'label state track'
+      'label . .'
+      'description . .';
+    padding-block: var(--size-px-2);
+    border-block-end: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  .row .state {
+    margin-inline: var(--ds-space-12) var(--size-px-2);
+  }
+
+  /* Inline: switch, state word (--size-px-2 from the track), then label. */
+  .inline {
+    grid-template-columns: auto auto minmax(0, 1fr);
+    grid-template-areas:
+      'track state label'
+      '. . label'
+      '. . description';
+  }
+
+  .inline .state {
+    margin-inline: var(--size-px-2) var(--ds-space-12);
+  }
+}
+
+@layer states {
+  /* On: --role-select fill, a --ds-stroke-3 --role-select-edge, a solid --role-select-mark disc at the end (§10.1). */
+  .track[data-checked] {
+    --switch-edge: var(--ds-stroke-3);
+
+    border-color: var(--role-select-edge);
+    background-color: var(--role-select);
+  }
+
+  .thumb[data-checked] {
+    inset-inline-start: calc(var(--size-px-1) - var(--switch-edge) + var(--switch-travel));
+    border-color: var(--role-select-mark);
+    background-color: var(--role-select-mark);
+  }
+
+  /*
+   * Hover (not disabled, read-only or busy) [D181]: edges and thumb never
+   * change and nothing lifts or grows. An off track takes the outline
+   * hover, a --primary3 fill (--role-soft-hover: none where soft fills
+   * drop); an on track moves its fill to --role-select-hover. The label
+   * takes the bare-text underline.
+   */
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .track {
+    background-color: var(--role-soft-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .track[data-checked] {
+    background-color: var(--role-select-hover);
+  }
+
+  .base:not(:has([data-disabled], [data-readonly], [aria-busy='true'])):hover .label {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset outside the track, keyboard only [D45]. */
+  .track:focus-visible {
+    outline: var(--ds-focus-width) solid var(--primary12);
+    outline-offset: var(--ds-focus-offset);
+  }
+
+  /* Disabled: dotted track in --role-rule (--primary12 on one-ink grounds [D85]), --role-muted ring. Never dimmed [D16]. */
+  .track[data-disabled] {
+    --switch-edge: 0px;
+
+    border-style: none;
+    background: none;
+  }
+
+  .track[data-disabled] > .edge {
+    display: block;
+  }
+
+  .thumb[data-disabled] {
+    border-color: var(--role-muted);
+    background: none;
+  }
+
+  .base:has(.track[data-disabled]) .label,
+  .base:has(.track[data-disabled]) .state {
+    color: var(--role-muted);
+  }
+
+  /* Busy: rest roles, inert (read-only), "Saving…" in the state word [D84]. */
+  .track[aria-busy='true'] {
+    cursor: progress;
+  }
+
+  /* Forced colors: the on thumb stays a solid disc, so shape still carries the state. */
+  @media (forced-colors: active) {
+    .thumb[data-checked] {
+      forced-color-adjust: none;
+      border-color: CanvasText;
+      background-color: CanvasText;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* The graphic is hidden; the row prints as "Label: On" (§10.9). */
+    .base {
+      display: block;
+    }
+
+    .track {
+      display: none;
+    }
+
+    .label::after {
+      content: ':';
+    }
+
+    .state {
+      margin-inline: var(--size-px-1) 0;
+      font: inherit;
+      text-transform: none;
+      letter-spacing: normal;
+    }
+
+    .description {
+      display: block;
+    }
+
+    /* Disabled controls do not print (§10.1). */
+    .base:has(.track[data-disabled]) {
+      display: none;
+    }
+  }
+}

package/components/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` × `--ds-space-12` cell padding, rows at least
+     * 32 px, `--role-rule` row rules. `default`: `--ds-space-12` ×
+     * `--size-px-3`. Never defaulted: omitted, the table follows its scope's
+     * density (a Ground's `density`, through the `--ds-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 `--ds-stroke-3` 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/components/Table/Table.d.ts.map

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