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:T2370,"use client"; import { useRef, useState, useMemo, createContext, useContext, forwardRef, type ReactNode, type HTMLAttributes, type InputHTMLAttributes, } from "react"; import { Field } from "@base-ui/react/field"; import type { IconComponent } from "@/lib/icon-context"; import { cn } from "@/lib/utils"; import { fontWeights } from "@/lib/font-weight"; import { useShape } from "@/lib/shape-context"; import { SizeProvider, useSize, type SizeVariant } from "@/lib/size-context"; import { useFluidHover, useRegisterFluidHoverItem } from "@/hooks/use-fluid-hover"; interface InputGroupContextValue { registerItem: (index: number, element: HTMLElement | null) => void; activeIndex: number | null; } const InputGroupContext = createContext(null); function useInputGroup() { const ctx = useContext(InputGroupContext); if (!ctx) throw new Error("useInputGroup must be used within an InputGroup"); return ctx; } interface InputGroupProps extends HTMLAttributes { children: ReactNode; /** Pins the group's fields to one step of the size ladder (default 36px, * compact 28px — see /docs/sizes). Omitted, they follow the surrounding * SizeProvider. */ size?: SizeVariant; } const InputGroup = forwardRef( ({ children, size, className, ...props }, ref) => { const containerRef = useRef(null); const { activeIndex, handlers, registerItem } = useFluidHover(containerRef); const contextValue = useMemo( () => ({ registerItem, activeIndex }), [registerItem, activeIndex] ); const group = (

{ (containerRef as React.MutableRefObject).current = node; if (typeof ref === "function") ref(node); else if (ref) (ref as React.MutableRefObject).current = node; }} onMouseEnter={handlers.onMouseEnter} onMouseMove={handlers.onMouseMove} onMouseLeave={handlers.onMouseLeave} // `relative` makes this div the fields' offsetParent — the fluid hover // hook measures items via offsetTop and compares against // container-relative mouse coords, so the two coordinate spaces must // share this origin (same as every other fluid hover consumer). className={cn("relative flex flex-col gap-3 w-72 max-w-full", className)} {...props} > {children}

); // A size prop pins every field in the group to one ladder step. return size ? {group} : group; } ); InputGroup.displayName = "InputGroup"; interface InputFieldProps extends Omit, "onChange" | "index"> { label: string; /** Keep the label for assistive tech but don't render it — for inline * fields (a toolbar search) where the placeholder carries the meaning. */ labelHidden?: boolean; placeholder?: string; icon?: IconComponent; index: number; value: string; onChange: (value: string) => void; error?: string; disabled?: boolean; className?: string; } const InputField = forwardRef( ( { label, labelHidden, placeholder, icon: Icon, index, value, onChange, error, disabled, className, ...props }, ref ) => { const internalRef = useRef(null); const inputRef = useRef(null); const { registerItem, activeIndex } = useInputGroup(); const [isFocused, setIsFocused] = useState(false); const shape = useShape(); const sizeClasses = useSize(); const compact = sizeClasses.variant === "compact"; useRegisterFluidHoverItem(registerItem, index, internalRef); const isActive = activeIndex === index; const labelActive = isActive || isFocused; const handleFocus = () => { setIsFocused(true); }; const handleBlur = () => { setIsFocused(false); }; // Input container classes let bgClass: string; let ringClass: string; if (disabled) { bgClass = "bg-transparent"; ringClass = "ring-border"; } else if (error) { bgClass = isFocused ? "bg-card" : isActive ? "bg-destructive-light/60" : "bg-transparent"; ringClass = isFocused || isActive ? "ring-destructive/50" : "ring-transparent"; } else if (isFocused) { bgClass = "bg-card"; ringClass = "ring-border"; } else if (isActive) { bgClass = "bg-muted/50"; ringClass = "ring-border"; } else { bgClass = "bg-transparent"; ringClass = "ring-transparent"; } return ( // Base UI Field wires the accessibility plumbing: Field.Label's htmlFor // targets the control, Field.Error's generated id lands in the control's // aria-describedby, and `invalid` drives aria-invalid / data-invalid. { (internalRef as React.MutableRefObject).current = node; if (typeof ref === "function") ref(node); else if (ref) (ref as React.MutableRefObject).current = node; }} invalid={!!error} disabled={disabled} className={cn( "flex flex-col gap-1 cursor-text", disabled && "opacity-50 pointer-events-none", className )} > {/* Label — sr-only when hidden so the field keeps its accessible name and the htmlFor wiring. */} {label} {/* Input container */}

{ // The old wrapper was one big , so a click anywhere (icon, // padding) focused the input. Keep that, without disturbing the // input's own caret placement. if (e.target === inputRef.current) return; e.preventDefault(); inputRef.current?.focus(); }} className={cn( // Fixed height (was py-2 around the line box) so the field sits // exactly on the ladder's control height. `flex items-center ${sizeClasses.gap} ${shape.input} ${ compact ? "px-2" : "px-2.5" } ${sizeClasses.control} ring-1 transition-all duration-80`, bgClass, ringClass )} > {Icon && ( )} onChange(e.target.value)} onFocus={handleFocus} onBlur={handleBlur} placeholder={placeholder} className={cn( "w-full rounded-none bg-transparent text-foreground placeholder:text-muted-foreground outline-none font-[inherit]", sizeClasses.text )} style={{ fontVariationSettings: fontWeights.normal }} {...props} />

{/* Error message — `match` pins it visible while our controlled `error` prop is standing. */} {error && ( {error} )} ); } ); InputField.displayName = "InputField"; export { InputGroup, InputField }; export default InputGroup; 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"}]]}]}],["$","li","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react"}]]}]}]]}],["$","$L50",null,{"namespace":"@fluid","registryDependencies":["utils","https://www.fluidfunctionalism.com/r/font-weight.json","https://www.fluidfunctionalism.com/r/shape-context.json","https://www.fluidfunctionalism.com/r/icon-context.json","https://www.fluidfunctionalism.com/r/use-fluid-hover.json","https://www.fluidfunctionalism.com/r/size-context.json","https://www.fluidfunctionalism.com/r/tokens.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/default/input-group.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]