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:T2006,"use client"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const INSTANT = { duration: 0 } as const; const LINE = 16; export type ValidationStatus = "idle" | "pending" | "valid" | "invalid"; export type Validator = (value: string) => string | null; export type UseInlineValidationOptions = { value: string; validate: Validator; debounce?: number; }; export type UseInlineValidationReturn = { status: ValidationStatus; error: string | null; message: string; touched: boolean; commit: () => void; reset: () => void; fieldProps: { onBlur: () => void; "aria-invalid": boolean; }; }; type Settled = { status: ValidationStatus; error: string | null; message: string; }; const CLEAN: Settled = { status: "idle", error: null, message: "" }; export function useInlineValidation({ value, validate, debounce = 400, }: UseInlineValidationOptions): UseInlineValidationReturn { const [touched, setTouched] = useState(false); const [settled, setSettled] = useState(CLEAN); const check = useRef(validate); const latest = useRef(value); useEffect(() => { check.current = validate; latest.current = value; }); useEffect(() => { if (!touched) return; const next = check.current(value); const resolved: ValidationStatus = value.length > 0 ? "valid" : "idle"; if (next === null) { setSettled((prev) => prev.status === resolved && prev.error === null ? prev : { status: resolved, error: null, message: prev.message }, ); return; } setSettled((prev) => prev.status === "invalid" ? prev : { status: "pending", error: null, message: prev.message }, ); const t = setTimeout(() => { setSettled((prev) => prev.error === next ? prev : { status: "invalid", error: next, message: next }, ); }, debounce); return () => clearTimeout(t); }, [value, touched, debounce]); const commit = useCallback(() => { setTouched(true); const v = latest.current; const next = check.current(v); setSettled((prev) => next === null ? { status: v.length > 0 ? "valid" : "idle", error: null, message: prev.message } : { status: "invalid", error: next, message: next }, ); }, []); const reset = useCallback(() => { setTouched(false); setSettled(CLEAN); }, []); return { status: settled.status, error: settled.error, message: settled.message, touched, commit, reset, fieldProps: { onBlur: commit, "aria-invalid": settled.status === "invalid" }, }; } export type InlineValidationProps = { label: string; value: string; onChange: (value: string) => void; validate: Validator; hint?: string; id?: string; name?: string; type?: "text" | "email" | "password" | "tel" | "url" | "search"; placeholder?: string; autoComplete?: string; inputMode?: React.ComponentProps<"input">["inputMode"]; debounce?: number; reserveLines?: number; disabled?: boolean; required?: boolean; className?: string; }; export function InlineValidation({ label, value, onChange, validate, hint, id, name, type = "text", placeholder, autoComplete, inputMode, debounce = 400, reserveLines = 1, disabled = false, required = false, className = "", }: InlineValidationProps) { const reduced = useReducedMotion(); const fade = reduced ? INSTANT : CROSSFADE; const auto = useId(); const fieldId = id ?? `${auto}-field`; const hintId = `${auto}-hint`; const errorId = `${auto}-error`; const { status, error, message, fieldProps } = useInlineValidation({ value, validate, debounce, }); const invalid = status === "invalid"; const valid = status === "valid"; const described = [hint ? hintId : null, invalid ? errorId : null] .filter(Boolean) .join(" "); const clamp = { display: "-webkit-box" as const, WebkitBoxOrient: "vertical" as const, WebkitLineClamp: reserveLines, overflow: "hidden" as const, }; return (

{label}

onChange(e.target.value)} {...fieldProps} className={`h-10 w-full rounded-[10px] border-2 pl-3 pr-9 text-[13px] text-stone-700 outline-none transition-[background-color,border-color,box-shadow] duration-150 placeholder:text-stone-400 focus-visible:outline-none disabled:opacity-50 dark:text-stone-200 dark:placeholder:text-stone-500 ${ invalid ? "border-red-500 bg-white dark:border-red-400 dark:bg-[#1D1D1A]" : "border-stone-200 bg-stone-100/70 shadow-[inset_0_1px_2px_rgba(28,25,23,0.07)] focus:border-[#4568FF] focus:bg-white focus:shadow-none dark:border-white/[0.08] dark:bg-[#1D1D1A] dark:shadow-[inset_0_1px_2px_rgba(0,0,0,0.45)] dark:focus:border-[#93B0FF] dark:focus:bg-[#252522]" }`} />

{hint ? ( {hint} ) : null} {error ?? message} {hint ? ( {hint} ) : null} {error ?? ""}

); } 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":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/inline-validation.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/inline-validation.tsx"}],"className":"h-[70svh] min-h-80"}]]}]