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:T2ba9,import * as React from 'react' import { cn } from '@/lib/utils' import { X } from 'lucide-react' export interface TagInputHandle { focus: () => void blur: () => void get value(): string set value(v: string) } export interface TagInputProps extends Omit, 'value' | 'defaultValue' | 'onChange'> { value?: string[] defaultValue?: string[] onChange?: (tags: string[]) => void suggestions?: string[] maxTags?: number allowDuplicates?: boolean delimiter?: string | RegExp validateTag?: (tag: string) => boolean | string } const TagInput = React.forwardRef( ( { value: controlledValue, defaultValue = [], onChange, suggestions = [], maxTags, allowDuplicates = false, delimiter = ',', validateTag, placeholder = 'Add tag...', disabled, className, ...props }, ref ) => { const [uncontrolledTags, setUncontrolledTags] = React.useState(defaultValue) const [inputValue, setInputValue] = React.useState('') const [showSuggestions, setShowSuggestions] = React.useState(false) const [error, setError] = React.useState(null) // Arrow-key highlighting and the validation errors were purely visual: // nothing announced that suggestions appeared, how many there were, which // one was active, or why an entry was rejected (WCAG 4.1.2 / 3.3.1). const uid = React.useId() const listboxId = `${uid}-suggestions` const errorId = `${uid}-error` const optionId = (index: number) => `${uid}-option-${index}` const [selectedSuggestionIndex, setSelectedSuggestionIndex] = React.useState(-1) const inputRef = React.useRef(null) const containerRef = React.useRef(null) React.useImperativeHandle(ref, () => ({ focus: () => inputRef.current?.focus(), blur: () => inputRef.current?.blur(), get value() { return inputRef.current?.value ?? '' }, set value(v: string) { if (inputRef.current) inputRef.current.value = v }, })) const isControlled = controlledValue !== undefined const tags = isControlled ? controlledValue : uncontrolledTags const filteredSuggestions = React.useMemo(() => { if (!inputValue.trim() || suggestions.length === 0) return [] const lowerInput = inputValue.toLowerCase() return suggestions.filter( (suggestion) => suggestion.toLowerCase().includes(lowerInput) && (allowDuplicates || !tags.includes(suggestion)) ) }, [inputValue, suggestions, tags, allowDuplicates]) // Single source of truth for the listbox's open state — aria-expanded and // the rendered listbox must never disagree. const suggestionsOpen = showSuggestions && filteredSuggestions.length > 0 const updateTags = (newTags: string[]) => { if (!isControlled) { setUncontrolledTags(newTags) } onChange?.(newTags) } // Adds one or more tags atomically. Validation (maxTags, duplicates, custom) // runs against a single working copy so a batched add (e.g. pasting // "a,b,c,") can't bypass limits or collapse to only the last value. const tryAddTags = (tagValues: string[]) => { let working = tags let added = false let nextError: string | null = null for (const tagValue of tagValues) { const trimmedTag = tagValue.trim() if (!trimmedTag) continue if (maxTags && working.length >= maxTags) { nextError = `Maximum ${maxTags} tags allowed` break } if (!allowDuplicates && working.includes(trimmedTag)) { nextError = 'Tag already exists' continue } if (validateTag) { const validationResult = validateTag(trimmedTag) if (validationResult !== true) { nextError = typeof validationResult === 'string' ? validationResult : 'Invalid tag' continue } } working = [...working, trimmedTag] added = true } setError(nextError) if (added) updateTags(working) return added } const addTag = (tagValue: string) => tryAddTags([tagValue]) const removeTag = (index: number) => { if (disabled) return const newTags = tags.filter((_, i) => i !== index) updateTags(newTags) setError(null) } const handleInputChange = (e: React.ChangeEvent) => { const value = e.target.value setInputValue(value) setShowSuggestions(true) setSelectedSuggestionIndex(-1) setError(null) // Check for delimiter if (delimiter) { const parts = value.split(delimiter) if (parts.length > 1) { tryAddTags(parts.slice(0, -1)) setInputValue(parts[parts.length - 1]) } } } const handleKeyDown = (e: React.KeyboardEvent) => { switch (e.key) { case 'Enter': e.preventDefault() if (selectedSuggestionIndex >= 0 && filteredSuggestions[selectedSuggestionIndex]) { if (addTag(filteredSuggestions[selectedSuggestionIndex])) { setInputValue('') setShowSuggestions(false) setSelectedSuggestionIndex(-1) } } else if (inputValue.trim()) { if (addTag(inputValue)) { setInputValue('') } } break case 'Backspace': if (!inputValue && tags.length > 0) { removeTag(tags.length - 1) } break case 'ArrowDown': if (filteredSuggestions.length > 0) { e.preventDefault() setSelectedSuggestionIndex((prev) => prev < filteredSuggestions.length - 1 ? prev + 1 : 0 ) } break case 'ArrowUp': if (filteredSuggestions.length > 0) { e.preventDefault() setSelectedSuggestionIndex((prev) => prev > 0 ? prev - 1 : filteredSuggestions.length - 1 ) } break case 'Escape': setShowSuggestions(false) setSelectedSuggestionIndex(-1) break } } const handleSuggestionClick = (suggestion: string) => { if (addTag(suggestion)) { setInputValue('') setShowSuggestions(false) inputRef.current?.focus() } } const handleContainerClick = () => { inputRef.current?.focus() } // Close suggestions on click outside React.useEffect(() => { const handleClickOutside = (e: MouseEvent) => { if (containerRef.current && !containerRef.current.contains(e.target as Node)) { setShowSuggestions(false) } } document.addEventListener('mousedown', handleClickOutside) return () => document.removeEventListener('mousedown', handleClickOutside) }, []) return (

{/* Tags */} {tags.map((tag, index) => ( {tag} {!disabled && ( )} ))} {/* Input */} = 0 ? optionId(selectedSuggestionIndex) : undefined } aria-describedby={error ? errorId : undefined} aria-invalid={error ? true : undefined} value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} onFocus={() => setShowSuggestions(true)} placeholder={tags.length === 0 ? placeholder : ''} disabled={disabled} className={cn( 'flex-1 min-w-[120px] bg-transparent outline-none text-sm', 'placeholder:text-muted-foreground disabled:cursor-not-allowed' )} {...props} />

{/* Error message */} {error && (

{error}

)} {/* Suggestions dropdown */} {suggestionsOpen && ( )}

) } ) 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@boldkit","registryDependencies":["@boldkit/utils"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/ui/tag-input.tsx","content":"$52","type":"registry:ui","target":"components/ui/tag-input.tsx"}],"className":"h-[70svh] min-h-80"}]]}]