52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54: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}

); } 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L52",null,{"namespace":"@motion-lexicon","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/components/password-strength.tsx","content":"$54","type":"registry:ui","target":"components/motion-lexicon/password-strength.tsx"}],"className":"h-[70svh] min-h-80"}]]}]