Floating label input

import { useState } from "react";
import { motion } from "framer-motion";

interface FloatingLabelInputProps {
  color?: string;
  size?: number;
  label?: string;
  type?: string;
  value?: string;
  defaultValue?: string;
  onChange?: (value: string) => void;
}

export default function FloatingLabelInput({
  color = "#0071e3",
  size = 48,
  label = "Email",
  type = "text",
  value,
  defaultValue = "",
  onChange,
}: FloatingLabelInputProps) {
  const [internal, setInternal] = useState(defaultValue);
  const [focused, setFocused] = useState(false);
  const current = value ?? internal;
  const up = focused || current.length > 0;

  return (
    <div className="relative w-64">
      <input
        type={type}
        aria-label={label}
        value={current}
        onChange={(e) => {
          if (value === undefined) setInternal(e.target.value);
          onChange?.(e.target.value);
        }}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        className="w-full rounded-[14px] border bg-white px-3 outline-none transition-colors dark:bg-[#1c1c1e]"
        style={{
          height: size,
          fontSize: size / 3.2,
          borderColor: focused ? color : "oklch(1 0 0 / 14%)",
          boxShadow: focused ? `0 0 0 3px ${color}22` : "none",
        }}
      />
      <motion.label
        className={`pointer-events-none absolute left-3 px-1 ${up ? "bg-white dark:bg-[#1c1c1e]" : "bg-transparent"}`}
        animate={{
          top: up ? -8 : size / 2 - size / 6.4,
          fontSize: up ? 11 : size / 3.2,
          color: up ? color : "oklch(0.62 0.015 260)",
        }}
        transition={{ duration: 0.16 }}
      >
        {label}
      </motion.label>
    </div>
  );
}