@fairgarden/design 0.1.0-alpha.0

package/components/SectionHeader/SectionHeader.js

@@ -0,0 +1,141 @@
+'use client';
+import * as React from 'react';
+import { Separator as BaseSeparator } from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../Icon';
+import { cx } from '../../utils/className';
+import { printUrl } from '../../utils/printUrl';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import typeRoles from '../../utils/type.module.css';
+import styles from './section-header.module.css';
+/*
+ * Section Header & Eyebrow (§11.8): opens every band or module in a fixed
+ * order: what kind of thing this is (eyebrow), what it says (heading), why
+ * it matters (lede), where to go next ("See all").
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: section-header.module.css; CVA function `sectionHeader`.
+ * - Axes: `kind` → editorial | trailed | scene | anchored | technical |
+ *   topic → same-named classes (`trailed` is the trail kicker, so it does
+ *   not clash with the `trail` part); `level` → band | module → band,
+ *   module (the heading's element, type role and ink); `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind editorial, level band; color axes: none.
+ * - Color fallback: inherits the scope.
+ * - States: only `seeAll`: :hover → the arrow-link hover [D181] (label
+ *   --role-link-hover, the arrow at the next tier's weight, the rest
+ *   underline kept); :focus-visible → the ring. A topic tag keeps its own
+ *   module (§10).
+ * - Parts: base, eyebrow, eyebrowRule (Base UI Separator,
+ *   data-orientation="horizontal"), trail, kicker, heading, lede, seeAll,
+ *   art, number, topicTag; plus kickerRow, marker, seeAllLabel, seeAllArrow,
+ *   printUrl and action (the scene pill or the anchored action).
+ * - Scope: none.
+ * - Container: none; inherits its context. "See all" joins the heading row
+ *   from --lg-n-above, a page-frame rule on viewport media [D163].
+ */
+export const sectionHeader = cva(styles.base, {
+    variants: {
+        kind: {
+            editorial: styles.editorial,
+            trailed: styles.trailed,
+            scene: styles.scene,
+            anchored: styles.anchored,
+            technical: styles.technical,
+            topic: styles.topic,
+        },
+        level: {
+            band: styles.band,
+            module: styles.module,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'editorial',
+        level: 'band',
+    },
+});
+/**
+ * The entry-left `ornament-trail` (§4.7.1): an origin circle, a freehand
+ * rise with one loop, then a level run stopping `--ds-space-halo` before the
+ * kicker. Fixed art, 120 × 56 px; decorative.
+ */
+function TrailEntry() {
+    return (React.createElement("svg", { className: styles.trail, width: "120", height: "56", viewBox: "0 0 120 56", "aria-hidden": "true", focusable: "false" },
+        React.createElement("circle", { className: styles.marker, cx: "5", cy: "46", r: "2.5" }),
+        React.createElement("path", { className: styles.trailPath, d: "M12 45.2C18 43 22 38 26 31C31 22 35 9 43 8C51 7 53 20 46 27C39 34 30 29 33 20C36 12 50 14 60 21C68 26 76 28 86 28L120 28", vectorEffect: "non-scaling-stroke" })));
+}
+/** The trail resumed `--ds-space-halo` after the kicker, ending in an open `marker-terminal`. */
+function TrailTail() {
+    return (React.createElement("svg", { className: styles.trail, width: "40", height: "56", viewBox: "0 0 40 56", "aria-hidden": "true", focusable: "false" },
+        React.createElement("path", { className: styles.trailPath, d: "M0 28C8 28 14 30 22 29", vectorEffect: "non-scaling-stroke" }),
+        React.createElement("path", { className: styles.marker, d: "M26 26 32 29 26 32Z", vectorEffect: "non-scaling-stroke" })));
+}
+/** "See all →": `type-label` caps, underlined at rest in `--role-accent`, with a `--ds-size-hit` target. */
+function SeeAll({ href, label, render }) {
+    const url = printUrl(href);
+    return useRender({
+        defaultTagName: 'a',
+        render,
+        props: {
+            href,
+            className: cx(styles.seeAll, iconHost),
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: styles.seeAllLabel }, label ?? 'See all'),
+                React.createElement(Icon, { name: "arrow_forward", weight: "interactive", className: styles.seeAllArrow }),
+                url !== null ? React.createElement("span", { className: styles.printUrl },
+                    "(",
+                    url,
+                    ")") : null)),
+        },
+    });
+}
+/**
+ * The opener of a band or module. Keep the order eyebrow → heading → lede →
+ * action; pick the eyebrow rule or the trail, never both; left-align over
+ * reading content and centre only scene openers. On the night band and in
+ * fields every text resolves to `--primary12`; the eyebrow is never the
+ * accent. Prints with its rules, never at the foot of a page.
+ */
+export function SectionHeader(props) {
+    const { render, ref, className, kind, level, primary, secondary, heading, headingId, lede, seeAll, eyebrow, kicker, art, number, topic, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const resolvedKind = kind ?? 'editorial';
+    const HeadingTag = level === 'module' ? 'h3' : 'h2';
+    const content = (React.createElement(React.Fragment, null,
+        resolvedKind === 'technical' ? (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: styles.numberRow },
+                React.createElement("span", { className: cx(styles.number, typeRoles.typeData) }, number),
+                React.createElement("span", { className: cx(styles.eyebrow, typeRoles.typeLabel) }, eyebrow)),
+            React.createElement(BaseSeparator, { orientation: "horizontal", className: styles.eyebrowRule }))) : null,
+        resolvedKind === 'editorial' && eyebrow != null ? (React.createElement(React.Fragment, null,
+            React.createElement("p", { className: cx(styles.eyebrow, typeRoles.typeEyebrow) }, eyebrow),
+            React.createElement(BaseSeparator, { orientation: "horizontal", className: styles.eyebrowRule }))) : null,
+        resolvedKind === 'trailed' ? (React.createElement("div", { className: styles.kickerRow },
+            React.createElement(TrailEntry, null),
+            React.createElement("p", { className: cx(styles.kicker, typeRoles.typeKicker) }, kicker),
+            React.createElement(TrailTail, null))) : null,
+        resolvedKind === 'anchored' ? React.createElement("div", { className: styles.art }, art) : null,
+        resolvedKind === 'topic' ? React.createElement("div", { className: styles.topicTag }, topic) : null,
+        React.createElement(HeadingTag, { id: headingId, className: cx(styles.heading, level === 'module' ? typeRoles.typeItemhead : typeRoles.typeH2) }, heading),
+        lede != null ? React.createElement("p", { className: cx(styles.lede, typeRoles.typeLead) }, lede) : null,
+        seeAll != null ? React.createElement(SeeAll, { ...seeAll }) : null,
+        children != null ? React.createElement("div", { className: styles.action }, children) : null));
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: sectionHeader({ kind: resolvedKind, level, primary, secondary, className }),
+            children: content,
+        }, rest),
+    });
+}
+//# sourceMappingURL=SectionHeader.js.map

