@fairgarden/design 0.1.0-0.canary.0

package/content/quote/Quote.js

@@ -0,0 +1,168 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Avatar } from '../../feedback/avatar';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './quote.module.css';
+/*
+ * Testimonial & Quote (§12.8): named testimonials, pull quotes, blockquotes
+ * and epigraphs. Composed from `figure` > `blockquote` + `figcaption`, with
+ * Avatar for the portrait; a pull quote that duplicates body text is an
+ * `aside` with `aria-hidden`. Never fabricate or anonymize attributions.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: quote.module.css; CVA function `quote`.
+ * - Axes: `kind` → band | framed | pull | block | epigraph; `duplicate`
+ *   (pull only) → `duplicate`; `primary`, `secondary` → scales module
+ *   classes.
+ * - Compound variants: none.
+ * - Defaults: none (`kind` is required); duplicate false; color axes: none.
+ * - Color fallback: inherits the scope, and passes both props to the Avatar.
+ * - States: static; a linked `source` is a Link (§9.3), which owns its
+ *   hover, focus and press states.
+ * - Parts: base, frame (the framed kind's border, on `base`), mark (the
+ *   open-quote glyph, framed only), text, rule (the pull quote's short
+ *   rule; the blockquote's left rule is `text`'s border), attribution, name,
+ *   role, portrait (Avatar Root, styled by §10.12), source.
+ * - Scope: none.
+ * - Container: none. The hanging pull quote and the 2-up framed
+ *   testimonials are page-grid placements on viewport media
+ *   (--lg-n-above), owned by the page template [D163].
+ */
+export const quote = cva(styles.base, {
+    variants: {
+        kind: {
+            band: styles.band,
+            framed: styles.framed,
+            pull: styles.pull,
+            block: styles.block,
+            epigraph: styles.epigraph,
+        },
+        duplicate: {
+            true: styles.duplicate,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        duplicate: false,
+    },
+});
+const QuoteContext = React.createContext({
+    kind: 'block',
+    primary: undefined,
+    secondary: undefined,
+});
+QuoteContext.displayName = 'QuoteContext';
+/**
+ * The quote: a `figure` holding `QuoteText` (the `blockquote`) and, for
+ * testimonials, a `QuoteAttribution` (`figcaption`) with `QuoteName`,
+ * `QuoteRole`, an optional `QuotePortrait` and an optional `QuoteSource`.
+ * Keep band and framed testimonials to 40 words; never put quotes in a
+ * carousel.
+ */
+export function Quote(props) {
+    const { render, ref, className, kind, duplicate, primary, secondary, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const isDuplicate = kind === 'pull' && duplicate === true;
+    const context = React.useMemo(() => ({ kind, primary: primary ?? undefined, secondary: secondary ?? undefined }), [kind, primary, secondary]);
+    const element = useRender({
+        defaultTagName: isDuplicate ? 'aside' : 'figure',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            ...(isDuplicate ? { 'aria-hidden': true } : null),
+            className: quote({ kind, duplicate: isDuplicate, primary, secondary, className }),
+            children: (React.createElement(React.Fragment, null,
+                kind === 'framed' ? (React.createElement("span", { className: styles.mark, "aria-hidden": "true" }, '“')) : null,
+                children)),
+        }, rest),
+    });
+    return React.createElement(QuoteContext.Provider, { value: context }, element);
+}
+/**
+ * The quoted words, a `blockquote` (pass `cite` for a source URL):
+ * `type-quote` for band, framed and pull; `type-body` behind the left rule
+ * for block; display bold italic for epigraph. Curly quotes only; pull
+ * quotes hang their punctuation. A pull quote closes with its short rule.
+ */
+export function QuoteText(props) {
+    const { render, ref, className, children, ...rest } = props;
+    const { kind } = React.useContext(QuoteContext);
+    return useRender({
+        defaultTagName: 'blockquote',
+        render,
+        ref,
+        props: mergeProps({
+            className: cx(kind === 'block' ? styles.textBody : styles.text, className),
+            children: (React.createElement(React.Fragment, null,
+                children,
+                kind === 'pull' ? React.createElement("span", { className: styles.rule, "aria-hidden": "true" }) : null)),
+        }, rest),
+    });
+}
+/**
+ * Who said it, `--size-px-5` below the quote: `QuotePortrait`, then
+ * `QuoteName` over `QuoteRole` (a line break, never a pipe), then an
+ * optional `QuoteSource`.
+ */
+export function QuoteAttribution(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'figcaption',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.attribution, className) }, rest),
+    });
+}
+/** The person's name: `type-label` caps in `--primary12`, on its own line. */
+export function QuoteName(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.name, className) }, rest),
+    });
+}
+/** Role or affiliation under the name: `type-caption` in `--primary12`. */
+export function QuoteRole(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.role, className) }, rest),
+    });
+}
+/**
+ * The portrait: an Avatar at 40 px (`md`) with its `--role-rule` ring,
+ * taking the quote's `primary` and `secondary` unless given its own. Compose
+ * `AvatarImage` (empty alt, since the name is adjacent) and
+ * `AvatarFallback` inside. Prints grayscale, at most 20 mm.
+ */
+export function QuotePortrait(props) {
+    const { size = 'md', primary, secondary, className, ...rest } = props;
+    const context = React.useContext(QuoteContext);
+    return (React.createElement(Avatar, { ...rest, size: size, primary: primary ?? context.primary, secondary: secondary ?? context.secondary, className: resolveClassName(className, (extra) => cx(styles.portrait, extra)) }));
+}
+/**
+ * The source title in a `cite` (`type-caption`, upright). Link it with a
+ * `Link` inside, which owns the `--role-accent` underline and its states.
+ */
+export function QuoteSource(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'cite',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.source, className) }, rest),
+    });
+}
+//# sourceMappingURL=Quote.js.map

