@seekalfred/primitives 0.7.1 → 0.7.4

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?: "neutral" | "primary" | "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,7 +36,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  *   across every shadcn control.
  */
 export declare const badgeVariants: (props?: ({
-  tone?: "neutral" | "success" | "warning" | "danger" | "info" | "primary" | null | undefined;
+  tone?: "neutral" | "warning" | "primary" | "success" | "info" | "danger" | null | undefined;
   appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;

package/dist/bar-chart/bar-chart-series.d.ts

@@ -0,0 +1,75 @@
+//#region src/bar-chart/bar-chart-series.d.ts
+/**
+ * The series mode of BarChart: several measures per category, side by side
+ * (`layout="grouped"`) or stacked into one bar (`layout="stacked"`), on a
+ * categorical axis in data order, upright (`orientation="vertical"`) or as
+ * ranked rows (`orientation="horizontal"`). One series is a plain categorical
+ * or horizontal bar chart.
+ *
+ * Bars grow from the baseline the first time the chart is seen, a beat apart
+ * (no motion under reduced motion). Hover, drag or the arrow keys step through
+ * the categories: the active category keeps its colour while the rest step
+ * back, and the legend reads that category's values. The legend toggles a
+ * series off and on. A visually hidden table carries every value, and the plot
+ * is a slider over the categories.
+ */
+export interface BarChartSeries {
+  /** Stable identity, the key of this series' number in each datum's `values`. */
+  key: string;
+  /** Name in the legend and the data table. */
+  label: string;
+  /** Any CSS colour. Defaults to chart-1 to chart-4 in series order, then neutral steps. */
+  color?: string;
+}
+export interface BarChartSeriesDatum {
+  /** Stable identity of the category. */
+  key: string;
+  /** Full label for the readout and screen readers, such as "Brand search". */
+  label: string;
+  /** Short label on the category axis. Defaults to `label`. */
+  axisLabel?: string;
+  /**
+   * One value per series key. A missing value (`undefined`, `null` or not a
+   * finite number) draws no bar and reads as `missingLabel`. Negative values
+   * are drawn as zero: bars rise from a zero baseline.
+   */
+  values: Record<string, number | null | undefined>;
+}
+export interface BarChartSeriesProps {
+  data: BarChartSeriesDatum[];
+  /** The measures. Passing `series` is what turns on this mode. */
+  series: BarChartSeries[];
+  /** What is measured, such as "Spend by campaign". Names the chart for assistive technology. */
+  label: string;
+  /** The range on show, such as "Sep 15–21, 2026". Read with the name; not printed. */
+  period?: string;
+  /** Series side by side in each category, or stacked into one bar. @default "grouped" */
+  layout?: "grouped" | "stacked";
+  /** Upright columns, or rows that grow from the inline start (ranked lists). @default "vertical" */
+  orientation?: "vertical" | "horizontal";
+  /** Unit after each value in the readout and the table, such as "min". */
+  unit?: string;
+  /**
+   * Plot height in pixels. Upright: @default 176. Horizontal: 32px per
+   * category by default.
+   */
+  height?: number;
+  /** Formats values in the legend readout and the data table. */
+  formatValue?: (value: number, series: BarChartSeries) => string;
+  /** Formats the value axis. Defaults to a compact number, such as 1.2K. */
+  formatTick?: (value: number) => string;
+  /** Header of the first column in the data table read by screen readers. @default "Category" */
+  categoryLabel?: string;
+  /** Read in place of a missing value. @default "No data" */
+  missingLabel?: string;
+  /** Series toggles above the plot. Shown by default when there is more than one series. */
+  legend?: boolean;
+  /** Controlled hidden series keys. */
+  hiddenSeries?: string[];
+  defaultHiddenSeries?: string[];
+  onHiddenSeriesChange?: (hidden: string[]) => void;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+//#endregion
+//# sourceMappingURL=bar-chart-series.d.ts.map