"use client";

import { useMemo, useState } from "react";
import { cn } from "@/lib/classes";

import "./placeholder-animation-style.css";

interface InputProps extends React.ComponentProps<"input"> {
  startIcon?: React.ReactNode;
  endIcon?: React.ReactNode;
}

type InputState = "idle" | "filled";

export function Input({
  className,
  placeholder,
  onChange,
  type = "text",
  startIcon,
  endIcon,
  ...props
}: InputProps) {
  const [fieldState, setFieldState] = useState<InputState>("idle");
  const [showPassword, setShowPassword] = useState(false);

  const computeType = useMemo(() => {
    if (type === "password" && showPassword) {
      return "text";
    }
    return type;
  }, [type, showPassword]);

  return (
    <div
      data-filled={fieldState === "filled"}
      className={cn(
        "relative inline-flex h-11 max-w-full w-full items-center overflow-hidden rounded-xl border border-[#e8e9e3] dark:border-[#2e2f28] shadow-1 bg-[#f5f5f4] dark:bg-[#0f0f0e] focus-within:border-black/20 data-[filled=true]:border-black/20 dark:focus-within:border-white/20 dark:data-[filled=true]:border-white/20 [transition:border-color_150ms_ease-out]",
        "has-disabled:opacity-80 has-disabled:*:cursor-not-allowed has-disabled:pointer-events-none",
        "[&_.start-icon]:text-black/70 dark:[&_.start-icon]:text-white/70 [&_.start-icon>svg]:size-4.5 [&_.end-icon]:text-black/70 dark:[&_.end-icon]:text-white/70 [&_.end-icon>svg]:size-4.5",
        className
      )}
    >
      {startIcon && (
        <div className="absolute left-3 top-1/2 -translate-y-1/2 start-icon">
          {startIcon}
        </div>
      )}
      <input
        {...props}
        className={cn(
          "h-full flex-1 bg-transparent px-3 py-2 caret-black/70 dark:caret-white/70 outline-none placeholder:sr-only font-normal text-sm",
          (type === "password" || endIcon) && "pr-10",
          startIcon && "pl-10"
        )}
        placeholder={placeholder}
        onChange={(event) => {
          setFieldState(event.target.value.length > 0 ? "filled" : "idle");
          onChange?.(event);
        }}
        type={computeType}
      />
      <span
        data-mounted={fieldState === "filled"}
        className={cn(
          "absolute pointer-events-none left-3 text-sm/5.5 text-black/50 dark:text-white/50 input-placeholder-animation",
          startIcon && "left-10"
        )}
      >
        {placeholder}
      </span>

      {endIcon && type !== "password" && (
        <div className="absolute right-3 top-1/2 -translate-y-1/2 end-icon">
          {endIcon}
        </div>
      )}

      {type === "password" && (
        <button
          aria-label="Reveal Password"
          data-revealed={showPassword}
          className="data-[revealed=true]:[--eye-delay:0s] data-[revealed=true]:[--eye:0] data-[revealed=true]:[--strike-delay:0s] data-[revealed=true]:[--strike:24] cursor-pointer absolute right-3 top-1/2 -translate-y-1/2 [&>svg]:stroke-black/70 dark:[&>svg]:stroke-white/70"
          disabled={props.disabled}
          onClick={() => {
            setShowPassword((prev) => !prev);
          }}
        >
          <EyeIcon />
        </button>
      )}
    </div>
  );
}

const EyeIcon = () => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke="currentColor"
    width={22}
    height={22}
  >
    <circle
      cx="12"
      cy="12"
      r="3"
      style={{
        strokeDasharray: 24,
        strokeDashoffset: "var(--eye, 24)",
        transition:
          "stroke-dashoffset 0.6s cubic-bezier(.25, .46, .45, .94) var(--eye-delay, 0s)",
      }}
    />
    <path
      strokeLinecap="round"
      strokeLinejoin="round"
      strokeWidth={2}
      d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
    />
    <line
      x1="4"
      y1="4"
      x2="20"
      y2="20"
      style={{
        strokeDasharray: 24,
        strokeDashoffset: "var(--strike, 0)",
        transition:
          "stroke-dashoffset 0.45s cubic-bezier(.25, .46, .45, .94) var(--strike-delay, 0s)",
      }}
    />
  </svg>
);
Placeholder Animation Input

Installation

Usage

Input password

Input with icons

Installation

Usage

Input password

Input with icons
