4f: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"RegistryDependencies"] 50: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"Installation"] 51: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/2ocpj6i2oorb_.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1r51enyhosz-u.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/3qfn9_v7pj_rb.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/13f5hjswluuex.js","/_next/static/immutable/chunks/0a8eymjz3e95j.js"],"FilesView"] 52:T226f,"use client"; import { useEffect, useMemo, useState } from "react"; import { motion, useReducedMotion } from "motion/react"; const CELL = { type: "spring", stiffness: 520, damping: 34, mass: 0.45 } as const; const CROSSFADE = { type: "spring", stiffness: 260, damping: 34, mass: 0.8 } as const; const INSTANT = { duration: 0 } as const; const COMMON = /^(?:password|passw0rd|qwerty|letmein|welcome|admin|iloveyou|monkey|dragon|abc123|111111|123123|123456)/i; const RUN = /(.)\1{3,}/; const RUN_UP = /(?:0123|1234|2345|3456|4567|5678|6789|abcd|bcde|cdef|defg|qwer|wert|erty|asdf)/i; const SYMBOL = /[!-/:-@[-`{-~]/; export type PasswordRule = { id: string; label: string; test: (value: string) => boolean; }; export type EvaluatedRule = PasswordRule & { met: boolean }; export type UsePasswordStrengthOptions = { rules?: readonly PasswordRule[]; labels?: readonly string[]; announceDelay?: number; formatAnnouncement?: (state: { label: string; guessable: boolean; unmet: readonly EvaluatedRule[] }) => string; }; export type PasswordStrengthState = { score: number; max: number; label: string; rules: EvaluatedRule[]; guessable: boolean; announcement: string; }; export const defaultPasswordRules: readonly PasswordRule[] = [ { id: "length", label: "12 characters or more", test: (v) => v.length >= 12 }, { id: "case", label: "Upper and lower case", test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v), }, { id: "digit", label: "A number", test: (v) => /\d/.test(v) }, { id: "symbol", label: "A symbol", test: (v) => SYMBOL.test(v) }, ]; const defaultLabels = ["Empty", "Weak", "Fair", "Good", "Strong"] as const; export function usePasswordStrength( value: string, { rules = defaultPasswordRules, labels = defaultLabels, announceDelay = 700, formatAnnouncement, }: UsePasswordStrengthOptions = {}, ): PasswordStrengthState { const state = useMemo(() => { const evaluated = rules.map((rule) => ({ ...rule, met: rule.test(value) })); const passed = evaluated.reduce((n, r) => n + (r.met ? 1 : 0), 0); const guessable = value.length > 0 && (COMMON.test(value) || RUN.test(value) || RUN_UP.test(value)); const score = value.length === 0 ? 0 : guessable ? 1 : Math.min(rules.length, Math.max(1, passed)); const label = labels[Math.min(score, labels.length - 1)] ?? ""; const unmet = evaluated.filter((r) => !r.met); const announcement = formatAnnouncement ? value.length === 0 ? "" : formatAnnouncement({ label, guessable, unmet }) : value.length === 0 ? "" : [ `Password strength ${label.toLowerCase()}.`, guessable ? "This is a commonly guessed pattern." : "", unmet.length === 0 ? "All requirements met." : `Still needed: ${unmet.map((r) => r.label.toLowerCase()).join(", ")}.`, ] .filter(Boolean) .join(" "); return { score, max: rules.length, label, rules: evaluated, guessable, announcement }; }, [formatAnnouncement, value, rules, labels]); const [settled, setSettled] = useState(""); useEffect(() => { if (state.announcement === "") { setSettled(""); return; } const id = setTimeout(() => setSettled(state.announcement), announceDelay); return () => clearTimeout(id); }, [state.announcement, announceDelay]); return { ...state, announcement: settled }; } export type PasswordStrengthProps = { value: string; rules?: readonly PasswordRule[]; labels?: readonly string[]; announceDelay?: number; showRules?: boolean; className?: string; meterLabel?: string; guessableLabel?: string; metLabel?: string; notMetLabel?: string; formatAnnouncement?: UsePasswordStrengthOptions["formatAnnouncement"]; }; const TONES = { none: { bar: "bg-stone-300 dark:bg-white/20", text: "text-stone-500 dark:text-stone-400" }, danger: { bar: "bg-red-500", text: "text-red-600 dark:text-red-400" }, caution: { bar: "bg-amber-500", text: "text-amber-600 dark:text-amber-400" }, safe: { bar: "bg-emerald-500", text: "text-emerald-600 dark:text-emerald-400" }, } as const; function toneFor(score: number, max: number) { if (score === 0) return TONES.none; const ratio = score / max; if (ratio <= 0.34) return TONES.danger; if (ratio <= 0.67) return TONES.caution; return TONES.safe; } export function PasswordStrength({ value, rules = defaultPasswordRules, labels = defaultLabels, announceDelay = 700, showRules = true, className = "", meterLabel = "Password strength", guessableLabel = "Commonly guessed", metLabel = "met", notMetLabel = "not met", formatAnnouncement, }: PasswordStrengthProps) { const { score, max, label, rules: evaluated, guessable, announcement, } = usePasswordStrength(value, { rules, labels, announceDelay, formatAnnouncement }); const reduced = useReducedMotion(); const tone = toneFor(score, max); return (

{Array.from({ length: max }, (_, i) => (

))}

{labels.map((text, i) => ( {text} ))} {guessableLabel}

{showRules && (

{rule.label} {rule.met ? metLabel : notMetLabel}

)}

{announcement}

); } 4b:["$","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","motion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}]]}],["$","$L4f",null,{"registryDependencies":[]}]]}],["$","$L50",null,{"sourceUrl":"https://motion-lexicon.pages.dev/r/password-strength.json","proxyUrl":"https://shadcnregistry.com/r/motion-lexicon/password-strength","itemId":"@motion-lexicon/password-strength"}],["$","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"}],["$","$L51",null,{"files":[{"path":"src/registry/components/password-strength.tsx","content":"$52","type":"registry:ui","target":"components/motion-lexicon/password-strength.tsx"}]}]]}],"$L53"]}]

Password Strength

Installation

Files

components

Styles