@seekalfred/primitives 0.6.0 → 0.7.3

package/dist/alert-dialog/alert-dialog.js

@@ -1,18 +1,161 @@
 "use client";
-import { Dialog } from "../dialog/dialog.js";
+import { cnAll } from "../lib/cn.js";
+import { Button as Button$1 } from "../button/button.js";
+import { SwapText } from "../lib/swap-text.js";
+import { dialogOverlayVariants, dialogPanelVariants } from "../dialog/dialog.js";
+import { cva } from "class-variance-authority";
 import { forwardRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Button, Dialog, Heading, Modal, ModalOverlay, Text } from "react-aria-components";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert-dialog/alert-dialog.tsx
-const AlertDialog = forwardRef(function AlertDialog(props, ref) {
-	return /* @__PURE__ */ jsx(Dialog, {
-		...props,
+const alertDialogActionsVariants = cva("flex flex-wrap items-center justify-end gap-2 px-8 pb-8");
+/**
+* The body slot: the description's side padding, so the two share an edge,
+* and the description's own bottom space repeated below it before the actions.
+*/
+const alertDialogBodyVariants = cva("min-w-0 px-8 pb-6 text-sm leading-(--leading-normal) text-foreground");
+/**
+* The cancel action: the secondary button, wired to dismiss the dialog.
+*
+* @example
+* <AlertDialogCancel>Cancel</AlertDialogCancel>
+*/
+const AlertDialogCancel = forwardRef(function AlertDialogCancel(props, ref) {
+	return /* @__PURE__ */ jsx(Button$1, {
+		ref,
+		slot: "close",
+		variant: "secondary",
+		size: "sm",
+		...props
+	});
+});
+/**
+* The confirm action: the primary button in the destructive red.
+*
+* It is the primary button with its fill, hover, pressed and label roles
+* pointed at the destructive tokens, so it keeps the primary's press motion
+* and shadow. Variables on the element, rather than a competing background
+* class, so no stylesheet order decides which colour wins.
+*
+* @example
+* <AlertDialogAction onPress={remove}>Delete</AlertDialogAction>
+*/
+const AlertDialogAction = forwardRef(function AlertDialogAction({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button$1, {
 		ref,
-		role: "alertdialog",
-		closeButton: false,
-		isDismissable: false
+		variant: "primary",
+		size: "sm",
+		className: cnAll("[--color-primary:var(--color-destructive)] [--color-primary-hover:var(--color-destructive-hover)] [--color-primary-pressed:var(--color-destructive-pressed)] [--color-primary-foreground:var(--color-destructive-foreground)]", className),
+		...props
+	});
+});
+const alertDialogHeaderVariants = cva("flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6");
+/**
+* The title column. With no subtitle it is at least the close button's height
+* and centres the title in it, so a one-line title sits level with the close;
+* a longer title grows the column from the top as before. With a subtitle the
+* two lines start at the top of the button, as they always have.
+*/
+const alertDialogTitleBlockVariants = cva("min-w-0 flex-1", { variants: { subtitle: {
+	true: "",
+	false: "flex min-h-9 flex-col justify-center"
+} } });
+const alertDialogTitleVariants = cva("m-0 text-lg leading-(--leading-tight) font-semibold text-foreground");
+const alertDialogCloseVariants = cva([
+	"inline-flex size-9 shrink-0 items-center justify-center",
+	"rounded-circle box-border cursor-pointer",
+	"border-(length:--border-width) border-border bg-surface p-0 text-text-secondary",
+	"calendar-nav-motion",
+	"data-[hovered]:bg-muted data-[hovered]:text-foreground",
+	"outline-none",
+	"data-[focus-visible]:outline-solid",
+	"data-[focus-visible]:outline-(length:--focus-ring-width)",
+	"data-[focus-visible]:outline-offset-(--focus-ring-offset)",
+	"data-[focus-visible]:outline-(--color-ring)",
+	"[&_svg]:pointer-events-none [&_svg]:size-4"
+]);
+/** A string swaps as a whole when its text changes while the dialog is open. */
+function Swappable({ value }) {
+	if (typeof value !== "string") return /* @__PURE__ */ jsx(Fragment$1, { children: value });
+	return /* @__PURE__ */ jsx(SwapText, {
+		swapKey: value,
+		className: "block",
+		children: value
+	});
+}
+/** `cond && <X />` hands over `false`; React renders nothing for it, so neither does the slot. */
+function isEmpty(node) {
+	return node == null || typeof node === "boolean" || node === "";
+}
+const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, body, children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
+	return /* @__PURE__ */ jsx(ModalOverlay, {
+		...props,
+		isDismissable: false,
+		"data-slot": "dialog-overlay",
+		className: cnAll(dialogOverlayVariants(), entrance === "rise" && "dialog-overlay-motion", overlayClassName),
+		children: /* @__PURE__ */ jsx(Modal, {
+			className: "contents",
+			children: /* @__PURE__ */ jsxs(Dialog, {
+				ref,
+				role: "alertdialog",
+				"data-slot": "dialog",
+				className: cnAll(dialogPanelVariants(), "gap-0 p-0", entrance === "rise" && "dialog-panel-motion", className),
+				children: [
+					beforeTitle,
+					/* @__PURE__ */ jsxs("div", {
+						"data-slot": "alert-dialog-header",
+						className: alertDialogHeaderVariants(),
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: alertDialogTitleBlockVariants({ subtitle: subtitle != null }),
+							children: [/* @__PURE__ */ jsx(Heading, {
+								slot: "title",
+								"data-slot": "dialog-title",
+								className: alertDialogTitleVariants(),
+								children: /* @__PURE__ */ jsx(Swappable, { value: title })
+							}), subtitle == null ? null : /* @__PURE__ */ jsx("p", {
+								"data-slot": "alert-dialog-subtitle",
+								className: "m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary",
+								children: /* @__PURE__ */ jsx(Swappable, { value: subtitle })
+							})]
+						}), /* @__PURE__ */ jsx(Button, {
+							slot: "close",
+							"aria-label": closeLabel,
+							"data-slot": "alert-dialog-close",
+							className: alertDialogCloseVariants(),
+							children: /* @__PURE__ */ jsx("svg", {
+								"aria-hidden": "true",
+								viewBox: "0 0 16 16",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: "1.75",
+								strokeLinecap: "round",
+								children: /* @__PURE__ */ jsx("path", { d: "m4 4 8 8M12 4l-8 8" })
+							})
+						})]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						slot: "description",
+						elementType: "p",
+						"data-slot": "dialog-description",
+						className: "m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground",
+						children: /* @__PURE__ */ jsx(Swappable, { value: description })
+					}),
+					isEmpty(body) ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-dialog-body",
+						className: alertDialogBodyVariants(),
+						children: body
+					}),
+					children == null ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-dialog-actions",
+						className: alertDialogActionsVariants(),
+						children
+					})
+				]
+			})
+		})
 	});
 });
 //#endregion
