52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollArea"] 55:I[8513,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"ScrollBar"] 53:T1b5a,"use client"; import { ZxcvbnFactory, type OptionsType } from "@zxcvbn-ts/core"; import { CircleCheckIcon, CircleIcon, EyeIcon, EyeOffIcon } from "lucide-react"; import { type ChangeEvent, type ComponentProps, createContext, type ReactNode, useContext, useDeferredValue, useEffect, useMemo, useRef, useState, } from "react"; import type { Input } from "@/components/ui/input"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from "@/components/ui/input-group"; import { cn } from "@/lib/utils"; const PasswordInputContext = createContext<{ password: string } | null>(null); export function PasswordInput({ children, onChange, value, defaultValue, ...props }: Omit, "type"> & { children?: ReactNode; }) { const [showPassword, setShowPassword] = useState(false); const [password, setPassword] = useState(defaultValue ?? ""); const Icon = showPassword ? EyeOffIcon : EyeIcon; const currentValue = value ?? password; const handleChange = (e: ChangeEvent) => { setPassword(e.target.value); onChange?.(e); }; return (

setShowPassword((p) => !p)} > {showPassword ? "Hide password" : "Show password"} {children}

); } export function PasswordInputStrengthChecker({ options, userInputs, threshold = 3, showFeedback = true, onScoreChange, }: { options?: OptionsType; userInputs?: (string | number)[]; threshold?: 0 | 1 | 2 | 3 | 4; showFeedback?: boolean; onScoreChange?: (score: 0 | 1 | 2 | 3 | 4) => void; }) { const [zxcvbn, setZxcvbn] = useState | null>(null); const [errorLoadingOptions, setErrorLoadingOptions] = useState(false); const optionsRef = useRef(options); const onScoreChangeRef = useRef(onScoreChange); onScoreChangeRef.current = onScoreChange; const { password } = usePasswordInput(); const deferredPassword = useDeferredValue(password); const strengthResult = useMemo(() => { if (!zxcvbn || deferredPassword.length === 0) { return { score: 0 as const, feedback: { warning: undefined as string | undefined, suggestions: [] as string[], }, }; } return zxcvbn.check(deferredPassword, userInputs); }, [zxcvbn, deferredPassword, userInputs]); useEffect(() => { const opts = optionsRef.current; if (opts) { if (opts.translations) { setZxcvbn(new ZxcvbnFactory(opts)); } else { import("@zxcvbn-ts/language-en") .then((english) => { setZxcvbn( new ZxcvbnFactory({ translations: english.translations, ...opts, }), ); }) .catch(() => setErrorLoadingOptions(true)); } return; } Promise.all([ import("@zxcvbn-ts/language-common"), import("@zxcvbn-ts/language-en"), ]) .then(([common, english]) => { setZxcvbn( new ZxcvbnFactory({ translations: english.translations, graphs: common.adjacencyGraphs, dictionary: { ...common.dictionary, ...english.dictionary, }, }), ); }) .catch(() => setErrorLoadingOptions(true)); }, []); useEffect(() => { onScoreChangeRef.current?.(strengthResult.score); }, [strengthResult.score]); function getLabel() { if (deferredPassword.length === 0) return "Password strength"; if (!zxcvbn) return "Checking..."; switch (strengthResult.score) { case 0: case 1: return "Very weak"; case 2: return "Weak"; case 3: return "Strong"; case 4: return "Very strong"; default: return "Unknown"; } } const label = getLabel(); const color = strengthResult.score >= threshold ? "bg-primary" : "bg-destructive"; const { warning, suggestions } = strengthResult.feedback; const hasFeedback = showFeedback && deferredPassword.length > 0 && (warning != null || suggestions.length > 0); if (errorLoadingOptions) return null; return (

{([0, 1, 2, 3] as const).map((level) => (

level ? color : "bg-secondary", )} /> ))}

{label}

{hasFeedback && (

{warning &&

{warning}

} {suggestions.map((s, i) => (

{s}

))}

)}

); } export type PasswordRule = { label: string; test: (password: string) => boolean; }; export function PasswordInputRules({ rules }: { rules: PasswordRule[] }) { const { password } = usePasswordInput(); const idle = password.length === 0; return (

{passed ? ( ) : ( )} {rule.label}

); } const usePasswordInput = () => { const context = useContext(PasswordInputContext); if (context == null) { throw new Error( "usePasswordInput must be used within a PasswordInputContext", ); } return context; }; 50:["$","$L52",null,{"files":[{"path":"src/registry/base/password-input/components/password-input.tsx","content":"$53","type":"registry:component","target":"components/ui/password-input.tsx"}]}] 51:["$","section",null,{"className":"flex flex-col gap-4","id":"styles","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Styles"}],["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @4xl:grid-cols-2","children":[["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Light Mode"}],["$","div",null,{"children":["$","$L54",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L55",null,{"orientation":"vertical"}],["$","$L55",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Dark Mode"}],["$","div",null,{"children":["$","$L54",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L55",null,{"orientation":"vertical"}],["$","$L55",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L54",null,{"className":"overflow-auto max-h-80 px-2","children":[["$","$L55",null,{"orientation":"vertical"}],["$","$L55",null,{"orientation":"horizontal"}],["$","p",null,{"className":"text-sm text-foreground/70 py-2","children":"No variables found."}]]}]}]]}],["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","p",null,{"className":"text-sm text-foreground/70 py-2 px-2","children":"No CSS found."}]}]]}]]}]}]]}]

Password Input

Installation

Files

components

Styles