@seekalfred/primitives 0.7.1 → 0.7.4

package/dist/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":["AriaButton"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * Alert, ported from the legacy shadcn component.\n *\n * There is no React Aria base: RAC ships no static inline alert (its Toast\n * API is transient and queue-driven), so this is a styled div with\n * role=\"alert\". Because it is not RAC-backed, its props follow\n * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --\n * rather than the Button's Omit-from-React-Aria departure, which exists only\n * to stop RAC-ignored props being advertised.\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 *\n * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon\n * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over\n * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.\n * All three are physical properties or magic numbers: `left` and `pl` do not\n * mirror in RTL, so the icon stayed left while the text indented the wrong\n * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`\n * rejects outright. Flex with an explicit `icon` prop deletes all three\n * problems rather than porting them.\n */\nexport const alertVariants = cva(\n  [\n    // box-border is not boilerplate. Tailwind Preflight sets box-sizing\n    // globally and the legacy app had it; this library's reset is OPT-IN, so\n    // a consumer may load none and the browser default content-box applies.\n    // w-full is width:100%, so the padding and border are then ADDED to it\n    // and the alert overflows its container by exactly 46px at comfortable\n    // density. Measured, not theorised: 346px inside a 300px parent.\n    \"box-border flex w-full items-start gap-(--density-control-gap)\",\n    \"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)\",\n    // font-sans is load-bearing. The library does not style the consumer's\n    // page, so anything that does not set its own face inherits the host's\n    // default -- which is a serif in an unstyled document. The accordion\n    // panel shipped exactly that way and it was caught by eye, not by a test.\n    \"font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"bg-surface text-foreground border-border\",\n        // The status variants paint only their icon; the card stays neutral\n        // (dark title, grey description, light border), like the reference\n        // Sync status alert. See alertIconVariants.\n        success: \"bg-surface text-foreground border-border\",\n        warning: \"bg-surface text-foreground border-border\",\n        // destructive-STRONG, not destructive. The fill token is 4.04:1 on\n        // the dark page; this role exists so the text and border clear the\n        // 4.5 floor in both themes. The legacy `border-destructive/50` was\n        // also an opacity modifier, which cannot be contrast-checked at all\n        // because the result depends on whatever sits behind it.\n        destructive: \"bg-surface text-destructive-strong border-destructive-strong\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/** The icon's colour: the state's own hue, on the status variants. Destructive keeps its whole-alert red. */\nconst alertIconVariants = cva(\n  \"flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  {\n    variants: {\n      variant: {\n        default: \"text-info-strong\",\n        success: \"text-success-strong\",\n        warning: \"text-warning-strong\",\n        destructive: \"\",\n      },\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The built-in glyph of each variant, drawn with currentColor so the icon\n * wrapper's colour paints it. Each is its own component so a variant change\n * crossfades the icon (see iconKey).\n */\nfunction StatusGlyph({ children }: { children: ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      {children}\n    </svg>\n  );\n}\nfunction InfoGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"M8 7.25v3.5M8 5h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction SuccessGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m5.25 8.25 1.9 1.9 3.6-3.9\" />\n    </StatusGlyph>\n  );\n}\nfunction WarningGlyph() {\n  return (\n    <StatusGlyph>\n      <path d=\"M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z\" />\n      <path d=\"M8 6.4v2.6M8 11.2h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction DestructiveGlyph() {\n  return (\n    <StatusGlyph>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m6 6 4 4M10 6l-4 4\" />\n    </StatusGlyph>\n  );\n}\nconst statusGlyphs = {\n  default: <InfoGlyph />,\n  success: <SuccessGlyph />,\n  warning: <WarningGlyph />,\n  destructive: <DestructiveGlyph />,\n} as const;\n\n/**\n * An inline status message.\n *\n * Announced by assistive technology the moment it renders, via `role=\"alert\"`.\n * That makes it the wrong component for content that is present on load and\n * merely styled as a notice -- use a plain region for those.\n *\n * @example\n * <Alert variant=\"destructive\" icon={<WarningIcon aria-hidden />} title=\"Save failed\">\n *   Your changes were not saved.\n * </Alert>\n */\nexport interface AlertProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. That attribute renders a browser tooltip, which is\n  // not keyboard reachable and is not announced reliably -- on a role=\"alert\"\n  // it is worth nothing, and silently shadowing it with a ReactNode would be\n  // a type error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\">, VariantProps<typeof alertVariants> {\n  /**\n   * Leading glyph. Mark it `aria-hidden` -- the message text is the\n   * announcement, and an unhidden graphic makes the alert announce twice.\n   *\n   * Left out, the alert shows its variant's own icon (info, check, warning\n   * triangle, cross), coloured for the state and centred on the first line of\n   * text. Pass `null` for no icon, or your own glyph to replace it.\n   *\n   * A prop rather than a positioned child: the legacy `[&>svg]` selectors\n   * only worked when the icon was the first element, and broke in RTL.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional heading. Replaces the legacy `AlertTitle` part.\n   *\n   * Omit it for a single-line alert; most call sites do.\n   */\n  title?: ReactNode;\n  /**\n   * Heading level for {@link AlertProps.title}.\n   *\n   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document\n   * outline anywhere the alert is not nested five deep.\n   *\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the alert is shown. Controlled: hiding it collapses its height and\n   * fades it out, and showing it again grows it back. An alert that is open on\n   * first render does not animate. Leave it out for an alert that is always there.\n   */\n  open?: boolean;\n  /**\n   * Adds a Dismiss button. Pressed, a controlled alert (`open` given) only calls\n   * this and waits to be told `open={false}`; an uncontrolled alert (no `open`)\n   * collapses first and then calls it.\n   */\n  onDismiss?: () => void;\n  /** The Dismiss button's accessible name. @default \"Dismiss\" */\n  dismissLabel?: string;\n}\n\n/** A string title or description swaps as a whole when its text changes. */\nfunction Swappable({ value, children }: { value: ReactNode; children: ReactNode }) {\n  if (typeof value !== \"string\" && typeof value !== \"number\") return <>{children}</>;\n  return (\n    <SwapText swapKey={String(value)} className=\"block\">\n      {children}\n    </SwapText>\n  );\n}\n\n/** The name an icon swaps under: a different icon component crossfades; the same one re-rendering stays still. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nfunction DismissGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\n    </svg>\n  );\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    className,\n    variant,\n    icon: iconProp,\n    title,\n    headingLevel = 3,\n    children,\n    open,\n    onDismiss,\n    dismissLabel = \"Dismiss\",\n    ...props\n  },\n  ref,\n) {\n  const Title = `h${headingLevel}` as const;\n  const icon = iconProp === undefined ? statusGlyphs[variant ?? \"default\"] : iconProp;\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : \"\";\n  useHeightFollow(\n    frame,\n    content,\n    `${typeof title === \"string\" ? title : \"\"}\\n${children === undefined ? \"\" : \"details\"}\\n${text}`,\n  );\n\n  // Presence. Without `open` or `onDismiss` the alert is simply there.\n  const managed = open !== undefined || onDismiss !== undefined;\n  const [dismissed, setDismissed] = useState(false);\n  const wanted = open ?? !dismissed;\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 alert mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frameId = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => {\n    setRendered(false);\n    if (open === undefined) onDismiss?.();\n  }, [onDismiss, open]);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n  if (managed && !rendered) return null;\n\n  const alert = (\n    <div\n      ref={ref}\n      {...props}\n      role=\"alert\"\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n    >\n      {/*\n        The icon is decorative or labelled by the consumer; this wrapper adds\n        no name. It keeps the icon from shrinking and sizes a bare svg to the\n        icon scale, unless the consumer sized it themselves.\n      */}\n      {icon === null || icon === false ? null : (\n        <span data-slot=\"alert-icon\" className={alertIconVariants({ variant })}>\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </span>\n      )}\n      {/* The copy column follows its content's height, so longer or shorter text never snaps the alert. */}\n      <div ref={frame} data-slot=\"alert-body\" className=\"height-follow min-w-0 flex-1\">\n        <div ref={content}>\n          {title === undefined ? null : (\n            <Title\n              data-slot=\"alert-title\"\n              className=\"m-0 mb-1 text-sm leading-(--leading-normal) font-medium\"\n            >\n              <Swappable value={title}>{title}</Swappable>\n            </Title>\n          )}\n          {children === undefined ? null : (\n            <div\n              data-slot=\"alert-description\"\n              className={title === undefined ? undefined : \"text-xs leading-(--leading-normal) text-text-secondary\"}\n            >\n              <Swappable value={children}>{children}</Swappable>\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss ? (\n        <AriaButton\n          data-slot=\"alert-dismiss\"\n          aria-label={typeof title === \"string\" ? `${dismissLabel}: ${title}` : dismissLabel}\n          onPress={() => (open === undefined ? setDismissed(true) : onDismiss())}\n          className=\"calendar-nav-motion -my-1 -me-1.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\"\n        >\n          <DismissGlyph />\n        </AriaButton>\n      ) : null}\n    </div>\n  );\n  if (!managed) return alert;\n  return (\n    <div\n      data-slot=\"alert-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\")\n          finish();\n      }}\n      className=\"alert-presence\"\n    >\n      <div>{alert}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":["AriaButton"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type AriaRole,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  type SVGProps,\n} from \"react\";\n\nimport { Button as AriaButton } from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * `info` is `default` said by name: a call site that means \"information\" should\n * not depend on `default` happening to look like it. Every per-variant map below\n * derives `info` here, from its `default`, so the two cannot drift.\n */\nfunction withInfo<T extends { default: unknown }>(map: T): T & { info: T[\"default\"] } {\n  return { ...map, info: map.default };\n}\n\n/**\n * Alert, ported from the legacy shadcn component.\n *\n * There is no React Aria base: RAC ships no static inline alert (its Toast\n * API is transient and queue-driven), so this is a styled div with\n * role=\"alert\". Because it is not RAC-backed, its props follow\n * ARCHITECTURE section 7 rule 1 -- VariantProps & ComponentPropsWithoutRef --\n * rather than the Button's Omit-from-React-Aria departure, which exists only\n * to stop RAC-ignored props being advertised.\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 *\n * THE LAYOUT IS THE BIGGEST CHANGE. The legacy component positioned its icon\n * with `[&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4`, pushed the text over\n * with `[&>svg~*]:pl-7`, and nudged it back with `[&>svg+div]:translate-y-[-3px]`.\n * All three are physical properties or magic numbers: `left` and `pl` do not\n * mirror in RTL, so the icon stayed left while the text indented the wrong\n * side, and `translate-y-[-3px]` is a bracket value that `check:hardcoding`\n * rejects outright. Flex with an explicit `icon` prop deletes all three\n * problems rather than porting them.\n */\nexport const alertVariants = cva(\n  [\n    // box-border is not boilerplate. Tailwind Preflight sets box-sizing\n    // globally and the legacy app had it; this library's reset is OPT-IN, so\n    // a consumer may load none and the browser default content-box applies.\n    // w-full is width:100%, so the padding and border are then ADDED to it\n    // and the alert overflows its container by exactly 46px at comfortable\n    // density. Measured, not theorised: 346px inside a 300px parent.\n    \"box-border flex w-full items-start gap-(--density-control-gap)\",\n    \"rounded-panel border-(length:--border-width) p-(--density-control-pad-md)\",\n    // font-sans is load-bearing. The library does not style the consumer's\n    // page, so anything that does not set its own face inherits the host's\n    // default -- which is a serif in an unstyled document. The accordion\n    // panel shipped exactly that way and it was caught by eye, not by a test.\n    \"font-sans text-sm leading-(--leading-normal)\",\n  ],\n  {\n    variants: {\n      variant: withInfo({\n        default: \"bg-surface text-foreground border-border\",\n        // The status variants paint only their icon; the card stays neutral\n        // (dark title, grey description, light border), like the reference\n        // Sync status alert. See alertIconVariants.\n        success: \"bg-surface text-foreground border-border\",\n        warning: \"bg-surface text-foreground border-border\",\n        // destructive-STRONG, not destructive. The fill token is 4.04:1 on\n        // the dark page; this role exists so the text and border clear the\n        // 4.5 floor in both themes. The legacy `border-destructive/50` was\n        // also an opacity modifier, which cannot be contrast-checked at all\n        // because the result depends on whatever sits behind it.\n        destructive: \"bg-surface text-destructive-strong border-destructive-strong\",\n      }),\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The icon's colour: the state's own hue on every variant. Inside an Alert the\n * destructive red is also the whole alert's text colour, so it changes nothing\n * there; outside one it is what colours the icon.\n *\n * Exported with the status icons so a notice that is not an `Alert` (a row, a\n * banner of the app's own) can show a tone the same way the alert does.\n */\nexport const alertIconVariants = cva(\n  \"flex h-lh shrink-0 items-center [&_svg]:block [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n  {\n    variants: {\n      variant: withInfo({\n        default: \"text-info-strong\",\n        success: \"text-success-strong\",\n        warning: \"text-warning-strong\",\n        destructive: \"text-destructive-strong\",\n      }),\n    },\n    defaultVariants: { variant: \"default\" },\n  },\n);\n\n/**\n * The built-in glyph of each variant, drawn with currentColor so the icon\n * wrapper's colour paints it. Each is its own component so a variant change\n * crossfades the icon (see iconKey).\n *\n * Exported as AlertInfoIcon, AlertSuccessIcon, AlertWarningIcon and\n * AlertDestructiveIcon. They are decorative (`aria-hidden`) and `--icon-sm`\n * by default; extra props, such as a `className` with a size, land on the svg.\n * Given an `aria-label` or `aria-labelledby` (with `role=\"img\"`), an icon is\n * no longer hidden, and an explicit `aria-hidden` always wins.\n */\ntype StatusIconProps = Omit<SVGProps<SVGSVGElement>, \"children\">;\nfunction StatusGlyph({\n  children,\n  className,\n  ...props\n}: StatusIconProps & { children: ReactNode }) {\n  const labelled = props[\"aria-label\"] !== undefined || props[\"aria-labelledby\"] !== undefined;\n  return (\n    <svg\n      // Before the spread, so a caller's own aria-hidden wins; a labelled icon\n      // is meant to be read, so it is not hidden by default.\n      aria-hidden={labelled ? undefined : \"true\"}\n      {...props}\n      // Sized on its own, so an exported icon outside an alert is not 0x0; the\n      // same --icon-sm the alert's icon slot gives an unsized svg. A caller's\n      // size class wins.\n      className={cn(\"size-(--icon-sm)\", className)}\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      {children}\n    </svg>\n  );\n}\nfunction InfoGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"M8 7.25v3.5M8 5h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction SuccessGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m5.25 8.25 1.9 1.9 3.6-3.9\" />\n    </StatusGlyph>\n  );\n}\nfunction WarningGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <path d=\"M6.9 2.6 1.9 11.4a1.2 1.2 0 0 0 1 1.8h10.2a1.2 1.2 0 0 0 1-1.8L9.1 2.6a1.2 1.2 0 0 0-2.2 0Z\" />\n      <path d=\"M8 6.4v2.6M8 11.2h.01\" />\n    </StatusGlyph>\n  );\n}\nfunction DestructiveGlyph(props: StatusIconProps) {\n  return (\n    <StatusGlyph {...props}>\n      <circle cx=\"8\" cy=\"8\" r=\"6.25\" />\n      <path d=\"m6 6 4 4M10 6l-4 4\" />\n    </StatusGlyph>\n  );\n}\nexport {\n  InfoGlyph as AlertInfoIcon,\n  SuccessGlyph as AlertSuccessIcon,\n  WarningGlyph as AlertWarningIcon,\n  DestructiveGlyph as AlertDestructiveIcon,\n};\nexport type { StatusIconProps as AlertStatusIconProps };\n\nconst statusGlyphs = withInfo({\n  default: <InfoGlyph />,\n  success: <SuccessGlyph />,\n  warning: <WarningGlyph />,\n  destructive: <DestructiveGlyph />,\n});\n\n/**\n * An inline status message.\n *\n * Announced by assistive technology the moment it renders, via `role=\"alert\"`.\n * That makes it the wrong default for content that is present on load and\n * merely styled as a notice -- pass `role=\"note\"` for those, or\n * `role=\"status\"` for an outcome that should be announced politely.\n *\n * @example\n * <Alert variant=\"destructive\" icon={<WarningIcon aria-hidden />} title=\"Save failed\">\n *   Your changes were not saved.\n * </Alert>\n */\nexport interface AlertProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. That attribute renders a browser tooltip, which is\n  // not keyboard reachable and is not announced reliably -- on a role=\"alert\"\n  // it is worth nothing, and silently shadowing it with a ReactNode would be\n  // a type error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"title\">, VariantProps<typeof alertVariants> {\n  /**\n   * Leading glyph. Mark it `aria-hidden` -- the message text is the\n   * announcement, and an unhidden graphic makes the alert announce twice.\n   *\n   * Left out, the alert shows its variant's own icon (info, check, warning\n   * triangle, cross), coloured for the state and centred on the first line of\n   * text. Pass `null` for no icon, or your own glyph to replace it.\n   *\n   * A prop rather than a positioned child: the legacy `[&>svg]` selectors\n   * only worked when the icon was the first element, and broke in RTL.\n   */\n  icon?: ReactNode;\n  /**\n   * Optional heading. Replaces the legacy `AlertTitle` part.\n   *\n   * Omit it for a single-line alert; most call sites do.\n   */\n  title?: ReactNode;\n  /**\n   * Heading level for {@link AlertProps.title}.\n   *\n   * The legacy `AlertTitle` was always an `<h5>`, which breaks the document\n   * outline anywhere the alert is not nested five deep.\n   *\n   * @default 3\n   */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /**\n   * Whether the alert is shown. Controlled: hiding it collapses its height and\n   * fades it out, and showing it again grows it back. An alert that is open on\n   * first render does not animate. Leave it out for an alert that is always there.\n   */\n  open?: boolean;\n  /**\n   * Adds a Dismiss button. Pressed, a controlled alert (`open` given) only calls\n   * this and waits to be told `open={false}`; an uncontrolled alert (no `open`)\n   * collapses first and then calls it.\n   */\n  onDismiss?: () => void;\n  /** The Dismiss button's accessible name. @default \"Dismiss\" */\n  dismissLabel?: string;\n  /**\n   * How assistive technology treats the message.\n   *\n   * - `alert`: announced assertively the moment it renders. For an error or a\n   *   warning that appears after the user did something.\n   * - `status`: a live region announced politely, after what the user is\n   *   hearing. For an outcome reported after an action (\"Saved\").\n   * - `note`: not live. For a notice that is simply there when the page loads;\n   *   an alert there would interrupt the page's own announcement.\n   *\n   * Typed as any ARIA role, as the inherited `role` was, so existing callers\n   * still compile; those three are the ones an inline notice should use.\n   *\n   * @default \"alert\"\n   */\n  role?: \"alert\" | \"status\" | \"note\" | AriaRole;\n}\n\n/** A string title or description swaps as a whole when its text changes. */\nfunction Swappable({ value, children }: { value: ReactNode; children: ReactNode }) {\n  if (typeof value !== \"string\" && typeof value !== \"number\") return <>{children}</>;\n  return (\n    <SwapText swapKey={String(value)} className=\"block\">\n      {children}\n    </SwapText>\n  );\n}\n\n/** The name an icon swaps under: a different icon component crossfades; the same one re-rendering stays still. */\nfunction iconKey(icon: ReactNode) {\n  if (!isValidElement(icon)) return \"icon\";\n  const type = icon.type as string | { displayName?: string; name?: string };\n  return typeof type === \"string\" ? type : (type.displayName ?? type.name ?? \"icon\");\n}\n\nfunction DismissGlyph() {\n  return (\n    <svg\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.75\"\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d=\"M4 4l8 8M12 4l-8 8\" />\n    </svg>\n  );\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(\n  {\n    className,\n    variant,\n    icon: iconProp,\n    title,\n    headingLevel = 3,\n    children,\n    open,\n    onDismiss,\n    dismissLabel = \"Dismiss\",\n    role = \"alert\",\n    ...props\n  },\n  ref,\n) {\n  const Title = `h${headingLevel}` as const;\n  const icon = iconProp === undefined ? statusGlyphs[variant ?? \"default\"] : iconProp;\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  const text = typeof children === \"string\" || typeof children === \"number\" ? String(children) : \"\";\n  useHeightFollow(\n    frame,\n    content,\n    `${typeof title === \"string\" ? title : \"\"}\\n${children === undefined ? \"\" : \"details\"}\\n${text}`,\n  );\n\n  // Presence. Without `open` or `onDismiss` the alert is simply there.\n  const managed = open !== undefined || onDismiss !== undefined;\n  const [dismissed, setDismissed] = useState(false);\n  const wanted = open ?? !dismissed;\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 alert mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frameId = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frameId);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => {\n    setRendered(false);\n    if (open === undefined) onDismiss?.();\n  }, [onDismiss, open]);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n  if (managed && !rendered) return null;\n\n  const alert = (\n    <div\n      ref={ref}\n      {...props}\n      role={role}\n      data-slot=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n    >\n      {/*\n        The icon is decorative or labelled by the consumer; this wrapper adds\n        no name. It keeps the icon from shrinking and sizes a bare svg to the\n        icon scale, unless the consumer sized it themselves.\n      */}\n      {icon === null || icon === false ? null : (\n        <span data-slot=\"alert-icon\" className={alertIconVariants({ variant })}>\n          <SwapText swapKey={iconKey(icon)} motion=\"glyph\" className=\"grid place-items-center\">\n            {icon}\n          </SwapText>\n        </span>\n      )}\n      {/* The copy column follows its content's height, so longer or shorter text never snaps the alert. */}\n      <div ref={frame} data-slot=\"alert-body\" className=\"height-follow min-w-0 flex-1\">\n        <div ref={content}>\n          {title === undefined ? null : (\n            <Title\n              data-slot=\"alert-title\"\n              className=\"m-0 mb-1 text-sm leading-(--leading-normal) font-medium\"\n            >\n              <Swappable value={title}>{title}</Swappable>\n            </Title>\n          )}\n          {children === undefined ? null : (\n            <div\n              data-slot=\"alert-description\"\n              className={title === undefined ? undefined : \"text-xs leading-(--leading-normal) text-text-secondary\"}\n            >\n              <Swappable value={children}>{children}</Swappable>\n            </div>\n          )}\n        </div>\n      </div>\n      {onDismiss ? (\n        <AriaButton\n          data-slot=\"alert-dismiss\"\n          aria-label={typeof title === \"string\" ? `${dismissLabel}: ${title}` : dismissLabel}\n          onPress={() => (open === undefined ? setDismissed(true) : onDismiss())}\n          className=\"calendar-nav-motion -my-1 -me-1.5 grid size-7 shrink-0 cursor-pointer place-items-center rounded-full border-0 bg-transparent text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring)\"\n        >\n          <DismissGlyph />\n        </AriaButton>\n      ) : null}\n    </div>\n  );\n  if (!managed) return alert;\n  return (\n    <div\n      data-slot=\"alert-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\")\n          finish();\n      }}\n      className=\"alert-presence\"\n    >\n      <div>{alert}</div>\n    </div>\n  );\n});\n"],"mappings":"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"}