-export { AlertDialog };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel };
 
 //# sourceMappingURL=alert-dialog.js.map

package/dist/alert-dialog/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type ReactNode } from \"react\";\n\nimport { Dialog, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * A PRESET over `Dialog`, not a second implementation. The legacy\n * `alert-dialog.tsx` is a 157-line clone of `dialog.tsx` with three\n * differences, and keeping two copies is how they drift -- the legacy pair\n * already disagree about `leading-none` on their titles for no stated\n * reason.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `closeButton={false}`. An X in the corner is a third answer to a\n *   two-answer question, and it is ambiguous: it reads as \"cancel\" but\n *   looks like \"dismiss\".\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there.\n *\n * NO `AlertDialogAction` OR `AlertDialogCancel`. The legacy shipped both,\n * with `AlertDialogAction` defaulting to the gradient primary button -- and\n * BOTH call sites override it back to destructive by hand\n * (`data-table.tsx:146`, `calendar-view.tsx:638`). A default that every\n * caller fights is not a default. Use a `Button` and say which one it is:\n * `slot=\"close\"` cancels, and the confirm button picks its own variant.\n */\nexport interface AlertDialogProps\n  extends Omit<DialogProps, \"role\" | \"closeButton\" | \"closeLabel\" | \"isDismissable\"> {\n  /**\n   * What is about to happen, and whether it can be undone.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** The actions. Give the cancel button `slot=\"close\"`. */\n  children?: ReactNode;\n}\n\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogProps>(function AlertDialog(\n  props,\n  ref,\n) {\n  return (\n    <Dialog {...props} ref={ref} role=\"alertdialog\" closeButton={false} isDismissable={false} />\n  );\n});\n"],"mappings":";;;;;AAuDA,MAAa,cAAc,WAA0C,SAAS,YAC5E,OACA,KACA;CACA,OACE,oBAAC,QAAD;EAAQ,GAAI;EAAY;EAAK,MAAK;EAAc,aAAa;EAAO,eAAe;CAAQ,CAAA;AAE/F,CAAC"}
+{"version":3,"file":"alert-dialog.js","names":["Button","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaButton","AriaText"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n} from \"react-aria-components\";\n\nimport { Button, type ButtonProps } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { dialogOverlayVariants, dialogPanelVariants, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * Built from `Dialog`'s own overlay and panel styles and the same React Aria\n * parts, but with its own layout: a header (title, a grey subtitle and a\n * circular close button), a thin divider, the description sentence, an\n * optional `body` of rich content, then the actions.\n * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this\n * shares the tokens and the motion classes instead, so the two cannot drift\n * on radius, scrim or entrance.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - THE CLOSE (X) IS CANCEL. It is `slot=\"close\"`, the same dismiss wiring as\n *   a Cancel button, so it goes through the same `onOpenChange(false)` and\n *   focus returns to the trigger. It is not a third answer: it is the\n *   header's copy of the second one.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there. It is the sentence under the divider.\n *\n * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary\n * button (white, light border) and cancels through `slot=\"close\"`;\n * `AlertDialogAction` is the primary button painted destructive red, because a\n * confirmation here is a destructive one. The legacy `AlertDialogAction`\n * defaulted to the gradient primary and BOTH call sites overrode it back to\n * destructive by hand (`data-table.tsx:146`, `calendar-view.tsx:638`); the red\n * is the default now, so nobody fights it. Plain `Button`s still work in the\n * actions slot for anything else.\n */\nexport interface AlertDialogProps extends Omit<\n  DialogProps,\n  \"role\" | \"closeButton\" | \"isDismissable\"\n> {\n  /**\n   * What is about to happen, and whether it can be undone. Rendered as the\n   * sentence under the divider, above the `body` slot (if any) and the actions.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** A short grey line under the title, in the header. */\n  subtitle?: ReactNode;\n  /**\n   * Rich content between the description and the actions: a plan comparison,\n   * a before/after diff, a quoted reply, a form field or a choice to make.\n   *\n   * It is NOT part of the accessible description: the screen reader announces\n   * the one `description` sentence with the name, and the body is read in\n   * place or as focus reaches its controls (each with its own label). So the\n   * `description` must say everything needed to answer, including that a\n   * choice or field below is required (\"Pick what happens to your data.\").\n   * `false`, `true` and `\"\"` (as from `cond && <X />`) render no body.\n   */\n  body?: ReactNode;\n  /** The actions. Give the cancel button `slot=\"close\"`. */\n  children?: ReactNode;\n}\n\nconst alertDialogActionsVariants = cva(\"flex flex-wrap items-center justify-end gap-2 px-8 pb-8\");\n\n/**\n * The body slot: the description's side padding, so the two share an edge,\n * and the description's own bottom space repeated below it before the actions.\n */\nconst alertDialogBodyVariants = cva(\n  \"min-w-0 px-8 pb-6 text-sm leading-(--leading-normal) text-foreground\",\n);\n\n/**\n * The cancel action: the secondary button, wired to dismiss the dialog.\n *\n * @example\n * <AlertDialogCancel>Cancel</AlertDialogCancel>\n */\nexport const AlertDialogCancel = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogCancel(props, ref) {\n    return <Button ref={ref} slot=\"close\" variant=\"secondary\" size=\"sm\" {...props} />;\n  },\n);\n\n/**\n * The confirm action: the primary button in the destructive red.\n *\n * It is the primary button with its fill, hover, pressed and label roles\n * pointed at the destructive tokens, so it keeps the primary's press motion\n * and shadow. Variables on the element, rather than a competing background\n * class, so no stylesheet order decides which colour wins.\n *\n * @example\n * <AlertDialogAction onPress={remove}>Delete</AlertDialogAction>\n */\nexport const AlertDialogAction = forwardRef<HTMLButtonElement, ButtonProps>(\n  function AlertDialogAction({ className, ...props }, ref) {\n    return (\n      <Button\n        ref={ref}\n        variant=\"primary\"\n        size=\"sm\"\n        className={cnAll(\n          \"[--color-primary:var(--color-destructive)] [--color-primary-hover:var(--color-destructive-hover)] [--color-primary-pressed:var(--color-destructive-pressed)] [--color-primary-foreground:var(--color-destructive-foreground)]\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\n\nconst alertDialogHeaderVariants = cva(\n  \"flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6\",\n);\n\n/**\n * The title column. With no subtitle it is at least the close button's height\n * and centres the title in it, so a one-line title sits level with the close;\n * a longer title grows the column from the top as before. With a subtitle the\n * two lines start at the top of the button, as they always have.\n */\nconst alertDialogTitleBlockVariants = cva(\"min-w-0 flex-1\", {\n  variants: {\n    subtitle: {\n      true: \"\",\n      false: \"flex min-h-9 flex-col justify-center\",\n    },\n  },\n});\n\nconst alertDialogTitleVariants = cva(\n  \"m-0 text-lg leading-(--leading-tight) font-semibold text-foreground\",\n);\n\nconst alertDialogCloseVariants = cva([\n  \"inline-flex size-9 shrink-0 items-center justify-center\",\n  \"rounded-circle box-border cursor-pointer\",\n  \"border-(length:--border-width) border-border bg-surface p-0 text-text-secondary\",\n  // Fill on hover, a quick press to .96 and a spring release (see calendar-nav-motion).\n  \"calendar-nav-motion\",\n  \"data-[hovered]:bg-muted data-[hovered]:text-foreground\",\n  \"outline-none\",\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n  \"[&_svg]:pointer-events-none [&_svg]:size-4\",\n]);\n\n/** A string swaps as a whole when its text changes while the dialog is open. */\nfunction Swappable({ value }: { value: ReactNode }) {\n  if (typeof value !== \"string\") return <>{value}</>;\n  return (\n    <SwapText swapKey={value} className=\"block\">\n      {value}\n    </SwapText>\n  );\n}\n\n/** `cond && <X />` hands over `false`; React renders nothing for it, so neither does the slot. */\nfunction isEmpty(node: ReactNode) {\n  return node == null || typeof node === \"boolean\" || node === \"\";\n}\n\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogProps>(function AlertDialog(\n  {\n    title,\n    subtitle,\n    beforeTitle,\n    description,\n    body,\n    children,\n    className,\n    closeLabel = \"Close\",\n    overlayClassName,\n    entrance = \"rise\",\n    ...props\n  },\n  ref,\n) {\n  return (\n    <AriaModalOverlay\n      {...props}\n      isDismissable={false}\n      data-slot=\"dialog-overlay\"\n      className={cnAll(\n        dialogOverlayVariants(),\n        entrance === \"rise\" && \"dialog-overlay-motion\",\n        overlayClassName,\n      )}\n    >\n      <AriaModal className=\"contents\">\n        <AriaDialog\n          ref={ref}\n          role=\"alertdialog\"\n          data-slot=\"dialog\"\n          className={cnAll(\n            dialogPanelVariants(),\n            // The panel has no padding of its own: the header, body and actions pad themselves,\n            // so the divider can run edge to edge.\n            \"gap-0 p-0\",\n            entrance === \"rise\" && \"dialog-panel-motion\",\n            className,\n          )}\n        >\n          {beforeTitle}\n          <div data-slot=\"alert-dialog-header\" className={alertDialogHeaderVariants()}>\n            <div className={alertDialogTitleBlockVariants({ subtitle: subtitle != null })}>\n              {/* slot=\"title\" is what React Aria wires aria-labelledby to. */}\n              <AriaHeading\n                slot=\"title\"\n                data-slot=\"dialog-title\"\n                className={alertDialogTitleVariants()}\n              >\n                <Swappable value={title} />\n              </AriaHeading>\n              {subtitle == null ? null : (\n                <p\n                  data-slot=\"alert-dialog-subtitle\"\n                  className=\"m-0 mt-1 text-sm leading-(--leading-normal) text-text-secondary\"\n                >\n                  <Swappable value={subtitle} />\n                </p>\n              )}\n            </div>\n            {/* slot=\"close\" is the same dismiss wiring as a Cancel button: one handler, focus back to the trigger. */}\n            <AriaButton\n              slot=\"close\"\n              aria-label={closeLabel}\n              data-slot=\"alert-dialog-close\"\n              className={alertDialogCloseVariants()}\n            >\n              <svg\n                aria-hidden=\"true\"\n                viewBox=\"0 0 16 16\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth=\"1.75\"\n                strokeLinecap=\"round\"\n              >\n                <path d=\"m4 4 8 8M12 4l-8 8\" />\n              </svg>\n            </AriaButton>\n          </div>\n          <AriaText\n            slot=\"description\"\n            elementType=\"p\"\n            data-slot=\"dialog-description\"\n            className=\"m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground\"\n          >\n            <Swappable value={description} />\n          </AriaText>\n          {isEmpty(body) ? null : (\n            <div data-slot=\"alert-dialog-body\" className={alertDialogBodyVariants()}>\n              {body}\n            </div>\n          )}\n          {children == null ? null : (\n            <div data-slot=\"alert-dialog-actions\" className={alertDialogActionsVariants()}>\n              {children}\n            </div>\n          )}\n        </AriaDialog>\n      </AriaModal>\n    </AriaModalOverlay>\n  );\n});\n"],"mappings":"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"}

