{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "tag-input-cord",
"title": "Tag Input Cord",
"description": "Tag input as beads threaded onto a cord: committing a tag cinches a bead into place with one overshoot squeeze while its knot draws on; Backspace on an empty input unravels the last bead with a drop-and-twist. Duplicate commits shudder the existing bead instead of re-threading it.",
"dependencies": [],
"files": [
{
"path": "registry/core/tag-input-cord/component.tsx",
"content": "\"use client\";\n\nimport { useEffect, useRef, useState } from \"react\";\n\n// Tag input as beads cinched onto a cord: committed tags thread onto a wire\n// of short cord segments, each arriving with a cinch — a slide in from the\n// input with one overshoot squeeze — while its knot draws on. Backspace on an\n// empty input unravels the last bead (a drop-and-twist exit) before it leaves\n// the cord. Duplicates don't re-thread; the existing bead shudders instead.\n// Pure DOM+SVG+CSS keyframes; the only JS timers park exiting beads for the\n// length of their unravel animation and are cleared on unmount.\n\nexport interface CinchBeadProps {\n /** initial tag list */\n defaultTags?: string[];\n /** placeholder shown only while the list is empty */\n placeholder?: string;\n /** accessible name for the text input */\n label?: string;\n /** hard cap on tag count. No default — unlimited. */\n maxTags?: number;\n /** called with the full tag list after an add or remove */\n onChange?: (tags: string[]) => void;\n /** extra classes merged onto the rendered root element */\n className?: string;\n}\n\nfunction Knot() {\n return (\n \n );\n}\n\nfunction Cord({ className = \"\" }: { className?: string }) {\n return ;\n}\n\nexport function CinchBead({\n defaultTags = [],\n placeholder = \"Add a tag…\",\n label = \"Tags\",\n maxTags = Infinity,\n onChange,\n className = \"\",\n}: CinchBeadProps) {\n const [tags, setTags] = useState(defaultTags);\n const [leaving, setLeaving] = useState([]);\n const [shaking, setShaking] = useState(null);\n const [draft, setDraft] = useState(\"\");\n const inputRef = useRef(null);\n const timersRef = useRef>>(new Set());\n const reduced = useRef(\n typeof window !== \"undefined\" &&\n window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches,\n ).current;\n\n useEffect(() => {\n const timers = timersRef.current;\n return () => timers.forEach(clearTimeout);\n }, []);\n\n const park = (fn: () => void, ms: number) => {\n if (reduced) return fn();\n const t = setTimeout(() => {\n timersRef.current.delete(t);\n fn();\n }, ms);\n timersRef.current.add(t);\n };\n\n const commit = (raw: string) => {\n const tag = raw.trim();\n if (!tag) return;\n if (tags.includes(tag)) {\n // already threaded — shudder the existing bead instead\n setShaking(tag);\n park(() => setShaking(null), 300);\n setDraft(\"\");\n return;\n }\n if (tags.length >= maxTags) return;\n const next = [...tags, tag];\n setTags(next);\n setDraft(\"\");\n onChange?.(next);\n };\n\n const unravel = (tag: string) => {\n if (leaving.includes(tag)) return;\n setLeaving((l) => [...l, tag]);\n const drop = () => {\n setLeaving((l) => l.filter((t) => t !== tag));\n setTags((prev) => {\n const next = prev.filter((t) => t !== tag);\n onChange?.(next);\n return next;\n });\n };\n reduced ? drop() : park(drop, 240);\n };\n\n const onKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" || e.key === \",\") {\n e.preventDefault();\n commit(draft);\n } else if (e.key === \"Backspace\" && draft === \"\" && tags.length > 0) {\n const last = [...tags].reverse().find((t) => !leaving.includes(t));\n if (last) unravel(last);\n }\n };\n\n return (\n inputRef.current?.focus()}\n className={[\n \"flex w-full cursor-text flex-wrap items-center rounded-md border border-border bg-surface px-3 py-2.5\",\n \"transition-colors duration-150 focus-within:border-ns-muted\",\n className,\n ].join(\" \")}\n >\n \n \n {tags.map((tag) => (\n \n \n \n {tag}\n {\n e.stopPropagation();\n unravel(tag);\n }}\n className=\"grid size-4 cursor-pointer place-items-center rounded-full text-ns-muted transition-colors duration-150 hover:bg-border hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ns-accent\"\n >\n \n \n \n \n \n ))}\n setDraft(e.target.value)}\n onKeyDown={onKeyDown}\n className=\"ml-1.5 min-w-[8ch] flex-1 bg-transparent py-0.5 text-sm text-foreground outline-none placeholder:text-ns-muted\"\n />\n \n {tags.length} tags\n \n \n );\n}\n",
"type": "registry:ui",
"target": "components/ui/tag-input-cord.tsx"
}
],
"cssVars": {
"theme": {
"color-ns-muted": "var(--ns-muted)",
"color-ns-accent": "var(--ns-accent)",
"color-surface": "var(--surface)"
},
"light": {
"ns-muted": "#4d4d4d",
"ns-accent": "#006bff",
"surface": "#fafafa"
},
"dark": {
"ns-muted": "#8f8f8f",
"surface": "#171717"
}
},
"meta": {
"collection": "core",
"tags": [
"tag-input",
"chips",
"input",
"form",
"svg",
"micro-interaction"
],
"instruction": "Build a tag input whose chips read as beads on a wire. STRUCTURE: a click-to-focus bg-surface field (cursor-text, focus-within border shift to muted) laid out as a wrapping flex row: a short cord stub (1px-tall bg-border span), then per tag a pill chip followed by a 12px cord segment, then the flex-1 text input — the h-px segments between pills are what makes the row read as one threaded cord, and they wrap naturally with the chips. Each chip is a rounded-full bg-background bordered pill holding a 10px SVG knot (circle, stroke var(--ns-muted), pathLength 1), the truncated tag text, and a 16px remove button (inline SVG x, aria-label 'Remove {tag}', hover bg-border, focus-visible accent outline). MOTION, all CSS keyframes scoped in a