50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2745,// Hairline UI · announcement-pill · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; /* ───────────────────────────────────────────────────────── * ANNOUNCEMENT PILL: "New: …" that opens into the news * * rest a badge and one line, in a hairline pill * hover the arrow nudges on and a second phrase folds open * ("Read the changelog") * open the pill itself grows into a card with the details: * its size and corners ease from pill to card while * the line cross-fades into the content * close the card folds back into the pill * * Without card content it's simply a link. * ───────────────────────────────────────────────────────── */ export interface AnnouncementPillProps extends Omit, "children"> { badge?: string; children: React.ReactNode; /** A second phrase that folds open on hover. */ more?: string; /** Without card, the pill is a link to here. */ href?: string; /** What the pill opens into. */ card?: React.ReactNode; cardWidth?: number; } type Phase = "closed" | "opening" | "open" | "closing"; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const DURATION = 420; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-2 focus-visible:ring-offset-background"; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); function Arrow() { return ( ); } export function AnnouncementPill({ badge = "New", children, more, href, card, cardWidth = 360, className = "", ...props }: AnnouncementPillProps) { const reduced = useReducedMotion(); const id = React.useId(); const [phase, setPhase] = React.useState("closed"); const [pill, setPill] = React.useState({ width: 0, height: 32 }); const [cardSize, setCardSize] = React.useState({ width: cardWidth, height: 0 }); const [moreWidth, setMoreWidth] = React.useState(0); const wrapRef = React.useRef(null); const pillRef = React.useRef(null); const cardRef = React.useRef(null); const moreRef = React.useRef(null); const timer = React.useRef(0); const expanded = phase === "open"; const mounted = phase !== "closed"; React.useLayoutEffect(() => { const el = pillRef.current; if (!el) return; const measure = () => setPill((p) => (p.width === el.offsetWidth && p.height === el.offsetHeight ? p : { width: el.offsetWidth, height: el.offsetHeight })); measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, []); React.useLayoutEffect(() => { const el = moreRef.current; if (el) setMoreWidth(el.offsetWidth); }, [more]); React.useLayoutEffect(() => { const el = cardRef.current; if (!el) return; const measure = () => { const width = Math.min(cardWidth, document.documentElement.clientWidth - 32); setCardSize((c) => (c.width === width && c.height === el.offsetHeight ? c : { width, height: el.offsetHeight })); }; measure(); const observer = new ResizeObserver(measure); observer.observe(el); return () => observer.disconnect(); }, [mounted, cardWidth]); const open = () => { window.clearTimeout(timer.current); setPhase(reduced ? "open" : "opening"); }; const close = React.useCallback( (refocus = true) => { window.clearTimeout(timer.current); if (refocus) pillRef.current?.focus({ preventScroll: true }); if (reduced) return setPhase("closed"); setPhase("closing"); timer.current = window.setTimeout(() => setPhase("closed"), DURATION); }, [reduced] ); // Paint the surface at the pill's size first, then let it grow. React.useEffect(() => { if (phase !== "opening") return; let inner = 0; const outer = requestAnimationFrame(() => (inner = requestAnimationFrame(() => setPhase("open")))); return () => { cancelAnimationFrame(outer); cancelAnimationFrame(inner); }; }, [phase]); React.useEffect(() => () => window.clearTimeout(timer.current), []); React.useEffect(() => { if (!expanded) return; cardRef.current?.querySelector("a[href], button")?.focus({ preventScroll: true }); const onKey = (e: KeyboardEvent) => e.key === "Escape" && close(); const onDown = (e: PointerEvent) => !wrapRef.current?.contains(e.target as Node) && close(false); document.addEventListener("keydown", onKey); document.addEventListener("pointerdown", onDown); return () => { document.removeEventListener("keydown", onKey); document.removeEventListener("pointerdown", onDown); }; }, [expanded, close]); const line = ( <> {badge} {children} {more && ( {more} )} ); const pillClass = `group/pill inline-flex h-8 items-center gap-2 rounded-full bg-background pl-1 pr-3 shadow-[inset_0_0_0_1px_var(--border)] transition-[box-shadow] duration-300 hover:shadow-[inset_0_0_0_1px_color-mix(in_oklab,var(--foreground)_22%,transparent)] ${FOCUS}`; if (!card) { return (

void (pillRef.current = el)} href={href} className={pillClass}> {line}

); } return (

{mounted && ( )}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/announcement-pill.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]