50: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/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"],"RegistryDependencies"] 51: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"] 52:T38b1,"use client"; import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; const LEAVE = [0.4, 0, 1, 1] as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const CHIP = { type: "spring", stiffness: 700, damping: 46, mass: 0.5 } as const; const EXIT = { duration: 0.18, ease: LEAVE } as const; const INSTANT = { duration: 0 } as const; const clean = (raw: string) => raw.trim().replace(/\s+/g, " "); const splitter = (separators: string[]) => new RegExp(`[${separators.map((s) => s.replace(/[\\\]^-]/g, "\\$&")).join("")}\\n\\r\\t]+`); export type TagRejection = "duplicate" | "limit" | "invalid"; export type UseTagInputOptions = { value?: string[]; defaultValue?: string[]; onChange?: (tags: string[]) => void; max?: number; separators?: string[]; allowDuplicates?: boolean; validate?: (candidate: string, tags: string[]) => boolean; }; type Rejection = { reason: TagRejection; tag: string; visible: boolean }; export function useTagInput({ value, defaultValue, onChange, max, separators = [","], allowDuplicates = false, validate, }: UseTagInputOptions = {}) { const [internal, setInternal] = useState(() => defaultValue ?? []); const [draft, setDraft] = useState(""); const [armed, setArmed] = useState(-1); const [rejection, setRejection] = useState(null); const [flashed, setFlashed] = useState(null); const [announcement, setAnnouncement] = useState(""); const controlled = value !== undefined; const tags = value ?? internal; const armedIndex = armed >= tags.length ? -1 : armed; const emit = useRef(onChange); emit.current = onChange; const check = useRef(validate); check.current = validate; const rejectTimer = useRef | null>(null); const flashTimer = useRef | null>(null); useEffect( () => () => { if (rejectTimer.current) clearTimeout(rejectTimer.current); if (flashTimer.current) clearTimeout(flashTimer.current); }, [], ); const dismiss = useCallback(() => { if (rejectTimer.current) clearTimeout(rejectTimer.current); rejectTimer.current = null; setRejection((prev) => (prev && prev.visible ? { ...prev, visible: false } : prev)); }, []); const refuse = useCallback( (reason: TagRejection, tag: string) => { if (rejectTimer.current) clearTimeout(rejectTimer.current); setRejection({ reason, tag, visible: true }); rejectTimer.current = setTimeout(() => { setRejection((prev) => (prev ? { ...prev, visible: false } : prev)); }, 2400); setAnnouncement( reason === "duplicate" ? `${tag} is already in the list.` : reason === "limit" ? `That is the limit of ${max} tags.` : `${tag} is not allowed here.`, ); if (reason !== "duplicate") return; if (flashTimer.current) clearTimeout(flashTimer.current); setFlashed(tag); flashTimer.current = setTimeout(() => setFlashed(null), 460); }, [max], ); const apply = useCallback( (next: string[]) => { if (!controlled) setInternal(next); emit.current?.(next); }, [controlled], ); const add = useCallback( (raws: string[]) => { const next = [...tags]; let added = 0; let failure: { reason: TagRejection; tag: string } | null = null; for (const raw of raws) { const candidate = clean(raw); if (!candidate) continue; if (max !== undefined && next.length >= max) { failure = { reason: "limit", tag: candidate }; break; } if (!allowDuplicates) { const twin = next.find((t) => t.toLowerCase() === candidate.toLowerCase()); if (twin) { failure = { reason: "duplicate", tag: twin }; continue; } } if (check.current && !check.current(candidate, next)) { failure = { reason: "invalid", tag: candidate }; continue; } next.push(candidate); added += 1; } if (added > 0) { apply(next); setDraft(""); setArmed(-1); dismiss(); setAnnouncement( `${added === 1 ? next[next.length - 1] : `${added} tags`} added, ${next.length} total.`, ); } if (failure) refuse(failure.reason, failure.tag); return added > 0; }, [tags, max, allowDuplicates, apply, dismiss, refuse], ); const removeAt = useCallback( (index: number) => { if (index < 0 || index >= tags.length) return; const gone = tags[index]; const next = tags.filter((_, i) => i !== index); apply(next); setArmed(-1); dismiss(); setAnnouncement(`${gone} removed, ${next.length} left.`); }, [tags, apply, dismiss], ); const arm = useCallback( (index: number) => { setArmed(index); setAnnouncement(`${tags[index]} selected, press Backspace again to remove it.`); }, [tags], ); const inputProps = { value: draft, onChange: (e: React.ChangeEvent) => { setDraft(e.target.value); setArmed(-1); dismiss(); }, onKeyDown: (e: React.KeyboardEvent) => { if (e.nativeEvent.isComposing) return; if (e.key === "Enter" || separators.includes(e.key)) { e.preventDefault(); add([draft]); return; } if (e.key === "Backspace" && draft === "") { e.preventDefault(); if (e.repeat) return; if (armedIndex >= 0) removeAt(armedIndex); else if (tags.length > 0) arm(tags.length - 1); return; } if (e.key === "Delete" && armedIndex >= 0) { e.preventDefault(); if (e.repeat) return; removeAt(armedIndex); return; } if (e.key === "ArrowLeft") { const start = e.currentTarget.selectionStart; const end = e.currentTarget.selectionEnd; if (start !== 0 || end !== 0 || tags.length === 0) return; e.preventDefault(); arm(armedIndex < 0 ? tags.length - 1 : Math.max(0, armedIndex - 1)); return; } if (e.key === "ArrowRight" && armedIndex >= 0) { e.preventDefault(); if (armedIndex >= tags.length - 1) setArmed(-1); else arm(armedIndex + 1); return; } if (e.key === "Escape" && armedIndex >= 0) { e.preventDefault(); setArmed(-1); } }, onPaste: (e: React.ClipboardEvent) => { const text = e.clipboardData.getData("text"); const pattern = splitter(separators); if (!pattern.test(text)) return; e.preventDefault(); add(text.split(pattern)); }, onBlur: () => setArmed(-1), }; return { tags, draft, setDraft, armedIndex, flashed, rejection, announcement, inputProps, add, removeAt, max, }; } export type TagInputProps = UseTagInputOptions & { label?: string; placeholder?: string; hint?: string; className?: string; }; function CloseGlyph() { return ( ); } export function TagInput({ label, placeholder = "Add a tag", hint = "Enter adds · Backspace removes", className = "", ...options }: TagInputProps) { const { tags, draft, armedIndex, flashed, rejection, announcement, inputProps, removeAt, max } = useTagInput(options); const reduced = useReducedMotion(); const inputRef = useRef(null); const uid = useId(); const inputId = `${uid}-tag-input`; const hintId = `${uid}-tag-hint`; const rows = useMemo(() => { const seen = new Map(); return tags.map((tag) => { const n = seen.get(tag) ?? 0; seen.set(tag, n + 1); return { tag, key: n === 0 ? tag : `${tag}#${n}` }; }); }, [tags]); const message = !rejection ? "" : rejection.reason === "duplicate" ? `${rejection.tag} is already in the list` : rejection.reason === "limit" ? `That is the limit of ${max} tags` : `${rejection.tag} is not allowed here`; const showMessage = rejection?.visible === true; return (

{label ? ( {label} ) : null}

{rows.map(({ tag, key }, index) => { const lit = armedIndex === index || flashed === tag; return ( {tag} ); })}

{draft || placeholder}

{hint} {message}

{max === undefined ? null : (

{max} {tags.length} / {max}

)}

{announcement}

); } 4f:["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/interior/tag-input.tsx","content":"$52","type":"registry:ui","target":"components/interior/tag-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]