package/dist/alert-dialog/index.d.ts

@@ -1,2 +1,2 @@
-import { AlertDialog, AlertDialogProps } from "./alert-dialog.js";
-export { AlertDialog, type AlertDialogProps };
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogProps } from "./alert-dialog.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, type AlertDialogProps };

package/dist/alert-dialog/index.js

@@ -1,2 +1,2 @@
-import { AlertDialog } from "./alert-dialog.js";
-export { AlertDialog };
+import { AlertDialog, AlertDialogAction, AlertDialogCancel } from "./alert-dialog.js";
+export { AlertDialog, AlertDialogAction, AlertDialogCancel };

package/dist/animated-counter/animated-counter.d.ts

@@ -0,0 +1,38 @@
+//#region src/animated-counter/animated-counter.d.ts
+/**
+ * AnimatedCounter: a number whose digits are wheels. When `value` changes each
+ * digit that changed rolls to its new face, turning the way the whole number
+ * moved (up when it grew, down when it shrank, wrapping 9 to 0 like an
+ * odometer) while the digits that did not change stay still. A gained or lost
+ * digit, or separator, opens or closes its width instead of snapping, so 999
+ * becoming 1,000 keeps the ones column the ones column. A changed `label` rises
+ * in while the old one lifts away.
+ *
+ * With `animateOnView` every digit starts at 0 and rolls up to its value, one
+ * after another, the first time the counter scrolls into view.
+ *
+ * The digits are a picture: assistive technology reads the formatted number
+ * once, in a polite live region, so a change is announced as text and never as
+ * a spinning wheel. Nothing animates on first render, and reduced motion jumps.
+ */
+export interface AnimatedCounterProps {
+  /** The number to show. Changing it rolls the digits that changed. */
+  value: number;
+  /** A caption above the number. */
+  label?: string;
+  /** Text before the number, such as a currency symbol. */
+  prefix?: string;
+  /** Text after the number, such as a unit. */
+  suffix?: string;
+  /** Digits after the decimal point. @default 0 */
+  decimals?: number;
+  /** Roll every digit up from zero the first time the counter scrolls into view. */
+  animateOnView?: boolean;
+  /** Formatting locale. Fixed by default so server and client render the same digits. @default "en-US" */
+  locale?: string;
+  /** Extra classes for the counter. Merged last. */
+  className?: string;
+}
+export declare const AnimatedCounter: import("react").ForwardRefExoticComponent<AnimatedCounterProps & import("react").RefAttributes<HTMLSpanElement>>;
+//#endregion
+//# sourceMappingURL=animated-counter.d.ts.map