package/components/SectionHeader/SectionHeader.js.map

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

package/components/SectionHeader/index.d.ts

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

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

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

package/components/SectionHeader/index.js

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

package/components/SectionHeader/index.js.map

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

package/components/SectionHeader/section-header.module.css

@@ -0,0 +1,319 @@
+/*
+ * Section Header & Eyebrow (§11.8). CVA function `sectionHeader` in
+ * SectionHeader.tsx. Parts: base, eyebrow, eyebrowRule (the Separator),
+ * numberRow and number (technical), kickerRow, kicker, trail (with
+ * trailPath and marker), art, topicTag, heading, lede, seeAll (with
+ * seeAllLabel, seeAllArrow and printUrl), action. Type roles come by
+ * composition or from type.module.css in the component; colors follow the
+ * §11.8 Color roles table through role variables only.
+ *
+ * Gaps are visual gaps [D74]: text parts trim their half-leading where the
+ * browser supports `text-box`, so eyebrow → rule → content measure 14 / 19
+ * (--ds-space-eyebrow-rule / --ds-space-eyebrow-content) [D100].
+ */
+
+/* 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. */
+.eyebrowRule {
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.trailPath {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+.seeAll {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.printUrl {
+  composes: typeUrl from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* One column of named rows; "See all" joins the heading row from --lg-n-above. */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-areas:
+      'top'
+      'rule'
+      'heading'
+      'lede'
+      'seeAll'
+      'action';
+    justify-items: start;
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .eyebrow,
+  .numberRow,
+  .kickerRow,
+  .art,
+  .topicTag {
+    grid-area: top;
+  }
+
+  .eyebrow {
+    margin: 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  /* Eyebrow baseline → hairline 14, hairline → first cap 19; margin to margin, never full-bleed. */
+  .eyebrowRule {
+    grid-area: rule;
+    justify-self: stretch;
+    margin-block: var(--ds-space-eyebrow-rule) var(--ds-space-eyebrow-content);
+    border-width: 0;
+    border-block-start-width: var(--border-size-1);
+    border-color: var(--role-hairline);
+  }
+
+  .heading {
+    grid-area: heading;
+    margin: 0;
+    color: var(--role-heading);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .lede {
+    grid-area: lede;
+    max-inline-size: var(--ds-measure-reading);
+    margin: var(--size-px-5) 0 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .action {
+    grid-area: action;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--ds-space-12);
+    margin-block-start: var(--size-px-5);
+  }
+
+  /* Technical: the mono number and the caps label with a colon. */
+  .numberRow {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--ds-space-12);
+    margin: 0;
+    color: var(--primary12);
+    text-box: trim-both cap alphabetic;
+  }
+
+  .number {
+    color: var(--primary12);
+  }
+
+  /* Trail kicker: the kicker threaded by the trail, --ds-space-halo either side. */
+  .kickerRow {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-space-halo);
+    max-inline-size: 100%;
+    margin-block-end: var(--ds-space-56);
+  }
+
+  .kicker {
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--role-heading);
+  }
+
+  /* ornament-trail (§4.7.1): line-dashed at --border-size-2 in --role-accent; fixed art. */
+  .trail {
+    display: block;
+    flex: none;
+    overflow: visible;
+    color: var(--role-accent);
+    fill: none;
+    stroke: currentColor;
+  }
+
+  .marker {
+    fill: none;
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-dasharray: none;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Anchored: the sticker at --ds-size-art-s; its halo touches the cap tops, no gap. */
+  .art {
+    inline-size: var(--ds-size-art-s);
+  }
+
+  .art > * {
+    display: block;
+    max-inline-size: 100%;
+    block-size: auto;
+  }
+
+  .topicTag {
+    margin-block-end: var(--size-px-3);
+  }
+
+  /* "See all →": a standalone link, underlined at rest, --ds-size-hit tall. */
+  .seeAll {
+    grid-area: seeAll;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: var(--ds-size-hit);
+    margin-block-start: var(--size-px-5);
+    border-radius: var(--radius-1);
+    color: var(--primary12);
+    text-decoration: none;
+  }
+
+  .seeAllLabel {
+    text-decoration-line: underline;
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--ds-stroke-1-5);
+    text-underline-offset: 0.15em;
+    text-decoration-skip-ink: none;
+  }
+
+  .seeAllArrow {
+    color: var(--role-glyph);
+  }
+
+  .printUrl {
+    display: none;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .seeAllLabel {
+      transition: color var(--ds-duration-quick) var(--ease-out-3);
+    }
+  }
+
+  /* From --lg-n-above "See all" sits at the heading row's end, baseline-aligned. */
+  @media (min-width: 1024px) {
+    .base {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'top top'
+        'rule rule'
+        'heading seeAll'
+        'lede lede'
+        'action action';
+    }
+
+    .heading {
+      align-self: last baseline;
+    }
+
+    .seeAll {
+      align-self: last baseline;
+      margin-block-start: 0;
+      margin-inline-start: var(--ds-space-40);
+    }
+  }
+}
+
+@layer variants {
+  /* Band level: the section head in --role-heading; module level: the item head in --primary12 [D60]. */
+  .band .heading {
+    color: var(--role-heading);
+  }
+
+  .module .heading {
+    color: var(--primary12);
+  }
+
+  /* Editorial, anchored and topic openers sit left over reading content. */
+  .editorial,
+  .anchored,
+  .topic {
+    justify-items: start;
+    text-align: start;
+  }
+
+  /* Trail kicker: kicker row left-weighted by its trail, the heading centred below. */
+  .trailed {
+    justify-items: center;
+    text-align: center;
+  }
+
+  /* Scene opener: heading, lede and pill centred; headline at the centred measure (§5.4). */
+  .scene {
+    justify-items: center;
+    text-align: center;
+  }
+
+  .scene .heading {
+    max-inline-size: var(--size-content-2);
+  }
+
+  .trailed .lede,
+  .scene .lede {
+    margin-inline: auto;
+  }
+
+  .trailed .action,
+  .scene .action {
+    justify-content: center;
+  }
+
+  /* Technical: the label takes its colon. */
+  .technical .eyebrow::after {
+    content: ':';
+  }
+}
+
+@layer states {
+  /* Arrow-link hover [D181]: the label takes --role-link-hover, the arrow the
+     next tier's weight (Icon weight="interactive" in an iconHost); the rest
+     underline stays. Where the hover ink is --primary12 the underline
+     already carries it. */
+  .seeAll:hover .seeAllLabel {
+    color: var(--role-link-hover);
+  }
+
+  .seeAll:active .seeAllLabel {
+    text-decoration-color: var(--primary12);
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  .seeAll:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Kept with what follows; never ends a page (§11.8, §7.9.2). */
+    .base {
+      break-inside: avoid;
+      break-after: avoid;
+    }
+
+    /* The trail prints at 0.75 pt with a 3 / 2.5 pt dash; markers kept. */
+    .trailPath {
+      stroke-width: 0.75pt;
+      stroke-dasharray: 3pt 2.5pt;
+      stroke-linecap: butt;
+    }
+
+    /* "See all" prints as "Label (short URL)" (§7.6). */
+    .seeAll {
+      min-block-size: auto;
+    }
+
+    .seeAllArrow {
+      display: none;
+    }
+
+    .printUrl {
+      display: inline;
+    }
+  }
+}

package/components/Select/Select.d.ts

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import { Select as BaseSelect } from '@base-ui/react/select';
+import { type VariantProps } from 'class-variance-authority';
+export declare const select: (props?: ({
+    variant?: "outline" | "underline" | null | undefined;
+    plate?: 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 SelectVariants = VariantProps<typeof select>;
+/** One option: its value, its label (the words the trigger shows) and an optional swatch. */
+export type SelectOption<Value = string> = {
+    value: Value;
+    /** The option's words; with a swatch they name the color. */
+    label: string;
+    /**
+     * The product's color, supplied as data like a photograph (a CSS color
+     * string); drawn as a ringed disc before the label. Always name the color
+     * in `label`.
+     */
+    swatch?: string;
+    disabled?: boolean;
+};
+/** A titled group of options; groups are divided by the popup's separator. */
+export type SelectOptionGroup<Value = string> = {
+    /** The group label, set in `type-label` caps. */
+    label: string;
+    items: readonly SelectOption<Value>[];
+};
+type SelectItems<Value> = readonly SelectOption<Value>[] | readonly SelectOptionGroup<Value>[];
+type RootProps<Value> = Omit<BaseSelect.Root.Props<Value, false>, 'items' | 'children' | 'multiple'>;
+/** Props for Select: Base UI Select.Root props plus the options, variant and color axes. */
+export type SelectProps<Value = string> = RootProps<Value> & {
+    /**
+     * The options (or titled groups). Rendered as items unless `children`
+     * are given; always used to show the chosen option's label.
+     */
+    items?: SelectItems<Value>;
+    /** Custom list content (`SelectItem`, `SelectGroup`, `SelectSeparator`) instead of `items`. */
+    children?: React.ReactNode;
+    /** Shown in --role-muted while nothing is chosen; end it with "…". */
+    placeholder?: string;
+    /** Class names for the trigger (the root part), added after the module's own. */
+    className?: string;
+    /** Names the trigger when no visible label exists. Prefer a `FieldLabel`. */
+    'aria-label'?: string;
+    /**
+     * Primary Radix scale: trigger edge, value, chevron and focus ring. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: SelectVariants['primary'];
+    /**
+     * Secondary Radix scale: the underline variant's underline; the danger
+     * scale while invalid.
+     */
+    secondary?: SelectVariants['secondary'];
+} & ({
+    /**
+     * `outline` (default) is the boxed field; `underline` is the trigger
+     * over a --role-accent underline that hugs its content.
+     */
+    variant?: 'outline';
+    /** The trigger's face becomes a nested `white` scope; patterned grounds only (§10.1). */
+    plate?: boolean;
+} | {
+    variant: 'underline';
+    plate?: false;
+});
+/**
+ * A Base UI Select inside a `Field` (label it with
+ * `<FieldLabel nativeLabel={false}>`). The popup opens below the trigger,
+ * never on hover, and is never a sheet; use Combobox for long or
+ * searchable lists and Radio for 2–4 visible options.
+ */
+export declare function Select<Value = string>(props: SelectProps<Value>): React.JSX.Element;
+/** Props for SelectItem: Base UI Select.Item props plus an optional swatch. */
+export type SelectItemProps = Omit<BaseSelect.Item.Props, 'className'> & {
+    /** Extra class names, added after the module's own. */
+    className?: string;
+    /** The product's color (content) as a ringed disc before the label. */
+    swatch?: string;
+};
+/**
+ * One option: a `--ds-size-hit` row. Highlighted rows take the `--primary4`
+ * soft fill and the `--ds-stroke-3` start bar; the chosen row a leading ✓
+ * and `--font-weight-6` [D145].
+ */
+export declare function SelectItem(props: SelectItemProps): React.JSX.Element;
+/** Props for SelectGroup: Base UI Select.Group props plus its label. */
+export type SelectGroupProps = Omit<BaseSelect.Group.Props, 'className'> & {
+    /** The group label, in `type-label` caps and --role-muted. */
+    label: React.ReactNode;
+    className?: string;
+};
+/** A titled group of items. */
+export declare function SelectGroup(props: SelectGroupProps): React.JSX.Element;
+/** Props for SelectSeparator: Base UI Select.Separator props. */
+export type SelectSeparatorProps = Omit<BaseSelect.Separator.Props, 'className'> & {
+    className?: string;
+};
+/** The one popup group separator: `--border-size-1` in `--role-rule`. */
+export declare function SelectSeparator(props: SelectSeparatorProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Select.d.ts.map

package/components/Select/Select.d.ts.map

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