Animated Input

'use client';

import './AnimatedInput.css';

/**
 * AnimatedInput — A form input with a floating label animation and focus glow effect.
 * 
 * @param {string} label - The visible indicator for the input field.
 * @param {string} id - The HTML id and for attribute linkage.
 * @param {string} type - Input element type. Default is 'text'.
 * @param {string} placeholder - Passed placeholder. Default is ' '. (Space is needed for CSS :placeholder-shown to work).
 * @param {boolean} required - HTML required attribute parameter. Default is false.
 * @param {string} name - HTML input name binding.
 * @param {string} autocomplete - HTML autocomplete hint (e.g. 'email', 'given-name'). Default is 'off'.
 */
export interface AnimatedInputProps { 
  label: string; 
  id: string; 
  type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url'; 
  placeholder?: string; 
  required?: boolean; 
  name?: string; 
  autocomplete?: string; 
}

export function AnimatedInput({ label, id, type = 'text', placeholder = ' ', required = false, name, autocomplete = 'off' }: AnimatedInputProps) {
  return (
    <>
      <div className="anim-input-wrap" data-rk-75a992="">
        <input id={id} name={name} type={type} placeholder={placeholder} required={required} className="anim-input" autoComplete={autocomplete} data-rk-75a992="" />
        <label htmlFor={id} className="anim-input-label" data-rk-75a992="">{label}</label>
      </div>
    </>
  );
}

export default AnimatedInput;

/* AnimatedInput — ported from astro-component-kit (forms/AnimatedInput.astro) */

.anim-input-wrap:where([data-rk-75a992]) { position: relative; width: 100%; }
.anim-input:where([data-rk-75a992]) { 
  width: 100%; 
  padding: 1.1rem 1rem 0.5rem; 
  font-family: inherit; font-size: 0.95rem; 
  color: var(--c-text-1, #e2e8f0); 
  background: var(--c-bg-elev, rgba(255, 255, 255, 0.04)); 
  border: 1px solid var(--c-border, rgba(255, 255, 255, 0.1)); 
  border-radius: var(--r-md, 12px); box-sizing: border-box; 
  outline: none; transition: border-color 0.25s ease, background 0.25s ease; 
}
.anim-input:where([data-rk-75a992])::placeholder { color: transparent; }
.anim-input:focus:where([data-rk-75a992]) { 
  background: rgba(99, 102, 241, 0.06); 
  border-color: rgba(99, 102, 241, 0.5); 
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12); 
}
.anim-input-label:where([data-rk-75a992]) { 
  position: absolute; top: 0.9rem; left: 1rem; 
  font-size: 0.9rem; color: var(--c-text-2, #64748b); 
  pointer-events: none; transition: top 0.2s ease, font-size 0.2s ease, color 0.2s ease; 
}
.anim-input:focus:where([data-rk-75a992]) ~ .anim-input-label:where([data-rk-75a992]), 
.anim-input:not(:placeholder-shown):where([data-rk-75a992]) ~ .anim-input-label:where([data-rk-75a992]) { 
  top: 0.28rem; font-size: 0.68rem; 
  color: var(--c-primary-light, #818cf8); 
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; 
}