bigblocks
Version:
Complete Bitcoin UI component library - authentication, social, wallet, market, inscriptions, and blockchain interactions for React
20 lines (19 loc) • 2.38 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";
import React from "react";
import { cn } from "../../lib/utils";
import { Button } from "../ui/button";
import { Input } from "../ui/input";
import { Label } from "../ui/label";
export function PasswordInput({ label = "Password", value, onChange, placeholder = "Enter your password", disabled = false, required = true, minLength = 8, showHint = false, hintText, autoComplete = "current-password", hasError = false, autoFocus = false, className = "", size = "default", id, onVisibilityChange, defaultVisible = false, }) {
const [isVisible, setIsVisible] = React.useState(defaultVisible);
const [isFocused, setIsFocused] = React.useState(false);
const inputId = id || `password-input-${Math.random().toString(36).substr(2, 9)}`;
const handleVisibilityToggle = () => {
const newVisibility = !isVisible;
setIsVisible(newVisibility);
onVisibilityChange?.(newVisibility);
};
return (_jsxs("div", { className: cn("space-y-2 w-full", className), children: [label && (_jsx(Label, { htmlFor: inputId, className: "text-sm font-medium", children: label })), _jsxs("div", { className: "relative", children: [_jsx(Input, { id: inputId, type: isVisible ? "text" : "password", value: value, onChange: (e) => onChange(e.target.value), onFocus: () => setIsFocused(true), onBlur: () => setIsFocused(false), placeholder: placeholder, required: required, disabled: disabled, autoComplete: autoComplete, autoFocus: autoFocus, className: cn("pr-10", hasError && "border-destructive focus:ring-destructive") }), _jsxs(Button, { type: "button", onClick: handleVisibilityToggle, disabled: disabled, variant: "ghost", size: "icon", className: cn("absolute right-0 top-0 h-10 w-10 hover:bg-transparent", !isFocused && "text-muted-foreground", isFocused && isVisible && "text-accent-foreground", isFocused && !isVisible && "text-secondary-foreground"), children: [isVisible ? (_jsx(EyeOpenIcon, { className: "h-4 w-4" })) : (_jsx(EyeClosedIcon, { className: "h-4 w-4" })), _jsx("span", { className: "sr-only", children: isVisible ? "Hide password" : "Show password" })] })] }), showHint && (_jsx("p", { className: "text-xs text-muted-foreground", children: hintText || `Minimum ${minLength} characters` }))] }));
}