@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.1

package/content/carousel/carousel.module.css

@@ -0,0 +1,257 @@
+/*
+ * Carousel (§12.4). CVA function `carousel`. The Scroll Area (`rail`)
+ * draws the viewport, the overflow edges, the --border-size-2 progress rail
+ * (--role-hairline track, --primary12 thumb) and their states; the Buttons
+ * draw the step pager. This module lays out the track, the slides and the
+ * control row.
+ * Color roles (§12.4): prev / next edge and glyph --primary12 at
+ * --border-size-2 (the outline icon-only Button; hover --primary3, pressed
+ * the inverse pair); count --primary12; rail --role-hairline; railThumb
+ * --primary12. Colors are role variables only; local custom properties
+ * carry dimensions only (--carousel-slide, --carousel-bleed,
+ * --carousel-ratio, a unitless ratio).
+ */
+
+/* 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: typeData from '../../utils/type.module.css';
+}
+
+.printSummary {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.printUrl {
+  composes: typeUrl from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The carousel root: the inline-size container `carousel` its slides query. */
+  .base {
+    container: carousel / inline-size;
+    display: grid;
+    gap: var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .header {
+    min-inline-size: 0;
+  }
+
+  .list {
+    --carousel-slide: 88%;
+
+    display: flex;
+    gap: var(--ds-space-12);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* The trailing space: the last slide ends at the container edge at the end of the scroll. */
+  .list::after {
+    content: '';
+    flex: none;
+    inline-size: var(--carousel-bleed, 0px);
+    margin-inline-start: calc(-1 * var(--ds-space-12));
+  }
+
+  .slide {
+    flex: none;
+    inline-size: var(--carousel-slide);
+    min-inline-size: 0;
+    scroll-snap-align: start;
+  }
+
+  /* Control row: the count at the start ("3 of 8"), Previous and Next at the end; never over the slides. */
+  .controls {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--size-px-3);
+  }
+
+  .count {
+    margin: 0;
+    color: var(--primary12);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .pager {
+    display: flex;
+    gap: var(--ds-space-12);
+  }
+
+  .printSummary {
+    display: none;
+  }
+
+  .photo {
+    margin: 0;
+  }
+}
+
+@layer variants {
+  /*
+   * The Scroll Area (its root, restyled in this layer so it wins over the
+   * Scroll Area's own cap): the first slide at the container's start edge,
+   * the end bleeding to the viewport edge (or the field's edge) by
+   * --carousel-bleed, which the component measures [D186].
+   */
+  .viewport {
+    max-inline-size: none;
+    margin-inline-end: calc(-1 * var(--carousel-bleed, 0px));
+  }
+
+  /*
+   * Slide widths. Baseline (stands alone, percentages of the track): card
+   * carousels 2 portrait slides + peek, post cards 1 landscape slide at
+   * ≈ 85%, photos 1 slide at ≈ 88%. Viewport fallback below 360 px: cards
+   * 1 + peek. The counts rise with the container's width, never falling
+   * back: at 768, cards 2 + peek (post 2 + peek); at 1024, cards 2 + peek,
+   * post 3 + peek, photos the 480 px strip [D186].
+   */
+  .cards .list {
+    --carousel-slide: calc((88% - var(--ds-space-12)) / 2);
+  }
+
+  .post .list {
+    --carousel-slide: 85%;
+  }
+
+  @media (max-width: 359.98px) {
+    .cards .list {
+      --carousel-slide: 85%;
+    }
+  }
+
+  @container carousel (width < 360px) {
+    .cards .list {
+      --carousel-slide: 85cqi;
+    }
+
+    .photos .list {
+      --carousel-slide: 88cqi;
+    }
+  }
+
+  @container carousel (width >= 360px) {
+    .cards .list {
+      --carousel-slide: calc((88cqi - var(--ds-space-12)) / 2);
+    }
+
+    .post .list {
+      --carousel-slide: 85cqi;
+    }
+
+    .photos .list {
+      --carousel-slide: 88cqi;
+    }
+  }
+
+  @container carousel (width >= 768px) {
+    .post .list {
+      --carousel-slide: calc((88cqi - var(--ds-space-12)) / 2);
+    }
+  }
+
+  @container carousel (width >= 1024px) {
+    .post .list {
+      --carousel-slide: calc((88cqi - 2 * var(--ds-space-12)) / 3);
+    }
+
+    /*
+     * The photo strip: a fixed --size-px-15 (480 px) track height, each
+     * slide as wide as its photo at that height (--carousel-ratio), so
+     * nothing is cropped; every caption visible and right-flush below.
+     */
+    .photos .slide {
+      inline-size: calc(var(--size-px-15) * var(--carousel-ratio, 1.5));
+    }
+  }
+
+  /*
+   * A slide's figure runs its photo and caption across its full width and
+   * never takes the side caption, so the Figure's 12-track gutters go:
+   * eleven of them would floor a portrait slide at 11 × --ds-space-margin
+   * and push its photo past the slide into the next.
+   */
+  .photo {
+    column-gap: 0;
+  }
+
+  /*
+   * The photo's height cap: the slide keeps its ≈ 88% [D186], and its
+   * figure (photo and right-flush caption) is at most as wide as the photo
+   * at --size-px-15, so a portrait photo stops at 480 px tall, uncropped, at
+   * the slide's start (derived; flagged for user review, §1.8). From 1024 px
+   * the strip's slide is exactly that wide, so the figure fills it.
+   */
+  .photos .photo {
+    inline-size: min(100%, var(--size-px-15) * var(--carousel-ratio, 1.5));
+  }
+
+  /* At either end that button is omitted and its space kept; the count states the position (§9.9). */
+  .atStart .prev,
+  .atEnd .next {
+    visibility: hidden;
+  }
+
+  /* Every slide fits: a static row, no controls (the rail hides itself without overflow). */
+  .static .controls {
+    display: none;
+  }
+
+  .static .list::after {
+    display: none;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Controls, count, peek and rail are hidden; the track unfolds into a grid (§7.7). */
+    .controls,
+    .list::after {
+      display: none;
+    }
+
+    .viewport {
+      margin-inline-end: 0;
+    }
+
+    .list {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      gap: var(--size-px-3);
+    }
+
+    .slide,
+    .photos .slide {
+      inline-size: auto;
+      break-inside: avoid;
+    }
+
+    /* Photo sets of up to 6 print 3-up, each photo at its own ratio, uncropped. */
+    .photos .list {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    /* Over 6: the first slide, its caption and one line "n more images (short URL)" [D81]. */
+    .summarized .list {
+      display: block;
+    }
+
+    .summarized .slide + .slide {
+      display: none;
+    }
+
+    .printSummary {
+      display: block;
+      margin: 0;
+      color: var(--primary12);
+    }
+  }
+}

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

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

package/content/carousel/index.js.map

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

package/content/empty-state/EmptyState.d.ts

@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type StickerProps } from '../../foundations/sticker';
+export declare const emptyState: (props?: ({
+    kind?: "inline" | "framed" | "illustrated" | null | undefined;
+    filtered?: 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 EmptyStateVariants = VariantProps<typeof emptyState>;
+/** The three empty-state builds (§12.16). */
+export type EmptyStateKind = 'framed' | 'inline' | 'illustrated';
+/** Props for EmptyState: `div` props, `render`, the kind, `filtered` and the color axes. */
+export type EmptyStateProps = useRender.ComponentProps<'div'> & {
+    /**
+     * `framed` (default): a centered stack in a `line-dashed` frame (dashed
+     * means provisional: a place not yet filled). `inline`: one sentence in
+     * place of the content, no frame, inside dense panels. `illustrated`:
+     * framed, plus a §6.5 sticker (S size) in `EmptyStateDrawing`.
+     */
+    kind?: EmptyStateKind;
+    /**
+     * A filter caused it: the root becomes a polite status region
+     * (`role="status"`), and it is not printed (print the unfiltered list, or
+     * "No items" once). Name the filter and offer "Clear Filters". Default
+     * `false`.
+     */
+    filtered?: boolean;
+    /**
+     * Primary Radix scale: the frame, heading and text. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: EmptyStateVariants['primary'];
+    /**
+     * Secondary Radix scale: only the trail ornament (`--role-accent`). Never
+     * defaulted.
+     */
+    secondary?: EmptyStateVariants['secondary'];
+};
+/**
+ * The empty state, rendered in place of a list or grid: an optional
+ * `EmptyStateDrawing` or `EmptyStateTrail` (one, never both), an
+ * `EmptyStateHeading`, an `EmptyStateText` and an `EmptyStateAction` (an
+ * outline Button, or the solid one when it is the page's main next step).
+ * Pass `role="status"` when it replaces dynamic results (automatic with
+ * `filtered`). Never set its text lighter than the scope's ink.
+ */
+export declare function EmptyState(props: EmptyStateProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for EmptyStateDrawing: `div` props, `render`, and the sticker's art (`viewBox`, `halo`, line art as children). */
+export type EmptyStateDrawingProps = Omit<useRender.ComponentProps<'div'>, 'children'> & Pick<StickerProps, 'viewBox' | 'halo' | 'children'>;
+/**
+ * The drawing (`illustrated`): a §6.5 Sticker at `--ds-size-art-s` with its
+ * halo, decorative (`aria-hidden`); the spot size `--size-px-9` below
+ * 360 px. Pass the asset's `viewBox`, its pre-expanded `halo` path and its
+ * line art as children. The sticker brings its own `white` scope, so it
+ * looks the same on every ground and ignores the empty state's props.
+ */
+export declare function EmptyStateDrawing(props: EmptyStateDrawingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for EmptyStateTrail: `div` props and `render`; the trail itself is drawn. */
+export type EmptyStateTrailProps = Omit<useRender.ComponentProps<'div'>, 'children'>;
+/**
+ * The trail, the alternative to a drawing: the short-tail `ornament-trail`
+ * (utils/Ornament), from its origin circle to a `marker-terminal` that
+ * points down at the action, dashed in `--role-accent`, decorative. Hidden
+ * if it would touch type.
+ */
+export declare function EmptyStateTrail(props: EmptyStateTrailProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for EmptyStateHeading: heading props and `render` (default `<h3>`). */
+export type EmptyStateHeadingProps = useRender.ComponentProps<'h3'>;
+/** What is empty: `type-itemhead` in `--primary12`, centered. Renders `<h3>`. */
+export declare function EmptyStateHeading(props: EmptyStateHeadingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for EmptyStateText: paragraph props and `render`. */
+export type EmptyStateTextProps = useRender.ComponentProps<'p'>;
+/**
+ * Why, and what to do next: `type-body-ui` in `--primary12`, at most 40ch.
+ * When a filter caused it, name the filter ("No events match 'Virtual'").
+ */
+export declare function EmptyStateText(props: EmptyStateTextProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for EmptyStateAction: `div` props and `render`. */
+export type EmptyStateActionProps = useRender.ComponentProps<'div'>;
+/**
+ * The next step: an outline Button (md), or the solid one when it is the
+ * page's main next step; "Clear Filters" after a filter (title case).
+ */
+export declare function EmptyStateAction(props: EmptyStateActionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=EmptyState.d.ts.map

package/content/empty-state/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/content/empty-state/EmptyState.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,2BAA2B,CAAA;AAoCtE,eAAO,MAAM,UAAU;;;;;8EAkBrB,CAAA;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzD,6CAA6C;AAC7C,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,QAAQ,GAAG,aAAa,CAAA;AAEhE,4FAA4F;AAC5F,MAAM,MAAM,eAAe,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC9D;;;;;OAKG;IACH,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;CAC5C,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,0EAoChD;AAED,2HAA2H;AAC3H,MAAM,MAAM,sBAAsB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GACpF,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC,CAAA;AAErD;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,0EAmB9D;AAED,sFAAsF;AACtF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,CAAA;AAEpF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAe1D;AAED,gFAAgF;AAChF,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEnE,iFAAiF;AACjF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,0EAQ9D;AAED,8DAA8D;AAC9D,MAAM,MAAM,mBAAmB,GAAG,SAAS,CAAC,cAAc,CAAC,GAAG,CAAC,CAAA;AAE/D;;;GAGG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,0EAQxD;AAED,4DAA4D;AAC5D,MAAM,MAAM,qBAAqB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAEnE;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,0EAQ5D"}

package/content/empty-state/EmptyState.js

@@ -0,0 +1,161 @@
+'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 { Sticker } from '../../foundations/sticker';
+import { OrnamentTrail } from '../../utils/Ornament';
+import { cx } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './empty-state.module.css';
+/*
+ * Empty State (§12.16): a list, grid, search or collection with no items.
+ * It says what is empty and offers a next step; a sanctioned place for one
+ * ornament (P6). Not for errors (§10.20) or loading.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: empty-state.module.css; CVA function `emptyState`.
+ * - Axes: `kind` → framed | inline | illustrated; `filtered` → `filtered`
+ *   (a filter caused it: a polite status region, and not printed);
+ *   `primary`, `secondary` → scales module classes.
+ * - Compound variants: none.
+ * - Defaults: kind framed, filtered false; color axes: none.
+ * - Color fallback: inherits the scope; the action Button brings its own
+ *   fallback (§9.2).
+ * - States: static; the action follows §9.2.
+ * - Parts: base, frame (the padded box; its dashed outline is the SVG
+ *   `frameLine` > `frameRect`, composing line-dashed), drawing (the §6.5
+ *   Sticker, S size), trail (the shared `ornament-trail`, short-tail shape,
+ *   utils/Ornament), heading, text, action. `drawing` and `trail` are
+ *   exclusive and rendered by content, with no axis [D38].
+ * - Scope: `drawing` renders the Sticker, which declares its own nested
+ *   `white` scope (a light island inside a field or the night band); the
+ *   module names none.
+ * - Container: `base` is the inline-size container (unnamed); the frame's
+ *   drawing-beside-text layout queries it. Baseline without support:
+ *   drawing above the text, with the viewport fallback of the side layout
+ *   from --lg-n-above. Threshold (§5.10.2): drawing beside the text from
+ *   1024, content capped at --size-sm and centered [D163].
+ */
+export const emptyState = cva(styles.base, {
+    variants: {
+        kind: {
+            framed: styles.framed,
+            inline: styles.inline,
+            illustrated: styles.illustrated,
+        },
+        filtered: {
+            true: styles.filtered,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'framed',
+        filtered: false,
+    },
+});
+/**
+ * The empty state, rendered in place of a list or grid: an optional
+ * `EmptyStateDrawing` or `EmptyStateTrail` (one, never both), an
+ * `EmptyStateHeading`, an `EmptyStateText` and an `EmptyStateAction` (an
+ * outline Button, or the solid one when it is the page's main next step).
+ * Pass `role="status"` when it replaces dynamic results (automatic with
+ * `filtered`). Never set its text lighter than the scope's ink.
+ */
+export function EmptyState(props) {
+    const { render, ref, className, kind = 'framed', filtered = false, primary, secondary, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            ...(filtered ? { role: 'status' } : null),
+            className: emptyState({ kind, filtered, primary, secondary, className }),
+            children: (React.createElement("div", { className: styles.frame },
+                kind !== 'inline' ? (React.createElement("svg", { className: styles.frameLine, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("rect", { className: styles.frameRect, width: "100%", height: "100%", rx: "8", ry: "8" }))) : null,
+                children)),
+        }, rest),
+    });
+}
+/**
+ * The drawing (`illustrated`): a §6.5 Sticker at `--ds-size-art-s` with its
+ * halo, decorative (`aria-hidden`); the spot size `--size-px-9` below
+ * 360 px. Pass the asset's `viewBox`, its pre-expanded `halo` path and its
+ * line art as children. The sticker brings its own `white` scope, so it
+ * looks the same on every ground and ignores the empty state's props.
+ */
+export function EmptyStateDrawing(props) {
+    const { render, ref, className, viewBox, halo, children, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            'aria-hidden': true,
+            className: cx(styles.drawing, className),
+            children: (React.createElement(Sticker, { size: "s", viewBox: viewBox, halo: halo }, children)),
+        }, rest),
+    });
+}
+/**
+ * The trail, the alternative to a drawing: the short-tail `ornament-trail`
+ * (utils/Ornament), from its origin circle to a `marker-terminal` that
+ * points down at the action, dashed in `--role-accent`, decorative. Hidden
+ * if it would touch type.
+ */
+export function EmptyStateTrail(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({
+            'aria-hidden': true,
+            className: cx(styles.trail, className),
+            children: React.createElement(OrnamentTrail, { shape: "short-tail" }),
+        }, rest),
+    });
+}
+/** What is empty: `type-itemhead` in `--primary12`, centered. Renders `<h3>`. */
+export function EmptyStateHeading(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'h3',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.heading, className) }, rest),
+    });
+}
+/**
+ * Why, and what to do next: `type-body-ui` in `--primary12`, at most 40ch.
+ * When a filter caused it, name the filter ("No events match 'Virtual'").
+ */
+export function EmptyStateText(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'p',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.text, className) }, rest),
+    });
+}
+/**
+ * The next step: an outline Button (md), or the solid one when it is the
+ * page's main next step; "Clear Filters" after a filter (title case).
+ */
+export function EmptyStateAction(props) {
+    const { render, ref, className, ...rest } = props;
+    return useRender({
+        defaultTagName: 'div',
+        render,
+        ref,
+        props: mergeProps({ className: cx(styles.action, className) }, rest),
+    });
+}
+//# sourceMappingURL=EmptyState.js.map

