60: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"] 61: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"] 62:T1733,"use client"; import { isValidElement, useEffect, useLayoutEffect, useRef } from "react"; import type { HTMLAttributes, ReactNode } from "react"; import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, type AnimationPlaybackControls, type HTMLMotionProps, type TargetAndTransition, type Transition } from "motion/react"; import { motionTokens } from "../lib/motion-tokens"; import styles from "./badge.module.css"; export type BadgeTone = "neutral" | "success" | "info" | "warning" | "danger"; export type BadgeSize = "sm" | "md" | "lg"; export type BadgeColor = "teal" | "sky" | "orchid" | "violet" | "rose" | "amber"; export interface BadgeProps extends HTMLAttributes { tone?: BadgeTone; size?: BadgeSize; icon?: ReactNode; /** A small status dot in the tone colour. Ignored when an icon is set. */ dot?: boolean; /** Categorical colour from the shared tone family, for labels such as method tags. Overrides tone. */ color?: BadgeColor; /** Draws a hairline border in the tone colour. */ outline?: boolean; /** Fully rounded ends instead of the default soft corners. */ pill?: boolean; } const exitFast: Transition = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] }; const textIn: TargetAndTransition = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }; const textOut: TargetAndTransition = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast }; const iconIn: TargetAndTransition = { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` }; const shown: TargetAndTransition = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" }; const fadeOnly: TargetAndTransition = { opacity: 0, transition: { duration: motionTokens.duration.instant } }; /** Outgoing copies are hidden from assistive tech while they fade, so only the current text is read. */ function Swap(props: HTMLMotionProps<"span">) { const present = useIsPresent(); return ; } /** A new icon component crossfades in; re-rendering the same icon stays still. */ function iconKey(icon: ReactNode) { if (!isValidElement(icon)) return "icon"; const type = icon.type as string | { displayName?: string; name?: string }; return typeof type === "string" ? type : type.displayName ?? type.name ?? "icon"; } export function Badge({ tone = "neutral", size = "md", icon, dot = false, color, outline = false, pill = false, className, children, ...props }: BadgeProps) { const reduce = useReducedMotion(); const text = typeof children === "string" || typeof children === "number" ? String(children) : null; const glyphKey = icon ? iconKey(icon) : ""; const body = useRef(null); const content = useRef(null); // Width stays auto at rest. Only a new label or icon springs it from the old size to the new one; passive reflows (a font swap, a hidden parent) follow instantly. const width = useMotionValue("auto"); const changedAt = useRef(0); useLayoutEffect(() => { changedAt.current = performance.now(); }, [text, glyphKey]); useEffect(() => { const node = content.current; if (!node || typeof ResizeObserver === "undefined") return; let last: number | undefined; let controls: AnimationPlaybackControls | undefined; const settle = () => { width.jump("auto"); if (body.current) body.current.style.width = "auto"; }; const observer = new ResizeObserver(([entry]) => { if (!entry) return; const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth; const current = width.get(); const from = typeof current === "number" ? current : last; last = next; controls?.stop(); if (reduce || from === undefined || from === next || performance.now() - changedAt.current > 120) return settle(); // Pin the old width before this frame paints, then spring to the new one. if (body.current) body.current.style.width = `${from}px`; controls = animate(width, [from, next], { ...motionTokens.spring.morph, onComplete: settle }); }); observer.observe(node); return () => { observer.disconnect(); controls?.stop(); }; }, [width, reduce]); const enter: Transition = reduce ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }; const mark = icon ? styles.withIcon : dot ? styles.withDot : undefined; const classes = [styles.badge, styles[tone], color ? styles[color] : undefined, styles[size], mark, outline ? styles.outline : undefined, pill ? styles.pill : undefined, className].filter(Boolean).join(" "); // The pill follows its content: text and icon swap in place while the width springs to the new size. return {!icon && dot ? ; } export default Badge; 63:T1293,/* * One formula tints every tone and colour from the shared --tone-* family, so they read as one set in both themes: * background the tone mixed into the surface (10% light, a barely tinted 12% dark) * text the tone, deepened toward the foreground in light (AA on the tint) and the bright pastel itself in dark * mark the icon or dot, closer to the pure tone * ring transparent by default; `outline` draws a hairline of the tone * All mixes run in oklab: oklch tints turn pink after the production build. */ .badge { --badge-tone: var(--text-secondary); --badge-tint: 10%; --badge-ink: 84%; --badge-background: color-mix(in oklab, var(--badge-tone) var(--badge-tint), var(--surface)); --badge-foreground: color-mix(in oklab, var(--badge-tone) var(--badge-ink), var(--foreground)); --badge-color: color-mix(in oklab, var(--badge-tone) 88%, var(--foreground)); --badge-border: transparent; --badge-radius: 6px; --badge-height: 24px; --badge-pad: 10px; --badge-gap: 5px; --badge-icon: 14px; --badge-dot: 6px; box-sizing: border-box; display: inline-flex; min-height: var(--badge-height); flex: none; align-items: center; justify-content: center; vertical-align: middle; border: 1px solid var(--badge-border); border-radius: var(--badge-radius); padding: 0 var(--badge-pad); color: var(--badge-foreground); background: var(--badge-background); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -.005em; line-height: 1; white-space: nowrap; /* Clip keeps the corners clean while the badge morphs around swapped text. */ overflow: clip; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); } :global(:root[data-theme="dark"]) .badge { --badge-tint: 12%; --badge-ink: 94%; } .outline { --badge-border: color-mix(in oklab, var(--badge-tone) 14%, var(--border)); } :global(:root[data-theme="dark"]) .outline { --badge-border: color-mix(in oklab, var(--badge-tone) 22%, var(--border)); } /* Sizes on the four point grid. The leading edge tightens beside a mark so the visual padding matches the trailing edge. */ .sm { --badge-height: 20px; --badge-radius: 5px; --badge-pad: 8px; --badge-gap: 4px; --badge-icon: 12px; --badge-dot: 5px; font-size: 11px; } .md { --badge-height: 24px; --badge-radius: 6px; --badge-pad: 10px; --badge-gap: 5px; --badge-icon: 14px; --badge-dot: 6px; } .lg { --badge-height: 28px; --badge-radius: 7px; --badge-pad: 12px; --badge-gap: 6px; --badge-icon: 16px; --badge-dot: 7px; font-size: var(--text-sm); } /* Full round ends, the original look. Declared after the sizes so it wins over their radius. */ .pill { --badge-radius: var(--radius-pill); } .withIcon { padding-inline-start: calc(var(--badge-pad) - 2px); } .withDot { padding-inline-start: calc(var(--badge-pad) - 1px); } /* Flex all the way down: an inline box here would sit on a text baseline and push the label off centre. */ .body { display: flex; align-items: center; } .content { position: relative; display: flex; width: max-content; align-items: center; gap: var(--badge-gap); } .label, .glyph { position: relative; display: inline-flex; align-items: center; } /* Trim the line box to cap height and baseline, so flex centring puts the letters on the badge's optical centre at every size. */ .text { display: block; text-box: trim-both cap alphabetic; } .icon { position: relative; display: inline-flex; flex: none; align-items: center; justify-content: center; color: var(--badge-color); line-height: 0; } .glyph > svg { display: block; width: var(--badge-icon); height: var(--badge-icon); } .dot { display: block; width: var(--badge-dot); height: var(--badge-dot); flex: none; border-radius: 50%; background: var(--badge-color); } .neutral { --badge-tone: var(--text-secondary); } .info { --badge-tone: var(--info, var(--tone-sky)); } .success { --badge-tone: var(--success); } .warning { --badge-tone: var(--warning); } .danger { --badge-tone: var(--danger); } /* Categorical colours (method tags, labels) override the tone. */ .teal { --badge-tone: var(--tone-teal); } .sky { --badge-tone: var(--tone-sky); } .orchid { --badge-tone: var(--tone-orchid); } .violet { --badge-tone: var(--tone-violet); } .rose { --badge-tone: var(--tone-rose); } .amber { --badge-tone: var(--tone-amber); } /* Amber is the lightest hue, so light mode deepens its text a little further. */ .warning, .amber { --badge-ink: 76%; } @media (prefers-reduced-motion: reduce) { .badge { transition-duration: var(--duration-instant); } } 5f:["$","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","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"}]]}]}]]}],["$","$L60",null,{"namespace":"@uiarc","registryDependencies":["https://uiarc.dev/r/arc-motion-tokens.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"registry/components/badge/badge.tsx","content":"$62","type":"registry:component","target":"@components/arc/badge/badge.tsx"},{"path":"registry/components/badge/badge.module.css","content":"$63","type":"registry:component","target":"@components/arc/badge/badge.module.css"}],"className":"h-[70svh] min-h-80"}]]}]