{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "annunciator", "title": "Annunciator", "description": "A panel of alarm lamps from a control room. A new alarm flashes until someone acknowledges it, then stays lit while its condition lasts; one that clears unseen keeps flashing, so nothing passes unnoticed. For agent, build and system alerts.", "dependencies": [ "@base-ui/react", "cn" ], "registryDependencies": [ "https://bevel-ui.vercel.app/r/bevel.json" ], "files": [ { "path": "registry/bevel/ui/annunciator.tsx", "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cn } from \"cn\"\n\ntype AnnunciatorContextValue = {\n /** Alarms nobody has acknowledged yet, by id. */\n unacked: Record\n raise: (id: string, label: string) => void\n acknowledge: (id?: string) => void\n message: string\n announce: (message: string) => void\n}\n\nconst AnnunciatorContext = React.createContext(null)\n\nfunction useAnnunciator() {\n const context = React.useContext(AnnunciatorContext)\n if (!context) throw new Error(\"Annunciator parts must be inside \")\n return context\n}\n\n/**\n * A panel of alarm lamps. Each new alarm flashes until acknowledged, then\n * stays lit while its condition lasts. Give it an aria-label.\n */\nfunction Annunciator({ className, children, ...props }: React.ComponentProps<\"div\">) {\n const [unacked, setUnacked] = React.useState>({})\n const [message, announce] = React.useState(\"\")\n const raise = React.useCallback((id: string, label: string) => {\n setUnacked((all) => ({ ...all, [id]: label }))\n }, [])\n const acknowledge = React.useCallback((id?: string) => {\n setUnacked((all) => {\n if (id === undefined) return {}\n const next = { ...all }\n delete next[id]\n return next\n })\n }, [])\n const context = React.useMemo(\n () => ({ unacked, raise, acknowledge, message, announce }),\n [unacked, raise, acknowledge, message]\n )\n return (\n \n \n {children}\n

\n {message}\n

\n \n \n )\n}\n\n/** The grid of lamp windows. */\nfunction AnnunciatorPanel({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\ntype AnnunciatorTileProps = Omit, \"children\"> & {\n id: string\n /** Whether the condition is happening now. */\n active: boolean\n /** Lamp colour. Red for warnings, amber for cautions. */\n tone?: \"red\" | \"amber\" | \"green\" | \"white\"\n /** The engraved legend. Keep it short. */\n children: string\n}\n\n/** One lamp window. Press it to acknowledge its alarm. */\nfunction AnnunciatorTile({ className, id, active, tone = \"amber\", children, onClick, ...props }: AnnunciatorTileProps) {\n const { unacked, raise, acknowledge, announce } = useAnnunciator()\n const previous = React.useRef(false)\n React.useEffect(() => {\n if (active && !previous.current) {\n raise(id, children)\n announce(`Alarm: ${children}.`)\n } else if (!active && previous.current) {\n announce(`Cleared: ${children}.`)\n }\n previous.current = active\n }, [active, id, children, raise, announce])\n\n const isNew = id in unacked\n const state = isNew ? \"new\" : active ? \"acknowledged\" : \"normal\"\n return (\n {\n onClick?.(event)\n if (isNew) acknowledge(id)\n }}\n className={cn(\n \"relative flex min-h-14 items-center justify-center overflow-hidden rounded-(--bevel-radius-xs) bg-(--annunciator-off) px-2 py-2 text-center text-xs leading-tight font-bold tracking-(--bevel-tracking-label) text-(--annunciator-off-foreground) uppercase outline-none\",\n \"focus-visible:ring-3 focus-visible:ring-(--annunciator-white)/60\",\n className\n )}\n {...props}\n >\n {/* The lamp behind the legend: lit while active or unseen, flashing while unseen. */}\n \n \n {children}\n \n {/* Without flashing, a corner mark says it's new. */}\n