77:I[8513,["/_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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"],"ScrollBar"] 84: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.443 0.11 240.79)"}}],["$","p",null,{"children":"oklch(0.443 0.11 240.79)"}]]}] 65:["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.508 0.118 165.612)"}}],["$","p",null,{"children":"oklch(0.508 0.118 165.612)"}]]}]}]]}] 66:["$","div","success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.985 0 0)"}}],["$","p",null,{"children":"oklch(0.985 0 0)"}]]}]}]]}] 67:["$","div","success-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.432 0.095 166.913)"}}],["$","p",null,{"children":"oklch(0.432 0.095 166.913)"}]]}]}]]}] 68:["$","div","warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#f59200"}]]}] 69:["$","div","warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.3 0.07 60)"}}],["$","p",null,{"children":"oklch(0.3 0.07 60)"}]]}]}]]}] 6a:["$","div","warning-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","warning-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#964e00"}]]}] 6b:["$","div","duration-fast",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","duration-fast",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"160ms"}]]}] 6c:["$","div","duration-standard",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","duration-standard",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"240ms"}]]}] 6d:["$","div","duration-considered",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","duration-considered",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"480ms"}]]}] 6e:["$","div","ease-standard",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ease-standard",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"cubic-bezier(0.2, 0, 0, 1)"}]]}] 6f:["$","div","ease-enter",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ease-enter",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"cubic-bezier(0, 0, 0, 1)"}]]}] 70:["$","div","ease-exit",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ease-exit",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"cubic-bezier(0.3, 0, 1, 1)"}]]}] 71:["$","div","ease-spring",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","ease-spring",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"linear(0, 0.071 4%, 0.234 8%, 0.433 12%, 0.626 17%, 0.791 21%, 0.917 25%, 1.004 29%, 1.055 33%, 1.079 38%, 1.083 42%, 1.075 46%, 1.06 50%, 1.043 54%, 1.027 58%, 1.015 62%, 1.005 67%, 0.998 71%, 0.995 75%, 0.993 79%, 0.993 83%, 0.994 88%, 0.995 92%, 0.997 96%, 1)"}]]}] 72:["$","$L77",null,{"orientation":"horizontal"}] 73:["$","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":["$","$L63",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","destructive-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","destructive-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0 0)"}}],["$","p",null,{"children":"oklch(0.2 0 0)"}]]}]}]]}],["$","div","destructive-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","destructive-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"#ff8a5c"}]]}],["$","div","info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.685 0.169 237.323)"}}],["$","p",null,{"children":"oklch(0.685 0.169 237.323)"}]]}]}]]}],["$","div","info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0 0)"}}],["$","p",null,{"children":"oklch(0.2 0 0)"}]]}]}]]}],["$","div","info-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","info-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.746 0.16 232.661)"}}],["$","p",null,{"children":"oklch(0.746 0.16 232.661)"}]]}]}]]}],["$","div","success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.696 0.17 162.48)"}}],["$","p",null,{"children":"oklch(0.696 0.17 162.48)"}]]}]}]]}],["$","div","success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":["$","div",null,{"className":"flex items-center gap-2","children":[["$","div",null,{"className":"size-4 flex-shrink-0","style":{"backgroundColor":"oklch(0.2 0.04 160)"}}],["$","p",null,{"children":"oklch(0.2 0.04 160)"}]]}]}]]}],["$","div","success-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","success-text",":"]}]}],"$L78"]}],"$L79","$L7a","$L7b"]}],"$L7c"]}]}]]}] 74:["$","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":["$","$L63",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","color-destructive-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-destructive-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--destructive-foreground)"}]]}],["$","div","color-destructive-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-destructive-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--destructive-text)"}]]}],["$","div","color-info",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--info)"}]]}],["$","div","color-info-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--info-foreground)"}]]}],["$","div","color-info-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-info-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--info-text)"}]]}],["$","div","color-success",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--success)"}]]}],["$","div","color-success-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--success-foreground)"}]]}],["$","div","color-success-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-success-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--success-text)"}]]}],["$","div","color-warning",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--warning)"}]]}],["$","div","color-warning-foreground",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","color-warning-foreground",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"var(--warning-foreground)"}]]}],["$","div","color-warning-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":["$L7d","$L7e"]}],"$L7f","$L80","$L81","$L82"]}],"$L83"]}]}]]}] 75:null 85:T3c85,"use client" import * as React from "react" import { Check, Eye, EyeOff } from "lucide-react" import { countSignificant, inputFormatter, type CardBrand, type InputFormat } from "./lib/input-format" import { useLocale } from "./lib/locale" import { cn } from "./lib/utils" import { FieldWrapper, joinIds, splitFieldProps, useFieldControl, type FieldClassNames, type FieldOwnProps } from "./field" type InputProps = Omit, "prefix"> & FieldOwnProps & { /** Shown inside the field before the text: an icon, or text such as "https://" or "$". */ prefix?: React.ReactNode /** Shown inside the field after the text: an icon, a unit, or a button such as a password toggle. */ suffix?: React.ReactNode /** Drops the border, background and focus ring, for an input styled entirely by you. */ unstyled?: boolean /** With type="password": a button at the end that shows and hides the password. On by default. */ revealable?: boolean /** * With type="password": a meter under the box saying how strong the password is (weak, fair, good, strong), from * how many of the rules it meets. "rules" also lists the rules, each ticked as it's met. Neutral until something is * typed. */ strength?: boolean | "rules" /** With strength: your own rules in place of the built-in ones (8 characters, upper and lower case, a number, a symbol). */ passwordRules?: PasswordRule[] /** * Formats as you type: "card", "phone", "date", "expiry", "time", "number" ({ type: "number", decimals: 2 } for * decimals) or { pattern: "##.###.###.#-###.###" } (# a digit, A a letter). The caret stays where you're typing. * value and onChange carry the text as shown; onValueChange gets the raw value too. */ format?: InputFormat /** With format: the raw value ("4242424242424242", "1234.5"), the text as shown, and a card's brand. */ onValueChange?: (raw: string, details: { formatted: string; brand?: CardBrand }) => void /** Classes for each part. className styles the box you see: the input, or the box around it and its affixes. */ classNames?: FieldClassNames & { wrapper?: string; input?: string; prefix?: string; suffix?: string } } /** A rule a password meets or doesn't, with what it's called in the list. */ type PasswordRule = { label: string; test: (password: string) => boolean } const boxClass = "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] md:text-sm" const textClass = "outline-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground" // readOnly reads as such: a quiet box and muted text, so nobody tries to type in it (it still focuses, selects and // copies). By the attribute, not :read-only, which a file input matches too. const readOnlyClass = "[&[readonly]]:bg-muted/50 [&[readonly]]:text-muted-foreground" /** * A text field. On its own it's a plain input; give it a label, description or error and it becomes a whole field, * with the ids and aria attributes wired up. prefix and suffix put icons, text or buttons inside the box. */ function Input(props: InputProps) { const [field, control] = splitFieldProps(props) return ( ) } const autoCompletes: Partial> = { card: "cc-number", expiry: "cc-exp", phone: "tel" } /** The input's props with formatting wired in: the shown value, the keyboard and autofill hints, and onChange. */ function useFormat( format: InputFormat | undefined, onValueChange: InputProps["onValueChange"], props: React.ComponentProps<"input"> ): React.ComponentProps<"input"> { const { locale } = useLocale() const key = JSON.stringify(format ?? null) // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed by the format's contents, so an inline object is fine const formatter = React.useMemo(() => (format ? inputFormatter(format, locale) : null), [key, locale]) // The text before the latest keystroke, to tell a deleted separator from a deleted character. const before = React.useRef("") if (!formatter || !format) return props const numeric = format === "number" || (typeof format === "object" && "type" in format) const show = (value: unknown) => (value === undefined || value === null ? undefined : formatter.format(String(value)).text) return { ...props, value: show(props.value), defaultValue: show(props.defaultValue), inputMode: props.inputMode ?? (numeric ? (typeof format === "object" && "type" in format && format.decimals ? "decimal" : "numeric") : typeof format === "object" ? undefined : "numeric"), autoComplete: props.autoComplete ?? (typeof format === "string" ? autoCompletes[format] : undefined), onKeyDown(event) { before.current = event.currentTarget.value props.onKeyDown?.(event) }, onChange(event) { const input = event.currentTarget const typed = input.value const caret = input.selectionStart ?? typed.length let head = typed.slice(0, caret) let text = typed // Backspace on a separator ("4242 |4242"): delete the character before it as well, or nothing would change. const { significant } = formatter if ( (event.nativeEvent as InputEvent).inputType === "deleteContentBackward" && typed.length < before.current.length && countSignificant(typed, significant) === countSignificant(before.current, significant) ) { let i = head.length - 1 while (i >= 0 && !significant.test(head[i]!)) i-- if (i >= 0) { head = head.slice(0, i) text = head + typed.slice(caret) } } const result = formatter.format(text) if (input.value !== result.text) input.value = result.text if (document.activeElement === input) { const at = formatter.caret(head, result.text) input.setSelectionRange(at, at) } before.current = result.text onValueChange?.(result.raw, { formatted: result.text, brand: result.brand }) props.onChange?.(event) }, } } function InputControl({ prefix, suffix: suffixProp, unstyled, revealable = true, strength, passwordRules, format, onValueChange, className, classNames, ...rest }: Omit) { const { type: typeProp, ...fieldProps } = useFieldControl(rest) const meterId = React.useId() const showMeter = Boolean(strength) && typeProp === "password" // The password as it's typed, for the meter: the value when controlled, otherwise followed through onChange. const [typed, setTyped] = React.useState(String(fieldProps.defaultValue ?? "")) const password = fieldProps.value !== undefined ? String(fieldProps.value) : typed if (showMeter) { const { onChange } = fieldProps fieldProps.onChange = (event) => { setTyped(event.target.value) onChange?.(event) } fieldProps["aria-describedby"] = joinIds(fieldProps["aria-describedby"], meterId) } const props = useFormat(format, onValueChange, fieldProps) const { t } = useLocale() const [revealed, setRevealed] = React.useState(false) const reveal = typeProp === "password" && revealable const type = reveal && revealed ? "text" : typeProp // The password's show/hide button, after any suffix of your own. It keeps the caret where it was. const suffix = reveal ? ( <> {suffixProp} ) : ( suffixProp ) const meter = showMeter ? : null if (!prefix && !suffix) { const box = ( ) return meter ? ( <> {box} {meter} ) : ( box ) } const affixClass = "flex h-full shrink-0 items-center gap-1.5 text-muted-foreground transition-colors select-none group-focus-within/input:text-foreground group-has-[[aria-invalid=true]]/input:text-destructive-text [&_svg]:size-4 [&_svg]:shrink-0" const box = (