package/content/quote/Quote.js.map

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

package/content/quote/index.d.ts

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

package/content/quote/index.d.ts.map

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

package/content/quote/index.js

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

package/content/quote/index.js.map

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

package/content/quote/quote.module.css

@@ -0,0 +1,184 @@
+/*
+ * Testimonial & Quote (§12.8). Parts: base (the figure, or the aside of a
+ * duplicate pull quote; the framed kind's `frame` is its border), mark (the
+ * framed open-quote glyph), text (`textBody` for the blockquote kind, which
+ * also carries its left rule), rule (the pull quote's short rule),
+ * attribution, name, role, portrait (an Avatar, styled by §10.12), source.
+ * Static, no container. Every ink is --primary12 on every ground: colors are
+ * role variables only, and local custom properties carry dimensions only.
+ */
+
+/* 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. */
+.text {
+  composes: typeQuote from '../../utils/type.module.css';
+}
+
+.textBody {
+  composes: typeBody from '../../utils/type.module.css';
+}
+
+.name {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.role {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.source {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .text,
+  .textBody {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .text > p,
+  .textBody > p {
+    margin: 0;
+  }
+
+  .text > p + p,
+  .textBody > p + p {
+    margin-block-start: var(--size-px-3);
+  }
+
+  /* The open-quote glyph: the display face's “ at 3 × the quote size, heavy, decorative. */
+  .mark {
+    display: block;
+    color: var(--primary12);
+    font-family: var(--fgd-font-display);
+    font-variation-settings: var(--fgd-font-display-settings);
+    font-size: calc(3 * var(--fgd-font-size-quote));
+    font-weight: var(--font-weight-9);
+    line-height: var(--fgd-leading-display);
+    block-size: 0.75em;
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* The pull quote's rule: --size-px-8 long, --border-size-1, --primary12. */
+  .rule {
+    display: block;
+    inline-size: var(--size-px-8);
+    margin-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--primary12);
+  }
+
+  /* Attribution: name over role (a line break, never a pipe), portrait beside them. */
+  .attribution {
+    display: grid;
+    justify-items: start;
+    margin-block-start: var(--size-px-5);
+    color: var(--primary12);
+  }
+
+  .attribution:has(> .portrait) {
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--size-px-2-5);
+    align-items: center;
+  }
+
+  .attribution > :not(.portrait) {
+    grid-column: -2 / -1;
+  }
+
+  .portrait {
+    grid-row: 1 / span 3;
+    align-self: start;
+  }
+
+  .name,
+  .role,
+  .source {
+    display: block;
+    color: var(--primary12);
+  }
+
+  .source {
+    font-style: normal;
+  }
+}
+
+@layer variants {
+  /* Band: centered and alone on its ground; quote within a comfortable measure. */
+  .band {
+    text-align: center;
+  }
+
+  .band .text {
+    max-inline-size: var(--size-content-2);
+    margin-inline: auto;
+  }
+
+  .band .attribution {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--size-px-2);
+  }
+
+  /* Framed: a --border-size-2 --primary12 outline, square corners, --size-px-7
+     padding; the glyph at the top start, the words indented one glyph width. */
+  .framed {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    column-gap: var(--size-px-2);
+    padding: var(--size-px-7);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-0);
+  }
+
+  .framed > .mark {
+    grid-row: 1 / span 2;
+  }
+
+  .framed > :not(.mark) {
+    grid-column: 2;
+  }
+
+  /* Pull: hanging punctuation [D32]; no attribution. */
+  .pull .text {
+    hanging-punctuation: first last;
+  }
+
+  /* Blockquote: type-body indented --size-px-5 behind a --border-size-2-25 left rule. */
+  .block .textBody {
+    padding-inline-start: var(--size-px-5);
+    border-inline-start: var(--border-size-2-25) solid var(--primary12);
+  }
+
+  /* Epigraph: display bold italic, no marks. */
+  .epigraph .text {
+    --type-weight: var(--font-weight-7);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The frame prints 1.5 pt through --border-size-2's print value; prose caps at the print measure. */
+    .base {
+      break-inside: avoid;
+    }
+
+    .text,
+    .textBody {
+      max-inline-size: var(--fgd-measure-print);
+    }
+
+    /* A pull quote that repeats body text is hidden in print [D174]. */
+    .duplicate {
+      display: none;
+    }
+  }
+}