package/content/empty-state/EmptyState.js.map

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

package/content/empty-state/index.d.ts.map

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

package/content/empty-state/index.js.map

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

package/content/feature-grid/FeatureGrid.d.ts

@@ -0,0 +1,108 @@
+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';
+import { type SectionHeaderProps } from '../../page/section-header';
+export declare const featureGrid: (props?: ({
+    kind?: "icon" | "framed" | "numbered" | "rule-topped" | "glossary" | 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 FeatureGridVariants = VariantProps<typeof featureGrid>;
+/** The five cell constructions (§12.6). */
+export type FeatureGridKind = 'icon' | 'numbered' | 'rule-topped' | 'framed' | 'glossary';
+/** Props for FeatureGrid: `section` props, `render`, the kind and the color axes. */
+export type FeatureGridProps = useRender.ComponentProps<'section'> & {
+    /**
+     * `icon` (default): block icon → serif heading → body, whitespace only.
+     * `numbered`: a zero-padded numeral in a 56 px outline circle, cells
+     * separated by inset rules (vertical rules once they sit in a row).
+     * `rule-topped`: each cell opens with a `--role-hairline` rule.
+     * `framed`: 2 × 2 inside one faced frame. `glossary`: small drawings with
+     * caps captions, no rules.
+     */
+    kind?: FeatureGridKind;
+    /**
+     * Primary Radix scale: numerals, headings, text, rules and the frame.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: FeatureGridVariants['primary'];
+    /**
+     * Secondary Radix scale: the block icons (`--role-accent`) and the title
+     * links' underline. Never defaulted.
+     */
+    secondary?: FeatureGridVariants['secondary'];
+    /**
+     * The module header (§11.8), rendered in the header slot before the
+     * children: a `SectionHeader` props object (the section is then labelled
+     * by its heading), or any node, such as a `SectionHeader` element. Omit it
+     * to compose `FeatureGridHeader` yourself.
+     */
+    header?: React.ReactNode | SectionHeaderProps;
+};
+/**
+ * The feature grid module: an optional header (`header`, or a composed
+ * `FeatureGridHeader`), then a `FeatureGridList` of 2–6 `FeatureGridCell`s. Each cell holds one leader
+ * (`FeatureGridIcon` or `FeatureGridDrawing`; numbered cells draw their own
+ * numeral), a `FeatureGridHeading` (optionally wrapping a `FeatureGridLink`)
+ * and a `FeatureGridBody`. Use one leader type per grid, never mixed.
+ */
+export declare function FeatureGrid(props: FeatureGridProps): React.JSX.Element;
+/** Props for FeatureGridHeader: `header` props and `render`. */
+export type FeatureGridHeaderProps = useRender.ComponentProps<'header'>;
+/**
+ * The module header slot: holds the §11.8 `SectionHeader` (FeatureGrid's
+ * `header` prop fills it for you); stays with the first cells in print.
+ */
+export declare function FeatureGridHeader(props: FeatureGridHeaderProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridList: list props and `render`. */
+export type FeatureGridListProps = useRender.ComponentProps<'ul'>;
+/**
+ * The cells' grid: a `ul`, or an `ol` for the numbered kind, whose order the
+ * numerals carry. In the framed kind it sits inside the faced frame.
+ */
+export declare function FeatureGridList(props: FeatureGridListProps): React.JSX.Element;
+/** Props for FeatureGridCell: list-item props and `render`. */
+export type FeatureGridCellProps = useRender.ComponentProps<'li'>;
+/**
+ * One benefit: leader → heading → body. Numbered cells draw their
+ * zero-padded numeral ("01") first, from the list order. A cell with a
+ * `FeatureGridLink` is linked as a whole.
+ */
+export declare function FeatureGridCell(props: FeatureGridCellProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridIcon: `span` props and `render`. */
+export type FeatureGridIconProps = useRender.ComponentProps<'span'>;
+/**
+ * The block-icon leader: put an `<Icon size="block" … />` (Material Symbols
+ * Rounded, FILL 0) inside. It fills in `--role-accent`, which resolves to
+ * `--primary12` on saturated grounds. Never put a colored tile behind it.
+ */
+export declare function FeatureGridIcon(props: FeatureGridIconProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridDrawing: `span` props and `render`. */
+export type FeatureGridDrawingProps = useRender.ComponentProps<'span'>;
+/**
+ * The glossary leader: a small geometric drawing (inline SVG, spot size
+ * `--size-px-9`) in `--primary12`. Fixed size; it never scales.
+ */
+export declare function FeatureGridDrawing(props: FeatureGridDrawingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridHeading: heading props and `render` (default `<h3>`). */
+export type FeatureGridHeadingProps = useRender.ComponentProps<'h3'>;
+/**
+ * The cell's heading: `type-itemhead` in `--primary12`; in the glossary kind
+ * a `type-label` caps caption. Renders `<h3>`.
+ */
+export declare function FeatureGridHeading(props: FeatureGridHeadingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for FeatureGridLink: Link props except `kind`, which is always `title`. */
+export type FeatureGridLinkProps = Omit<LinkProps, 'kind'>;
+/**
+ * The cell's one link, inside `FeatureGridHeading`: a §9.3 title Link whose
+ * hit area stretches over the cell. Hover, focus and press underline the
+ * heading; the cell draws the focus ring.
+ */
+export declare function FeatureGridLink(props: FeatureGridLinkProps): React.JSX.Element;
+/** Props for FeatureGridBody: `div` props and `render`. */
+export type FeatureGridBodyProps = useRender.ComponentProps<'div'>;
+/** A sentence or two of `type-body-ui` in `--primary12`. */
+export declare function FeatureGridBody(props: FeatureGridBodyProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=FeatureGrid.d.ts.map

package/content/feature-grid/FeatureGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FeatureGrid.d.ts","sourceRoot":"","sources":["../../src/content/feature-grid/FeatureGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AA2ClF,eAAO,MAAM,WAAW;;;;8EAgBtB,CAAA;AAEF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAA;AAE3D,2CAA2C;AAC3C,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,GAAG,QAAQ,GAAG,UAAU,CAAA;AAezF,qFAAqF;AACrF,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,cAAc,CAAC,SAAS,CAAC,GAAG;IACnE;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAA;IACxC;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAC5C;;;;;OAKG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,kBAAkB,CAAA;CAC9C,CAAA;AAaD;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBAkDlD;AAED,gEAAgE;AAChE,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAA;AAEvE;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,0EAQ9D;AAED,0DAA0D;AAC1D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjE;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAe1D;AAED,+DAA+D;AAC/D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEjE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAoB1D;AAED,4DAA4D;AAC5D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAEnE;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAQ1D;AAED,+DAA+D;AAC/D,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,CAAA;AAEtE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,0EAWhE;AAED,iFAAiF;AACjF,MAAM,MAAM,uBAAuB,GAAG,SAAS,CAAC,cAAc,CAAC,IAAI,CAAC,CAAA;AAEpE;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,0EAYhE;AAED,oFAAoF;AACpF,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAA;AAE1D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAG1D;AAED,2DAA2D;AAC3D,MAAM,MAAM,oBAAoB,GAAG,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAA;AAElE,4DAA4D;AAC5D,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,0EAQ1D"}