@fairgarden/design 0.1.0-alpha.0

package/components/CardGrid/CardGrid.js

@@ -0,0 +1,176 @@
+'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 { Link } from '../Link';
+import { SectionHeader } from '../SectionHeader';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './card-grid.module.css';
+/*
+ * Card Grid (§12.3): 3–24 peer cards to browse. Composed from `section` +
+ * the §11.8 header + a `ul` of cards (§12.2) + an optional footer link.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: card-grid.module.css; CVA function `cardGrid`.
+ * - Axes: `kind` → editorial | compact | block | lead; `primary`,
+ *   `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: none (`kind` is required); color axes: none.
+ * - Color fallback: inherits the scope. Bare cards inherit the grid's
+ *   scales; pass `primary` / `secondary` to faced cards too, whose face
+ *   Ground otherwise takes its preset defaults.
+ * - States: the grid has none. `footerLink` is a standalone Link, which owns
+ *   its hover, focus and press states (§9.3). No class marks an empty
+ *   result: render §12.16 (EmptyState) in place of `list`.
+ * - Parts: base, header (the §11.8 SectionHeader, from the `header` prop or
+ *   composed in `CardGridHeader`), toolbar (filter chips and sort), count (the polite
+ *   live region), list, item, footer, footerLink (a standalone Link, styled
+ *   by its own module; footerGlyph is the Link's chevron).
+ * - Scope: none.
+ * - Container: `base` is the inline-size container `card-grid`; `list`
+ *   queries it, and each card's face padding reads it (§12.2). Baseline
+ *   without support: `list` is a grid auto-fit with minmax tracks at the
+ *   288 px card minimum (compact 152 px), capped at 3 (compact 4), gutter
+ *   --ds-space-margin; compact drops to 1 column at --xs-n-below.
+ *   Thresholds (§5.10.2): editorial and block 2-up from 608, 3-up from 944;
+ *   compact 1 below 360, 2 below 704, 4-up from 704 [D163].
+ */
+export const cardGrid = cva(styles.base, {
+    variants: {
+        kind: {
+            editorial: styles.editorial,
+            compact: styles.compact,
+            block: styles.block,
+            lead: styles.lead,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/** A `SectionHeader` props object rather than a React node. */
+function isSectionHeaderProps(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        !React.isValidElement(value) &&
+        !(Symbol.iterator in value) &&
+        'heading' in value);
+}
+/**
+ * The card grid module: an optional header (`header`, or a composed
+ * `CardGridHeader` holding the §11.8 section header), an optional
+ * `CardGridToolbar` and `CardGridCount`, the
+ * `CardGridList` of `CardGridItem`s (one `Card` each), and an optional
+ * `CardGridFooter` with a `CardGridFooterLink` ("See all ›"). Never mix
+ * card kinds in one grid, and never scroll it horizontally (use §12.4).
+ */
+export function CardGrid(props) {
+    const { render, ref, className, kind, primary, secondary, header, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const generatedId = React.useId();
+    // A props object renders the §11.8 SectionHeader and labels the section by its heading.
+    const headerProps = isSectionHeaderProps(header) ? header : null;
+    const headingId = headerProps ? (headerProps.headingId ?? generatedId) : undefined;
+    const headerNode = headerProps ? (React.createElement(CardGridHeader, null,
+        React.createElement(SectionHeader, { ...headerProps, headingId: headingId }))) : header != null && header !== false ? (React.createElement(CardGridHeader, null, header)) : null;
+    return useRender({
+        defaultTagName: 'section',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            'aria-labelledby': headingId,
+            className: cardGrid({ kind, primary, secondary, className }),
+            children: (React.createElement(React.Fragment, null,
+                headerNode,
+                children)),
+        }, rest),
+    });
+}
+/**
+ * The module header slot: holds the §11.8 `SectionHeader` (eyebrow +
+ * hairline for explore grids; CardGrid's `header` prop fills it for you).
+ * Sits `--size-px-5` above the grid and stays with the first row in print.
+ */
+export function CardGridHeader(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'header',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.header, className) }, rest),
+    });
+}
+/**
+ * The filter and sort bar: filter chips (§9.4) and a sort Select (§10.5),
+ * wrapping onto more lines as needed. Hidden in print.
+ */
+export function CardGridToolbar(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.toolbar, className) }, rest),
+    });
+}
+/**
+ * The result count of a filtered grid ("12 events"), a polite live region
+ * in `--primary12`. Keep it mounted and change its text, so the change is
+ * announced.
+ */
+export function CardGridCount(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ role: 'status', 'aria-live': 'polite', className: cx(styles.count, className) }, rest),
+    });
+}
+/**
+ * The grid itself, a `ul` whose columns follow the `card-grid` container
+ * (auto-fit without container-query support). Rows keep equal heights and
+ * print 2-up, each row whole.
+ */
+export function CardGridList(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'ul',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.list, className) }, rest),
+    });
+}
+/** One cell: holds one `Card`, stretched to the row's height. */
+export function CardGridItem(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'li',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.item, className) }, rest),
+    });
+}
+/** The module footer, `--size-px-7` below the grid: a `CardGridFooterLink` or §9.9 pagination. */
+export function CardGridFooter(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.footer, className) }, rest),
+    });
+}
+/**
+ * "See all ›": the standalone Link (§9.3), `type-label` caps authored in
+ * sentence case, with its chevron in `--role-glyph`. The Link owns every
+ * state, so hover follows the central link model.
+ */
+export function CardGridFooterLink(props) {
+    return React.createElement(Link, { ...props, kind: "standalone" });
+}
+//# sourceMappingURL=CardGrid.js.map

