1 ? \"group\" : undefined}\n aria-roledescription={total > 1 ? \"slide\" : undefined}\n aria-label={total > 1 ? `${position} of ${total}` : undefined}\n inert={!present || undefined}\n >\n \n {announcement.message}\n {countdown ? (\n onCountdownEnd?.(announcement)}\n />\n ) : null}\n {cta}\n
\n \n );\n}\n\nconst RING = 2 * Math.PI * 8;\n\nexport const AnnouncementBar = forwardRef(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 reduced = !!useReducedMotion();\n const uid = useId();\n const total = messages.length;\n\n /* Open state: controlled, or internal and hidden at once when this id was dismissed before. */\n const [openInternal, setOpenInternal] = useState(defaultOpen);\n const [remembered, setRemembered] = useState(false);\n useLayoutEffect(() => {\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 // Storage is only readable on the client; hide before paint so a dismissed bar never flashes.\n // eslint-disable-next-line react-hooks/set-state-in-effect\n if (stored) setRemembered(true);\n }, [id, openProp]);\n const open = openProp ?? (openInternal && !remembered);\n\n const 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 const go = useCallback(\n (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 [current, indexProp, onIndexChange, total],\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 running = rotating && open && !userPaused && !hovered && !focused && !hidden;\n\n /* The ring is the clock: its progress runs to one, then advances. Pausing stops it where it is; resuming finishes the rest. */\n const progress = useMotionValue(0);\n const dash = useTransform(progress, (value) => RING * (1 - value));\n const goRef = useRef(go);\n useEffect(() => {\n goRef.current = go;\n }, [go]);\n useEffect(() => {\n progress.jump(0);\n }, [current, progress]);\n useEffect(() => {\n if (!running) return;\n let controls: AnimationPlaybackControls | null = animate(progress, 1, {\n duration: (interval / 1000) * (1 - progress.get()),\n ease: \"linear\",\n onComplete: () => {\n controls = null;\n goRef.current(1);\n },\n });\n return () => controls?.stop();\n }, [running, current, interval, progress]);\n\n /* The viewport springs to the height of the current message, which can wrap on narrow screens. */\n const height = useMotionValue(\"auto\");\n const measured = useRef(0);\n const onSize = useCallback(\n (next: number) => {\n if (Math.abs(next - measured.current) < 0.5) return;\n const first = measured.current === 0;\n measured.current = next;\n if (first || reduced) height.jump(next);\n else animate(height, next, HEIGHT);\n },\n [height, reduced],\n );\n\n const announcement = messages[current];\n if (!announcement) return null;\n const navigable = controls && total > 1;\n const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);\n\n return (\n \n {open ? (\n 1 ? \"carousel\" : undefined}\n initial={reduced ? { opacity: 0 } : { height: 0, opacity: 0 }}\n animate={{ height: \"auto\", opacity: 1 }}\n exit={\n reduced\n ? { opacity: 0, transition: { duration: motionTokens.duration.fast } }\n : {\n height: 0,\n opacity: 0,\n transition: { height: COLLAPSE, opacity: { duration: motionTokens.duration.exit, ease: standard } },\n }\n }\n transition={\n reduced\n ? { duration: motionTokens.duration.fast }\n : { height: COLLAPSE, opacity: { duration: motionTokens.duration.standard, ease: enter } }\n }\n onPointerEnter={(event) => {\n if (event.pointerType === \"mouse\") setHovered(true);\n }}\n onPointerLeave={() => setHovered(false)}\n onFocus={() => setFocused(true)}\n onBlur={(event) => {\n if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setFocused(false);\n }}\n >\n \n \n \n \n \n \n \n \n {navigable ? (\n <>\n
go(-1)}\n >\n \n \n {rotating ? (\n setUserPaused((paused) => !paused)}\n >\n \n \n {userPaused ? (\n \n ) : (\n \n )}\n \n \n ) : null}\n go(1)}\n >\n \n \n \n ) : null}\n {dismissible ? (\n \n \n \n ) : null}\n