package/dist/animated-counter/animated-counter.js

@@ -0,0 +1,230 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/animated-counter/animated-counter.tsx
+const FACES = [
+	0,
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+];
+/** Stagger between digits on the first reveal (ms), at most 250 in all. */
+const REVEAL_STAGGER_MS = 35;
+const REVEAL_MAX_DELAY_MS = 250;
+/** How long the reveal takes at most: the longest delay, the wheel at 1.2 times the smooth spring, and a margin. */
+const REVEAL_SETTLE_MS = 1200;
+/** The longest a width exit takes (the morph spring, 736ms) plus a margin, for the backstop that removes a node whose animation never ends. */
+const EXIT_BACKSTOP_MS = 900;
+/** Split a formatted number into parts keyed by place value, so 999 to 1,000 keeps the ones column the ones column. */
+function partsFor(value, decimals, locale) {
+	const parts = new Intl.NumberFormat(locale, {
+		minimumFractionDigits: decimals,
+		maximumFractionDigits: decimals,
+		numberingSystem: "latn"
+	}).formatToParts(value);
+	let place = parts.reduce((count, part) => count + (part.type === "integer" ? part.value.length : 0), 0);
+	let fraction = 0;
+	let order = 0;
+	return parts.flatMap((part, index) => {
+		if (part.type === "integer") return [...part.value].map((char) => ({
+			key: `i${--place}`,
+			digit: Number(char),
+			order: order++
+		}));
+		if (part.type === "fraction") return [...part.value].map((char) => ({
+			key: `f${fraction++}`,
+			digit: Number(char),
+			order: order++
+		}));
+		return [{
+			key: part.type === "group" ? `g${place}` : part.type === "decimal" ? "d" : `${part.type}${index}`,
+			text: part.value
+		}];
+	});
+}
+const same = (a, b) => a.key === b.key && ("digit" in a ? "digit" in b && a.digit === b.digit && a.order === b.order : "text" in b && a.text === b.text);
+/** The entries after `parts` arrive: gone ones stay (leaving) where they stood, new ones are fresh. */
+function merge(previous, parts) {
+	const before = new Map(previous.map((entry) => [entry.part.key, entry]));
+	const result = parts.map((part) => {
+		const old = before.get(part.key);
+		return {
+			part,
+			leaving: false,
+			fresh: old ? old.fresh && !old.leaving : true
+		};
+	});
+	const live = new Set(parts.map((part) => part.key));
+	previous.forEach((entry, index) => {
+		if (live.has(entry.part.key)) return;
+		let anchor = -1;
+		for (let back = index - 1; back >= 0 && anchor < 0; back--) anchor = result.findIndex((item) => item.part.key === previous[back].part.key);
+		result.splice(anchor + 1, 0, {
+			...entry,
+			leaving: true
+		});
+	});
+	return result;
+}
+/** True once the node has been at least 60% on screen (or at once where IntersectionObserver is missing). */
+function useSeen(node, enabled) {
+	const [seen, setSeen] = useState(false);
+	useEffect(() => {
+		const target = node.current;
+		if (!enabled || seen || !target || typeof IntersectionObserver === "undefined") return;
+		const observer = new IntersectionObserver(([entry]) => {
+			if (entry?.isIntersecting) setSeen(true);
+		}, { threshold: .6 });
+		observer.observe(target);
+		return () => observer.disconnect();
+	}, [
+		node,
+		enabled,
+		seen
+	]);
+	return seen || enabled && typeof IntersectionObserver === "undefined";
+}
+/** Width presence: opens when it arrives after the first render, closes while it leaves, and is removed once closed. */
+function Slot({ entry, onGone, children }) {
+	const { key } = entry.part;
+	const gone = useCallback(() => onGone(key), [onGone, key]);
+	useExitBackstop(entry.leaving, gone, EXIT_BACKSTOP_MS);
+	useIsomorphicLayoutEffect(() => {
+		if (entry.leaving && prefersReducedMotion()) gone();
+	}, [entry.leaving, gone]);
+	return /* @__PURE__ */ jsx("span", {
+		"data-state": entry.leaving ? "leaving" : entry.fresh ? "entering" : void 0,
+		onAnimationEnd: (event) => {
+			if (entry.leaving && event.target === event.currentTarget) gone();
+		},
+		className: "counter-slot",
+		children
+	});
+}
+/** One digit wheel. It remembers how far it has turned, so it always keeps going the way the whole number moved. */
+function Column({ digit, direction, phase, delay }) {
+	const armed = phase === "armed";
+	const [wheel, setWheel] = useState(() => {
+		const start = armed ? 0 : digit;
+		return {
+			digit: start,
+			turns: start
+		};
+	});
+	let { turns } = wheel;
+	if (!armed && wheel.digit !== digit) {
+		const back = direction < 0 && phase === "settled";
+		turns = wheel.turns + (back ? -((wheel.digit - digit + 10) % 10) : (digit - wheel.digit + 10) % 10);
+		setWheel({
+			digit,
+			turns
+		});
+	}
+	const style = { "--wheel": turns };
+	if (phase === "revealing") {
+		style.transitionDelay = `${delay}ms`;
+		style.transitionDuration = "calc(var(--duration-smooth) * 1.2)";
+	}
+	return /* @__PURE__ */ jsxs("span", {
+		style,
+		className: "counter-column",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "counter-sizer",
+			children: "0"
+		}), FACES.map((face) => /* @__PURE__ */ jsx("span", {
+			style: { "--face": face },
+			className: "counter-glyph",
+			children: face
+		}, face))]
+	});
+}
+const AnimatedCounter = forwardRef(function AnimatedCounter({ value, label, prefix = "", suffix = "", decimals = 0, animateOnView = false, locale = "en-US", className }, ref) {
+	const root = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, root), [ref]);
+	const seen = useSeen(root, animateOnView);
+	const [phase, setPhase] = useState(animateOnView ? "armed" : "settled");
+	if (phase === "armed" && seen) setPhase("revealing");
+	useEffect(() => {
+		if (phase !== "revealing") return;
+		const timer = setTimeout(() => setPhase("settled"), prefersReducedMotion() ? 0 : REVEAL_SETTLE_MS);
+		return () => clearTimeout(timer);
+	}, [phase]);
+	const [previous, setPrevious] = useState(value);
+	const [direction, setDirection] = useState(1);
+	if (value !== previous) {
+		setPrevious(value);
+		setDirection(value > previous ? 1 : -1);
+	}
+	const parts = partsFor(value, decimals, locale);
+	const [entries, setEntries] = useState(() => parts.map((part) => ({
+		part,
+		leaving: false,
+		fresh: false
+	})));
+	const live = entries.filter((entry) => !entry.leaving);
+	if (live.length !== parts.length || live.some((entry, index) => !same(entry.part, parts[index]))) setEntries(merge(entries, parts));
+	const finish = useCallback((key) => setEntries((list) => list.filter((entry) => !(entry.leaving && entry.part.key === key))), []);
+	const text = `${prefix}${parts.map((part) => "text" in part ? part.text : part.digit).join("")}${suffix}`;
+	return /* @__PURE__ */ jsxs("span", {
+		ref: refs,
+		"data-slot": "animated-counter",
+		className: cn("animated-counter box-border font-display text-h2 leading-none font-semibold tabular-nums text-foreground", className),
+		children: [
+			label ? /* @__PURE__ */ jsx("span", {
+				className: "counter-label",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: label,
+					motion: "rise",
+					className: "block",
+					children: label
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				"aria-live": "polite",
+				children: text
+			}),
+			/* @__PURE__ */ jsxs("span", {
+				className: "counter-value",
+				"aria-hidden": "true",
+				children: [
+					prefix ? /* @__PURE__ */ jsx("span", {
+						className: "counter-symbol",
+						children: prefix
+					}) : null,
+					entries.map((entry) => /* @__PURE__ */ jsx(Slot, {
+						entry,
+						onGone: finish,
+						children: "digit" in entry.part ? /* @__PURE__ */ jsx(Column, {
+							digit: entry.part.digit,
+							direction,
+							phase,
+							delay: Math.min(entry.part.order * REVEAL_STAGGER_MS, REVEAL_MAX_DELAY_MS)
+						}) : /* @__PURE__ */ jsx("span", {
+							className: "counter-symbol",
+							children: entry.part.text
+						})
+					}, entry.part.key)),
+					suffix ? /* @__PURE__ */ jsx("span", {
+						className: "counter-symbol",
+						children: suffix
+					}) : null
+				]
+			})
+		]
+	});
+});
+//#endregion
+export { AnimatedCounter };
+
+//# sourceMappingURL=animated-counter.js.map

