50:I[707087,["/_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"],"RegistryDependencies"] 51:I[512940,["/_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"],"Installation"] 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"] 53:T14b4,'use client'; // shaadcn hover card import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/website/ui/hover-card'; import { Check, CheckCheck, Eye, EyeOff, Info, X } from 'lucide-react'; import React, { useMemo, useState } from 'react'; // Constants const PASSWORD_REQUIREMENTS = [ { regex: /.{8,}/, text: 'At least 8 characters' }, { regex: /[0-9]/, text: 'At least 1 number' }, { regex: /[a-z]/, text: 'At least 1 lowercase letter' }, { regex: /[A-Z]/, text: 'At least 1 uppercase letter' }, { regex: /[!-/:-@[-`{-~]/, text: 'At least 1 special characters' }, ] as const; type StrengthScore = 0 | 1 | 2 | 3 | 4 | 5; const STRENGTH_CONFIG = { colors: { 0: 'text-red-500', 1: 'text-orange-500', 2: 'text-yellow-500', 3: 'text-green-500', 4: 'text-amber-700', 5: 'text-emerald-500', } satisfies Record, texts: { 0: 'Enter a password', 1: 'Weak password', 2: 'Medium password!', 3: 'Strong password!!', 4: 'Very Strong password!!!', } satisfies Record, string>, } as const; // Types type Requirement = { met: boolean; text: string; }; type PasswordStrength = { score: StrengthScore; requirements: Requirement[]; }; const PasswordInput = () => { const [password, setPassword] = useState(''); const [isVisible, setIsVisible] = useState(false); const calculateStrength = useMemo((): PasswordStrength => { const requirements = PASSWORD_REQUIREMENTS.map((req) => ({ met: req.regex.test(password), text: req.text, })); return { score: requirements.filter((req) => req.met).length as StrengthScore, requirements, }; }, [password]); return (

Password

{req.met ? ( ) : ( )} {req.text} {req.met ? ' - Requirement met' : ' - Requirement not met'}

setPassword(e.target.value)} placeholder='Password' aria-invalid={calculateStrength.score < 4} aria-describedby='password-strength' className='w-full p-2 border-2 rounded-md dark:bg-neutral-950 bg-neutral-50 outline-hidden focus-within:border-blue-700 transition' />

= 1 ? 'bg-green-200' : 'bg-border' } p-1 rounded-full w-full`} > = 2 ? 'bg-green-300' : 'bg-border' } p-1 rounded-full w-full`} > = 3 ? 'bg-green-400' : 'bg-border' } p-1 rounded-full w-full`} > = 4 ? 'bg-green-500' : 'bg-border' } p-1 rounded-full w-full`} > = 5 ? 'bg-green-600' : 'bg-border' } p-1 rounded-full w-full`} >

); }; export default PasswordInput; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://ui-layouts.com/r/pass-strength-hover-indicator.json","proxyUrl":"https://shadcnregistry.com/r/ui-layouts/pass-strength-hover-indicator","itemId":"@ui-layouts/pass-strength-hover-indicator"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"./registry/components/form/password/pass-strength-hover-indicator.tsx","content":"$53","type":"registry:component"}]}]]}],"$L54"]}]

Pass Strength Hover Indicator

Installation

Files

components

Styles