"use client"; import React, { useState, useId } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { AlertCircle, CheckCircle2, Sparkles } from "lucide-react"; // --- TYPES --- export type WarpAccentColor = "orange" | "indigo" | "emerald" | "neon"; export type InputStatus = "idle" | "success" | "error"; export interface ElasticWarpInputProps extends Omit, "ref" | "color" | "id"> { /** The label text floating inside the input */ label?: string; /** UI Styles from the Uixtra System */ color?: WarpAccentColor; /** Current validation status */ status?: InputStatus; /** Optional helper text displayed below the input */ helperText?: string; /** Optional explicit ID. If not provided, a safe React ID is generated. */ id?: string; /** React 19 native ref support */ ref?: React.Ref; } /** * Elastic Warp Input Pro (v3.0 Infinity) * A highly tactile input field featuring organic spring physics, * dynamic border radius morphing, and strict state management. */ export const ElasticWarpInput = ({ label = "Enter value...", color = "orange", status = "idle", helperText, className, value, defaultValue, // 🔥 Extraemos defaultValue para que no pase a ...props onChange, onFocus, onBlur, disabled = false, required = false, id, type = "text", ref, ...props }: ElasticWarpInputProps) => { const [isFocused, setIsFocused] = useState(false); // 🔥 Inicializamos el estado no controlado con el defaultValue (si existe) const [internalValue, setInternalValue] = useState(defaultValue ?? ""); // Hydration-safe ID generation const reactId = useId(); const inputId = id || `warp-input-${reactId}`; // Controlled vs Uncontrolled safe handling const isControlled = value !== undefined; const currentValue = isControlled ? value : internalValue; const hasValue = String(currentValue).length > 0; // Safe Color Mapping for Tailwind JIT const themeMaps: Record = { orange: { borderActive: "border-orange-500", textActive: "text-orange-500", glowActive: "shadow-orange-500/25", iconActive: "text-orange-500", }, indigo: { borderActive: "border-indigo-500", textActive: "text-indigo-500", glowActive: "shadow-indigo-500/25", iconActive: "text-indigo-500", }, emerald: { borderActive: "border-emerald-500", textActive: "text-emerald-500", glowActive: "shadow-emerald-500/25", iconActive: "text-emerald-500", }, neon: { borderActive: "border-cyan-400", textActive: "text-cyan-400", glowActive: "shadow-cyan-400/20", iconActive: "text-cyan-400", } }; const statusMaps: Record = { idle: { border: "border-neutral-200 dark:border-neutral-800", text: "text-neutral-500" }, success: { border: "border-emerald-500", text: "text-emerald-500" }, error: { border: "border-rose-500", text: "text-rose-500" }, }; const currentTheme = themeMaps[color]; const currentStatus = isFocused ? { border: currentTheme.borderActive, text: currentTheme.textActive } : statusMaps[status]; const handleFocus = (e: React.FocusEvent) => { setIsFocused(true); if (onFocus) onFocus(e); }; const handleBlur = (e: React.FocusEvent) => { setIsFocused(false); if (onBlur) onBlur(e); }; const handleChange = (e: React.ChangeEvent) => { if (!isControlled) setInternalValue(e.target.value); if (onChange) onChange(e); }; const isFloating = isFocused || hasValue; return (

{/* The Elastic Wrapper */} {/* Glow Backdrop */} {isFocused && status === "idle" && ( )} {/* Input Container */}

{/* Floating Label */} {label} {required && *} {/* Actual Native Input */} {/* Status Icons */}

{status === "success" && !isFocused && ( )} {status === "error" && !isFocused && ( )} {isFocused && ( )}

{/* Helper Text */} {helperText && ( {helperText} )}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function ElasticWarpInputDemo() { const [email, setEmail] = useState(""); const [status, setStatus] = useState("idle"); const handleEmailChange = (e: React.ChangeEvent) => { const val = e.target.value; setEmail(val); if (val.length === 0) setStatus("idle"); else if (val.includes("@") && val.includes(".")) setStatus("success"); else setStatus("error"); }; return (

V3 Inputs

Experience the elastic spring physics on interaction.

); }