@seekalfred/primitives 0.7.3 → 0.8.0

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

@@ -51,6 +51,21 @@ const AlertDialogAction = forwardRef(function AlertDialogAction({ className, ...
 });
 const alertDialogHeaderVariants = cva("flex items-start gap-4 border-b-(length:--border-width) border-border px-8 pt-8 pb-6");
 /**
+* The header icon's tile: the close button's size, so a one-line title centres
+* on both. Each tone is a subtle tint with the ink the token contrast contract
+* grades on it.
+*/
+const alertDialogIconVariants = cva("inline-flex size-9 shrink-0 items-center justify-center rounded-circle [&_svg]:pointer-events-none [&_svg]:size-5", {
+	variants: { tone: {
+		neutral: "bg-muted text-foreground",
+		warning: "bg-warning-subtle text-warning-foreground",
+		destructive: "bg-destructive-subtle text-destructive-subtle-foreground",
+		info: "bg-info-subtle text-info-foreground",
+		success: "bg-success-subtle text-success-foreground"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+/**
 * 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
@@ -60,7 +75,7 @@ const alertDialogTitleBlockVariants = cva("min-w-0 flex-1", { variants: { subtit
 	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 alertDialogTitleVariants = cva("m-0 font-display 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",
@@ -87,7 +102,7 @@ function Swappable({ value }) {
 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) {
+const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, body, icon, tone = "neutral", children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		...props,
 		isDismissable: false,
@@ -105,33 +120,43 @@ const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTit
 					/* @__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", {
+						children: [
+							isEmpty(icon) ? null : /* @__PURE__ */ jsx("span", {
 								"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" })
+								"data-slot": "alert-dialog-icon",
+								"data-tone": tone,
+								className: alertDialogIconVariants({ tone }),
+								children: icon
+							}),
+							/* @__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",

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

@@ -1 +1 @@
-{"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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"}
+{"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  /**\n   * A decorative icon at the start of the header, in a round tile beside the\n   * title: a warning triangle before a wide-reaching switch, a trash can before\n   * a delete. Hidden from assistive technology, so the title must still say\n   * what is at stake. Leave it out and the header is as before.\n   */\n  icon?: ReactNode;\n  /**\n   * The colour of the icon's tile, from the status tokens: `neutral` (the\n   * default), `warning`, `destructive`, `info` or `success`. It paints the tile\n   * only, never the actions. Without an `icon` it does nothing. Mirrored to\n   * `data-tone` on the tile.\n   */\n  tone?: \"neutral\" | \"warning\" | \"destructive\" | \"info\" | \"success\";\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 header icon's tile: the close button's size, so a one-line title centres\n * on both. Each tone is a subtle tint with the ink the token contrast contract\n * grades on it.\n */\nconst alertDialogIconVariants = cva(\n  \"inline-flex size-9 shrink-0 items-center justify-center rounded-circle [&_svg]:pointer-events-none [&_svg]:size-5\",\n  {\n    variants: {\n      tone: {\n        neutral: \"bg-muted text-foreground\",\n        warning: \"bg-warning-subtle text-warning-foreground\",\n        destructive: \"bg-destructive-subtle text-destructive-subtle-foreground\",\n        info: \"bg-info-subtle text-info-foreground\",\n        success: \"bg-success-subtle text-success-foreground\",\n      },\n    },\n    defaultVariants: { tone: \"neutral\" },\n  },\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 font-display 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    icon,\n    tone = \"neutral\",\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            {isEmpty(icon) ? null : (\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"alert-dialog-icon\"\n                data-tone={tone}\n                className={alertDialogIconVariants({ tone })}\n              >\n                {icon}\n              </span>\n            )}\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/announcement-bar/announcement-bar.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/announcement-bar/announcement-bar.d.ts
 export interface AnnouncementAction {
   label: string;
@@ -28,8 +28,15 @@ export interface Announcement {
  * 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.
+ *
+ * Other attributes (`data-*`, `role`, `aria-*`, event handlers, `style`) reach
+ * the bar's `<section>`. `role` lets a consumer make the bar a live `alert`
+ * or `status`; without it the bar stays a labelled region. `label` remains the
+ * accessible name, and `id` is not passed through: it names the remembered
+ * dismissal, as before. Handlers for pointer enter and leave, focus and blur
+ * run before the bar's own rotation hold.
  */
-export interface AnnouncementBarProps {
+export interface AnnouncementBarProps extends Omit<ComponentPropsWithoutRef<"section">, "id" | "children" | "className"> {
   messages: Announcement[];
   /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */
   id?: string;
@@ -51,8 +58,12 @@ export interface AnnouncementBarProps {
   controls?: boolean;
   /** @default true */
   dismissible?: boolean;
-  /** `inverted` is the foreground colour as the fill. @default "neutral" */
-  tone?: "neutral" | "inverted";
+  /**
+   * `inverted` is the foreground colour as the fill. `warning` is the warning
+   * tint with its ink and a decorative warning triangle before the message, so
+   * the tone is not carried by colour alone. @default "neutral"
+   */
+  tone?: "neutral" | "inverted" | "warning";
   onAction?: (announcement: Announcement) => void;
   onCountdownEnd?: (announcement: Announcement) => void;
   /** Accessible name of the region. @default "Announcements" */

package/dist/announcement-bar/announcement-bar.js

@@ -123,7 +123,7 @@ const Glyph = ({ path, size = 16 }) => /* @__PURE__ */ jsx("svg", {
 	"aria-hidden": "true",
 	children: /* @__PURE__ */ jsx("path", { d: path })
 });
-const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open: openProp, defaultOpen = true, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, interval = 6e3, autoPlay = true, controls = false, dismissible = true, tone = "neutral", onAction, onCountdownEnd, label = "Announcements", className }, ref) {
+const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open: openProp, defaultOpen = true, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, interval = 6e3, autoPlay = true, controls = false, dismissible = true, tone = "neutral", onAction, onCountdownEnd, label = "Announcements", className, style, onPointerEnter, onPointerLeave, onFocus, onBlur, ...rest }, ref) {
 	const uid = useId();
 	const reduced = useReducedMotion();
 	const total = messages.length;
@@ -238,6 +238,7 @@ const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open
 		},
 		className: "alert-presence announcement-frame",
 		children: /* @__PURE__ */ jsxs("section", {
+			...rest,
 			ref: barRef,
 			"data-slot": "announcement-bar",
 			"data-tone": tone,
@@ -245,11 +246,24 @@ const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open
 			"aria-roledescription": total > 1 ? "carousel" : void 0,
 			"aria-hidden": leaving || void 0,
 			className: cn("announcement-bar", className),
-			style: { "--controls": controlCount },
-			onPointerEnter: (event) => event.pointerType === "mouse" && setHovered(true),
-			onPointerLeave: () => setHovered(false),
-			onFocus: (event) => setFocused(event.target.matches(":focus-visible") && !event.target.closest("[data-pause]")),
+			style: {
+				...style,
+				"--controls": controlCount
+			},
+			onPointerEnter: (event) => {
+				onPointerEnter?.(event);
+				if (event.pointerType === "mouse") setHovered(true);
+			},
+			onPointerLeave: (event) => {
+				onPointerLeave?.(event);
+				setHovered(false);
+			},
+			onFocus: (event) => {
+				onFocus?.(event);
+				setFocused(event.target.matches(":focus-visible") && !event.target.closest("[data-pause]"));
+			},
 			onBlur: (event) => {
+				onBlur?.(event);
 				if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
 			},
 			children: [
@@ -274,7 +288,18 @@ const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open
 								children: /* @__PURE__ */ jsxs("p", {
 									className: "announcement-message",
 									children: [
-										/* @__PURE__ */ jsx("span", { children: announcement.message }),
+										/* @__PURE__ */ jsxs("span", { children: [tone === "warning" ? /* @__PURE__ */ jsx("svg", {
+											"data-slot": "announcement-tone-icon",
+											viewBox: "0 0 16 16",
+											fill: "none",
+											stroke: "currentColor",
+											strokeWidth: 1.75,
+											strokeLinecap: "round",
+											strokeLinejoin: "round",
+											"aria-hidden": "true",
+											className: "announcement-tone-icon",
+											children: /* @__PURE__ */ jsx("path", { d: "M8 2.5 14.5 13.5h-13ZM8 6.5v3M8 11.5h.01" })
+										}) : null, announcement.message] }),
 										countdown ? /* @__PURE__ */ jsx(Countdown, {
 											to: countdown.to,
 											label: countdown.label,

package/dist/announcement-bar/announcement-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"announcement-bar.js","names":[],"sources":["../../src/announcement-bar/announcement-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useReducedMotion } from \"../lib/motion.js\";\nimport { usePausableTimeout } from \"../lib/pausable-timeout.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\nexport interface AnnouncementAction {\n  label: string;\n  /** Renders a link. Without it the action is a button. */\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface Announcement {\n  /** Stable id, reported to callbacks. */\n  id: string;\n  message: ReactNode;\n  action?: AnnouncementAction;\n  /** Counts down to a moment, for example the end of a sale. */\n  countdown?: { to: Date | string | number; label?: string };\n}\n\n/**\n * AnnouncementBar: a slim bar for the top of a page.\n *\n * It can rotate several messages: the next one rises in from below (the\n * previous one from above) while the bar follows the new height. Rotation pauses\n * on hover, keyboard focus, a hidden tab and, with the `controls`, a Pause\n * button whose ring is the clock; it is off under reduced motion. Messages can\n * carry a call to action and a live countdown whose digits roll. Dismissing\n * collapses the bar's height so the page below eases up, and with an `id` the\n * dismissal is remembered in `localStorage`. While rotation runs the message is\n * not announced on each change; when it holds, changes are announced politely.\n */\nexport interface AnnouncementBarProps {\n  messages: Announcement[];\n  /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */\n  id?: string;\n  /** Whether the bar is shown. Leave it out to let the component manage it. */\n  open?: boolean;\n  /** @default true */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Index of the visible message. */\n  index?: number;\n  /** @default 0 */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Milliseconds each message stays before the next one. @default 6000 */\n  interval?: number;\n  /** Rotate automatically. Off under reduced motion. @default true */\n  autoPlay?: boolean;\n  /** Show previous, next and pause controls when there are several messages. By default only the close button shows. @default false */\n  controls?: boolean;\n  /** @default true */\n  dismissible?: boolean;\n  /** `inverted` is the foreground colour as the fill. @default \"neutral\" */\n  tone?: \"neutral\" | \"inverted\";\n  onAction?: (announcement: Announcement) => void;\n  onCountdownEnd?: (announcement: Announcement) => void;\n  /** Accessible name of the region. @default \"Announcements\" */\n  label?: string;\n  /** Extra classes for the bar. Merged last. */\n  className?: string;\n}\n\nconst storageKey = (id: string) => `alfred-announcement:${id}`;\n\n/** Forgets a remembered dismissal so the bar with this id shows again. */\nexport function clearAnnouncementDismissal(id: string) {\n  try {\n    window.localStorage.removeItem(storageKey(id));\n  } catch {\n    // Storage can be blocked.\n  }\n}\n\nfunction parts(ms: number) {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\nconst pad = (value: number) => String(value).padStart(2, \"0\");\n\n/** One character cell: a changed digit rises in while the old one lifts away, like a counter winding down. */\nconst Digits = ({ value, pending }: { value: string; pending: boolean }) =>\n  value.split(\"\").map((char, index) => (\n    <span key={value.length - index} className=\"announcement-digit\">\n      <SwapText swapKey={pending ? \"0\" : char}>{pending ? \"0\" : char}</SwapText>\n    </span>\n  ));\n\nfunction Countdown({ to, label, onEnd }: { to: Date | string | number; label?: string; onEnd?: () => void }) {\n  const target = new Date(to).getTime();\n  const [now, setNow] = useState<number | null>(null);\n  const ended = useRef(false);\n  const endRef = useRef(onEnd);\n  useEffect(() => {\n    endRef.current = onEnd;\n  });\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>;\n    const tick = () => {\n      const current = Date.now();\n      setNow(current);\n      if (current >= target) {\n        if (!ended.current) {\n          ended.current = true;\n          endRef.current?.();\n        }\n        return;\n      }\n      // Wake just after each whole second, so the digits change on the beat.\n      timer = setTimeout(tick, 1000 - (current % 1000) + 8);\n    };\n    timer = setTimeout(tick, 0);\n    return () => clearTimeout(timer);\n  }, [target]);\n  const pending = now === null;\n  const { d, h, m, s } = parts(pending ? 0 : target - now);\n  const spoken = pending ? \"\" : `${d ? `${d} days ` : \"\"}${h} hours ${m} minutes`;\n  return (\n    <span className=\"announcement-countdown\">\n      {label ? <span>{label}</span> : null}\n      <span role=\"timer\" aria-live=\"off\" aria-label={spoken} data-pending={pending || undefined} className=\"announcement-time\">\n        {d ? (\n          <>\n            <Digits value={String(d)} pending={pending} />\n            <span aria-hidden=\"true\" className=\"announcement-unit\">\n              d\n            </span>\n            <span aria-hidden=\"true\" className=\"announcement-gap\" />\n          </>\n        ) : null}\n        <Digits value={pad(h)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(m)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(s)} pending={pending} />\n      </span>\n    </span>\n  );\n}\n\nconst Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d={path} />\n  </svg>\n);\n\nexport const AnnouncementBar = forwardRef<HTMLElement, AnnouncementBarProps>(function AnnouncementBar(\n  {\n    messages,\n    id,\n    open: openProp,\n    defaultOpen = true,\n    onOpenChange,\n    index: indexProp,\n    defaultIndex = 0,\n    onIndexChange,\n    interval = 6000,\n    autoPlay = true,\n    controls = false,\n    dismissible = true,\n    tone = \"neutral\",\n    onAction,\n    onCountdownEnd,\n    label = \"Announcements\",\n    className,\n  },\n  ref,\n) {\n  const uid = useId();\n  const reduced = useReducedMotion();\n  const total = messages.length;\n\n  // Open: controlled, or internal and closed at once when this id was dismissed before.\n  const [openInternal, setOpenInternal] = useState(defaultOpen);\n  const [remembered, setRemembered] = useState(false);\n  const wanted = openProp ?? (openInternal && !remembered);\n\n  // Presence: a bar that comes and goes collapses its height rather than vanishing (the alert-presence utility).\n  const [rendered, setRendered] = useState(wanted);\n  const [shown, setShown] = useState(wanted);\n  if (wanted && !rendered) setRendered(true);\n  if (!wanted && shown) setShown(false);\n  useEffect(() => {\n    // A newly shown bar mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frame = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => setRendered(false), []);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n\n  // Storage is only readable on the client; a dismissed bar is hidden before paint so it never flashes.\n  useIsomorphicLayoutEffect(() => {\n    if (!id || openProp !== undefined) return;\n    let stored = false;\n    try {\n      stored = window.localStorage.getItem(storageKey(id)) === \"dismissed\";\n    } catch {\n      // Storage can be blocked.\n    }\n    if (stored) {\n      setRemembered(true);\n      setRendered(false);\n      setShown(false);\n    }\n  }, [id, openProp]);\n\n  function dismiss() {\n    if (id) {\n      try {\n        window.localStorage.setItem(storageKey(id), \"dismissed\");\n      } catch {\n        // Storage can be blocked.\n      }\n    }\n    if (openProp === undefined) setOpenInternal(false);\n    onOpenChange?.(false);\n  }\n\n  // Rotation.\n  const [indexInternal, setIndexInternal] = useState(defaultIndex);\n  const current = total ? (((indexProp ?? indexInternal) % total) + total) % total : 0;\n  const [direction, setDirection] = useState(1);\n  function go(step: number) {\n    if (total < 2) return;\n    const next = (((current + step) % total) + total) % total;\n    setDirection(step > 0 ? 1 : -1);\n    if (indexProp === undefined) setIndexInternal(next);\n    onIndexChange?.(next);\n  }\n\n  const [userPaused, setUserPaused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [hidden, setHidden] = useState(false);\n  useEffect(() => {\n    const read = () => setHidden(document.visibilityState === \"hidden\");\n    document.addEventListener(\"visibilitychange\", read);\n    return () => document.removeEventListener(\"visibilitychange\", read);\n  }, []);\n  const rotating = autoPlay && !reduced && total > 1;\n  const held = hovered || focused || userPaused;\n  // The clock holds while the viewer is looking, and finishes the rest of the time when released. It also holds in a hidden tab.\n  const setHeld = usePausableTimeout(rotating && wanted ? interval : 0, current, () => go(1));\n  useEffect(() => {\n    setHeld(held);\n  }, [held, setHeld]);\n\n  // The bar follows the height of the current message, which can wrap on narrow screens.\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  useHeightFollow(frame, content, String(current));\n\n  // A bar on its way out is out of the tab order and the accessibility tree at once.\n  const bar = useRef<HTMLElement | null>(null);\n  const barRef = useMemo(() => mergeRefs(ref, bar), [ref]);\n  useIsomorphicLayoutEffect(() => {\n    bar.current?.toggleAttribute(\"inert\", leaving);\n  }, [leaving]);\n\n  const announcement = messages[current];\n  if (!rendered || !announcement) return null;\n  const navigable = controls && total > 1;\n  const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);\n  const { action, countdown } = announcement;\n  const cta = action ? (\n    action.href ? (\n      <a\n        href={action.href}\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </a>\n    ) : (\n      <button\n        type=\"button\"\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </button>\n    )\n  ) : null;\n\n  return (\n    <div\n      data-slot=\"announcement-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\") finish();\n      }}\n      className=\"alert-presence announcement-frame\"\n    >\n      <section\n        ref={barRef}\n        data-slot=\"announcement-bar\"\n        data-tone={tone}\n        aria-label={label}\n        aria-roledescription={total > 1 ? \"carousel\" : undefined}\n        aria-hidden={leaving || undefined}\n        className={cn(\"announcement-bar\", className)}\n        style={{ \"--controls\": controlCount } as CSSProperties}\n        onPointerEnter={(event) => event.pointerType === \"mouse\" && setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        // Keyboard focus holds the clock; a mouse click that leaves focus on a button does not, and neither does the pause button itself.\n        onFocus={(event) => setFocused(event.target.matches(\":focus-visible\") && !event.target.closest(\"[data-pause]\"))}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n        }}\n      >\n        <div aria-hidden=\"true\" />\n        <div\n          ref={frame}\n          id={`${uid}-slides`}\n          aria-live={rotating && !held ? \"off\" : \"polite\"}\n          aria-atomic=\"false\"\n          className=\"announcement-viewport height-follow\"\n        >\n          <div ref={content}>\n            <SwapText swapKey={announcement.id} dir={direction} className=\"block\">\n              <div\n                role={total > 1 ? \"group\" : undefined}\n                aria-roledescription={total > 1 ? \"slide\" : undefined}\n                aria-label={total > 1 ? `${current + 1} of ${total}` : undefined}\n                className=\"announcement-face\"\n              >\n                <p className=\"announcement-message\">\n                  <span>{announcement.message}</span>\n                  {countdown ? <Countdown to={countdown.to} label={countdown.label} onEnd={() => onCountdownEnd?.(announcement)} /> : null}\n                  {cta}\n                </p>\n              </div>\n            </SwapText>\n          </div>\n        </div>\n        <div className=\"announcement-controls\">\n          {navigable ? (\n            <>\n              <button type=\"button\" aria-label=\"Previous announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(-1)}>\n                <Glyph path=\"M4 10l4-4 4 4\" />\n              </button>\n              {rotating ? (\n                <button\n                  type=\"button\"\n                  aria-label={userPaused ? \"Resume announcements\" : \"Pause announcements\"}\n                  aria-pressed={userPaused}\n                  data-pause=\"\"\n                  className=\"announcement-icon\"\n                  onClick={() => setUserPaused(!userPaused)}\n                >\n                  <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} aria-hidden=\"true\" className=\"announcement-ring\">\n                    <circle cx=\"10\" cy=\"10\" r=\"8\" pathLength={1} className=\"announcement-ring-track\" />\n                    <circle\n                      key={current}\n                      cx=\"10\"\n                      cy=\"10\"\n                      r=\"8\"\n                      pathLength={1}\n                      strokeLinecap=\"round\"\n                      className=\"announcement-ring-fill\"\n                      style={{ animationDuration: `${interval}ms`, animationPlayState: held || hidden ? \"paused\" : \"running\" }}\n                    />\n                  </svg>\n                  <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" className=\"announcement-ring-icon\">\n                    {userPaused ? <path d=\"M6 4.5v7l5.5-3.5Z\" /> : <path d=\"M5.5 4.5h1.8v7H5.5ZM8.7 4.5h1.8v7H8.7Z\" />}\n                  </svg>\n                </button>\n              ) : null}\n              <button type=\"button\" aria-label=\"Next announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(1)}>\n                <Glyph path=\"M4 6l4 4 4-4\" />\n              </button>\n            </>\n          ) : null}\n          {dismissible ? (\n            <button type=\"button\" aria-label=\"Dismiss\" className=\"announcement-icon\" onClick={dismiss}>\n              <Glyph path=\"M4 4l8 8M12 4l-8 8\" />\n            </button>\n          ) : null}\n        </div>\n      </section>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"announcement-bar.js","names":[],"sources":["../../src/announcement-bar/announcement-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useReducedMotion } from \"../lib/motion.js\";\nimport { usePausableTimeout } from \"../lib/pausable-timeout.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\nexport interface AnnouncementAction {\n  label: string;\n  /** Renders a link. Without it the action is a button. */\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface Announcement {\n  /** Stable id, reported to callbacks. */\n  id: string;\n  message: ReactNode;\n  action?: AnnouncementAction;\n  /** Counts down to a moment, for example the end of a sale. */\n  countdown?: { to: Date | string | number; label?: string };\n}\n\n/**\n * AnnouncementBar: a slim bar for the top of a page.\n *\n * It can rotate several messages: the next one rises in from below (the\n * previous one from above) while the bar follows the new height. Rotation pauses\n * on hover, keyboard focus, a hidden tab and, with the `controls`, a Pause\n * button whose ring is the clock; it is off under reduced motion. Messages can\n * carry a call to action and a live countdown whose digits roll. Dismissing\n * collapses the bar's height so the page below eases up, and with an `id` the\n * dismissal is remembered in `localStorage`. While rotation runs the message is\n * not announced on each change; when it holds, changes are announced politely.\n *\n * Other attributes (`data-*`, `role`, `aria-*`, event handlers, `style`) reach\n * the bar's `<section>`. `role` lets a consumer make the bar a live `alert`\n * or `status`; without it the bar stays a labelled region. `label` remains the\n * accessible name, and `id` is not passed through: it names the remembered\n * dismissal, as before. Handlers for pointer enter and leave, focus and blur\n * run before the bar's own rotation hold.\n */\nexport interface AnnouncementBarProps\n  extends Omit<ComponentPropsWithoutRef<\"section\">, \"id\" | \"children\" | \"className\"> {\n  messages: Announcement[];\n  /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */\n  id?: string;\n  /** Whether the bar is shown. Leave it out to let the component manage it. */\n  open?: boolean;\n  /** @default true */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Index of the visible message. */\n  index?: number;\n  /** @default 0 */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Milliseconds each message stays before the next one. @default 6000 */\n  interval?: number;\n  /** Rotate automatically. Off under reduced motion. @default true */\n  autoPlay?: boolean;\n  /** Show previous, next and pause controls when there are several messages. By default only the close button shows. @default false */\n  controls?: boolean;\n  /** @default true */\n  dismissible?: boolean;\n  /**\n   * `inverted` is the foreground colour as the fill. `warning` is the warning\n   * tint with its ink and a decorative warning triangle before the message, so\n   * the tone is not carried by colour alone. @default \"neutral\"\n   */\n  tone?: \"neutral\" | \"inverted\" | \"warning\";\n  onAction?: (announcement: Announcement) => void;\n  onCountdownEnd?: (announcement: Announcement) => void;\n  /** Accessible name of the region. @default \"Announcements\" */\n  label?: string;\n  /** Extra classes for the bar. Merged last. */\n  className?: string;\n}\n\nconst storageKey = (id: string) => `alfred-announcement:${id}`;\n\n/** Forgets a remembered dismissal so the bar with this id shows again. */\nexport function clearAnnouncementDismissal(id: string) {\n  try {\n    window.localStorage.removeItem(storageKey(id));\n  } catch {\n    // Storage can be blocked.\n  }\n}\n\nfunction parts(ms: number) {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\nconst pad = (value: number) => String(value).padStart(2, \"0\");\n\n/** One character cell: a changed digit rises in while the old one lifts away, like a counter winding down. */\nconst Digits = ({ value, pending }: { value: string; pending: boolean }) =>\n  value.split(\"\").map((char, index) => (\n    <span key={value.length - index} className=\"announcement-digit\">\n      <SwapText swapKey={pending ? \"0\" : char}>{pending ? \"0\" : char}</SwapText>\n    </span>\n  ));\n\nfunction Countdown({ to, label, onEnd }: { to: Date | string | number; label?: string; onEnd?: () => void }) {\n  const target = new Date(to).getTime();\n  const [now, setNow] = useState<number | null>(null);\n  const ended = useRef(false);\n  const endRef = useRef(onEnd);\n  useEffect(() => {\n    endRef.current = onEnd;\n  });\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>;\n    const tick = () => {\n      const current = Date.now();\n      setNow(current);\n      if (current >= target) {\n        if (!ended.current) {\n          ended.current = true;\n          endRef.current?.();\n        }\n        return;\n      }\n      // Wake just after each whole second, so the digits change on the beat.\n      timer = setTimeout(tick, 1000 - (current % 1000) + 8);\n    };\n    timer = setTimeout(tick, 0);\n    return () => clearTimeout(timer);\n  }, [target]);\n  const pending = now === null;\n  const { d, h, m, s } = parts(pending ? 0 : target - now);\n  const spoken = pending ? \"\" : `${d ? `${d} days ` : \"\"}${h} hours ${m} minutes`;\n  return (\n    <span className=\"announcement-countdown\">\n      {label ? <span>{label}</span> : null}\n      <span role=\"timer\" aria-live=\"off\" aria-label={spoken} data-pending={pending || undefined} className=\"announcement-time\">\n        {d ? (\n          <>\n            <Digits value={String(d)} pending={pending} />\n            <span aria-hidden=\"true\" className=\"announcement-unit\">\n              d\n            </span>\n            <span aria-hidden=\"true\" className=\"announcement-gap\" />\n          </>\n        ) : null}\n        <Digits value={pad(h)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(m)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(s)} pending={pending} />\n      </span>\n    </span>\n  );\n}\n\nconst Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d={path} />\n  </svg>\n);\n\nexport const AnnouncementBar = forwardRef<HTMLElement, AnnouncementBarProps>(function AnnouncementBar(\n  {\n    messages,\n    id,\n    open: openProp,\n    defaultOpen = true,\n    onOpenChange,\n    index: indexProp,\n    defaultIndex = 0,\n    onIndexChange,\n    interval = 6000,\n    autoPlay = true,\n    controls = false,\n    dismissible = true,\n    tone = \"neutral\",\n    onAction,\n    onCountdownEnd,\n    label = \"Announcements\",\n    className,\n    style,\n    onPointerEnter,\n    onPointerLeave,\n    onFocus,\n    onBlur,\n    ...rest\n  },\n  ref,\n) {\n  const uid = useId();\n  const reduced = useReducedMotion();\n  const total = messages.length;\n\n  // Open: controlled, or internal and closed at once when this id was dismissed before.\n  const [openInternal, setOpenInternal] = useState(defaultOpen);\n  const [remembered, setRemembered] = useState(false);\n  const wanted = openProp ?? (openInternal && !remembered);\n\n  // Presence: a bar that comes and goes collapses its height rather than vanishing (the alert-presence utility).\n  const [rendered, setRendered] = useState(wanted);\n  const [shown, setShown] = useState(wanted);\n  if (wanted && !rendered) setRendered(true);\n  if (!wanted && shown) setShown(false);\n  useEffect(() => {\n    // A newly shown bar mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frame = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => setRendered(false), []);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n\n  // Storage is only readable on the client; a dismissed bar is hidden before paint so it never flashes.\n  useIsomorphicLayoutEffect(() => {\n    if (!id || openProp !== undefined) return;\n    let stored = false;\n    try {\n      stored = window.localStorage.getItem(storageKey(id)) === \"dismissed\";\n    } catch {\n      // Storage can be blocked.\n    }\n    if (stored) {\n      setRemembered(true);\n      setRendered(false);\n      setShown(false);\n    }\n  }, [id, openProp]);\n\n  function dismiss() {\n    if (id) {\n      try {\n        window.localStorage.setItem(storageKey(id), \"dismissed\");\n      } catch {\n        // Storage can be blocked.\n      }\n    }\n    if (openProp === undefined) setOpenInternal(false);\n    onOpenChange?.(false);\n  }\n\n  // Rotation.\n  const [indexInternal, setIndexInternal] = useState(defaultIndex);\n  const current = total ? (((indexProp ?? indexInternal) % total) + total) % total : 0;\n  const [direction, setDirection] = useState(1);\n  function go(step: number) {\n    if (total < 2) return;\n    const next = (((current + step) % total) + total) % total;\n    setDirection(step > 0 ? 1 : -1);\n    if (indexProp === undefined) setIndexInternal(next);\n    onIndexChange?.(next);\n  }\n\n  const [userPaused, setUserPaused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [hidden, setHidden] = useState(false);\n  useEffect(() => {\n    const read = () => setHidden(document.visibilityState === \"hidden\");\n    document.addEventListener(\"visibilitychange\", read);\n    return () => document.removeEventListener(\"visibilitychange\", read);\n  }, []);\n  const rotating = autoPlay && !reduced && total > 1;\n  const held = hovered || focused || userPaused;\n  // The clock holds while the viewer is looking, and finishes the rest of the time when released. It also holds in a hidden tab.\n  const setHeld = usePausableTimeout(rotating && wanted ? interval : 0, current, () => go(1));\n  useEffect(() => {\n    setHeld(held);\n  }, [held, setHeld]);\n\n  // The bar follows the height of the current message, which can wrap on narrow screens.\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  useHeightFollow(frame, content, String(current));\n\n  // A bar on its way out is out of the tab order and the accessibility tree at once.\n  const bar = useRef<HTMLElement | null>(null);\n  const barRef = useMemo(() => mergeRefs(ref, bar), [ref]);\n  useIsomorphicLayoutEffect(() => {\n    bar.current?.toggleAttribute(\"inert\", leaving);\n  }, [leaving]);\n\n  const announcement = messages[current];\n  if (!rendered || !announcement) return null;\n  const navigable = controls && total > 1;\n  const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);\n  const { action, countdown } = announcement;\n  const cta = action ? (\n    action.href ? (\n      <a\n        href={action.href}\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </a>\n    ) : (\n      <button\n        type=\"button\"\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </button>\n    )\n  ) : null;\n\n  return (\n    <div\n      data-slot=\"announcement-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\") finish();\n      }}\n      className=\"alert-presence announcement-frame\"\n    >\n      <section\n        {...rest}\n        ref={barRef}\n        data-slot=\"announcement-bar\"\n        data-tone={tone}\n        aria-label={label}\n        aria-roledescription={total > 1 ? \"carousel\" : undefined}\n        aria-hidden={leaving || undefined}\n        className={cn(\"announcement-bar\", className)}\n        style={{ ...style, \"--controls\": controlCount } as CSSProperties}\n        onPointerEnter={(event) => {\n          onPointerEnter?.(event);\n          if (event.pointerType === \"mouse\") setHovered(true);\n        }}\n        onPointerLeave={(event) => {\n          onPointerLeave?.(event);\n          setHovered(false);\n        }}\n        // Keyboard focus holds the clock; a mouse click that leaves focus on a button does not, and neither does the pause button itself.\n        onFocus={(event) => {\n          onFocus?.(event);\n          setFocused(event.target.matches(\":focus-visible\") && !event.target.closest(\"[data-pause]\"));\n        }}\n        onBlur={(event) => {\n          onBlur?.(event);\n          if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n        }}\n      >\n        <div aria-hidden=\"true\" />\n        <div\n          ref={frame}\n          id={`${uid}-slides`}\n          aria-live={rotating && !held ? \"off\" : \"polite\"}\n          aria-atomic=\"false\"\n          className=\"announcement-viewport height-follow\"\n        >\n          <div ref={content}>\n            <SwapText swapKey={announcement.id} dir={direction} className=\"block\">\n              <div\n                role={total > 1 ? \"group\" : undefined}\n                aria-roledescription={total > 1 ? \"slide\" : undefined}\n                aria-label={total > 1 ? `${current + 1} of ${total}` : undefined}\n                className=\"announcement-face\"\n              >\n                <p className=\"announcement-message\">\n                  <span>\n                    {tone === \"warning\" ? (\n                      <svg\n                        data-slot=\"announcement-tone-icon\"\n                        viewBox=\"0 0 16 16\"\n                        fill=\"none\"\n                        stroke=\"currentColor\"\n                        strokeWidth={1.75}\n                        strokeLinecap=\"round\"\n                        strokeLinejoin=\"round\"\n                        aria-hidden=\"true\"\n                        className=\"announcement-tone-icon\"\n                      >\n                        <path d=\"M8 2.5 14.5 13.5h-13ZM8 6.5v3M8 11.5h.01\" />\n                      </svg>\n                    ) : null}\n                    {announcement.message}\n                  </span>\n                  {countdown ? <Countdown to={countdown.to} label={countdown.label} onEnd={() => onCountdownEnd?.(announcement)} /> : null}\n                  {cta}\n                </p>\n              </div>\n            </SwapText>\n          </div>\n        </div>\n        <div className=\"announcement-controls\">\n          {navigable ? (\n            <>\n              <button type=\"button\" aria-label=\"Previous announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(-1)}>\n                <Glyph path=\"M4 10l4-4 4 4\" />\n              </button>\n              {rotating ? (\n                <button\n                  type=\"button\"\n                  aria-label={userPaused ? \"Resume announcements\" : \"Pause announcements\"}\n                  aria-pressed={userPaused}\n                  data-pause=\"\"\n                  className=\"announcement-icon\"\n                  onClick={() => setUserPaused(!userPaused)}\n                >\n                  <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} aria-hidden=\"true\" className=\"announcement-ring\">\n                    <circle cx=\"10\" cy=\"10\" r=\"8\" pathLength={1} className=\"announcement-ring-track\" />\n                    <circle\n                      key={current}\n                      cx=\"10\"\n                      cy=\"10\"\n                      r=\"8\"\n                      pathLength={1}\n                      strokeLinecap=\"round\"\n                      className=\"announcement-ring-fill\"\n                      style={{ animationDuration: `${interval}ms`, animationPlayState: held || hidden ? \"paused\" : \"running\" }}\n                    />\n                  </svg>\n                  <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" className=\"announcement-ring-icon\">\n                    {userPaused ? <path d=\"M6 4.5v7l5.5-3.5Z\" /> : <path d=\"M5.5 4.5h1.8v7H5.5ZM8.7 4.5h1.8v7H8.7Z\" />}\n                  </svg>\n                </button>\n              ) : null}\n              <button type=\"button\" aria-label=\"Next announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(1)}>\n                <Glyph path=\"M4 6l4 4 4-4\" />\n              </button>\n            </>\n          ) : null}\n          {dismissible ? (\n            <button type=\"button\" aria-label=\"Dismiss\" className=\"announcement-icon\" onClick={dismiss}>\n              <Glyph path=\"M4 4l8 8M12 4l-8 8\" />\n            </button>\n          ) : null}\n        </div>\n      </section>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/avatar/avatar.d.ts

@@ -18,6 +18,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  */
 export declare const avatarVariants: (props?: ({
   size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
+  tone?: "primary" | "neutral" | "brand" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * A user avatar.
@@ -50,6 +51,12 @@ export interface AvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "chi
    * initials.
    */
   fallback?: ReactNode;
+  /**
+   * The fill behind the fallback: `neutral` (the default, a muted grey),
+   * `primary` (the accent fill) or `brand` (the periwinkle-to-teal gradient of a
+   * highlighted Card). A loaded photo covers it. Mirrored to `data-tone`.
+   */
+  tone?: "neutral" | "primary" | "brand";
 }
 export declare const Avatar: import("react").ForwardRefExoticComponent<AvatarProps & import("react").RefAttributes<HTMLImageElement>>;
 //#endregion

package/dist/avatar/avatar.js

@@ -25,17 +25,34 @@ const avatarVariants = cva([
 	"relative inline-flex shrink-0 items-center justify-center",
 	"rounded-full",
 	"box-border",
-	"font-sans font-medium",
-	"bg-muted text-foreground"
+	"font-sans font-medium"
 ], {
-	variants: { size: {
-		xs: "size-5 text-2xs leading-(--leading-none)",
-		sm: "size-6 text-2xs leading-(--leading-none)",
-		md: "size-8 text-sm leading-(--leading-none)",
-		lg: "size-10 text-sm leading-(--leading-none)",
-		xl: "size-16 text-base leading-(--leading-none)"
-	} },
-	defaultVariants: { size: "md" }
+	variants: {
+		size: {
+			xs: "size-5 text-2xs leading-(--leading-none)",
+			sm: "size-6 text-2xs leading-(--leading-none)",
+			md: "size-8 text-sm leading-(--leading-none)",
+			lg: "size-10 text-sm leading-(--leading-none)",
+			xl: "size-16 text-base leading-(--leading-none)"
+		},
+		/**
+		* The fill behind the initials. Every pair is one the token contrast
+		* contract already grades: foreground on muted, primary-foreground on
+		* primary, and for `brand` secondary-foreground and tertiary-foreground
+		* (both the same ink) on each end of the gradient. `brand` is the
+		* periwinkle-to-teal edge of a highlighted Card, laid as a fill: the
+		* assistant's avatar in a chat, beside `primary` for the person.
+		*/
+		tone: {
+			neutral: "bg-muted text-foreground",
+			primary: "bg-primary text-primary-foreground",
+			brand: "bg-linear-to-r from-secondary to-tertiary text-secondary-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		tone: "neutral"
+	}
 });
 /** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */
 const dotPlace = {
@@ -45,7 +62,7 @@ const dotPlace = {
 	lg: "bottom-0 end-0 size-3",
 	xl: "bottom-1 end-1 size-3.5"
 };
-const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback, presence, ...props }, ref) {
+const Avatar = forwardRef(function Avatar({ className, size, tone, src, alt, fallback, presence, ...props }, ref) {
 	const [status, setStatus] = useState(src === void 0 ? "idle" : "loading");
 	/**
 	* Reset when src changes, during RENDER rather than in an effect.
@@ -80,7 +97,11 @@ const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback,
 		...props,
 		"data-slot": "avatar",
 		"data-status": status,
-		className: cn(avatarVariants({ size }), className),
+		"data-tone": tone ?? "neutral",
+		className: cn(avatarVariants({
+			size,
+			tone
+		}), className),
 		children: [
 			showImage ? /* @__PURE__ */ jsx("img", {
 				ref: imageRef,

package/dist/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n    \"bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */\nconst dotPlace = {\n  xs: \"bottom-0 end-0 size-1.5\",\n  sm: \"bottom-0 end-0 size-2\",\n  md: \"bottom-0 end-0 size-2.5\",\n  lg: \"bottom-0 end-0 size-3\",\n  xl: \"bottom-1 end-1 size-3.5\",\n} as const;\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * A small dot at the corner: `online` or `offline`. It grows in when it appears,\n   * shrinks away when it goes, and swaps when it changes. Its word is read to\n   * assistive technology beside the name.\n   */\n  presence?: \"online\" | \"offline\";\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, src, alt, fallback, presence, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    } else if (node) {\n      // Still downloading after mount: it fades in from a soft blur when it arrives. A photo that\n      // is already decoded shows at once, so cached photos never fade.\n      node.dataset.loading = \"\";\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      className={cn(avatarVariants({ size }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          key={src}\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"avatar-photo size-full rounded-[inherit] object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={(event) => {\n            delete event.currentTarget.dataset.loading;\n            setStatus(\"loaded\");\n          }}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span\n          data-slot=\"avatar-fallback\"\n          aria-hidden=\"true\"\n          className={cn(\"select-none\", src !== undefined && \"motion-safe:animate-avatar-fallback-in\")}\n        >\n          {fallback}\n        </span>\n      )}\n      {presence === undefined ? null : <span className=\"sr-only\">{presence}</span>}\n      <SwapText\n        swapKey={presence ?? \"\"}\n        motion=\"dot\"\n        className={cn(\"absolute z-10\", dotPlace[size ?? \"md\"])}\n      >\n        <span\n          data-slot=\"avatar-presence\"\n          data-presence={presence}\n          aria-hidden=\"true\"\n          className={cn(\n            \"block size-full rounded-full border-(length:--border-width) border-background box-border\",\n            presence === \"online\" ? \"bg-success-strong\" : \"bg-muted-foreground\",\n          )}\n        />\n      </SwapText>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EAUR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAsCA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,KAAK,KAAK,UAAU,UAAU,GAAG,SACpD,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;OAC/C,IAAI,MAGT,KAAK,QAAQ,UAAU;CAE3B,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAJnD,UAAA;GAMG,YACC,oBAAC,OAAD;IAKE,KAAK;IACL,aAAU;IACV,WAAU;IACL;IACA;IACL,SAAS,UAAU;KACjB,OAAO,MAAM,cAAc,QAAQ;KACnC,UAAU,QAAQ;IACpB;IACA,eAAe,UAAU,OAAO;GACjC,GAXM,GAWN,IACC;GACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,eAAe,QAAQ,KAAA,KAAa,wCAAwC;IAEzF,UAAA;GACG,CAAA;GAEP,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;GAC3E,oBAAC,UAAD;IACE,SAAS,YAAY;IACrB,QAAO;IACP,WAAW,GAAG,iBAAiB,SAAS,QAAQ,KAAK;IAErD,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe;KACf,eAAY;KACZ,WAAW,GACT,4FACA,aAAa,WAAW,sBAAsB,qBAChD;IACD,CAAA;GACO,CAAA;EACN;;AAEV,CAAC"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n      /**\n       * The fill behind the initials. Every pair is one the token contrast\n       * contract already grades: foreground on muted, primary-foreground on\n       * primary, and for `brand` secondary-foreground and tertiary-foreground\n       * (both the same ink) on each end of the gradient. `brand` is the\n       * periwinkle-to-teal edge of a highlighted Card, laid as a fill: the\n       * assistant's avatar in a chat, beside `primary` for the person.\n       */\n      tone: {\n        neutral: \"bg-muted text-foreground\",\n        primary: \"bg-primary text-primary-foreground\",\n        brand: \"bg-linear-to-r from-secondary to-tertiary text-secondary-foreground\",\n      },\n    },\n    defaultVariants: { size: \"md\", tone: \"neutral\" },\n  },\n);\n\n/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */\nconst dotPlace = {\n  xs: \"bottom-0 end-0 size-1.5\",\n  sm: \"bottom-0 end-0 size-2\",\n  md: \"bottom-0 end-0 size-2.5\",\n  lg: \"bottom-0 end-0 size-3\",\n  xl: \"bottom-1 end-1 size-3.5\",\n} as const;\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * A small dot at the corner: `online` or `offline`. It grows in when it appears,\n   * shrinks away when it goes, and swaps when it changes. Its word is read to\n   * assistive technology beside the name.\n   */\n  presence?: \"online\" | \"offline\";\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n  /**\n   * The fill behind the fallback: `neutral` (the default, a muted grey),\n   * `primary` (the accent fill) or `brand` (the periwinkle-to-teal gradient of a\n   * highlighted Card). A loaded photo covers it. Mirrored to `data-tone`.\n   */\n  tone?: \"neutral\" | \"primary\" | \"brand\";\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, tone, src, alt, fallback, presence, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    } else if (node) {\n      // Still downloading after mount: it fades in from a soft blur when it arrives. A photo that\n      // is already decoded shows at once, so cached photos never fade.\n      node.dataset.loading = \"\";\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      data-tone={tone ?? \"neutral\"}\n      className={cn(avatarVariants({ size, tone }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          key={src}\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"avatar-photo size-full rounded-[inherit] object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={(event) => {\n            delete event.currentTarget.dataset.loading;\n            setStatus(\"loaded\");\n          }}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span\n          data-slot=\"avatar-fallback\"\n          aria-hidden=\"true\"\n          className={cn(\"select-none\", src !== undefined && \"motion-safe:animate-avatar-fallback-in\")}\n        >\n          {fallback}\n        </span>\n      )}\n      {presence === undefined ? null : <span className=\"sr-only\">{presence}</span>}\n      <SwapText\n        swapKey={presence ?? \"\"}\n        motion=\"dot\"\n        className={cn(\"absolute z-10\", dotPlace[size ?? \"md\"])}\n      >\n        <span\n          data-slot=\"avatar-presence\"\n          data-presence={presence}\n          aria-hidden=\"true\"\n          className={cn(\n            \"block size-full rounded-full border-(length:--border-width) border-background box-border\",\n            presence === \"online\" ? \"bg-success-strong\" : \"bg-muted-foreground\",\n          )}\n        />\n      </SwapText>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;AACF,GACA;CACE,UAAU;EAUR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;;;;;;;;;EASA,MAAM;GACJ,SAAS;GACT,SAAS;GACT,OAAO;EACT;CACF;CACA,iBAAiB;EAAE,MAAM;EAAM,MAAM;CAAU;AACjD,CACF;;AAGA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA4CA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,MAAM,KAAK,KAAK,UAAU,UAAU,GAAG,SAC1D,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;OAC/C,IAAI,MAGT,KAAK,QAAQ,UAAU;CAE3B,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,aAAW,QAAQ;EACnB,WAAW,GAAG,eAAe;GAAE;GAAM;EAAK,CAAC,GAAG,SAAS;EALzD,UAAA;GAOG,YACC,oBAAC,OAAD;IAKE,KAAK;IACL,aAAU;IACV,WAAU;IACL;IACA;IACL,SAAS,UAAU;KACjB,OAAO,MAAM,cAAc,QAAQ;KACnC,UAAU,QAAQ;IACpB;IACA,eAAe,UAAU,OAAO;GACjC,GAXM,GAWN,IACC;GACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,eAAe,QAAQ,KAAA,KAAa,wCAAwC;IAEzF,UAAA;GACG,CAAA;GAEP,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;GAC3E,oBAAC,UAAD;IACE,SAAS,YAAY;IACrB,QAAO;IACP,WAAW,GAAG,iBAAiB,SAAS,QAAQ,KAAK;IAErD,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe;KACf,eAAY;KACZ,WAAW,GACT,4FACA,aAAa,WAAW,sBAAsB,qBAChD;IACD,CAAA;GACO,CAAA;EACN;;AAEV,CAAC"}

package/dist/badge/badge.d.ts

@@ -36,10 +36,11 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  *   across every shadcn control.
  */
 export declare const badgeVariants: (props?: ({
-  tone?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
+  tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
   appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;
+  wrap?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends ComponentPropsWithoutRef<"span">, VariantProps<typeof badgeVariants> {
   /**
@@ -48,6 +49,20 @@ export interface BadgeProps extends ComponentPropsWithoutRef<"span">, VariantPro
    * `aria-hidden` when the label already says what it means.
    */
   icon?: ReactNode;
+  /**
+   * Let the label wrap onto more lines instead of staying on one. For a tag in
+   * a table cell or a narrow column: the badge shrinks to its container, the
+   * label breaks (even a long word with no spaces), the text starts at the
+   * leading edge and the height grows with the lines. Off by default, and then
+   * a badge is one line exactly as before. With a long label prefer
+   * `shape="rounded"`: a multi-line `pill` has very round ends.
+   *
+   * The width does not spring to a new label while this is on (that morph
+   * measures the unwrapped width).
+   *
+   * @default false
+   */
+  wrap?: boolean;
 }
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 //#endregion