{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "banner", "type": "registry:ui", "title": "Banner", "description": "Region-wide notice that collapses smoothly when dismissed and can remember it.", "categories": [ "notifications" ], "dependencies": [ "motion" ], "registryDependencies": [ "https://www.stealth.pm/r/tokens.json", "https://www.stealth.pm/r/cn.json", "https://www.stealth.pm/r/icons.json", "https://www.stealth.pm/r/motion.json", "https://www.stealth.pm/r/use-controllable-state.json" ], "files": [ { "path": "components/ui/banner.tsx", "content": "\"use client\";\nimport { AnimatePresence, motion, useReducedMotion } from \"motion/react\";\nimport { useCallback, useRef, useSyncExternalStore } from \"react\";\nimport { cn } from \"@/lib/cn\";\nimport { Alert, ArrowRight, CircleCheck, Info, Warning, X } from \"@/lib/icons\";\nimport { ease } from \"@/lib/motion\";\nimport { useControllableState } from \"@/lib/use-controllable-state\";\n\nexport type BannerTone = \"neutral\" | \"info\" | \"success\" | \"warning\" | \"danger\";\n\n// ---------------------------------------------------------------------------\n// Remembered dismissal. One localStorage key per banner, shared across tabs,\n// read after hydration so the server and the first client render agree.\n\nconst PREFIX = \"stealth-banner:\";\nconst EVENT = \"stealth-banner-change\";\n\nfunction read(key: string) {\n try {\n return window.localStorage.getItem(PREFIX + key) === \"1\";\n } catch {\n return false;\n }\n}\n\nfunction write(key: string, dismissed: boolean) {\n try {\n if (dismissed) window.localStorage.setItem(PREFIX + key, \"1\");\n else window.localStorage.removeItem(PREFIX + key);\n } catch {\n // Private mode or storage disabled: the banner still hides for this visit.\n }\n window.dispatchEvent(new Event(EVENT));\n}\n\nfunction subscribe(onChange: () => void) {\n window.addEventListener(\"storage\", onChange);\n window.addEventListener(EVENT, onChange);\n return () => {\n window.removeEventListener(\"storage\", onChange);\n window.removeEventListener(EVENT, onChange);\n };\n}\n\n/** Whether a banner with this key was dismissed on this device, and ways to change it. */\nexport function useBannerDismissal(key: string | undefined) {\n const dismissed = useSyncExternalStore(\n subscribe,\n () => (key ? read(key) : false),\n () => false,\n );\n const dismiss = useCallback(() => key && write(key, true), [key]);\n const restore = useCallback(() => key && write(key, false), [key]);\n return { dismissed, dismiss, restore };\n}\n\n// When the dismissed banner held focus, hand it to the next thing on the page\n// rather than dropping it on .\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\nfunction focusAfter(node: HTMLElement) {\n if (!node.contains(document.activeElement)) return;\n const all = Array.from(document.querySelectorAll(FOCUSABLE)).filter((el) => !node.contains(el) && el.getClientRects().length > 0);\n const next = all.find((el) => node.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all.findLast((el) => node.compareDocumentPosition(el) & Node.DOCUMENT_POSITION_PRECEDING);\n next?.focus({ preventScroll: true });\n}\n\n// ---------------------------------------------------------------------------\n\nconst tones: Record = {\n neutral: { icon: , surface: \"bg-raised\", bar: \"border-line\", glyph: \"text-fg-3\", label: \"Note\" },\n info: { icon: , surface: \"bg-info-soft\", bar: \"border-info/20\", glyph: \"text-info\", label: \"Info\" },\n success: { icon: , surface: \"bg-success-soft\", bar: \"border-success/20\", glyph: \"text-success\", label: \"Success\" },\n warning: { icon: , surface: \"bg-warning-soft\", bar: \"border-warning/25\", glyph: \"text-warning\", label: \"Warning\" },\n danger: { icon: , surface: \"bg-danger-soft\", bar: \"border-danger/25\", glyph: \"text-danger\", label: \"Error\" },\n};\n\nexport type BannerProps = Omit, \"title\" | \"children\"> & {\n tone?: BannerTone;\n /** Full-bleed strip across a region, or a rounded block inside a content column. */\n variant?: \"bar\" | \"inset\";\n /** Replace the tone's icon, or `false` for none. */\n icon?: React.ReactNode | false;\n /** A few words, set in the primary color ahead of the message. */\n title?: React.ReactNode;\n children?: React.ReactNode;\n /** Usually a `BannerAction`. */\n action?: React.ReactNode;\n /** Show a close button. */\n dismissible?: boolean;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?: (open: boolean) => void;\n /** Remember the dismissal on this device under this key. Change the key to show a new message again. */\n storageKey?: string;\n /** Accessible name for the close button. */\n dismissLabel?: string;\n};\n\nexport function Banner({\n tone = \"neutral\",\n variant = \"bar\",\n icon,\n title,\n children,\n action,\n dismissible = false,\n open: openProp,\n defaultOpen = true,\n onOpenChange,\n storageKey,\n dismissLabel = \"Dismiss\",\n className,\n ...rest\n}: BannerProps) {\n const reduce = useReducedMotion();\n const ref = useRef(null);\n const [open, setOpen] = useControllableState({ value: openProp, defaultValue: defaultOpen, onChange: onOpenChange });\n const remembered = useBannerDismissal(storageKey);\n const t = tones[tone];\n const shown = open && !remembered.dismissed;\n const glyph = icon === false ? null : (icon ?? t.icon);\n\n const dismiss = () => {\n if (ref.current) focusAfter(ref.current);\n remembered.dismiss();\n setOpen(false);\n };\n\n return (\n \n {shown && (\n // The outer box animates height so what sits below slides up as the banner closes.\n \n \n \n {glyph && {glyph}}\n

\n {t.label}: \n {title != null && {title} }\n {children}\n

\n {action != null && (\n

\n {action}\n

\n )}\n {dismissible && (\n \n \n \n )}\n \n \n \n )}\n \n );\n}\n\nexport type BannerActionProps = (Omit, \"type\"> & { href?: undefined }) | (React.ComponentProps<\"a\"> & { href: string });\n\n/** A text action with an arrow that leans forward on hover. Renders a link when given `href`. */\nexport function BannerAction({ className, children, ...rest }: BannerActionProps) {\n const cls = cn(\n \"group/action inline-flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-[12.5px] font-medium text-fg\",\n \"outline-none focus-visible:outline-solid focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-fg-3\",\n \"transition-[background-color,scale] duration-150 ease-out hover:bg-fg/[0.06] active:scale-[0.97] active:duration-75\",\n className,\n );\n const inner = (\n <>\n {children}\n \n \n );\n if (rest.href !== undefined) {\n return (\n )}>\n {inner}\n \n );\n }\n return (\n \n );\n}\n", "type": "registry:ui" } ], "docs": "https://www.stealth.pm/ui/banner" }