package/content/timeline/Timeline.d.ts

@@ -0,0 +1,164 @@
+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';
+export declare const timeline: (props?: ({
+    kind?: "trail" | "agenda" | "date-block" | null | undefined;
+    ongoing?: 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;
+/** Entry state classes (unmanaged element): the stage of a milestone. */
+export declare const timelineEntry: (props?: ({
+    stage?: "current" | "past" | "planned" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TimelineVariants = VariantProps<typeof timeline>;
+/** The three timeline builds (§12.14). */
+export type TimelineKind = 'trail' | 'agenda' | 'date-block';
+/** A milestone's stage: past and planned keep the waypoint X (told apart by words); current is "now". */
+export type TimelineStage = 'past' | 'current' | 'planned';
+/** The §4.7 marker set drawn on the spine. */
+export type TimelineMarker = 'origin' | 'waypoint' | 'terminal' | 'current';
+/** Props for Timeline: `section` props, `render`, the kind, `ongoing` and the color axes. */
+export type TimelineProps = useRender.ComponentProps<'section'> & {
+    /**
+     * `trail` (default): a straight dashed spine with the §4.7 markers
+     * (origin, waypoints, terminal, "now"). `agenda`: date heads, a scope
+     * caption and sessions led by the » marker. `date-block`: a stacked
+     * date block (month / day / weekday) in a fixed key column, no spine.
+     */
+    kind?: TimelineKind;
+    /**
+     * The timeline continues: the last entry keeps a waypoint and the
+     * terminal marker sits past it. Default `false`.
+     */
+    ongoing?: boolean;
+    /**
+     * Primary Radix scale: markers, date keys, titles and text. Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: TimelineVariants['primary'];
+    /**
+     * Secondary Radix scale: the spine, the agenda's » markers
+     * (`--role-accent`), title-link underlines and the date heads on light
+     * grounds (`--role-heading`). Never defaulted.
+     */
+    secondary?: TimelineVariants['secondary'];
+};
+/**
+ * The timeline module: a `TimelineList` of `TimelineEntry`s (trail and
+ * date-block), or `TimelineDay`s holding a `TimelineDateHead`, a
+ * `TimelineScope` and a `TimelineList` of `TimelineSession`s (agenda). A
+ * `TimelineCaption` defines the current marker. Entries never alternate
+ * sides; the spine is always dashed [D174].
+ */
+export declare function Timeline(props: TimelineProps): React.JSX.Element;
+/** Props for TimelineList: `ol` props and `render`. */
+export type TimelineListProps = useRender.ComponentProps<'ol'>;
+/**
+ * The ordered entries (or an agenda day's sessions). On an ongoing trail it
+ * closes with the terminal marker past the last entry.
+ */
+export declare function TimelineList(props: TimelineListProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineEntry: list-item props, `render`, the stage, the date key and a marker override. */
+export type TimelineEntryProps = useRender.ComponentProps<'li'> & {
+    /**
+     * `planned` (default): waypoint X, and say "Planned" in the date key.
+     * `past`: waypoint X; the date (or "Past") carries it, never dimmed.
+     * `current`: the solid "now" dot, `aria-current="step"`, and its dated
+     * label ("Today, 22 Sep 2026") in words.
+     */
+    stage?: TimelineStage;
+    /**
+     * The date key: a `time` element (`type-data`), or a `TimelineDateStack`
+     * in the date-block kind. Above the title at base; a column left of the
+     * spine from 768 px of container.
+     */
+    date?: React.ReactNode;
+    /**
+     * Overrides the marker. By default the first entry draws the origin
+     * circle, the last the terminal triangle (unless the timeline is
+     * ongoing), the rest waypoint X's, and the current entry the "now" dot.
+     */
+    marker?: TimelineMarker;
+};
+/**
+ * One milestone: its date key, the spine with its marker, and the body
+ * (`TimelineTitle`, `TimelineText`). Entries never split across pages.
+ */
+export declare function TimelineEntry(props: TimelineEntryProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineTitle: heading props and `render` (default `<h3>`). */
+export type TimelineTitleProps = useRender.ComponentProps<'h3'>;
+/** The entry title: `type-itemhead` in `--primary12`, within the reading measure. Renders `<h3>`. */
+export declare function TimelineTitle(props: TimelineTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineTitleLink: Link props except `kind`, which is always `title`. */
+export type TimelineTitleLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * A linked entry's one link, inside `TimelineTitle`: a §9.3 title Link
+ * whose hit area stretches over the entry; the entry draws the ring.
+ */
+export declare function TimelineTitleLink(props: TimelineTitleLinkProps): React.JSX.Element;
+/** Props for TimelineText: `div` props and `render`. */
+export type TimelineTextProps = useRender.ComponentProps<'div'>;
+/** The entry text: `type-body-ui` in `--primary12`. Put long entries in a Collapsible. */
+export declare function TimelineText(props: TimelineTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineCaption: paragraph props and `render`. */
+export type TimelineCaptionProps = useRender.ComponentProps<'p'>;
+/**
+ * The legend line that defines the current marker, e.g. "● Today, 22 Sep
+ * 2026" (§8.11): `type-caption` in `--primary12`. In print, write it as
+ * "As of 22 Sep 2026".
+ */
+export declare function TimelineCaption(props: TimelineCaptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDateStack: `time` props, `render` and the three lines. */
+export type TimelineDateStackProps = Omit<useRender.ComponentProps<'time'>, 'children'> & {
+    /** The month, e.g. "Jul": `type-label` caps. */
+    month: React.ReactNode;
+    /** The day of the month: a large data numeral. */
+    day: React.ReactNode;
+    /** The weekday, e.g. "Sat": `type-label` caps. */
+    weekday?: React.ReactNode;
+};
+/** The date-block key: MONTH / day / WEEKDAY, stacked. Pass `dateTime`. */
+export declare function TimelineDateStack(props: TimelineDateStackProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDay: `section` props and `render`. */
+export type TimelineDayProps = useRender.ComponentProps<'section'>;
+/** One agenda day: `TimelineDateHead`, `TimelineScope`, then a `TimelineList` of sessions. */
+export declare function TimelineDay(props: TimelineDayProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDateHead: heading props and `render` (default `<h3>`). */
+export type TimelineDateHeadProps = useRender.ComponentProps<'h3'>;
+/** The agenda date head: `type-itemhead` in `--role-heading` (a group head). Renders `<h3>`. */
+export declare function TimelineDateHead(props: TimelineDateHeadProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineScope: paragraph props and `render`. */
+export type TimelineScopeProps = useRender.ComponentProps<'p'>;
+/** The scope caption, "All times are Eastern.": the time zone, stated once. */
+export declare function TimelineScope(props: TimelineScopeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineSession: list-item props and `render`. */
+export type TimelineSessionProps = useRender.ComponentProps<'li'>;
+/**
+ * One agenda session, led by the » block marker in `--role-accent`:
+ * `TimelineSessionTitle`, an optional `TimelineMeta` ("Happening now",
+ * "Past") and a `TimelineDescription`.
+ */
+export declare function TimelineSession(props: TimelineSessionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineSessionTitle: heading props, `render` and the pipe-joined meta. */
+export type TimelineSessionTitleProps = useRender.ComponentProps<'h4'> & {
+    /**
+     * Fields joined into the title with the serif's own pipe: "Title | Format
+     * | Time". A no-break space precedes each pipe, so a pipe never starts a
+     * line; leave out empty fields.
+     */
+    meta?: React.ReactNode[];
+};
+/** The session title, `type-itemhead` in `--primary12`, with its meta pipe-joined. Renders `<h4>`. */
+export declare function TimelineSessionTitle(props: TimelineSessionTitleProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineMeta: paragraph props and `render`. */
+export type TimelineMetaProps = useRender.ComponentProps<'p'>;
+/** A session's meta line: `type-caption` in `--primary12` ("Happening now", "Past"). */
+export declare function TimelineMeta(props: TimelineMetaProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for TimelineDescription: `div` props and `render`. */
+export type TimelineDescriptionProps = useRender.ComponentProps<'div'>;
+/** A session's description: `type-body-ui` in `--primary12`. */
+export declare function TimelineDescription(props: TimelineDescriptionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Timeline.d.ts.map

package/content/timeline/Timeline.d.ts.map

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