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

package/feedback/progress/progress.module.css

@@ -0,0 +1,285 @@
+/*
+ * Progress (§10.18; constructions §8.9). CVA functions `progress` and
+ * `progressStatus`. Ink only: track edge, indicator, cells, label and value
+ * are --primary12 on the ground; no part uses the secondary, so progress
+ * never reads as a chart series. Status glyphs take --role-status of their
+ * own status scale. Colors are role variables only; no opacity, no shimmer.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.value {
+  composes: typeData from '../../utils/type.module.css';
+}
+
+.statusText {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.dashLine {
+  composes: lineDashed from '../../utils/line.module.css';
+}
+
+@keyframes dashAdvance {
+  to {
+    stroke-dashoffset: calc(-1 * (var(--fgd-dash) + var(--fgd-dash-gap)));
+  }
+}
+
+@layer base {
+  /* Label and value above a full-width track (§8.9 responsive baseline). */
+  .base {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas:
+      'label readout'
+      'track track';
+    align-items: baseline;
+    gap: var(--size-px-1) var(--size-px-3);
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  .label {
+    grid-area: label;
+    color: var(--primary12);
+  }
+
+  .readout {
+    grid-area: readout;
+    justify-self: end;
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--size-px-1) var(--size-px-2);
+  }
+
+  .value {
+    color: var(--primary12);
+    white-space: nowrap;
+  }
+
+  /* Linear: a --border-size-1 outlined --primary12 track, 8 px tall, square in data modules. */
+  .track {
+    grid-area: track;
+    align-self: center;
+    position: relative;
+    box-sizing: content-box;
+    block-size: calc(var(--size-px-2) - 2 * var(--border-size-1));
+    border: var(--border-size-1) solid var(--primary12);
+    border-radius: var(--radius-0);
+  }
+
+  /* The indicator's height is Base UI's inline `inherit`: the track's content height. */
+  .indicator {
+    display: block;
+    background-color: var(--primary12);
+  }
+
+  .dashes {
+    display: none;
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+    stroke: var(--primary12);
+  }
+
+  /* Segmented: outlined --size-px-2-5 cells, --border-size-1, 2 px apart; filled cells solid. */
+  .cell {
+    flex: none;
+    box-sizing: border-box;
+    inline-size: var(--size-px-2-5);
+    block-size: var(--size-px-2-5);
+    border: var(--border-size-1) solid var(--primary12);
+  }
+
+  .cellFilled {
+    background-color: var(--primary12);
+  }
+
+  /* Ring: a --border-size-2 --primary12 arc over a --role-hairline track, always with its value. */
+  .ring {
+    grid-area: track;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    overflow: visible;
+  }
+
+  .ringTrack,
+  .ringArc {
+    fill: none;
+    stroke-width: var(--border-size-2);
+  }
+
+  .ringTrack {
+    stroke: var(--role-hairline);
+  }
+
+  .ringArc {
+    stroke: var(--primary12);
+  }
+
+  /* Status: the §1.5.4 glyph in --role-status (its status scale) plus the word in --primary12. */
+  .status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .success,
+  .warning,
+  .danger {
+    color: var(--primary12);
+  }
+
+  .statusGlyph {
+    flex: none;
+    display: block;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--border-size-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .statusText {
+    color: var(--primary12);
+  }
+
+  @media (forced-colors: active) {
+    .indicator,
+    .cellFilled {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+
+    .ringArc {
+      forced-color-adjust: none;
+      stroke: CanvasText;
+    }
+
+    .statusGlyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer variants {
+  .steps .track {
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--border-size-2);
+    block-size: auto;
+    border-width: 0;
+  }
+
+  /* Ring: inline, the ring beside its value; its tracks pack at the start even when stretched in a panel. */
+  .kindRing {
+    display: inline-grid;
+    grid-template-columns: auto auto auto;
+    grid-template-areas: 'label track readout';
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--size-px-2);
+  }
+
+  /* Rail (§10.19): a --border-size-2 --role-hairline line, the position in --primary12. */
+  .rail .track {
+    block-size: var(--border-size-2);
+    border-width: 0;
+    background-color: var(--role-hairline);
+  }
+
+  /*
+   * Viewport fallback: label | track | value in one row from --md-n-above…
+   * The columns are fixed shares (1 : 2 : 1), not sized by each readout, so
+   * the tracks of stacked rows start and end on one line; the value column
+   * never drops below its unbreakable text.
+   */
+  @media (min-width: 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+  }
+
+  /* …refined by the meter-panel container: stacked below 768 px, rows from 768 (§5.10.2). */
+  @container meter-panel (width < 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) auto;
+      grid-template-areas:
+        'label readout'
+        'track track';
+    }
+  }
+
+  @container meter-panel (width >= 768px) {
+    .bar,
+    .steps,
+    .rail {
+      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(min-content, 1fr);
+      grid-template-areas: 'label track readout';
+    }
+  }
+}
+
+@layer states {
+  /* Indeterminate: the track in line-dashed (provisional [D66]), no indicator; "Loading…" beside it. */
+  .base[data-indeterminate] .track {
+    padding-block: var(--border-size-1);
+    border-width: 0;
+  }
+
+  .base[data-indeterminate] .indicator {
+    display: none;
+  }
+
+  .base[data-indeterminate] .dashes {
+    display: block;
+  }
+
+  /* The dashes advance slowly, and only under --motionOK; never shimmer, pulse or opacity (§10.20). */
+  @media (prefers-reduced-motion: no-preference) {
+    .base[data-indeterminate] .dashLine {
+      animation: dashAdvance calc(var(--fgd-duration-disclosure) * 6) linear infinite;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* Progress is hidden in print, except steps, which print their "2 of 4" text (§10.18). */
+    .base {
+      display: none;
+    }
+
+    .steps {
+      display: grid;
+    }
+
+    .steps .track {
+      display: none;
+    }
+  }
+}

package/feedback/tag/Tag.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../../foundations/icon';
+export declare const tag: (props?: ({
+    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 TagVariants = VariantProps<typeof tag>;
+/** Props for Tag: `span` props, `render`, the link target, the icon and the color axes. */
+export type TagProps = useRender.ComponentProps<'span'> & {
+    /** Makes the tag a link to its topic; it renders an `<a>` and gains the link states. */
+    href?: string;
+    /**
+     * The topic's subject symbol, Material Symbols Rounded at the tag tier
+     * (20 px, FILL 0): an inventory name, or a registered subject symbol's
+     * SVG element, which the tag sizes and fills in `currentColor` [D166].
+     * It carries the tag's only color, `--role-accent`.
+     */
+    icon?: IconName | React.ReactElement;
+    /**
+     * Primary Radix scale: the label ink and focus ring. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: TagVariants['primary'];
+    /**
+     * Secondary Radix scale: the taxonomy scale, which colors the icon
+     * through `--role-accent`. Omitted, it inherits the scope.
+     */
+    secondary?: TagVariants['secondary'];
+};
+/**
+ * A topic tag: an icon plus a caps label (`type-label` at weight 700,
+ * authored in sentence case; topic tags keep caps [D160]), with no
+ * container. Color sits on the icon only, never on the small label text.
+ * Pass `href` to link it to its topic.
+ */
+export declare function Tag(props: TagProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/feedback/tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../src/feedback/tag/Tag.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,EAAQ,KAAK,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAoB5D,eAAO,MAAM,GAAG;;;8EAMd,CAAA;AAEF,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,GAAG,CAAC,CAAA;AAE3C,2FAA2F;AAC3F,MAAM,MAAM,QAAQ,GAAG,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,GAAG;IACxD,wFAAwF;IACxF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;OAKG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,YAAY,CAAA;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;CACrC,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,GAAG,CAAC,KAAK,EAAE,QAAQ,0EAgClC"}

package/feedback/tag/Tag.js

@@ -0,0 +1,56 @@
+'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 { Icon } from '../../foundations/icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './tag.module.css';
+/*
+ * Tag (§10.11): the topic tag, taxonomy with no container.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: tag.module.css; CVA function `tag`.
+ * - Axes: `primary`, `secondary` → scales module classes.
+ * - Compound variants: none. Defaults: none; color axes: none.
+ * - Color fallback: the taxonomy scale, passed as `secondary`; omitted, it
+ *   inherits the scope.
+ * - States (linked tags only): `:hover` → the bare-text underline on the
+ *   label, --role-accent at --border-size-2, offset --size-px-1 [D181];
+ *   `:focus-visible` → ring around icon and label.
+ * - Parts: base, icon, label.
+ * - Scope: none. Container: none; inherits its context.
+ */
+export const tag = cva(styles.base, {
+    variants: {
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * A topic tag: an icon plus a caps label (`type-label` at weight 700,
+ * authored in sentence case; topic tags keep caps [D160]), with no
+ * container. Color sits on the icon only, never on the small label text.
+ * Pass `href` to link it to its topic.
+ */
+export function Tag(props) {
+    const { render, ref, className, href, icon, primary, secondary, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const glyph = icon == null ? null : typeof icon === 'string' ? (React.createElement(Icon, { name: icon, size: "tag", className: styles.icon })) : (React.createElement("span", { className: styles.icon, "aria-hidden": "true" }, icon));
+    return useRender({
+        defaultTagName: href == null ? 'span' : 'a',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            ...(href == null ? null : { href }),
+            className: tag({ primary, secondary, className }),
+            children: (React.createElement(React.Fragment, null,
+                glyph,
+                React.createElement("span", { className: styles.label }, children))),
+        }, rest),
+    });
+}
+//# sourceMappingURL=Tag.js.map

package/feedback/tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../src/feedback/tag/Tag.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AACrD,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAA;AACvD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,IAAI,EAAiB,MAAM,wBAAwB,CAAA;AAC5D,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,MAAM,MAAM,kBAAkB,CAAA;AAErC;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAClC,QAAQ,EAAE;QACR,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AA2BF;;;;;GAKG;AACH,MAAM,UAAU,GAAG,CAAC,KAAe;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAC3F,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,MAAM,KAAK,GACT,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC/C,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,KAAK,EAAC,SAAS,EAAE,MAAM,CAAC,IAAI,GAAI,CACxD,CAAC,CAAC,CAAC,CACF,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,iBAAc,MAAM,IAC7C,IAAI,CACA,CACR,CAAA;IAEH,OAAO,SAAS,CAAC;QACf,cAAc,EAAE,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;QAC3C,MAAM;QACN,GAAG;QACH,KAAK,EAAE,UAAU,CACf;YACE,GAAG,KAAK;YACR,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,EAAE,IAAI,EAAmC,CAAC;YACrE,SAAS,EAAE,GAAG,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,CAAC;YACjD,QAAQ,EAAE,CACR;gBACG,KAAK;gBACN,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK,IAAG,QAAQ,CAAQ,CAC/C,CACJ;SACF,EACD,IAAI,CACL;KACF,CAAC,CAAA;AACJ,CAAC"}

package/feedback/tag/index.d.ts.map

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

package/feedback/tag/index.js.map

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

package/feedback/tag/tag.module.css

@@ -0,0 +1,99 @@
+/*
+ * Tag (§10.11): the topic tag. Parts: `base` (no container), `icon` (the
+ * subject symbol at the tag tier, the tag's only color, --role-accent) and
+ * `label` (caps, --primary12). Colors are role variables 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. Topic tags keep caps [D160]. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* No container: icon, --size-px-2-5, label. */
+  .base {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-px-2-5);
+    max-inline-size: 100%;
+    color: var(--primary12);
+    text-decoration-line: none;
+    vertical-align: middle;
+  }
+
+  /* The subject symbol: tag tier (--size-px-4), filled in --role-accent. */
+  .icon {
+    display: inline-flex;
+    flex: none;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    color: var(--role-accent);
+    fill: currentColor;
+  }
+
+  .icon > svg {
+    inline-size: 100%;
+    block-size: 100%;
+    fill: currentColor;
+  }
+
+  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
+  .label {
+    font-weight: var(--font-weight-7);
+    color: var(--primary12);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  /* A linked tag's target reaches --fgd-size-hit, extended invisibly (§9.1) [D43]. */
+  .base[href] {
+    position: relative;
+  }
+
+  .base[href]::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: 100%;
+    block-size: var(--fgd-size-hit);
+    min-inline-size: var(--fgd-size-hit);
+    translate: -50% -50%;
+  }
+
+  @media (forced-colors: active) {
+    .icon {
+      color: CanvasText;
+    }
+  }
+
+  /* Hover transition [D181]: --fgd-duration-quick, --ease-out-3. */
+  @media (prefers-reduced-motion: no-preference) {
+    .label {
+      transition-property: text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer states {
+  /*
+   * Linked tag hover: tag lists are bare text, so the label takes the
+   * bare-text underline, --role-accent at --border-size-2, offset
+   * --size-px-1 (§10.11) [D181].
+   */
+  .base[href]:hover .label {
+    text-decoration-line: underline;
+  }
+
+  /* Focus: the ring around icon and label, keyboard only [D45]. */
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+    border-radius: var(--radius-1);
+  }
+}

package/feedback/toast/Toast.d.ts

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { Toast as BaseToast } from '@base-ui/react/toast';
+import { type Status } from '../../utils/StatusGlyph';
+import { type PrimaryScale, type RadixScale } from '../../utils/scales';
+export declare const toast: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type ToastStatus = Status;
+/** An action cell's button props: its label (`children`, title case), `onClick`, `aria-busy` … */
+export type ToastAction = Omit<React.ComponentPropsWithoutRef<'button'>, 'className' | 'style'> & {
+    /**
+     * A destructive action ("Discard Notes"): the label takes the danger ink,
+     * --role-danger-text [D192]. Default `false`.
+     */
+    destructive?: boolean;
+};
+/** What the system keeps on each toast's `data`. */
+export interface ToastData {
+    actions?: ToastAction[];
+}
+/** Options for a toast. */
+export interface ToastOptions {
+    /** Reuse an id to replace a showing toast. */
+    id?: string;
+    /** The message's lead, in `type-body-ui` at --font-weight-6 ("3 items removed"). */
+    title?: React.ReactNode;
+    /** The rest of the message, in `type-body-ui`; up to 3 lines at base. */
+    description?: React.ReactNode;
+    /**
+     * `info` ○, `success` ●, `warning` ▲ or `danger` ◆, each with its inner
+     * mark in the status scale. Omitted: the neutral toast, no glyph.
+     * Warning and danger persist; danger is announced assertively.
+     */
+    status?: ToastStatus;
+    /**
+     * Action cells: full-height `type-button` text cells with title-case
+     * labels ("Undo", "View Order"). A toast with actions persists. While an
+     * action runs, update it with `aria-busy` and an "-ing…" label ("Undoing…").
+     * A destructive action sets `destructive`, which draws its label red [D192].
+     */
+    actions?: ToastAction[];
+    /**
+     * Auto-dismiss time in ms for a neutral, info or success toast without
+     * actions: at least 6000 (--fgd-duration-toast); `0` persists.
+     */
+    timeout?: number;
+    /** Called when the toast starts closing. */
+    onClose?: () => void;
+    /** Called when the toast has left the DOM. */
+    onRemove?: () => void;
+}
+type BaseToastObject = BaseToast.Root.ToastObject<ToastData>;
+/** The toast manager with the §10.17 rules applied. */
+export interface ToastManager {
+    /** The toasts, newest first. */
+    toasts: BaseToastObject[];
+    /** Shows a toast and returns its id. Only one shows at a time; the rest queue. */
+    add: (options: ToastOptions) => string;
+    /** Changes a toast, such as an action's busy label; persistence is recomputed. */
+    update: (id: string, options: Omit<Partial<ToastOptions>, 'id'>) => void;
+    /** Closes one toast, or all of them without an id. */
+    close: (id?: string) => void;
+}
+/**
+ * Adds, updates and closes toasts from inside a ToastProvider, with the
+ * §10.17 rules applied: warning, danger and action toasts persist, the
+ * rest stay at least 6 s, and danger is announced assertively.
+ */
+export declare function useToastManager(): ToastManager;
+/** Props for ToastProvider. */
+export interface ToastProviderProps {
+    children?: React.ReactNode;
+    /**
+     * Default auto-dismiss time in ms, at least 6000 (--fgd-duration-toast).
+     * Timers pause on hover, on focus and while the tab is hidden.
+     */
+    timeout?: number;
+    /** A manager from `Toast.createToastManager()` in @base-ui/react, to add toasts from outside React. */
+    toastManager?: BaseToast.Provider.Props['toastManager'];
+    /** Primary Radix scale inside the bar's `white` scope. Omitted, the white preset's default [D133]. */
+    primary?: PrimaryScale;
+    /** Secondary Radix scale inside the bar. Omitted, the white preset's default. */
+    secondary?: RadixScale;
+    /** The bar region's accessible name. Default "Notifications". */
+    label?: string;
+    /** The element the bar's portal renders into. Default: `document.body`. */
+    container?: BaseToast.Portal.Props['container'];
+}
+/**
+ * Provides toasts to its children and renders the docked bar: full width
+ * at the bottom viewport edge on --layer-5, a `white` scope with a
+ * --border-size-2 --primary12 top rule, content aligned to
+ * --fgd-container-content. One toast shows at a time; a queue count
+ * ("1 of 3") shows while more wait. The page reserves no space for it.
+ */
+export declare function ToastProvider(props: ToastProviderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Toast.d.ts.map

package/feedback/toast/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/feedback/toast/Toast.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAKzD,OAAO,EAA2C,KAAK,MAAM,EAAE,MAAM,yBAAyB,CAAA;AAQ9F,OAAO,EAGL,KAAK,YAAY,EACjB,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAA;AAsC3B,eAAO,MAAM,KAAK,oFAAmB,CAAA;AAErC,MAAM,MAAM,WAAW,GAAG,MAAM,CAAA;AAKhC,kGAAkG;AAClG,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,GAAG;IAChG;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,oDAAoD;AACpD,MAAM,WAAW,SAAS;IACxB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;CACxB;AAED,2BAA2B;AAC3B,MAAM,WAAW,YAAY;IAC3B,8CAA8C;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,oFAAoF;IACpF,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,EAAE,CAAA;IACvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,4CAA4C;IAC5C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAED,KAAK,eAAe,GAAG,SAAS,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;AAqC5D,uDAAuD;AACvD,MAAM,WAAW,YAAY;IAC3B,gCAAgC;IAChC,MAAM,EAAE,eAAe,EAAE,CAAA;IACzB,kFAAkF;IAClF,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAA;IACtC,kFAAkF;IAClF,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,EAAE,IAAI,CAAC,KAAK,IAAI,CAAA;IACxE,sDAAsD;IACtD,KAAK,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7B;AAED;;;;GAIG;AACH,wBAAgB,eAAe,IAAI,YAAY,CAa9C;AAED,+BAA+B;AAC/B,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,uGAAuG;IACvG,YAAY,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,CAAA;IACvD,sGAAsG;IACtG,OAAO,CAAC,EAAE,YAAY,CAAA;IACtB,iFAAiF;IACjF,SAAS,CAAC,EAAE,UAAU,CAAA;IACtB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2EAA2E;IAC3E,SAAS,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;CAChD;AAED;;;;;;GAMG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAYtD"}