package/dist/alert/index.d.ts

@@ -1,2 +1,2 @@
-import { Alert, AlertProps, alertVariants } from "./alert.js";
-export { Alert, type AlertProps, alertVariants };
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertProps, AlertStatusIconProps as StatusIconProps, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert.js";
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, type AlertProps, type StatusIconProps as AlertStatusIconProps, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };

package/dist/alert/index.js

@@ -1,2 +1,2 @@
-import { Alert, alertVariants } from "./alert.js";
-export { Alert, alertVariants };
+import { Alert, AlertDestructiveIcon as DestructiveGlyph, AlertInfoIcon as InfoGlyph, AlertSuccessIcon as SuccessGlyph, AlertWarningIcon as WarningGlyph, alertIconVariants, alertVariants } from "./alert.js";
+export { Alert, DestructiveGlyph as AlertDestructiveIcon, InfoGlyph as AlertInfoIcon, SuccessGlyph as AlertSuccessIcon, WarningGlyph as AlertWarningIcon, alertIconVariants, alertVariants };

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

@@ -7,7 +7,8 @@ import { ReactNode } from "react";
  *
  * Built from `Dialog`'s own overlay and panel styles and the same React Aria
  * parts, but with its own layout: a header (title, a grey subtitle and a
- * circular close button), a thin divider, the body text, then the actions.
+ * circular close button), a thin divider, the description sentence, an
+ * optional `body` of rich content, then the actions.
  * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this
  * shares the tokens and the motion classes instead, so the two cannot drift
  * on radius, scrim or entrance.
