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:T2fff,'use client'; import * as React from 'react'; import { invalidRing, overlaySurface, transitionBase } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { Chip } from '@/components/ui/chip'; import { useLabels } from '@/components/ui/labels-context'; export interface TagSuggestion { // Value that becomes the tag. value: string; // Text shown in the list and on the chip. Defaults to the value. label?: string; // Groups the entry under a heading. Entries without a category come first, ungrouped. category?: string; } export interface TagInputProps extends Omit, 'onChange' | 'defaultValue'> { value?: string[]; defaultValue?: string[]; onValueChange?: (value: string[]) => void; placeholder?: string; // Marks a tag invalid (shown with the invalid chip look and announced). Invalid tags are kept so the user can fix them. validate?: (tag: string) => boolean; maxTags?: number; // Characters that commit the draft besides Enter. Pasted text is split on these and on line breaks. delimiters?: string[]; disabled?: boolean; readOnly?: boolean; invalid?: boolean; // `multiline` is the taller, textarea-like field (Figma InputTextArea Type=Tags). multiline?: boolean; // Accessible name of the text field. inputLabel?: string; name?: string; // Values offered while typing. The field becomes a combobox: ArrowDown and ArrowUp move through the list, Enter picks, Escape closes. Typed text that is not a suggestion can still be added. // Entries may be plain strings or `{ value, label, category }`. Categories render as labelled groups. suggestions?: Array; } // Field that turns typed or pasted values into removable chips (Figma Input Variant=Chips, InputTextArea Type=Tags). const TagInput = React.forwardRef( ( { className, value, defaultValue = [], onValueChange, placeholder, validate, maxTags, delimiters = [',', ';'], disabled = false, readOnly = false, invalid = false, multiline = false, inputLabel: inputLabelProp, name, suggestions, ...props }, ref, ) => { const l = useLabels(); const inputLabel = inputLabelProp ?? l.addTag; const [inner, setInner] = React.useState(defaultValue); const tags = value ?? inner; const [draft, setDraft] = React.useState(''); const [announcement, setAnnouncement] = React.useState(''); const inputRef = React.useRef(null); const listId = React.useId(); const [open, setOpen] = React.useState(false); const [active, setActive] = React.useState(-1); const query = draft.trim().toLowerCase(); const entries: TagSuggestion[] = React.useMemo(() => (suggestions ?? []).map((entry) => (typeof entry === 'string' ? { value: entry } : entry)), [suggestions]); const labelOf = (entry: TagSuggestion) => entry.label ?? entry.value; const filtered = entries.filter((entry) => !tags.includes(entry.value) && (labelOf(entry).toLowerCase().includes(query) || entry.value.toLowerCase().includes(query))); // Ungrouped entries first, then each category in order of first appearance, so the visual order matches the keyboard order. const categories = Array.from(new Set(filtered.map((entry) => entry.category).filter((category): category is string => Boolean(category)))); const options = [...filtered.filter((entry) => !entry.category), ...categories.flatMap((category) => filtered.filter((entry) => entry.category === category))]; const chipLabel = (tag: string) => { const match = entries.find((entry) => entry.value === tag); return match ? labelOf(match) : tag; }; const expanded = open && options.length > 0 && !readOnly && !disabled; const optionId = (index: number) => `${listId}-option-${index}`; const commitTags = (next: string[]) => { setInner(next); onValueChange?.(next); }; const add = (raw: string[]) => { const cleaned = raw.map((entry) => entry.trim()).filter(Boolean); const fresh = cleaned.filter((entry, index) => !tags.includes(entry) && cleaned.indexOf(entry) === index); const room = maxTags == null ? fresh : fresh.slice(0, Math.max(maxTags - tags.length, 0)); if (room.length === 0) return; commitTags([...tags, ...room]); setAnnouncement(l.tagsAdded(room.join(', '))); }; const remove = (tag: string) => { commitTags(tags.filter((entry) => entry !== tag)); setAnnouncement(l.tagRemoved(tag)); inputRef.current?.focus(); }; const pick = (entry: string) => { add([entry]); setDraft(''); setOpen(false); setActive(-1); inputRef.current?.focus(); }; const splitter = new RegExp(`[\\n${delimiters.map((d) => d.replace(/[\\^\]-]/g, '\\$&')).join('')}]`); const atLimit = maxTags != null && tags.length >= maxTags; return (

inputRef.current?.focus()} {...props} > {tags.map((tag) => { const bad = validate ? !validate(tag) : false; return ( remove(tag)} removeLabel={l.remove(tag)} /> ); })} {readOnly || atLimit ? null : ( { inputRef.current = node; if (typeof ref === 'function') ref(node); else if (ref) ref.current = node; }} type="text" value={draft} disabled={disabled} placeholder={tags.length === 0 ? placeholder : undefined} aria-label={inputLabel} aria-invalid={invalid || undefined} role={suggestions ? 'combobox' : undefined} aria-autocomplete={suggestions ? 'list' : undefined} aria-expanded={suggestions ? expanded : undefined} aria-controls={suggestions && expanded ? listId : undefined} aria-activedescendant={expanded && active >= 0 ? optionId(active) : undefined} autoComplete="off" className={cn( 'basis-24 grow bg-transparent py-1 typography-input-text text-foreground outline-none placeholder:text-text-subtle', // Below sm the field text is at least 16px so iOS Safari does not zoom on focus. 'max-sm:text-[max(16px,var(--typo-input-text-size,1rem))]', invalidRing, )} onChange={(event) => { const text = event.target.value; setOpen(true); setActive(-1); if (splitter.test(text)) { const parts = text.split(splitter); add(parts.slice(0, -1)); setDraft(parts[parts.length - 1]); } else { setDraft(text); } }} onKeyDown={(event) => { if (suggestions && event.key === 'ArrowDown') { event.preventDefault(); if (!expanded) setOpen(true); setActive((index) => (options.length === 0 ? -1 : (index + 1) % options.length)); } else if (suggestions && event.key === 'ArrowUp' && expanded) { event.preventDefault(); setActive((index) => (index <= 0 ? options.length - 1 : index - 1)); } else if (suggestions && event.key === 'Escape' && expanded) { event.preventDefault(); event.stopPropagation(); setOpen(false); setActive(-1); } else if (event.key === 'Enter' && expanded && active >= 0) { event.preventDefault(); pick(options[active].value); } else if (event.key === 'Enter') { event.preventDefault(); add([draft]); setDraft(''); setOpen(false); } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) { remove(tags[tags.length - 1]); } }} onBlur={() => { setOpen(false); setActive(-1); if (draft.trim()) { add([draft]); setDraft(''); } }} onPaste={(event) => { const text = event.clipboardData.getData('text'); if (splitter.test(text)) { event.preventDefault(); add(text.split(splitter)); setDraft(''); } }} /> )} {suggestions && expanded ? ( ) : null} {name ? : null} {announcement || (suggestions && expanded ? l.tagSuggestionsCount(options.length) : '')}

); }, ); TagInput.displayName = 'TagInput'; export { TagInput }; 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":[null,["$","$L50",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/chip.json","https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/ui/tag-input.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]