package/dist/animated-counter/animated-counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-counter.js","names":[],"sources":["../../src/animated-counter/animated-counter.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * AnimatedCounter: a number whose digits are wheels. When `value` changes each\n * digit that changed rolls to its new face, turning the way the whole number\n * moved (up when it grew, down when it shrank, wrapping 9 to 0 like an\n * odometer) while the digits that did not change stay still. A gained or lost\n * digit, or separator, opens or closes its width instead of snapping, so 999\n * becoming 1,000 keeps the ones column the ones column. A changed `label` rises\n * in while the old one lifts away.\n *\n * With `animateOnView` every digit starts at 0 and rolls up to its value, one\n * after another, the first time the counter scrolls into view.\n *\n * The digits are a picture: assistive technology reads the formatted number\n * once, in a polite live region, so a change is announced as text and never as\n * a spinning wheel. Nothing animates on first render, and reduced motion jumps.\n */\nexport interface AnimatedCounterProps {\n  /** The number to show. Changing it rolls the digits that changed. */\n  value: number;\n  /** A caption above the number. */\n  label?: string;\n  /** Text before the number, such as a currency symbol. */\n  prefix?: string;\n  /** Text after the number, such as a unit. */\n  suffix?: string;\n  /** Digits after the decimal point. @default 0 */\n  decimals?: number;\n  /** Roll every digit up from zero the first time the counter scrolls into view. */\n  animateOnView?: boolean;\n  /** Formatting locale. Fixed by default so server and client render the same digits. @default \"en-US\" */\n  locale?: string;\n  /** Extra classes for the counter. Merged last. */\n  className?: string;\n}\n\ntype Part = { key: string; digit: number; order: number } | { key: string; text: string };\n\ninterface Entry {\n  part: Part;\n  /** Kept on screen while its width closes. */\n  leaving: boolean;\n  /** Appeared after the first render, so its width opens. */\n  fresh: boolean;\n}\n\nconst FACES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const;\n/** Stagger between digits on the first reveal (ms), at most 250 in all. */\nconst REVEAL_STAGGER_MS = 35;\nconst REVEAL_MAX_DELAY_MS = 250;\n/** How long the reveal takes at most: the longest delay, the wheel at 1.2 times the smooth spring, and a margin. */\nconst REVEAL_SETTLE_MS = 1200;\n/** The longest a width exit takes (the morph spring, 736ms) plus a margin, for the backstop that removes a node whose animation never ends. */\nconst EXIT_BACKSTOP_MS = 900;\n\n/** Split a formatted number into parts keyed by place value, so 999 to 1,000 keeps the ones column the ones column. */\nfunction partsFor(value: number, decimals: number, locale: string): Part[] {\n  const parts = new Intl.NumberFormat(locale, {\n    minimumFractionDigits: decimals,\n    maximumFractionDigits: decimals,\n    numberingSystem: \"latn\",\n  }).formatToParts(value);\n  let place = parts.reduce((count, part) => count + (part.type === \"integer\" ? part.value.length : 0), 0);\n  let fraction = 0;\n  let order = 0;\n  return parts.flatMap((part, index): Part[] => {\n    if (part.type === \"integer\")\n      return [...part.value].map((char) => ({ key: `i${--place}`, digit: Number(char), order: order++ }));\n    if (part.type === \"fraction\")\n      return [...part.value].map((char) => ({ key: `f${fraction++}`, digit: Number(char), order: order++ }));\n    const key = part.type === \"group\" ? `g${place}` : part.type === \"decimal\" ? \"d\" : `${part.type}${index}`;\n    return [{ key, text: part.value }];\n  });\n}\n\nconst same = (a: Part, b: Part) =>\n  a.key === b.key && (\"digit\" in a ? \"digit\" in b && a.digit === b.digit && a.order === b.order : \"text\" in b && a.text === b.text);\n\n/** The entries after `parts` arrive: gone ones stay (leaving) where they stood, new ones are fresh. */\nfunction merge(previous: Entry[], parts: Part[]): Entry[] {\n  const before = new Map(previous.map((entry) => [entry.part.key, entry]));\n  const result: Entry[] = parts.map((part) => {\n    const old = before.get(part.key);\n    return { part, leaving: false, fresh: old ? old.fresh && !old.leaving : true };\n  });\n  const live = new Set(parts.map((part) => part.key));\n  previous.forEach((entry, index) => {\n    if (live.has(entry.part.key)) return;\n    let anchor = -1;\n    for (let back = index - 1; back >= 0 && anchor < 0; back--) {\n      anchor = result.findIndex((item) => item.part.key === previous[back]!.part.key);\n    }\n    result.splice(anchor + 1, 0, { ...entry, leaving: true });\n  });\n  return result;\n}\n\n/** True once the node has been at least 60% on screen (or at once where IntersectionObserver is missing). */\nfunction useSeen(node: { current: HTMLElement | null }, enabled: boolean) {\n  const [seen, setSeen] = useState(false);\n  useEffect(() => {\n    const target = node.current;\n    if (!enabled || seen || !target || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry?.isIntersecting) setSeen(true);\n      },\n      { threshold: 0.6 },\n    );\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [node, enabled, seen]);\n  return seen || (enabled && typeof IntersectionObserver === \"undefined\");\n}\n\n/** Width presence: opens when it arrives after the first render, closes while it leaves, and is removed once closed. */\nfunction Slot({\n  entry,\n  onGone,\n  children,\n}: {\n  entry: Entry;\n  onGone: (key: string) => void;\n  children: ReactNode;\n}) {\n  const { key } = entry.part;\n  const gone = useCallback(() => onGone(key), [onGone, key]);\n  useExitBackstop(entry.leaving, gone, EXIT_BACKSTOP_MS);\n  // Reduced motion removes it at once, and an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (entry.leaving && prefersReducedMotion()) gone();\n  }, [entry.leaving, gone]);\n  return (\n    <span\n      data-state={entry.leaving ? \"leaving\" : entry.fresh ? \"entering\" : undefined}\n      onAnimationEnd={(event) => {\n        if (entry.leaving && event.target === event.currentTarget) gone();\n      }}\n      className=\"counter-slot\"\n    >\n      {children}\n    </span>\n  );\n}\n\n/** One digit wheel. It remembers how far it has turned, so it always keeps going the way the whole number moved. */\nfunction Column({\n  digit,\n  direction,\n  phase,\n  delay,\n}: {\n  digit: number;\n  direction: number;\n  phase: \"armed\" | \"revealing\" | \"settled\";\n  delay: number;\n}) {\n  const armed = phase === \"armed\";\n  const [wheel, setWheel] = useState(() => {\n    const start = armed ? 0 : digit;\n    return { digit: start, turns: start };\n  });\n  let { turns } = wheel;\n  if (!armed && wheel.digit !== digit) {\n    // The first reveal always counts up from 0; afterwards a smaller number turns the wheel back.\n    const back = direction < 0 && phase === \"settled\";\n    turns = wheel.turns + (back ? -((wheel.digit - digit + 10) % 10) : (digit - wheel.digit + 10) % 10);\n    setWheel({ digit, turns });\n  }\n  const style: CSSProperties & Record<string, string | number> = { \"--wheel\": turns };\n  // The first reveal rolls on a slower spring (1.2 times the smooth one), each digit a beat after the last.\n  if (phase === \"revealing\") {\n    style.transitionDelay = `${delay}ms`;\n    style.transitionDuration = \"calc(var(--duration-smooth) * 1.2)\";\n  }\n  return (\n    <span style={style} className=\"counter-column\">\n      <span className=\"counter-sizer\">0</span>\n      {FACES.map((face) => (\n        <span key={face} style={{ \"--face\": face } as CSSProperties} className=\"counter-glyph\">\n          {face}\n        </span>\n      ))}\n    </span>\n  );\n}\n\nexport const AnimatedCounter = forwardRef<HTMLSpanElement, AnimatedCounterProps>(function AnimatedCounter(\n  { value, label, prefix = \"\", suffix = \"\", decimals = 0, animateOnView = false, locale = \"en-US\", className },\n  ref,\n) {\n  const root = useRef<HTMLSpanElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, root), [ref]);\n  const seen = useSeen(root, animateOnView);\n  const [phase, setPhase] = useState<\"armed\" | \"revealing\" | \"settled\">(animateOnView ? \"armed\" : \"settled\");\n  if (phase === \"armed\" && seen) setPhase(\"revealing\");\n  useEffect(() => {\n    if (phase !== \"revealing\") return;\n    const timer = setTimeout(() => setPhase(\"settled\"), prefersReducedMotion() ? 0 : REVEAL_SETTLE_MS);\n    return () => clearTimeout(timer);\n  }, [phase]);\n\n  const [previous, setPrevious] = useState(value);\n  const [direction, setDirection] = useState(1);\n  if (value !== previous) {\n    setPrevious(value);\n    setDirection(value > previous ? 1 : -1);\n  }\n\n  const parts = partsFor(value, decimals, locale);\n  const [entries, setEntries] = useState<Entry[]>(() =>\n    parts.map((part) => ({ part, leaving: false, fresh: false })),\n  );\n  const live = entries.filter((entry) => !entry.leaving);\n  if (live.length !== parts.length || live.some((entry, index) => !same(entry.part, parts[index]!))) {\n    setEntries(merge(entries, parts));\n  }\n  const finish = useCallback(\n    (key: string) =>\n      setEntries((list) => list.filter((entry) => !(entry.leaving && entry.part.key === key))),\n    [],\n  );\n\n  const text = `${prefix}${parts.map((part) => (\"text\" in part ? part.text : part.digit)).join(\"\")}${suffix}`;\n  return (\n    <span\n      ref={refs}\n      data-slot=\"animated-counter\"\n      className={cn(\n        \"animated-counter box-border font-display text-h2 leading-none font-semibold tabular-nums text-foreground\",\n        className,\n      )}\n    >\n      {label ? (\n        <span className=\"counter-label\">\n          <SwapText swapKey={label} motion=\"rise\" className=\"block\">\n            {label}\n          </SwapText>\n        </span>\n      ) : null}\n      <span className=\"sr-only\" aria-live=\"polite\">\n        {text}\n      </span>\n      <span className=\"counter-value\" aria-hidden=\"true\">\n        {prefix ? <span className=\"counter-symbol\">{prefix}</span> : null}\n        {entries.map((entry) => (\n          <Slot key={entry.part.key} entry={entry} onGone={finish}>\n            {\"digit\" in entry.part ? (\n              <Column\n                digit={entry.part.digit}\n                direction={direction}\n                phase={phase}\n                delay={Math.min(entry.part.order * REVEAL_STAGGER_MS, REVEAL_MAX_DELAY_MS)}\n              />\n            ) : (\n              <span className=\"counter-symbol\">{entry.part.text}</span>\n            )}\n          </Slot>\n        ))}\n        {suffix ? <span className=\"counter-symbol\">{suffix}</span> : null}\n      </span>\n    </span>\n  );\n});\n"],"mappings":"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"}

package/dist/animated-counter/index.d.ts

@@ -0,0 +1,2 @@
+import { AnimatedCounter, AnimatedCounterProps } from "./animated-counter.js";
+export { AnimatedCounter, type AnimatedCounterProps };

package/dist/animated-counter/index.js

@@ -0,0 +1,2 @@
+import { AnimatedCounter } from "./animated-counter.js";
+export { AnimatedCounter };

package/dist/announcement-bar/announcement-bar.d.ts

@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+//#region src/announcement-bar/announcement-bar.d.ts
+export interface AnnouncementAction {
+  label: string;
+  /** Renders a link. Without it the action is a button. */
+  href?: string;
+  onClick?: () => void;
+}
+export interface Announcement {
+  /** Stable id, reported to callbacks. */
+  id: string;
+  message: ReactNode;
+  action?: AnnouncementAction;
+  /** Counts down to a moment, for example the end of a sale. */
+  countdown?: {
+    to: Date | string | number;
+    label?: string;
+  };
+}
+/**
+ * AnnouncementBar: a slim bar for the top of a page.
+ *
+ * It can rotate several messages: the next one rises in from below (the
+ * previous one from above) while the bar follows the new height. Rotation pauses
+ * on hover, keyboard focus, a hidden tab and, with the `controls`, a Pause
+ * button whose ring is the clock; it is off under reduced motion. Messages can
+ * carry a call to action and a live countdown whose digits roll. Dismissing
+ * collapses the bar's height so the page below eases up, and with an `id` the
+ * dismissal is remembered in `localStorage`. While rotation runs the message is
+ * not announced on each change; when it holds, changes are announced politely.
+ */
+export interface AnnouncementBarProps {
+  messages: Announcement[];
+  /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */
+  id?: string;
+  /** Whether the bar is shown. Leave it out to let the component manage it. */
+  open?: boolean;
+  /** @default true */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Index of the visible message. */
+  index?: number;
+  /** @default 0 */
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Milliseconds each message stays before the next one. @default 6000 */
+  interval?: number;
+  /** Rotate automatically. Off under reduced motion. @default true */
+  autoPlay?: boolean;
+  /** Show previous, next and pause controls when there are several messages. By default only the close button shows. @default false */
+  controls?: boolean;
+  /** @default true */
+  dismissible?: boolean;
+  /** `inverted` is the foreground colour as the fill. @default "neutral" */
+  tone?: "neutral" | "inverted";
+  onAction?: (announcement: Announcement) => void;
+  onCountdownEnd?: (announcement: Announcement) => void;
+  /** Accessible name of the region. @default "Announcements" */
+  label?: string;
+  /** Extra classes for the bar. Merged last. */
+  className?: string;
+}
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+export declare function clearAnnouncementDismissal(id: string): void;
+export declare const AnnouncementBar: import("react").ForwardRefExoticComponent<AnnouncementBarProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=announcement-bar.d.ts.map