@@ -30,7 +31,7 @@ import { ReactNode } from "react";
  *   header's copy of the second one.
  * - `description` is REQUIRED. A confirmation with no explanation is the
  *   thing this component exists to prevent, and the role only associates it
- *   when it is there. It is the body text above the actions.
+ *   when it is there. It is the sentence under the divider.
  *
  * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary
  * button (white, light border) and cancels through `slot="close"`;
@@ -43,8 +44,8 @@ import { ReactNode } from "react";
  */
 export interface AlertDialogProps extends Omit<DialogProps, "role" | "closeButton" | "isDismissable"> {
   /**
-   * What is about to happen, and whether it can be undone. Rendered as the body text
-   * between the divider and the actions.
+   * What is about to happen, and whether it can be undone. Rendered as the
+   * sentence under the divider, above the `body` slot (if any) and the actions.
    *
    * **Required**, unlike on `Dialog`. `role="alertdialog"` is what makes
    * React Aria wire this to `aria-describedby`, so it is both the sentence
@@ -53,6 +54,32 @@ export interface AlertDialogProps extends Omit<DialogProps, "role" | "closeButto
   description: ReactNode;
   /** A short grey line under the title, in the header. */
   subtitle?: ReactNode;
+  /**
+   * Rich content between the description and the actions: a plan comparison,
+   * a before/after diff, a quoted reply, a form field or a choice to make.
+   *
+   * It is NOT part of the accessible description: the screen reader announces
+   * the one `description` sentence with the name, and the body is read in
+   * place or as focus reaches its controls (each with its own label). So the
+   * `description` must say everything needed to answer, including that a
+   * choice or field below is required ("Pick what happens to your data.").
+   * `false`, `true` and `""` (as from `cond && <X />`) render no body.
+   */
+  body?: ReactNode;
+  /**
+   * A decorative icon at the start of the header, in a round tile beside the
+   * title: a warning triangle before a wide-reaching switch, a trash can before
+   * a delete. Hidden from assistive technology, so the title must still say
+   * what is at stake. Leave it out and the header is as before.
+   */
+  icon?: ReactNode;
+  /**
+   * The colour of the icon's tile, from the status tokens: `neutral` (the
+   * default), `warning`, `destructive`, `info` or `success`. It paints the tile
+   * only, never the actions. Without an `icon` it does nothing. Mirrored to
+   * `data-tone` on the tile.
+   */
+  tone?: "neutral" | "warning" | "destructive" | "info" | "success";
   /** The actions. Give the cancel button `slot="close"`. */
   children?: ReactNode;
 }

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