package/components/CardGrid/CardGrid.js.map

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

package/components/CardGrid/card-grid.module.css

@@ -0,0 +1,187 @@
+/*
+ * Card Grid (§12.3). The root `base` is the inline-size container
+ * `card-grid`: `list` queries it here, and each card's face padding queries
+ * it in card.module.css (608 / 944 px, §5.10.2). Parts: base, header,
+ * toolbar, count, list, item, footer, footerLink (a standalone Link, which
+ * draws the chevron). Colors are role variables only; local custom
+ * properties carry dimensions only:
+ *   --card-grid-gap   the gutter (= --ds-space-margin) [D42]
+ *   --card-grid-min   the card's content minimum (288 px; compact 152 px)
+ *   --card-grid-cap   the most columns the auto-fit baseline allows (3; compact 4)
+ */
+
+/* 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. */
+.count {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    --card-grid-gap: var(--ds-space-margin);
+    --card-grid-min: 288px; /* card content minimum (§5.10.2) */
+    --card-grid-cap: 3;
+
+    container: card-grid / 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);
+  }
+
+  .header {
+    margin-block-end: var(--size-px-5);
+  }
+
+  .toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--size-px-2);
+    margin-block-end: var(--size-px-3);
+  }
+
+  .count {
+    margin: 0 0 var(--size-px-3);
+    color: var(--primary12);
+  }
+
+  /*
+   * Baseline (§1.11.11): auto-fit tracks at the card minimum, capped at
+   * --card-grid-cap columns; min(100%, …) keeps a lone column inside a rail
+   * narrower than the minimum. Complete without container queries.
+   */
+  .list {
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fit,
+      minmax(
+        min(
+          100%,
+          max(
+            var(--card-grid-min),
+            calc((100% - (var(--card-grid-cap) - 1) * var(--card-grid-gap)) / var(--card-grid-cap))
+          )
+        ),
+        1fr
+      )
+    );
+    gap: var(--card-grid-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* Each cell stretches its card to the row's height. */
+  .item {
+    display: grid;
+    min-inline-size: 0;
+  }
+
+  .footer {
+    margin-block-start: var(--size-px-7);
+  }
+}
+
+@layer variants {
+  /* Editorial and block: 1 below 608 px, 2 from 608, 3 from 944 (§5.10.2). */
+  @container card-grid (width < 608px) {
+    .editorial .list,
+    .block .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container card-grid (608px <= width < 944px) {
+    .editorial .list,
+    .block .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container card-grid (width >= 944px) {
+    .editorial .list,
+    .block .list {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+  }
+
+  /* Block edge: --size-px-2 more on the heavy right and bottom sides, so the
+     --ds-stroke-8 edge never touches a neighbor. */
+  .block .item {
+    padding-inline-end: var(--size-px-2);
+    padding-block-end: var(--size-px-2);
+  }
+
+  /* Compact: 152 px minimum, capped at 4. */
+  .compact {
+    --card-grid-min: 152px; /* compact card content minimum (§5.10.2) */
+    --card-grid-cap: 4;
+  }
+
+  /* Viewport fallback for the stack guard [D73]. */
+  @media (max-width: 359.98px) {
+    .compact .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  /* Compact: 1 below 360 px, 2 below 704, 4 from 704 (§5.10.2). */
+  @container card-grid (width < 360px) {
+    .compact .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+
+  @container card-grid (360px <= width < 704px) {
+    .compact .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container card-grid (width >= 704px) {
+    .compact .list {
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+  }
+
+  /* Lead + list: the one lead card spans the grid; §12.11 rows follow it. */
+  .lead .list {
+    grid-template-columns: minmax(0, 1fr);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Grids print 2-up in the live area, rows whole; filters are screen-only (§12.1).
+       The page margin prints as 0, so the gutter takes its own print step. */
+    .base {
+      --card-grid-gap: var(--size-px-5);
+    }
+
+    .header {
+      break-after: avoid;
+    }
+
+    .toolbar {
+      display: none;
+    }
+
+    .list,
+    .editorial .list,
+    .block .list,
+    .compact .list {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .lead .list {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .item {
+      break-inside: avoid;
+    }
+  }
+}

package/components/CardGrid/index.d.ts

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

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

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

package/components/CardGrid/index.js

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

package/components/CardGrid/index.js.map

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

package/components/Carousel/Carousel.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+export declare const carousel: (props?: ({
+    kind?: "cards" | "photos" | null | undefined;
+    post?: boolean | null | undefined;
+    atStart?: boolean | null | undefined;
+    atEnd?: boolean | null | undefined;
+    static?: boolean | null | undefined;
+    summarized?: 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 CarouselVariants = VariantProps<typeof carousel>;
+interface CarouselCommonProps extends Omit<React.ComponentPropsWithRef<'section'>, 'children'> {
+    /** The carousel's accessible name, e.g. "Similar species". */
+    label: string;
+    /** The module header (§11.8), above the track. */
+    header?: React.ReactNode;
+    /** The slides: `CarouselSlide`s (cards) or `CarouselPhoto`s (photos), at least four. */
+    children: React.ReactNode;
+    /** Previous and Next accessible names. Default "Previous" and "Next". */
+    controlLabels?: readonly [previous: string, next: string];
+    /**
+     * The short URL printed after a photo set of more than 6 slides: "5 more
+     * images (example.org/gallery)". No protocol.
+     */
+    printUrl?: string;
+    /**
+     * Primary Radix scale: buttons, count, rail and thumb, and the slides'
+     * inherited primary. Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: CarouselVariants['primary'];
+    /** Secondary Radix scale, passed to the slides; no carousel part uses it. Never defaulted. */
+    secondary?: CarouselVariants['secondary'];
+}
+interface CarouselCardsProps extends CarouselCommonProps {
+    /**
+     * `cards`: §12.2 cards, 2 portrait + peek (1 + peek below 360 px of
+     * container). `photos`: captioned figures at ≈ 88%, and from 1024 px a
+     * fixed 480 px strip whose slides keep their photos' own ratios.
+     */
+    kind: 'cards';
+    /**
+     * Editorial post cards: 1 landscape slide at ≈ 85% at base, 2 + peek from
+     * 768 px, 3 + peek from 1024 px of container [D186]. Default `false`.
+     */
+    post?: boolean;
+}
+interface CarouselPhotosProps extends CarouselCommonProps {
+    kind: 'photos';
+    post?: never;
+}
+/** Props for Carousel: `section` props, the kind (and `post` for cards), label, header, slides and the color axes. */
+export type CarouselProps = CarouselCardsProps | CarouselPhotosProps;
+/**
+ * The carousel. Swipe, trackpad, the Previous and Next buttons, and the
+ * arrow, Home and End keys on the focused track all move it one slide at a
+ * time with snap. In print, card slides become a 2-up grid and photo sets
+ * of up to 6 a 3-up grid; a larger photo set prints its first slide and
+ * "n more images (short URL)".
+ */
+export declare function Carousel(props: CarouselProps): React.JSX.Element;
+/** Props for CarouselSlide: `li` props and, for photo slides, the photo's ratio. */
+export type CarouselSlideProps = React.ComponentPropsWithRef<'li'> & {
+    /**
+     * The photo's width ÷ height (e.g. `3 / 2`). From 1024 px of container
+     * the photo strip sizes the slide from it at the 480 px track height, so
+     * nothing is cropped [D186].
+     */
+    ratio?: number;
+};
+/**
+ * One slide, labelled "n of N" for assistive technology. It snaps to its
+ * start; slides are focusable only through their own links.
+ */
+export declare function CarouselSlide(props: CarouselSlideProps): React.JSX.Element;
+/** Props for CarouselPhoto: the image, its ratio and the caption. */
+export interface CarouselPhotoProps {
+    /** The image source. */
+    src: string;
+    /** The alternative text; empty only for a decorative photo. */
+    alt: string;
+    /** The photo's own width ÷ height (e.g. `3 / 2`), so the strip never crops it. */
+    ratio: number;
+    /** The caption: what to notice. Always visible, right-flush. */
+    caption?: React.ReactNode;
+    /** The credit, in the same run: "Photo: Name / Program". */
+    credit?: React.ReactNode;
+    /** Image `srcSet`, `sizes`, `loading` and other attributes. */
+    imgProps?: Omit<React.ComponentPropsWithRef<'img'>, 'src' | 'alt'>;
+}
+/**
+ * A photo slide: a §8.5 photo Figure with the image at its own ratio and
+ * the caption right-flush under it.
+ */
+export declare function CarouselPhoto(props: CarouselPhotoProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Carousel.d.ts.map

package/components/Carousel/Carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.d.ts","sourceRoot":"","sources":["../../src/components/Carousel/Carousel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAqDjE,eAAO,MAAM,QAAQ;;;;;;;;;8EA+BnB,CAAA;AAEF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAA;AASrD,UAAU,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,SAAS,CAAC,EAAE,UAAU,CAAC;IAC5F,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAA;IACb,kDAAkD;IAClD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,wFAAwF;IACxF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yEAAyE;IACzE,aAAa,CAAC,EAAE,SAAS,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAA;IACzD;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,SAAS,CAAC,CAAA;IACrC,8FAA8F;IAC9F,SAAS,CAAC,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAA;CAC1C;AAED,UAAU,kBAAmB,SAAQ,mBAAmB;IACtD;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,UAAU,mBAAoB,SAAQ,mBAAmB;IACvD,IAAI,EAAE,QAAQ,CAAA;IACd,IAAI,CAAC,EAAE,KAAK,CAAA;CACb;AAED,sHAAsH;AACtH,MAAM,MAAM,aAAa,GAAG,kBAAkB,GAAG,mBAAmB,CAAA;AAqBpE;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,qBAgP5C;AAeD,oFAAoF;AACpF,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG;IACnE;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAetD;AAED,qEAAqE;AACrE,MAAM,WAAW,kBAAkB;IACjC,wBAAwB;IACxB,GAAG,EAAE,MAAM,CAAA;IACX,+DAA+D;IAC/D,GAAG,EAAE,MAAM,CAAA;IACX,kFAAkF;IAClF,KAAK,EAAE,MAAM,CAAA;IACb,gEAAgE;IAChE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,CAAA;CACnE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAqBtD"}