@fairgarden/design 0.1.0-0.canary.0

package/overlays/tooltip/Tooltip.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type VariantProps } from 'class-variance-authority';
+import { TOOLTIP_DELAY_MS } from '../../utils/tokens';
+export declare const tooltip: (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;
+export declare const tooltipTrigger: (props?: ({
+    kind?: "label" | "term" | "hint" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TooltipVariants = VariantProps<typeof tooltip>;
+export type TooltipTriggerKind = NonNullable<VariantProps<typeof tooltipTrigger>['kind']>;
+/** The open delay, mirroring `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+export { TOOLTIP_DELAY_MS };
+/** Props for TooltipProvider: Base UI Tooltip Provider props. */
+export type TooltipProviderProps = BaseTooltip.Provider.Props;
+/**
+ * Shares the open delay across a group of triggers, such as a toolbar: the
+ * first tooltip opens after `--fgd-delay-tooltip` (500 ms), its neighbors
+ * open at once while one is showing.
+ */
+export declare function TooltipProvider({ delay, ...rest }: TooltipProviderProps): React.JSX.Element;
+/** Props for Tooltip: Base UI Tooltip Root props. */
+export type TooltipProps<Payload = unknown> = BaseTooltip.Root.Props<Payload>;
+/**
+ * One tooltip: a `TooltipTrigger` and a `TooltipPopup`. It opens on hover
+ * after 500 ms and on keyboard focus, appears instantly, stays open while the
+ * pointer moves onto it, and Esc dismisses it without moving focus. Touch
+ * screens never show it, so the trigger must make sense without it. It never
+ * prints: definitions behind terms must also exist as footnotes.
+ */
+export declare function Tooltip<Payload = unknown>(props: TooltipProps<Payload>): React.JSX.Element;
+/** Props for TooltipTrigger: Base UI Tooltip Trigger props plus the trigger form. */
+export type TooltipTriggerProps<Payload = unknown> = BaseTooltip.Trigger.Props<Payload> & {
+    /**
+     * `label` (default): the trigger is your control, passed through `render`
+     * (an icon-only Button); the popup text equals its accessible name.
+     * `hint`: a Material `help` glyph at the inline tier beside a label; the
+     * children become its visually hidden accessible name. `term`: the
+     * children, underlined in `line-dotted-fine` at a 2 px offset.
+     */
+    kind?: TooltipTriggerKind;
+};
+/**
+ * The element the tooltip names. With `kind="label"`, pass the control as
+ * `render`, e.g. `render={<Button iconOnly icon="search">Search</Button>}`.
+ * The hint glyph and the term underline follow the trigger's own ground.
+ */
+export declare function TooltipTrigger<Payload = unknown>(props: TooltipTriggerProps<Payload>): React.JSX.Element;
+/** Props for TooltipPopup: Base UI Tooltip Popup props plus placement and the color axes. */
+export type TooltipPopupProps = BaseTooltip.Popup.Props & Pick<BaseTooltip.Positioner.Props, 'side' | 'align'> & {
+    /**
+     * Primary Radix scale inside the popup's scope: face, edge and text.
+     * Omitted, the overlay scope's default applies; the popup never inherits
+     * the trigger's scales.
+     */
+    primary?: TooltipVariants['primary'];
+    /** Secondary Radix scale inside the popup's scope; no part uses it. */
+    secondary?: TooltipVariants['secondary'];
+    /** Props for the Base UI Portal, such as `container`. */
+    portalProps?: Omit<BaseTooltip.Portal.Props, 'children'>;
+};
+/**
+ * The popup: one short line of `type-caption` (three at most), at most
+ * `--fgd-size-tooltip` (280 px) wide, on the overlay scope's `--primary1` face inside a
+ * `--border-size-2` `--primary12` frame with `--radius-1`. It sits
+ * `--size-px-2` from the trigger (`side`, default `top`) and flips or shifts
+ * to stay inside the viewport.
+ */
+export declare function TooltipPopup(props: TooltipPopupProps): React.JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/overlays/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA2BrD,eAAO,MAAM,OAAO;;;8EAKlB,CAAA;AAEF,eAAO,MAAM,cAAc;;8EAWzB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AACnD,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzF,gFAAgF;AAChF,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAK3B,iEAAiE;AACjE,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAwB,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,qBAM1F;AAED,qDAAqD;AACrD,MAAM,MAAM,YAAY,CAAC,OAAO,GAAG,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAE7E;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,qBAEtE;AAED,qFAAqF;AACrF,MAAM,MAAM,mBAAmB,CAAC,OAAO,GAAG,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;IACxF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,qBAyBpF;AAED,6FAA6F;AAC7F,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,GACrD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACrD;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC,uEAAuE;IACvE,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,yDAAyD;IACzD,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;CACzD,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkCpD"}

package/overlays/tooltip/Tooltip.js

@@ -0,0 +1,108 @@
+'use client';
+import * as React from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { cva } from 'class-variance-authority';
+import { Icon } from '../../foundations/icon';
+import { resolveClassName } from '../../utils/className';
+import { OVERLAY_COLLISION_PADDING, OVERLAY_SIDE_OFFSET, OverlayScope, overlayAttributes, overlayScales, } from '../../utils/overlay';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { TOOLTIP_DELAY_MS } from '../../utils/tokens';
+import styles from './tooltip.module.css';
+/*
+ * Tooltip (§10.16): names an icon-only control, or gives a brief,
+ * non-essential hint. Never links, actions or required information.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: tooltip.module.css; CVA functions `tooltip` (the popup) and
+ *   `tooltipTrigger` (the trigger's `hint` and `term` classes).
+ * - Axes: popup `primary`, `secondary` → scales module classes, applied
+ *   inside the popup's scope (`secondary` unused); trigger `kind` → label |
+ *   hint | term (which form the trigger takes).
+ * - Compound variants: none.
+ * - Defaults: trigger kind label; color axes: none.
+ * - Color fallback: the popup takes the overlay scope preset's defaults.
+ * - States: popup `data-open` / `data-closed` → appears instantly, never by
+ *   fade [D91]; `data-side`, `data-align` → placement; `data-instant` → no
+ *   delay between neighbors in one Provider. Trigger `:focus-visible` → ring.
+ * - Parts: base (the popup), text, positioner (its layer), hint, hintLabel,
+ *   term. No arrow by default.
+ * - Scope: `base` renders in its Base UI Portal and declares the overlay
+ *   scope (`white`, `page` scheme), which follows the root mode; it writes
+ *   no `data-theme`, and its edge is the [D92] overlay frame, never
+ *   --role-rule [D139, D156].
+ * - Container: none; inherits its context.
+ */
+export const tooltip = cva(styles.base, {
+    variants: {
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+export const tooltipTrigger = cva('', {
+    variants: {
+        kind: {
+            label: '',
+            hint: styles.hint,
+            term: styles.term,
+        },
+    },
+    defaultVariants: {
+        kind: 'label',
+    },
+});
+/** The open delay, mirroring `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+export { TOOLTIP_DELAY_MS };
+/** The open delay a TooltipProvider sets for the triggers inside it. */
+const TooltipDelayContext = React.createContext(undefined);
+/**
+ * Shares the open delay across a group of triggers, such as a toolbar: the
+ * first tooltip opens after `--fgd-delay-tooltip` (500 ms), its neighbors
+ * open at once while one is showing.
+ */
+export function TooltipProvider({ delay = TOOLTIP_DELAY_MS, ...rest }) {
+    return (React.createElement(TooltipDelayContext.Provider, { value: delay },
+        React.createElement(BaseTooltip.Provider, { delay: delay, ...rest })));
+}
+/**
+ * One tooltip: a `TooltipTrigger` and a `TooltipPopup`. It opens on hover
+ * after 500 ms and on keyboard focus, appears instantly, stays open while the
+ * pointer moves onto it, and Esc dismisses it without moving focus. Touch
+ * screens never show it, so the trigger must make sense without it. It never
+ * prints: definitions behind terms must also exist as footnotes.
+ */
+export function Tooltip(props) {
+    return React.createElement(BaseTooltip.Root, { ...props });
+}
+/**
+ * The element the tooltip names. With `kind="label"`, pass the control as
+ * `render`, e.g. `render={<Button iconOnly icon="search">Search</Button>}`.
+ * The hint glyph and the term underline follow the trigger's own ground.
+ */
+export function TooltipTrigger(props) {
+    const { kind = 'label', delay, className, children, ...rest } = props;
+    const providerDelay = React.useContext(TooltipDelayContext);
+    const resolvedClassName = typeof className === 'function'
+        ? (state) => tooltipTrigger({ kind, className: className(state) }) || undefined
+        : tooltipTrigger({ kind, className }) || undefined;
+    return (React.createElement(BaseTooltip.Trigger, { ...rest, delay: delay ?? providerDelay ?? TOOLTIP_DELAY_MS, className: resolvedClassName }, kind === 'hint' ? (React.createElement(React.Fragment, null,
+        React.createElement(Icon, { name: "help", className: styles.hintIcon }),
+        React.createElement("span", { className: styles.hintLabel }, children))) : (children)));
+}
+/**
+ * The popup: one short line of `type-caption` (three at most), at most
+ * `--fgd-size-tooltip` (280 px) wide, on the overlay scope's `--primary1` face inside a
+ * `--border-size-2` `--primary12` frame with `--radius-1`. It sits
+ * `--size-px-2` from the trigger (`side`, default `top`) and flips or shifts
+ * to stay inside the viewport.
+ */
+export function TooltipPopup(props) {
+    const { side = 'top', align = 'center', primary, secondary, portalProps, className, children, ...rest } = props;
+    const variants = overlayScales(primary, secondary);
+    const resolvedClassName = resolveClassName(className, (extra) => tooltip({ ...variants, className: extra }));
+    return (React.createElement(BaseTooltip.Portal, { ...portalProps },
+        React.createElement(BaseTooltip.Positioner, { className: styles.positioner, side: side, align: align, sideOffset: OVERLAY_SIDE_OFFSET, collisionPadding: OVERLAY_COLLISION_PADDING },
+            React.createElement(OverlayScope, null,
+                React.createElement(BaseTooltip.Popup, { ...rest, ...overlayAttributes, className: resolvedClassName },
+                    React.createElement("span", { className: styles.text }, children))))));
+}
+//# sourceMappingURL=Tooltip.js.map

package/overlays/tooltip/Tooltip.js.map

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

package/overlays/tooltip/index.d.ts

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

package/overlays/tooltip/index.d.ts.map

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

package/overlays/tooltip/index.js

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

package/overlays/tooltip/index.js.map

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

package/overlays/tooltip/tooltip.module.css

@@ -0,0 +1,120 @@
+/*
+ * Tooltip (§10.16). Parts: `positioner` (the Base UI Positioner: its layer),
+ * `base` (the popup, a portaled overlay-scope face), `text`, and the
+ * trigger forms: `hint` (with `hintIcon` and the visually hidden
+ * `hintLabel`) and `term`. The popup appears instantly, never by fade; no
+ * shadow, blur or alpha. 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. */
+.text {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.term {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .positioner {
+    z-index: var(--layer-3);
+  }
+
+  /* The face: --primary1 of the overlay scope inside the [D92] frame, --border-size-2 --primary12. */
+  .base {
+    box-sizing: border-box;
+    max-inline-size: min(var(--fgd-size-tooltip), var(--available-width));
+    padding: var(--size-px-1) var(--size-px-2);
+    border: var(--border-size-2) solid var(--primary12);
+    border-radius: var(--radius-1);
+    background-color: var(--primary1);
+    color: var(--primary12);
+    overflow-wrap: break-word;
+  }
+
+  .text {
+    display: block;
+    color: var(--primary12);
+  }
+}
+
+@layer variants {
+  /* Hint: the Material `help` glyph at the inline tier in --primary12, a 24 px target (inline exemption, §9.1). */
+  .hint {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    vertical-align: middle;
+    cursor: help;
+    appearance: none;
+  }
+
+  .hint::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: var(--size-px-5);
+    block-size: var(--size-px-5);
+    translate: -50% -50%;
+  }
+
+  .hintIcon {
+    color: inherit;
+  }
+
+  .hintLabel {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+
+  /* Term: running text with a `line-dotted-fine` underline in --role-rule at a 2 px offset. */
+  .term {
+    display: inline;
+    margin: 0;
+    padding: 0 0 var(--border-size-2);
+    border-width: 0;
+    border-block-end-width: var(--fgd-dot-fine);
+    border-color: var(--role-rule);
+    background: none;
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    text-align: inherit;
+    cursor: help;
+    appearance: none;
+  }
+}
+
+@layer states {
+  /* Focus: the 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .hint:focus-visible,
+  .term:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Tooltips never print; the hint glyph is interaction-only. The term's dotted underline prints as the cue. */
+    .positioner,
+    .base,
+    .hint {
+      display: none;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,124 @@
+{
+  "sideEffects": [
+    "*.css",
+    "./utils/fonts.js",
+    "./src/utils/fonts.ts"
+  ],
+  "name": "@fairgarden/design",
+  "version": "0.1.0-0.canary.0",
+  "description": "FairGarden Design System",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fairgarden/design.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "foundations",
+    "actions",
+    "navigation",
+    "forms",
+    "feedback",
+    "overlays",
+    "disclosure",
+    "page",
+    "content",
+    "data",
+    "utils",
+    "icons"
+  ],
+  "type": "module",
+  "scripts": {
+    "build": "pnpm run generate && pnpm run css-types && tsc && pnpm run postcss",
+    "dev": "concurrently --names css-types,typescript,postcss \"pnpm run css-types-watch\" \"tsc --pretty --watch --preserveWatchOutput\" \"pnpm run postcss-watch\"",
+    "postcss": "postcss './src/**/(*.css|*.module.css)' --base ./src -d . --config ./postcss.config.js",
+    "postcss-watch": "postcss './src/**/(*.css|*.module.css)' --base ./src -d . --config ./postcss.config.js --watch",
+    "css-types": "tcm -p '**/*.module.css' ./src",
+    "css-types-watch": "tcm -p '**/*.module.css' ./src --watch",
+    "lint": "eslint",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "canary": "fg-dist canary",
+    "release": "fg-dist release",
+    "release:check": "fg-dist release --check",
+    "generate": "node scripts/build-colors.js && node scripts/build-icons.js",
+    "changelog": "fg-dist changelog"
+  },
+  "keywords": [
+    "design",
+    "system",
+    "ui",
+    "components",
+    "react",
+    "typescript",
+    "fairgarden",
+    "base-ui"
+  ],
+  "author": "FairGarden",
+  "license": "MIT",
+  "devDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@csstools/postcss-global-data": "^4.0.0",
+    "@fairgarden/distribution": "^0.1.0-alpha.4",
+    "@material-symbols/svg-400": "^0.47.5",
+    "@material-symbols/svg-500": "^0.47.5",
+    "@material-symbols/svg-600": "^0.47.5",
+    "@material-symbols/svg-700": "^0.47.5",
+    "@protomaps/basemaps": "^5.7.2",
+    "@radix-ui/colors": "^3.0.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/node": "^26.6.2",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.0",
+    "@typescript-eslint/parser": "^8.70.0",
+    "classnames": "^2.5.1",
+    "concurrently": "^10.0.5",
+    "eslint": "^9.39.5",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "maplibre-gl": "^6.11.1",
+    "open-props": "^1.7.23",
+    "pmtiles": "^4.5.0",
+    "postcss": "^8.5.28",
+    "postcss-cli": "^12.0.0",
+    "postcss-custom-media": "^12.0.1",
+    "postcss-import": "^17.0.0",
+    "prettier": "^3.9.8",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "tslib": "^2.8.1",
+    "typed-css-modules": "^0.9.1",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "@base-ui/react": "^1.8.0",
+    "@protomaps/basemaps": "^5.7.2",
+    "maplibre-gl": "^6.11.1",
+    "pmtiles": "^4.5.0",
+    "react": "^19",
+    "react-dom": "^19"
+  },
+  "peerDependenciesMeta": {
+    "@protomaps/basemaps": {
+      "optional": true
+    },
+    "maplibre-gl": {
+      "optional": true
+    },
+    "pmtiles": {
+      "optional": true
+    }
+  },
+  "packageManager": "pnpm@10.28.0+sha512.05df71d1421f21399e053fde567cea34d446fa02c76571441bfc1c7956e98e363088982d940465fd34480d4d90a0668bc12362f8aa88000a64e83d0b0e47be48",
+  "dependencies": {
+    "@fontsource-variable/figtree": "^5.3.0",
+    "@fontsource-variable/fraunces": "^5.3.0",
+    "@fontsource-variable/source-serif-4": "^5.3.0",
+    "@fontsource/ibm-plex-mono": "^5.3.0",
+    "class-variance-authority": "^0.7.1",
+    "recharts": "^3.10.1"
+  },
+  "gitSha": "64660c5904bfa42585b60d5b447bc5a1801a47a2"
+}

package/page/announcement-bar/AnnouncementBar.d.ts

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type PageGroundPreset } from '../../foundations/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. Use it once, with `voice="dual"`.
+ */
+export declare function AnnouncementBarAccent(props: AnnouncementBarAccentProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=AnnouncementBar.d.ts.map

package/page/announcement-bar/AnnouncementBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementBar.d.ts","sourceRoot":"","sources":["../../src/page/announcement-bar/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,0BAA0B,CAAA;AA8CxE,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"}