"use client"; import * as React from "react"; import { cn } from "@kineticui/core"; import { CheckIcon, EyeIcon, EyeOffIcon } from "@kineticui/icons"; export type PasswordRule = { label: string; test: (value: string) => boolean }; export const defaultPasswordRules: PasswordRule[] = [ { label: "12+ characters", test: (v) => v.length >= 12 }, { label: "Upper & lowercase", test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v) }, { label: "A number", test: (v) => /\d/.test(v) }, { label: "A symbol (!@#$)", test: (v) => /[^A-Za-z0-9]/.test(v) }, ]; export type PasswordInputProps = Omit, "type"> & { /** Show the strength meter and rule checklist. */ showStrength?: boolean; rules?: PasswordRule[]; invalid?: boolean; }; const labels = ["Too weak", "Weak", "Fair", "Good", "Strong"]; const colors = ["bg-danger", "bg-danger", "bg-warning", "bg-accent", "bg-accent"]; /** Password field with show/hide and an optional live strength meter. */ export const PasswordInput = React.forwardRef( ({ showStrength, rules = defaultPasswordRules, invalid, className, onChange, value, defaultValue, ...props }, ref) => { const [visible, setVisible] = React.useState(false); const [text, setText] = React.useState(String(value ?? defaultValue ?? "")); const current = value !== undefined ? String(value) : text; const passed = rules.filter((r) => r.test(current)).length; const score = current ? Math.max(1, Math.round((passed / rules.length) * 4)) : 0; return (

{ setText(e.target.value); onChange?.(e); }} className={cn("h-full min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-subtle", !visible && current && "tracking-[0.2em]", className)} {...props} />

{showStrength ? ( <>

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

{current ? labels[score] : ""}

{ok ? : null} {r.label}

) : null}

); }, ); PasswordInput.displayName = "PasswordInput";

Password Input

Installation

Exports