52: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"] 53: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"] 54:T1f38,"use client"; import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { motion, useReducedMotion } from "motion/react"; const INSTANT = { duration: 0 } as const; const LIFT = { type: "spring", stiffness: 760, damping: 46, mass: 0.5 } as const; const RAISE = -32; const SLIDE = -12; const SHRINK = 0.92; const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect; export type UseFloatingLabelOptions = { value?: string; defaultValue?: string; disabled?: boolean; }; export type UseFloatingLabelReturn = { ref: React.RefObject; raised: boolean; focused: boolean; filled: boolean; length: number; instant: boolean; fieldProps: { onFocus: () => void; onBlur: () => void; onChange: (event: React.ChangeEvent) => void; }; }; type Fill = { length: number; instant: boolean }; export function useFloatingLabel({ value, defaultValue, disabled = false, }: UseFloatingLabelOptions = {}): UseFloatingLabelReturn { const ref = useRef(null); const mounted = useRef(false); const [focused, setFocused] = useState(false); const [fill, setFill] = useState({ length: (value ?? defaultValue ?? "").length, instant: true, }); const settle = useCallback((next: number, instant: boolean) => { setFill((prev) => prev.length === next && prev.instant === instant ? prev : { length: next, instant }, ); }, []); useIsomorphicLayoutEffect(() => { const el = ref.current; const next = value !== undefined ? value.length : el ? el.value.length : 0; settle(next, !mounted.current); mounted.current = true; }, [value, settle]); useEffect(() => { setFill((prev) => (prev.instant ? { ...prev, instant: false } : prev)); }, []); useEffect(() => { const el = ref.current; if (!el || value !== undefined) return; const read = () => settle(el.value.length, false); el.addEventListener("input", read); el.addEventListener("change", read); return () => { el.removeEventListener("input", read); el.removeEventListener("change", read); }; }, [value, settle]); useEffect(() => { if (disabled) setFocused(false); }, [disabled]); const onFocus = useCallback(() => setFocused(true), []); const onBlur = useCallback(() => setFocused(false), []); const onChange = useCallback( (event: React.ChangeEvent) => settle(event.currentTarget.value.length, false), [settle], ); return { ref, raised: focused || fill.length > 0, focused, filled: fill.length > 0, length: fill.length, instant: fill.instant && !focused, fieldProps: { onFocus, onBlur, onChange }, }; } export type FloatingLabelInputProps = { label: string; value?: string; defaultValue?: string; onChange?: (value: string, event: React.ChangeEvent) => void; onFocus?: () => void; onBlur?: () => void; hint?: string; invalid?: boolean; id?: string; name?: string; type?: "text" | "email" | "password" | "search" | "tel" | "url"; autoComplete?: string; inputMode?: React.ComponentProps<"input">["inputMode"]; maxLength?: number; required?: boolean; disabled?: boolean; readOnly?: boolean; inputRef?: React.Ref; className?: string; }; export function FloatingLabelInput({ label, value, defaultValue, onChange, onFocus, onBlur, hint, invalid = false, id, name, type = "text", autoComplete, inputMode, maxLength, required = false, disabled = false, readOnly = false, inputRef, className = "", }: FloatingLabelInputProps) { const auto = useId(); const fieldId = id ?? `${auto}-field`; const hintId = `${auto}-hint`; const reduced = useReducedMotion(); const { ref, raised, focused, length, instant, fieldProps } = useFloatingLabel({ value, defaultValue, disabled, }); const move = reduced || instant ? INSTANT : LIFT; const attach = useCallback( (node: HTMLInputElement | null) => { ref.current = node; if (typeof inputRef === "function") inputRef(node); else if (inputRef) inputRef.current = node; }, [ref, inputRef], ); return (

{ fieldProps.onFocus(); onFocus?.(); }} onBlur={() => { fieldProps.onBlur(); onBlur?.(); }} onChange={(event) => { fieldProps.onChange(event); onChange?.(event.currentTarget.value, event); }} className="absolute inset-0 h-full w-full rounded-[9px] bg-transparent px-3 py-0 text-[13px] leading-[20px] text-stone-700 outline-none focus-visible:outline-none disabled:cursor-not-allowed dark:text-stone-200" />

{label} {required ? ( * ) : null}

{hint}

{maxLength !== undefined ? ( {maxLength} / {maxLength} {length} / {maxLength} ) : null} {hint ? ( {hint} ) : null}

); } 51:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@interior","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/interior/floating-label.tsx","content":"$54","type":"registry:ui","target":"components/interior/floating-label.tsx"}],"className":"h-[70svh] min-h-80"}]]}]