61:I[707087,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"RegistryDependencies"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T281b,"use client"; import NumberFlow from "@number-flow/react"; import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react"; import { useEffect, useLayoutEffect, useRef, useState } from "react"; import { cn } from "@/lib/cn"; import { ease, spring } from "@/lib/motion"; export type BadgeTone = "neutral" | "success" | "warning" | "danger" | "info"; export type BadgeVariant = "soft" | "outline" | "solid"; export type BadgeSize = "sm" | "md" | "lg"; // Soft is the default: a wash of the tone with the tone as text. Outline keeps the page quiet // in dense tables. Solid is for the one badge on screen that has to be seen. const tones: Record> = { soft: { neutral: "bg-fg/[0.07] text-fg-2", success: "bg-success-soft text-success", warning: "bg-warning-soft text-warning", danger: "bg-danger-soft text-danger", info: "bg-info-soft text-info", }, outline: { neutral: "border-line-2 text-fg-2", success: "border-success/35 text-success", warning: "border-warning/35 text-warning", danger: "border-danger/35 text-danger", info: "border-info/35 text-info", }, // Text on the solid fills is picked per theme for contrast: the pale dark-theme fills take the // frame color; in light, green and amber are too pale for it and take the foreground instead. solid: { neutral: "bg-fg text-frame", success: "bg-success text-frame in-data-[theme=light]:text-fg", warning: "bg-warning text-frame in-data-[theme=light]:text-fg", danger: "bg-danger text-frame", info: "bg-info text-frame", }, }; const sizes: Record = { sm: "h-[18px] rounded-[5px] text-[11px]", md: "h-5 rounded-md text-[11.5px]", lg: "h-6 rounded-md text-[12.5px]", }; // Padding lives on the inner span, so the width the badge glides to includes it. const pads: Record = { sm: "gap-1 px-1.5", md: "gap-1.5 px-1.5", lg: "gap-1.5 px-2" }; /* ------------------------------------------------------------------------------------------------- * Dot * -----------------------------------------------------------------------------------------------*/ export type BadgeDotProps = React.ComponentProps<"span"> & { /** "current" follows the text color, for dots on solid fills. */ tone?: BadgeTone | "current"; /** A soft ring pulses out from the dot: for live and in-progress states only. */ pulse?: boolean; /** Diameter in px. */ size?: number; /** Spoken instead of shown, e.g. "Unread". Leave empty when a visible label says it. */ label?: string; }; const dotTone: Record = { current: "bg-current", neutral: "bg-fg-3", success: "bg-success", warning: "bg-warning", danger: "bg-danger", info: "bg-info", }; /** A status dot on its own: unread markers, service health, the dot inside a badge. */ export function BadgeDot({ tone = "neutral", pulse = false, size = 6, label, className, style, ...rest }: BadgeDotProps) { return ( {pulse && } ); } /* ------------------------------------------------------------------------------------------------- * Badge * -----------------------------------------------------------------------------------------------*/ export type BadgeProps = React.ComponentProps<"span"> & { tone?: BadgeTone; variant?: BadgeVariant; size?: BadgeSize; /** A leading dot in the tone. */ dot?: boolean; /** Pulse the dot, for states that are live or still running. */ pulse?: boolean; /** A leading icon, drawn at 12px (14px in lg). Replaces the dot. */ icon?: React.ReactNode; }; /** * A short status or label. When the label changes (Queued → Building → Ready) the old word * lifts out, the new one rises in, the width glides to fit and the color follows, so a * status that updates in place is noticed without a flash. */ export function Badge({ tone = "neutral", variant = "soft", size = "md", dot = false, pulse = false, icon, className, children, ...rest }: BadgeProps) { const reduce = useReducedMotion(); const inner = useRef(null); const [width, setWidth] = useState(null); // Track the content's width so the badge can glide to it instead of snapping. useLayoutEffect(() => { const el = inner.current; if (!el) return; const ro = new ResizeObserver(() => setWidth(el.offsetWidth)); ro.observe(el); return () => ro.disconnect(); }, []); const swapKey = typeof children === "string" || typeof children === "number" ? String(children) : "node"; const lead = icon ? ( {icon} ) : dot || pulse ? ( ) : null; return ( )} > {lead} {children} ); } /* ------------------------------------------------------------------------------------------------- * Count * -----------------------------------------------------------------------------------------------*/ export type BadgeCountProps = Omit, "children"> & { count: number; /** Above this the badge reads "99+". */ max?: number; /** Keep the badge at 0 instead of letting it go. */ showZero?: boolean; tone?: BadgeTone; variant?: "soft" | "solid"; size?: "sm" | "md"; /** What the number counts, for screen readers: (n) => `${n} unread`. */ label?: (count: number) => string; /** * Pin the count to the top-right corner of this element (an icon button, an avatar). The * count gets a ring in `--badge-ring`, the surface behind it, `--frame` by default. */ children?: React.ReactNode; }; /** * A number in a pill. Digits roll rather than swap, the pill pops once when the count goes up, * and it scales in from nothing and back out when it reaches zero. */ export function BadgeCount({ count, max = 99, showZero = false, tone = "neutral", variant = "solid", size = "md", label = (n) => String(n), className, children, ...rest }: BadgeCountProps) { const reduce = useReducedMotion(); const [scope, animate] = useAnimate(); const prev = useRef(count); const visible = count > 0 || showZero; const over = count > max; // A single small pop when the number grows: the signal that something new arrived. useEffect(() => { const grew = count > prev.current; prev.current = count; if (!grew || reduce || !scope.current) return; animate(scope.current, { scale: [1, 1.14, 1] }, { duration: 0.32, ease: ease.out }); }, [count, reduce, animate, scope]); const pill = ( {visible && ( {over && +} {label(count)} )} ); if (!children) return pill; return ( {children} {pill} ); } 60:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@number-flow/react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L61",null,{"namespace":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json","https://www.stealth.pm/r/motion.json"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"components/ui/badge.tsx","content":"$63","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]