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:T11fd,"use client" import { useEffect, useMemo, useRef, useState } from "react" import { twMerge } from "cn" import type { Key, Selection } from "react-aria-components/TagGroup" import type { TextFieldProps } from "react-aria-components/TextField" import { FieldError } from "@/components/ui/preskok-ui/field" import { Tag, TagGroup, TagList, } from "@/components/ui/preskok-ui/tag-group" import { TextField } from "@/components/ui/preskok-ui/text-field" interface TagInputProps extends Pick< TextFieldProps, "children" | "aria-label" | "aria-labelledby" > { value?: Selection onChange?: (next: Selection) => void defaultValue?: string[] splitPattern?: RegExp className?: string inputValue?: string onInputValueChange?: (v: string) => void isRequired?: boolean requiredMessage?: string name?: string } export function TagField({ value, onChange, defaultValue = [], splitPattern = /[,;]/, className, inputValue: controlledInput, onInputValueChange, isRequired, requiredMessage, name = "tags", children, ...props }: TagInputProps) { const [internalSelection, setInternalSelection] = useState( new Set(defaultValue) ) const [uncontrolledInput, setUncontrolledInput] = useState("") const [touched, setTouched] = useState(false) const hiddenRef = useRef(null) const selection: Selection = value ?? internalSelection const inputValue = controlledInput ?? uncontrolledInput const setInputValue = onInputValueChange ?? setUncontrolledInput const applySelection = (next: Selection) => (onChange ?? setInternalSelection)(next as Selection) const list = useMemo(() => { return selection === "all" ? [] : Array.from(selection).map((v) => String(v)) }, [selection]) const isInvalid = Boolean(isRequired && list.length === 0 && touched) const errorText = requiredMessage ?? "At least one item is required" useEffect(() => { const input = hiddenRef.current const form = input?.form if (!form || !input) return const onSubmit = (e: Event) => { if (isRequired && list.length === 0) { e.preventDefault() setTouched(true) input.setCustomValidity(errorText) form.reportValidity() } else { input.setCustomValidity("") } } form.addEventListener("submit", onSubmit) return () => form.removeEventListener("submit", onSubmit) }, [isRequired, list.length, errorText]) function handleKeyDown(e: React.KeyboardEvent) { if (e.key === "Enter" || e.key === "," || e.key === ";") { e.preventDefault() addTag() } } function addTag() { if (selection === "all") return const next = new Set(Array.from(selection)) inputValue.split(splitPattern).forEach((raw) => { const formatted = raw .trim() .replace(/\s\s+/g, " ") .replace(/\t|\\t|\r|\\r|\n|\\n/g, "") if (formatted === "") return const exists = Array.from(next).some( (id) => String(id).toLocaleLowerCase() === formatted.toLocaleLowerCase() ) if (!exists) next.add(formatted) }) applySelection(next) setInputValue("") setTouched(true) } function removeKeys(keys: Selection) { if (selection === "all") return const next = new Set(Array.from(selection)) if (keys !== "all") { for (const k of keys) next.delete(k) } applySelection(next) setTouched(true) } return (

setTouched(true)} isInvalid={isInvalid} {...props} > {(values) => ( <> {typeof children === "function" ? children(values) : children} {isInvalid ? errorText : undefined} )} {selection ? ( {list.map((id) => ( {id} ))} ) : null}

) } 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","react-aria-components",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-aria-components","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":"react-aria-components"}]]}]}],["$","li","cn@^0.2.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn@^0.2.4"}]]}]}]]}],["$","$L50",null,{"namespace":"@preskok","registryDependencies":["https://ui-three-mu.vercel.app/r/field.json","https://ui-three-mu.vercel.app/r/tag-group.json","https://ui-three-mu.vercel.app/r/text-field.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/preskok/ui/preskok-ui/tag-field.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]