@fairgarden/design 0.1.0-alpha.0

package/components/Alert/alert.module.css

@@ -0,0 +1,99 @@
+/*
+ * Alert: the inline status block (§10.20) [D110]. On the page ground, never a
+ * tinted panel: a --ds-stroke-3 start bar and the glyph in --role-status, a
+ * type-runin word lead, the message in type-body-ui --primary12, padding
+ * --size-px-3 from the bar. The secondary is the status scale, so
+ * --role-status resolves to --secondary11 (--primary12 on saturated grounds,
+ * --secondary12 on brick) without the module reading the scope [D141, D155].
+ */
+
+/* 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. */
+.base {
+  composes: typeBodyUi from '../../utils/type.module.css';
+  composes: lineSolid from '../../utils/line.module.css';
+}
+
+.lead {
+  composes: typeRunin from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* The start bar (part `bar`) is the root's inline-start border, so it spans the block and prints as a rule. */
+  .base {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: start;
+    column-gap: var(--size-px-2);
+    row-gap: var(--ds-space-12);
+    border-width: 0;
+    border-inline-start-width: var(--ds-stroke-3);
+    border-inline-start-color: var(--role-status);
+    padding-inline-start: var(--size-px-3);
+    color: var(--primary12);
+  }
+
+  /*
+   * Custom §1.5.4 glyph at the tag tier: the shape and inner mark in
+   * --role-status (currentColor), knockouts and the outline disc in
+   * --role-status-fill. One line box tall so it sits on the first line.
+   */
+  .glyph {
+    grid-column: 1;
+    grid-row: 1;
+    display: block;
+    inline-size: var(--size-px-4);
+    block-size: var(--size-px-4);
+    block-size: 1lh;
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .message {
+    grid-column: 2;
+    min-inline-size: 0;
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  /* The status word: --primary12, or the status scale's step 12 on brick [D173]. */
+  .lead {
+    color: var(--role-status-text);
+  }
+
+  .action {
+    grid-column: 2;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--size-px-2);
+  }
+
+  /* Forced colors: keep the shape and its knockout mark legible. */
+  @media (forced-colors: active) {
+    .glyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}
+
+@layer print {
+  @media print {
+    /* A failed module prints its status line; the glyph and bar print black through the remap. */
+    .base {
+      break-inside: avoid;
+    }
+
+    .action {
+      display: none;
+    }
+  }
+}

package/components/Alert/index.d.ts

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

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

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

package/components/Alert/index.js

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

package/components/Alert/index.js.map

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

package/components/AlertDialog/AlertDialog.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { type ButtonProps } from '../Button';
+import { type DialogActionsProps, type DialogBodyProps, type DialogDescriptionProps, type DialogPopupProps, type DialogTitleProps } from '../Dialog';
+export declare const alertDialog: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export type AlertDialogStatus = 'warning' | 'danger';
+/** Props for AlertDialog: Base UI AlertDialog.Root props (`open`, `onOpenChange` …). */
+export type AlertDialogProps<Payload = unknown> = BaseAlertDialog.Root.Props<Payload>;
+/**
+ * Groups the parts of an alert dialog (Base UI AlertDialog.Root): always
+ * modal, and an outside press never dismisses it. It may open over a
+ * Dialog, never deeper; the Dialog stays visible, framed and inert.
+ */
+export declare function AlertDialog<Payload = unknown>(props: AlertDialogProps<Payload>): React.JSX.Element;
+/** Props for AlertDialogTrigger: Button props plus Base UI's trigger `handle` and `payload`. */
+export type AlertDialogTriggerProps = ButtonProps & {
+    /** Associates a detached trigger with an AlertDialog created by `AlertDialog.createHandle`. */
+    handle?: BaseAlertDialog.Trigger.Props['handle'];
+    /** A payload handed to the AlertDialog's children function when this trigger opens it. */
+    payload?: unknown;
+};
+/** Opens the alert dialog. Renders a Button (§9.2) whose label names the act ("Delete Photos"). */
+export declare function AlertDialogTrigger(props: AlertDialogTriggerProps): React.JSX.Element;
+/** Props for AlertDialogPopup: DialogPopup props (without `wide`) plus the required status. */
+export type AlertDialogPopupProps = Omit<DialogPopupProps, 'wide'> & {
+    /**
+     * Required (no default): `warning` draws ▲ with !, `danger` ◆ with ×, at
+     * the block tier above the title [D58]. The glyph and the words carry the
+     * seriousness, never a red fill.
+     */
+    status: AlertDialogStatus;
+    /** The glyph's accessible name; defaults to the English status word. */
+    statusLabel?: string;
+};
+/**
+ * The alert panel: the Dialog panel (--size-sm, white scope, --ds-stroke-3
+ * --primary12 frame, full-screen sheet below --md-n-above) with the status
+ * glyph above the title. Compose `AlertDialogBody` (title and one
+ * consequence sentence) and `AlertDialogActions` inside it; there is no
+ * close X, only `AlertDialogCancel`, which takes focus on open.
+ */
+export declare function AlertDialogPopup(props: AlertDialogPopupProps): React.JSX.Element;
+/** Props for AlertDialogCancel: Button props for the outline twin that dismisses the alert. */
+export type AlertDialogCancelProps = ButtonProps;
+/**
+ * The least destructive action, and the alert's only way out besides Esc:
+ * an `outline` Button that closes the alert and takes focus when it opens.
+ * Name the act it keeps ("Keep Photos"), never "OK" or "Cancel" alone.
+ */
+export declare function AlertDialogCancel(props: AlertDialogCancelProps): React.JSX.Element;
+/** Props for AlertDialogTitle: DialogTitle props. */
+export type AlertDialogTitleProps = DialogTitleProps;
+/** The alert's title and accessible name, in `type-itemhead`: the question ("Delete 3 photos?"). */
+export declare function AlertDialogTitle(props: AlertDialogTitleProps): React.JSX.Element;
+/** Props for AlertDialogDescription: DialogDescription props. */
+export type AlertDialogDescriptionProps = DialogDescriptionProps;
+/** One consequence sentence, in `type-body-ui` --primary12. */
+export declare function AlertDialogDescription(props: AlertDialogDescriptionProps): React.JSX.Element;
+/** Props for AlertDialogBody: DialogBody props. */
+export type AlertDialogBodyProps = DialogBodyProps;
+/** Holds the title and description under the glyph; scrolls with overflow edges like the Dialog body. */
+export declare function AlertDialogBody(props: AlertDialogBodyProps): React.JSX.Element;
+/** Props for AlertDialogActions: DialogActions props. */
+export type AlertDialogActionsProps = DialogActionsProps;
+/**
+ * The action bar: the confirming `solid` Button first ("Delete 3 Photos",
+ * "Deleting…" while busy), then `AlertDialogCancel`. Stacked below
+ * --md-n-above, one row from it.
+ */
+export declare function AlertDialogActions(props: AlertDialogActionsProps): React.JSX.Element;
+//# sourceMappingURL=AlertDialog.d.ts.map

package/components/AlertDialog/AlertDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.d.ts","sourceRoot":"","sources":["../../src/components/AlertDialog/AlertDialog.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,6BAA6B,CAAA;AAG5E,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,WAAW,CAAA;AACpD,OAAO,EAML,KAAK,kBAAkB,EACvB,KAAK,eAAe,EACpB,KAAK,sBAAsB,EAC3B,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACtB,MAAM,WAAW,CAAA;AA4BlB,eAAO,MAAM,WAAW,oFAAmB,CAAA;AAE3C,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,QAAQ,CAAA;AAEpD,wFAAwF;AACxF,MAAM,MAAM,gBAAgB,CAAC,OAAO,GAAG,OAAO,IAAI,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAErF;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,gBAAgB,CAAC,OAAO,CAAC,qBAE9E;AAED,gGAAgG;AAChG,MAAM,MAAM,uBAAuB,GAAG,WAAW,GAAG;IAClD,+FAA+F;IAC/F,MAAM,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAChD,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,mGAAmG;AACnG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAShE;AAID,+FAA+F;AAC/F,MAAM,MAAM,qBAAqB,GAAG,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC,GAAG;IACnE;;;;OAIG;IACH,MAAM,EAAE,iBAAiB,CAAA;IACzB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAsB5D;AAED,+FAA+F;AAC/F,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAA;AAEhD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,qBAS9D;AAED,qDAAqD;AACrD,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAA;AAEpD,oGAAoG;AACpG,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,qBAE5D;AAED,iEAAiE;AACjE,MAAM,MAAM,2BAA2B,GAAG,sBAAsB,CAAA;AAEhE,+DAA+D;AAC/D,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,qBAExE;AAED,mDAAmD;AACnD,MAAM,MAAM,oBAAoB,GAAG,eAAe,CAAA;AAElD,yGAAyG;AACzG,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,qBAE1D;AAED,yDAAyD;AACzD,MAAM,MAAM,uBAAuB,GAAG,kBAAkB,CAAA;AAExD;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,qBAEhE"}

package/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,94 @@
+'use client';
+import * as React from 'react';
+import { AlertDialog as BaseAlertDialog } from '@base-ui/react/alert-dialog';
+import { cva } from 'class-variance-authority';
+import { Button } from '../Button';
+import { DialogActions, DialogBody, DialogDescription, DialogPopup, DialogTitle, } from '../Dialog';
+import { cx, resolveClassName } from '../../utils/className';
+import { overlayAttributes } from '../../utils/overlay';
+import { secondaryScaleVariants } from '../../utils/scales';
+import { StatusGlyph, statusLabels, statusScales } from '../../utils/StatusGlyph';
+import styles from './alert-dialog.module.css';
+/*
+ * Alert Dialog (§10.14): confirms a destructive or irreversible action.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: alert-dialog.module.css; CVA function `alertDialog`. The panel,
+ *   body, title, description and action bar are the Dialog's
+ *   (dialog.module.css, through DialogPopup); this module adds the glyph.
+ * - Axes: `status` → warning | danger (selects the ▲ or ◆ glyph and its
+ *   scale; it carries no class); `primary`, `secondary` → applied inside
+ *   the panel's scope by DialogPopup.
+ * - Compound variants: none. Defaults: `status` is required, no default;
+ *   color axes: none.
+ * - Color fallback: the panel takes the `white` preset's defaults; the
+ *   glyph's secondary is the status scale (warning amber, danger red) [D129].
+ * - States: as Dialog. Focus opens on the least destructive action
+ *   (AlertDialogCancel); Esc means Cancel; outside presses never dismiss.
+ * - Parts: base (the panel, with the Dialog's base), glyph.
+ * - Scope: as Dialog. The glyph writes the overlay scope attributes beside
+ *   its status scale so --role-status re-resolves on it [D148].
+ * - Container: none; the panel is page frame (see Dialog).
+ */
+export const alertDialog = cva(styles.base);
+/**
+ * Groups the parts of an alert dialog (Base UI AlertDialog.Root): always
+ * modal, and an outside press never dismisses it. It may open over a
+ * Dialog, never deeper; the Dialog stays visible, framed and inert.
+ */
+export function AlertDialog(props) {
+    return React.createElement(BaseAlertDialog.Root, { ...props });
+}
+/** Opens the alert dialog. Renders a Button (§9.2) whose label names the act ("Delete Photos"). */
+export function AlertDialogTrigger(props) {
+    const { handle, payload, ...buttonProps } = props;
+    return (React.createElement(BaseAlertDialog.Trigger, { handle: handle, payload: payload, render: React.createElement(Button, { ...buttonProps }) }));
+}
+const CancelContext = React.createContext(null);
+/**
+ * The alert panel: the Dialog panel (--size-sm, white scope, --ds-stroke-3
+ * --primary12 frame, full-screen sheet below --md-n-above) with the status
+ * glyph above the title. Compose `AlertDialogBody` (title and one
+ * consequence sentence) and `AlertDialogActions` inside it; there is no
+ * close X, only `AlertDialogCancel`, which takes focus on open.
+ */
+export function AlertDialogPopup(props) {
+    const { status, statusLabel, className, initialFocus, children, ...rest } = props;
+    const cancelRef = React.useRef(null);
+    // Focus on open: the least destructive action, else Base UI's default.
+    const focusCancel = React.useCallback(() => cancelRef.current ?? true, []);
+    return (React.createElement(DialogPopup, { ...rest, initialFocus: initialFocus ?? focusCancel, className: resolveClassName(className, (extra) => alertDialog({ className: extra })) },
+        React.createElement(StatusGlyph, { ...overlayAttributes, status: status, label: statusLabel ?? statusLabels[status], className: cx(styles.glyph, secondaryScaleVariants[statusScales[status]]) }),
+        React.createElement(CancelContext.Provider, { value: cancelRef }, children)));
+}
+/**
+ * The least destructive action, and the alert's only way out besides Esc:
+ * an `outline` Button that closes the alert and takes focus when it opens.
+ * Name the act it keeps ("Keep Photos"), never "OK" or "Cancel" alone.
+ */
+export function AlertDialogCancel(props) {
+    const cancelRef = React.useContext(CancelContext);
+    const { variant = 'outline', ...buttonProps } = props;
+    return (React.createElement(BaseAlertDialog.Close, { ref: cancelRef ?? undefined, render: React.createElement(Button, { ...buttonProps, variant: variant }) }));
+}
+/** The alert's title and accessible name, in `type-itemhead`: the question ("Delete 3 photos?"). */
+export function AlertDialogTitle(props) {
+    return React.createElement(DialogTitle, { ...props });
+}
+/** One consequence sentence, in `type-body-ui` --primary12. */
+export function AlertDialogDescription(props) {
+    return React.createElement(DialogDescription, { ...props });
+}
+/** Holds the title and description under the glyph; scrolls with overflow edges like the Dialog body. */
+export function AlertDialogBody(props) {
+    return React.createElement(DialogBody, { ...props });
+}
+/**
+ * The action bar: the confirming `solid` Button first ("Delete 3 Photos",
+ * "Deleting…" while busy), then `AlertDialogCancel`. Stacked below
+ * --md-n-above, one row from it.
+ */
+export function AlertDialogActions(props) {
+    return React.createElement(DialogActions, { ...props });
+}
+//# sourceMappingURL=AlertDialog.js.map

package/components/AlertDialog/AlertDialog.js.map

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

package/components/AlertDialog/alert-dialog.module.css

@@ -0,0 +1,53 @@
+/*
+ * Alert Dialog (§10.14). CVA function `alertDialog` in AlertDialog.tsx.
+ * Parts: base (the panel, beside the Dialog's own base), glyph. The panel,
+ * body, title, description and action bar are the Dialog's
+ * (dialog.module.css); this module adds only the Alert's status glyph:
+ * ▲ with ! (warning) or ◆ with × (danger) at --ds-size-icon-block above the
+ * title, in --role-status of the status scale, which the glyph carries as
+ * its own secondary, with its inner mark [D58, D129, D141, D155].
+ */
+
+@layer base {
+  /* Local dimension: the glyph's inset matches the panel's padding at each tier. */
+  .base {
+    --alert-dialog-inset: var(--size-px-3);
+  }
+
+  @media (min-width: 1024px) {
+    .base {
+      --alert-dialog-inset: var(--size-px-7);
+    }
+  }
+
+  /*
+   * The status glyph at the block tier: shape and inner mark in
+   * --role-status (currentColor); knockouts in --role-status-fill. Drawn on
+   * a 20 px grid, so the inner mark scales with the glyph.
+   */
+  .glyph {
+    flex: none;
+    display: block;
+    inline-size: var(--ds-size-icon-block);
+    block-size: var(--ds-size-icon-block);
+    margin-block-start: var(--alert-dialog-inset);
+    margin-inline: var(--alert-dialog-inset);
+    overflow: visible;
+    color: var(--role-status);
+    fill: var(--role-status-fill);
+    stroke: var(--role-status-fill);
+    stroke-width: var(--ds-stroke-1-5);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Forced colors: keep the shape and its knockout mark legible. */
+  @media (forced-colors: active) {
+    .glyph {
+      forced-color-adjust: none;
+      color: CanvasText;
+      fill: Canvas;
+      stroke: Canvas;
+    }
+  }
+}

package/components/AlertDialog/index.d.ts

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

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

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

package/components/AlertDialog/index.js

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

package/components/AlertDialog/index.js.map

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

package/components/AnnouncementBar/AnnouncementBar.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type PageGroundPreset } from '../Ground';
+export declare const announcementBar: (props?: ({
+    kind?: "field" | "bar" | null | undefined;
+    voice?: "standard" | "mono" | "dual" | null | undefined;
+    record?: boolean | null | undefined;
+    ruled?: boolean | null | undefined;
+    interactive?: 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 AnnouncementBarVariants = Omit<VariantProps<typeof announcementBar>, 'interactive'>;
+/** The fields a full-container bar may take [D180]: never `pink`, never `royal`. */
+export type AnnouncementField = 'forest' | 'leaf' | 'amber' | 'brick';
+/** The countdown: boxed digits to an end time, which print as the end date. */
+export interface AnnouncementCountdown {
+    /** The end, a Date or an ISO 8601 string. */
+    end: Date | string;
+    /** The text that replaces the digits at zero, e.g. "Sale ended". */
+    expired: React.ReactNode;
+    /**
+     * The printed end date line. Default "Ends 30 Sept 2026", formatted from
+     * `end` in `locale` and the reader's time zone once the page has loaded.
+     */
+    endLabel?: string;
+    /** The locale for the default end label. Default `en-GB`. */
+    locale?: string;
+    /** Unit labels after the day, hour and minute cells. Default `d`, `h`, `min`. */
+    units?: readonly [days: string, hours: string, minutes: string];
+}
+interface AnnouncementBarCommonProps extends Omit<React.ComponentPropsWithRef<'aside'>, 'children'> {
+    /** The message: one short notice, authored; ≤ 2 lines at base, 1 from `--md-n-above`. */
+    children: React.ReactNode;
+    /**
+     * The one link, after the message: underlined at rest in `--role-accent`
+     * (§9.3 body link); it prints its short URL.
+     */
+    link?: {
+        href: string;
+        label: React.ReactNode;
+    };
+    /**
+     * `standard` (default): caps `type-label`, centered. `mono`: `type-data`
+     * caps for dated or technical notices ("CLOSED 24–26 DEC"). `dual`: the
+     * caps run plus one serif caps phrase, `AnnouncementBarAccent`.
+     */
+    voice?: AnnouncementBarVariants['voice'];
+    /**
+     * A notice of record (a legal change, a recall): it prints once, between
+     * two 0.75 pt rules. Default `false`: the bar is hidden in print.
+     */
+    record?: boolean;
+    /** Boxed countdown digits; a polite live region announces at most once a minute. */
+    countdown?: AnnouncementCountdown;
+    /** Adds the dismiss button (`close`, in a 44 px target). Default `false`. */
+    dismissible?: boolean;
+    /** The dismiss button's accessible name. Default "Dismiss announcement". */
+    dismissLabel?: string;
+    /**
+     * Remembers the dismissal per viewer under this key (browser storage), so
+     * the bar stays gone on later visits. Change the key for a new notice.
+     */
+    storageKey?: string;
+    /** Called after the bar is dismissed. */
+    onDismiss?: () => void;
+    /**
+     * Primary Radix scale: message, digits, cells, glyph and focus ring. Never
+     * defaulted; omitted, it inherits the bar's preset [D133].
+     */
+    primary?: AnnouncementBarVariants['primary'];
+    /** Secondary Radix scale: the link underline and its hover ink. Never defaulted. */
+    secondary?: AnnouncementBarVariants['secondary'];
+}
+interface AnnouncementBarBarProps extends AnnouncementBarCommonProps {
+    /**
+     * `bar` (default): a full-bleed page-ground bar with its bottom rule.
+     * `field`: a full-container field with its `--primary12` edge [D180].
+     */
+    kind?: 'bar';
+    /**
+     * The bar's page ground: `white`, `paper` or the page's pastel. Omitted,
+     * the bar sits on the surrounding page ground.
+     */
+    preset?: PageGroundPreset;
+    /** The bottom rule is required on every page-ground bar. */
+    ruled?: true;
+}
+interface AnnouncementBarFieldProps extends AnnouncementBarCommonProps {
+    kind: 'field';
+    /** The field: `forest` (default), `leaf`, `amber` or `brick`, counted against its ration [D177]. */
+    preset?: AnnouncementField;
+    /** A field draws its `--primary12` edge instead of the rule. */
+    ruled?: false;
+}
+/**
+ * Props for AnnouncementBar: `aside` props, the message, link, voice,
+ * record, countdown and dismissal, the kind with its preset, and the color
+ * axes. `ruled` is required with `kind: bar` and excluded with `kind: field`.
+ */
+export type AnnouncementBarProps = AnnouncementBarBarProps | AnnouncementBarFieldProps;
+/**
+ * The announcement bar. Never sticky, never rotating, never truncated with
+ * an ellipsis; it scrolls away with the page. Hidden in print unless it is
+ * a `record`, whose countdown prints its end date.
+ */
+export declare function AnnouncementBar(props: AnnouncementBarProps): React.JSX.Element | null;
+/** Props for AnnouncementBarAccent: `span` props. */
+export type AnnouncementBarAccentProps = React.ComponentPropsWithRef<'span'>;
+/**
+ * The dual voice's one serif caps phrase, set inside the message at the
+ * run's cap height (Rocco's two-voice bar). Use it once, with `voice="dual"`.
+ */
+export declare function AnnouncementBarAccent(props: AnnouncementBarAccentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AnnouncementBar.d.ts.map

package/components/AnnouncementBar/AnnouncementBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementBar.d.ts","sourceRoot":"","sources":["../../src/components/AnnouncementBar/AnnouncementBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAU,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAA;AA8CzD,eAAO,MAAM,eAAe;;;;;;;;8EA+B1B,CAAA;AAEF,KAAK,uBAAuB,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,eAAe,CAAC,EAAE,aAAa,CAAC,CAAA;AAExF,oFAAoF;AACpF,MAAM,MAAM,iBAAiB,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAErE,+EAA+E;AAC/E,MAAM,WAAW,qBAAqB;IACpC,6CAA6C;IAC7C,GAAG,EAAE,IAAI,GAAG,MAAM,CAAA;IAClB,oEAAoE;IACpE,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,6DAA6D;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iFAAiF;IACjF,KAAK,CAAC,EAAE,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,CAAA;CAChE;AAED,UAAU,0BAA2B,SAAQ,IAAI,CAC/C,KAAK,CAAC,qBAAqB,CAAC,OAAO,CAAC,EACpC,UAAU,CACX;IACC,yFAAyF;IACzF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAA;IAC/C;;;;OAIG;IACH,KAAK,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,CAAA;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oFAAoF;IACpF,SAAS,CAAC,EAAE,qBAAqB,CAAA;IACjC,6EAA6E;IAC7E,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,4EAA4E;IAC5E,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB;;;OAGG;IACH,OAAO,CAAC,EAAE,uBAAuB,CAAC,SAAS,CAAC,CAAA;IAC5C,oFAAoF;IACpF,SAAS,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAA;CACjD;AAED,UAAU,uBAAwB,SAAQ,0BAA0B;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAA;IACZ;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAA;IACzB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,IAAI,CAAA;CACb;AAED,UAAU,yBAA0B,SAAQ,0BAA0B;IACpE,IAAI,EAAE,OAAO,CAAA;IACb,oGAAoG;IACpG,MAAM,CAAC,EAAE,iBAAiB,CAAA;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,KAAK,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,uBAAuB,GAAG,yBAAyB,CAAA;AA6FtF;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,4BAmH1D;AAED,qDAAqD;AACrD,MAAM,MAAM,0BAA0B,GAAG,KAAK,CAAC,qBAAqB,CAAC,MAAM,CAAC,CAAA;AAE5E;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAGtE"}