{ const target = event.target as HTMLElement if (target.closest("input, button, a, [tabindex]")) return event.preventDefault() event.currentTarget.querySelector("input")?.focus() }} className={cn( "group/input cursor-text items-center", !unstyled && [ boxClass, "focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/15", "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/15", "data-disabled:cursor-not-allowed data-disabled:opacity-50", "has-[input[readonly]]:bg-muted/50 has-[input[readonly]]:text-muted-foreground", ], className, classNames?.wrapper )} > {prefix && ( {prefix} )} {suffix && ( {suffix} )}

) return meter ? ( <> {box} {meter} ) : ( box ) } // The four steps of the meter: how many segments fill, in which color, and what it's called. Every class is written out // in full so Tailwind finds it. const levels = [ { key: "passwordWeak", fill: "bg-destructive", text: "text-destructive-text" }, { key: "passwordFair", fill: "bg-warning", text: "text-warning-text" }, { key: "passwordGood", fill: "bg-info", text: "text-info-text" }, { key: "passwordStrong", fill: "bg-success", text: "text-success-text" }, ] as const /** * How strong a password is: four segments that fill and change color as it meets more rules, with the level's name, * and optionally the rules ticked off. Neutral (grey, no name) while it's empty, so it never scolds before anyone types. */ function PasswordStrength({ id, password, rules: rulesProp, listRules }: { id: string; password: string; rules?: PasswordRule[]; listRules: boolean }) { const { t } = useLocale() const rules = rulesProp ?? [ { label: t("ruleLength", { count: 8 }), test: (p: string) => p.length >= 8 }, { label: t("ruleCase"), test: (p: string) => /\p{Ll}/u.test(p) && /\p{Lu}/u.test(p) }, { label: t("ruleNumber"), test: (p: string) => /\p{Nd}/u.test(p) }, { label: t("ruleSymbol"), test: (p: string) => /[^\p{L}\p{Nd}\s]/u.test(p) }, ] const met = rules.map((rule) => rule.test(password)) const passed = met.filter(Boolean).length // Rules met, spread over the four levels (with four rules, one level each); at least "weak" once anything is typed. const level = password ? Math.max(0, Math.ceil((passed / rules.length) * levels.length) - 1) : -1 const current = level >= 0 ? levels[level]! : null return (

{/* The meter spans the field's width; the level's name and the rules sit under it, so nothing narrows it. */}

{levels.map((step, i) => ( ))}

{listRules ? (

{rule.label} {met[i] ? t("ruleMet") : t("ruleNotMet")}

) : ( )} {/* Always there, so the field doesn't grow when the first letter is typed; announced politely as it changes. */} {current && ( <> {t("passwordStrength")}: {t(current.key)} )}

) } export { Input, type InputProps, type PasswordRule } 76:["$","$L84",null,{"files":[{"path":"registry/dashral/input.tsx","content":"$85","type":"registry:file","target":"components/dashral/input.tsx"}],"className":"h-[70svh] min-h-80"}]