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:T2b68,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { createContext, useContext, useRef } from "react"; import { Avatar } from "@/components/ui/avatar"; import { cn } from "@/lib/cn"; import { ease, spring } from "@/lib/motion"; export type TagTone = "neutral" | "success" | "warning" | "danger" | "info"; const dotTone: Record = { neutral: "bg-fg-3", success: "bg-success", warning: "bg-warning", danger: "bg-danger", info: "bg-info", }; const GroupContext = createContext(false); /* ------------------------------------------------------------------------------------------------- * Focus helpers * -----------------------------------------------------------------------------------------------*/ // The one control per tag that arrows move between: the tag itself when it's clickable, // otherwise its remove button. const targets = (group: Element) => Array.from(group.querySelectorAll("[data-tag]:not([data-removing]) [data-tag-target]")).filter((el) => !el.closest("[data-tag]")?.hasAttribute("data-removing")); /** After a tag goes, focus the next one, else the previous, else the group itself. */ function refocusAfter(tag: HTMLElement) { const group = tag.closest("[data-tag-group]"); if (!group) return; const all = Array.from(group.querySelectorAll("[data-tag]")); const at = all.indexOf(tag); tag.setAttribute("data-removing", ""); const pick = (el: HTMLElement | undefined) => el?.querySelector("[data-tag-target]"); const rest = all.filter((el) => el !== tag && !el.hasAttribute("data-removing")); const next = pick(rest.find((el) => all.indexOf(el) > at)) ?? pick([...rest].reverse().find((el) => all.indexOf(el) < at)); (next ?? group).focus(); } /* ------------------------------------------------------------------------------------------------- * Tag * -----------------------------------------------------------------------------------------------*/ export type TagProps = Omit, "onClick"> & { /** Color of the leading dot. Semantic tones are for meaning only. */ tone?: TagTone; dot?: boolean; /** A person or team, drawn as a small avatar flush with the left edge. */ avatar?: { name: string; src?: string }; /** A leading icon at 14px (12px in sm). */ icon?: React.ReactNode; size?: "sm" | "md"; /** Shows the remove button, and Backspace or Delete removes the tag. */ onRemove?: () => void; /** Accessible name for the remove button. Defaults to "Remove ". */ removeLabel?: string; /** Makes the tag itself a button: open the label, filter by it, edit the value. */ onClick?: (event: React.MouseEvent) => void; /** Makes the tag itself a link. */ href?: string; disabled?: boolean; /** Longest the label grows before it truncates, in px. The full text is in its tooltip. */ maxWidth?: number; }; /** * A chip for a label, a person or a filter value. Removable ones leave by shrinking and fading, * and inside a TagGroup the rest slide over to close the gap and focus lands on a neighbor. */ export function Tag({ tone = "neutral", dot = false, avatar, icon, size = "md", onRemove, removeLabel, onClick, href, disabled = false, maxWidth = 200, className, children, ref, ...rest }: TagProps) { const reduce = useReducedMotion(); const inGroup = useContext(GroupContext); const root = useRef(null); const text = typeof children === "string" || typeof children === "number" ? String(children) : avatar?.name; const interactive = !disabled && (!!onClick || !!href); const removable = !!onRemove && !disabled; const sm = size === "sm"; const remove = () => { if (!onRemove || !root.current) return; // Only move focus if it was inside this tag; a pointer removal elsewhere leaves focus alone. if (root.current.contains(document.activeElement)) refocusAfter(root.current); else root.current.setAttribute("data-removing", ""); onRemove(); }; const onKeyDown = (e: React.KeyboardEvent) => { if (removable && (e.key === "Backspace" || e.key === "Delete")) { e.preventDefault(); remove(); } }; const lead = avatar ? ( ) : icon ? ( {icon} ) : dot ? ( ) : null; // Space before the content: tight when an avatar sits flush in the pill's curve. const padStart = avatar ? (sm ? "pl-0.5" : "pl-[3px]") : sm ? "pl-2" : "pl-2.5"; const padEnd = sm ? "pr-2" : "pr-2.5"; const label = ( {children ?? avatar?.name} ); const bodyClass = cn("inline-flex h-full min-w-0 items-center gap-1.5 rounded-full outline-none", padStart, removable ? "pr-1" : padEnd); const body = interactive ? ( href ? ( {lead} {label} ) : ( ) ) : ( {lead} {label} ); return ( { root.current = node; if (typeof ref === "function") ref(node); else if (ref) ref.current = node; }} data-tag="" data-size={size} data-interactive={interactive || undefined} data-disabled={disabled || undefined} role={inGroup ? "listitem" : undefined} layout={inGroup && !reduce ? "position" : undefined} // Tags only animate in when they join a group; a tag rendered on its own is simply there. initial={!inGroup ? false : reduce ? { opacity: 0 } : { opacity: 0, scale: 0.85, filter: "blur(2px)" }} animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }} exit={reduce ? { opacity: 0, transition: { duration: 0.1 } } : { opacity: 0, scale: 0.85, filter: "blur(2px)", transition: { duration: 0.14, ease: ease.out } }} transition={reduce ? { duration: 0.12 } : { ...spring.pop, layout: spring.snappy }} className={cn( "relative inline-flex max-w-full shrink-0 select-none items-center rounded-full border border-line-2 bg-raised align-middle text-fg-2", sm ? "h-6 text-[12px]" : "h-7 text-[12.5px]", removable && "pr-1", "transition-[background-color,border-color,color,scale] duration-150", // A clickable tag lights up as one piece and takes its focus ring around the whole pill. // Only the tag's own body lights it up; hovering the remove button lights just the button. interactive && "pointer-fine:has-[[data-tag-target]:hover]:border-fg-4 pointer-fine:has-[[data-tag-target]:hover]:bg-hover pointer-fine:has-[[data-tag-target]:hover]:text-fg has-[[data-tag-target]:active]:scale-[0.97] has-[[data-tag-target]:active]:duration-75", interactive && "has-[[data-tag-target]:focus-visible]:outline-solid has-[[data-tag-target]:focus-visible]:outline-1 has-[[data-tag-target]:focus-visible]:outline-offset-2 has-[[data-tag-target]:focus-visible]:outline-fg-3", disabled && "opacity-50", className, )} {...(rest as React.ComponentProps)} > {body} {removable && ( )} ); } /* ------------------------------------------------------------------------------------------------- * TagGroup * -----------------------------------------------------------------------------------------------*/ export type TagGroupProps = React.ComponentProps<"div"> & { /** Names the list for screen readers: "Labels", "Assignees", "Filters". */ label: string; /** Shown in place of the tags when there are none. */ empty?: React.ReactNode; }; /** * Lays tags out in wrapping rows. Arrow keys, Home and End move between them; removing one * slides the rest over and hands focus to its neighbor. Give each Tag a stable key. */ export function TagGroup({ label, empty, className, children, onKeyDown, ...rest }: TagGroupProps) { const hasTags = Array.isArray(children) ? children.some(Boolean) : !!children; return (

{ onKeyDown?.(e); const keys = ["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]; if (e.defaultPrevented || !keys.includes(e.key)) return; const list = targets(e.currentTarget); if (!list.length) return; const at = list.indexOf(document.activeElement as HTMLElement); const back = e.key === "ArrowLeft" || e.key === "ArrowUp"; const next = e.key === "Home" ? 0 : e.key === "End" ? list.length - 1 : at < 0 ? 0 : Math.min(list.length - 1, Math.max(0, at + (back ? -1 : 1))); e.preventDefault(); list[next]?.focus(); }} className={cn("relative flex flex-wrap items-center gap-1.5 outline-none", className)} {...rest} > {children} {!hasTags && empty}

); } 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":"@stealth","registryDependencies":["https://www.stealth.pm/r/tokens.json","https://www.stealth.pm/r/cn.json","https://www.stealth.pm/r/motion.json","https://www.stealth.pm/r/avatar.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"components/ui/tag.tsx","content":"$62","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]