@@ -10,6 +10,11 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/alert-dialog/alert-dialog.tsx
 const alertDialogActionsVariants = cva("flex flex-wrap items-center justify-end gap-2 px-8 pb-8");
 /**
+* The body slot: the description's side padding, so the two share an edge,
+* and the description's own bottom space repeated below it before the actions.
+*/
+const alertDialogBodyVariants = cva("min-w-0 px-8 pb-6 text-sm leading-(--leading-normal) text-foreground");
+/**
 * The cancel action: the secondary button, wired to dismiss the dialog.
 *
 * @example
@@ -45,6 +50,31 @@ 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
+* two lines start at the top of the button, as they always have.
+*/
+const alertDialogTitleBlockVariants = cva("min-w-0 flex-1", { variants: { subtitle: {
+	true: "",
+	false: "flex min-h-9 flex-col justify-center"
+} } });
 const alertDialogTitleVariants = cva("m-0 text-lg leading-(--leading-tight) font-semibold text-foreground");
 const alertDialogCloseVariants = cva([
 	"inline-flex size-9 shrink-0 items-center justify-center",
@@ -68,7 +98,11 @@ function Swappable({ value }) {
 		children: value
 	});
 }
-const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
+/** `cond && <X />` hands over `false`; React renders nothing for it, so neither does the slot. */
+function isEmpty(node) {
+	return node == null || typeof node === "boolean" || node === "";
+}
+const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTitle, description, body, icon, tone = "neutral", children, className, closeLabel = "Close", overlayClassName, entrance = "rise", ...props }, ref) {
 	return /* @__PURE__ */ jsx(ModalOverlay, {
 		...props,
 		isDismissable: false,
@@ -86,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: "min-w-0 flex-1",
-							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",
@@ -121,6 +165,11 @@ const AlertDialog = forwardRef(function AlertDialog({ title, subtitle, beforeTit
 						className: "m-0 block px-8 py-6 text-sm leading-(--leading-normal) text-foreground",
 						children: /* @__PURE__ */ jsx(Swappable, { value: description })
 					}),
+					isEmpty(body) ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "alert-dialog-body",
+						className: alertDialogBodyVariants(),
+						children: body
+					}),
 					children == null ? null : /* @__PURE__ */ jsx("div", {
 						"data-slot": "alert-dialog-actions",
 						className: alertDialogActionsVariants(),

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 body text, 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 body text above the actions.\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 body text\n   * between the divider 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  /** 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 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\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\nexport const AlertDialog = forwardRef<HTMLElement, AlertDialogProps>(function AlertDialog(\n  {\n    title,\n    subtitle,\n    beforeTitle,\n    description,\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=\"min-w-0 flex-1\">\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          {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":";;;;;;;;;;AA4EA,MAAM,6BAA6B,IAAI,yDAAyD;;;;;;;AAQhG,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,OAAO,KAAK;CACrC,OAAO,oBAACA,UAAD;EAAa;EAAK,MAAK;EAAQ,SAAQ;EAAY,MAAK;EAAK,GAAI;CAAQ,CAAA;AAClF,CACF;;;;;;;;;;;;AAaA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAS,KAAK;CACvD,OACE,oBAACA,UAAD;EACO;EACL,SAAQ;EACR,MAAK;EACL,WAAW,MACT,iOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL,CACF;AAEA,MAAM,4BAA4B,IAChC,sFACF;AAEA,MAAM,2BAA2B,IAC/B,qEACF;AAEA,MAAM,2BAA2B,IAAI;CACnC;CACA;CACA;CAEA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF,CAAC;;AAGD,SAAS,UAAU,EAAE,SAA+B;CAClD,IAAI,OAAO,UAAU,UAAU,OAAO,oBAAA,YAAA,EAAA,UAAG,MAAQ,CAAA;CACjD,OACE,oBAAC,UAAD;EAAU,SAAS;EAAO,WAAU;EACjC,UAAA;CACO,CAAA;AAEd;AAEA,MAAa,cAAc,WAA0C,SAAS,YAC5E,EACE,OACA,UACA,aACA,aACA,UACA,WACA,aAAa,SACb,kBACA,WAAW,QACX,GAAG,SAEL,KACA;CACA,OACE,oBAACC,cAAD;EACE,GAAI;EACJ,eAAe;EACf,aAAU;EACV,WAAW,MACT,sBAAsB,GACtB,aAAa,UAAU,yBACvB,gBACF;EAEA,UAAA,oBAACC,OAAD;GAAW,WAAU;GACnB,UAAA,qBAACC,QAAD;IACO;IACL,MAAK;IACL,aAAU;IACV,WAAW,MACT,oBAAoB,GAGpB,aACA,aAAa,UAAU,uBACvB,SACF;IAXF,UAAA;KAaG;KACD,qBAAC,OAAD;MAAK,aAAU;MAAsB,WAAW,0BAA0B;MAA1E,UAAA,CACE,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CAEE,oBAACC,SAAD;QACE,MAAK;QACL,aAAU;QACV,WAAW,yBAAyB;QAEpC,UAAA,oBAAC,WAAD,EAAW,OAAO,MAAQ,CAAA;OACf,CAAA,GACZ,YAAY,OAAO,OAClB,oBAAC,KAAD;QACE,aAAU;QACV,WAAU;QAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,SAAW,CAAA;OAC5B,CAAA,CAEF;MAEL,CAAA,GAAA,oBAACC,QAAD;OACE,MAAK;OACL,cAAY;OACZ,aAAU;OACV,WAAW,yBAAyB;OAEpC,UAAA,oBAAC,OAAD;QACE,eAAY;QACZ,SAAQ;QACR,MAAK;QACL,QAAO;QACP,aAAY;QACZ,eAAc;QAEd,UAAA,oBAAC,QAAD,EAAM,GAAE,qBAAsB,CAAA;OAC3B,CAAA;MACK,CAAA,CACT;;KACL,oBAACC,MAAD;MACE,MAAK;MACL,aAAY;MACZ,aAAU;MACV,WAAU;MAEV,UAAA,oBAAC,WAAD,EAAW,OAAO,YAAc,CAAA;KACxB,CAAA;KACT,YAAY,OAAO,OAClB,oBAAC,OAAD;MAAK,aAAU;MAAuB,WAAW,2BAA2B;MACzE;KACE,CAAA;IAEG;;EACH,CAAA;CACK,CAAA;AAEtB,CAAC"}
+{"version":3,"file":"alert-dialog.js","names":["Button","AriaModalOverlay","AriaModal","AriaDialog","AriaHeading","AriaButton","AriaText"],"sources":["../../src/alert-dialog/alert-dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Button as AriaButton,\n  Dialog as AriaDialog,\n  Heading as AriaHeading,\n  Modal as AriaModal,\n  ModalOverlay as AriaModalOverlay,\n  Text as AriaText,\n} from \"react-aria-components\";\n\nimport { Button, type ButtonProps } from \"../button/button.js\";\nimport { cnAll } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { dialogOverlayVariants, dialogPanelVariants, type DialogProps } from \"../dialog/dialog.js\";\n\n/**\n * AlertDialog: a confirmation that must be answered.\n *\n * Built from `Dialog`'s own overlay and panel styles and the same React Aria\n * parts, but with its own layout: a header (title, a grey subtitle and a\n * circular close button), a thin divider, the description sentence, an\n * optional `body` of rich content, then the actions.\n * The legacy `alert-dialog.tsx` was a 157-line clone of `dialog.tsx`; this\n * shares the tokens and the motion classes instead, so the two cannot drift\n * on radius, scrim or entrance.\n *\n * Census: 2 files, all eight parts used twice each, `AlertDialogPortal`,\n * `AlertDialogOverlay` and `AlertDialogTrigger` never rendered externally.\n *\n * What the preset forces, and why each one is a defect if forgotten:\n *\n * - `role=\"alertdialog\"`. React Aria associates the description with\n *   `aria-describedby` ONLY for this role (useDialog.mjs:29), so a\n *   confirmation built from a plain Dialog loses the sentence explaining\n *   what is about to happen.\n * - `isDismissable={false}`. Clicking the page must not resolve a\n *   destructive confirmation. Escape still cancels, which is the APG\n *   behaviour and what Radix does.\n * - THE CLOSE (X) IS CANCEL. It is `slot=\"close\"`, the same dismiss wiring as\n *   a Cancel button, so it goes through the same `onOpenChange(false)` and\n *   focus returns to the trigger. It is not a third answer: it is the\n *   header's copy of the second one.\n * - `description` is REQUIRED. A confirmation with no explanation is the\n *   thing this component exists to prevent, and the role only associates it\n *   when it is there. It is the sentence under the divider.\n *\n * THE TWO ACTIONS MUST NEVER LOOK ALIKE. `AlertDialogCancel` is the secondary\n * button (white, light border) and cancels through `slot=\"close\"`;\n * `AlertDialogAction` is the primary button painted destructive red, because a\n * confirmation here is a destructive one. The legacy `AlertDialogAction`\n * defaulted to the gradient primary and BOTH call sites overrode it back to\n * destructive by hand (`data-table.tsx:146`, `calendar-view.tsx:638`); the red\n * is the default now, so nobody fights it. Plain `Button`s still work in the\n * actions slot for anything else.\n */\nexport interface AlertDialogProps extends Omit<\n  DialogProps,\n  \"role\" | \"closeButton\" | \"isDismissable\"\n> {\n  /**\n   * What is about to happen, and whether it can be undone. Rendered as the\n   * sentence under the divider, above the `body` slot (if any) and the actions.\n   *\n   * **Required**, unlike on `Dialog`. `role=\"alertdialog\"` is what makes\n   * React Aria wire this to `aria-describedby`, so it is both the sentence\n   * the user needs and the one the screen reader announces with the name.\n   */\n  description: ReactNode;\n  /** A short grey line under the title, in the header. */\n  subtitle?: ReactNode;\n  /**\n   * Rich content between the description and the actions: a plan comparison,\n   * a before/after diff, a quoted reply, a form field or a choice to make.\n   *\n   * It is NOT part of the accessible description: the screen reader announces\n   * the one `description` sentence with the name, and the body is read in\n   * place or as focus reaches its controls (each with its own label). So the\n   * `description` must say everything needed to answer, including that a\n   * choice or field below is required (\"Pick what happens to your data.\").\n   * `false`, `true` and `\"\"` (as from `cond && <X />`) render no body.\n   */\n  body?: ReactNode;\n  /**\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 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,