"use client"; import React, { useState } from "react"; import { motion, AnimatePresence, HTMLMotionProps } from "framer-motion"; import { Eye, EyeOff, Check, Lock, X } from "lucide-react"; // --- TYPES --- export type StrengthAccentColor = "orange" | "indigo" | "emerald"; export interface PasswordStrengthMeterProps extends Omit, "ref" | "children" | "onChange"> { label?: string; accent?: StrengthAccentColor; value?: string; onChange?: (val: string) => void; /** React 19 native ref support */ ref?: React.Ref; } /** * Password Strength Meter Pro (v2.1 Ultra) * A high-end bimodal component featuring dynamic strength calculations and tactile feedback. * Optimized for React 19 and Tailwind JIT compiler safety. */ export const PasswordStrengthMeter = ({ label = "New Password", accent = "orange", className, value, onChange, ref, ...props }: PasswordStrengthMeterProps) => { const [isFocused, setIsFocused] = useState(false); const [isVisible, setIsVisible] = useState(false); const [internalValue, setInternalValue] = useState(""); const password = value !== undefined ? value : internalValue; const handleInputChange = (e: React.ChangeEvent) => { if (value === undefined) setInternalValue(e.target.value); if (onChange) onChange(e.target.value); }; const requirements = [ { id: "length", text: "At least 8 characters", regex: /.{8,}/ }, { id: "uppercase", text: "One uppercase letter", regex: /[A-Z]/ }, { id: "number", text: "One number", regex: /[0-9]/ }, { id: "special", text: "One special character", regex: /[^A-Za-z0-9]/ }, ]; const calculateScore = (pass: string) => { if (!pass) return 0; return requirements.reduce((score, req) => (req.regex.test(pass) ? score + 1 : score), 0); }; const score = calculateScore(password); // Safe Color Mapping for Tailwind JIT const themeMaps: Record = { orange: { border: "focus-within:border-orange-500", ring: "focus-within:ring-orange-500/20", text: "text-orange-500", bar: "bg-orange-500", icon: "text-orange-500" }, indigo: { border: "focus-within:border-indigo-500", ring: "focus-within:ring-indigo-500/20", text: "text-indigo-500", bar: "bg-indigo-500", icon: "text-indigo-500" }, emerald: { border: "focus-within:border-emerald-500", ring: "focus-within:ring-emerald-500/20", text: "text-emerald-500", bar: "bg-emerald-500", icon: "text-emerald-500" } }; const currentTheme = themeMaps[accent]; const strengthLabels = ["Very Weak", "Weak", "Fair", "Good", "Strong"]; // Bar Color Logic const getBarColor = (index: number) => { if (score < index) return "bg-neutral-200 dark:bg-neutral-800"; if (score <= 1) return "bg-rose-500"; if (score === 2) return currentTheme.bar; if (score === 3) return "bg-amber-400"; return "bg-emerald-500"; }; const isFloating = isFocused || password.length > 0; return (

{/* INPUT FIELD CONTAINER */}

{label}

setIsFocused(true)} onBlur={() => setIsFocused(false)} className="w-full h-16 pl-11 pr-12 pt-6 pb-2 text-base font-bold text-neutral-900 dark:text-white bg-transparent outline-none border-none placeholder-transparent" />

{/* STRENGTH METER BARS */}

{[1, 2, 3, 4].map((index) => (

= index ? "100%" : "0%" }} className={`h-full transition-colors duration-500 ${getBarColor(index)}`} />

))}

0 ? (score === 1 ? "text-rose-500" : score === 2 ? currentTheme.text : score === 3 ? "text-amber-500" : "text-emerald-500") : "text-neutral-400"}`} > {strengthLabels[score]}

{/* DYNAMIC REQUIREMENTS CHECKLIST */}

{requirements.map((req) => { const isMet = req.regex.test(password); return (

{isMet ? ( ) : ( )}

{req.text}

); })}

); }; // ========================================== // DEMO // ========================================== export default function PasswordStrengthDemo() { const [pass, setPass] = useState(""); return (

); }