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:T40d7,"use client"; import { forwardRef, useRef, useState } from "react"; import type { ChangeEvent, ComponentPropsWithoutRef, MouseEvent, ReactNode } from "react"; import { cn } from "../../utils"; import { useField } from "../../internals/field"; import { mergeIds } from "../../internals/merge-ids"; import { useFancyId } from "../../internals/use-id"; import { useComposedRefs } from "../../internals/dom/use-composed-refs"; import { useIsomorphicLayoutEffect } from "../../internals/dom/ssr"; import { preset } from "../../internals/motion/transitions"; import { prefersReducedMotion } from "../../internals/motion/anchored"; import { DURATIONS } from "../../internals/motion/tokens"; import { usePresence } from "../../internals/motion/presence"; import { useSoundCue } from "../../sound/use-sound"; import "./password-input.css"; /** Result of scoring a password's strength. */ export interface PasswordStrengthResult { /** 0 = very weak, 4 = strongest. The bars fill left to right by this count. */ score: 0 | 1 | 2 | 3 | 4; /** Carries the actual meaning — see the component README on why colour alone never does. */ label: string; } export interface PasswordInputOwnProps { /** * Current value. Controlled when supplied: pair it with `onValueChange`, * the React counterpart of the Svelte source's `bind:value`. */ value?: string; /** Initial value when uncontrolled (no `value` prop given). */ defaultValue?: string; /** Called with the new value on every input event. */ onValueChange?: (value: string) => void; /** Shown while the field is empty. */ placeholder?: string; /** Blocks focus and typing; excluded from form submission. Overridden by a surrounding FormField. */ disabled?: boolean; /** Blocks typing but stays focusable and is still submitted, unlike `disabled`. */ readonly?: boolean; /** Native `required`. Overridden by a surrounding FormField. */ required?: boolean; /** Drives the error border and `aria-invalid`. Overridden by a surrounding FormField. */ invalid?: boolean; /** Element id. Overridden by a surrounding FormField's own `controlId`. */ id?: string; /** Native `name`, read on form submission. */ name?: string; /** Accessible name — for a control with no visible Label next to it. */ label?: string; /** Native `autocomplete` hint. `"new-password"` opts a password manager into offering to generate one. */ autocomplete?: "current-password" | "new-password" | "off"; /** Renders the show/hide toggle button. Defaults to `true`. */ showToggle?: boolean; /** Renders the strength meter and label once there's a value. Defaults to `false`. */ showStrength?: boolean; /** Overrides the built-in heuristic scorer — see the README before trusting the default one. */ strength?: (value: string) => PasswordStrengthResult; /** Additional CSS classes, merged onto the root field surface (not the bare ``). */ className?: string; /** * Plays the matching interface cue through the sound controller. Off by * default; only audible once the user has enabled sound. */ sound?: boolean; } /** * Own props plus every native `` attribute and listener; the rest are * spread onto the inner `` (see the component README for the rules). */ export interface PasswordInputProps extends Omit, keyof PasswordInputOwnProps | "type">, PasswordInputOwnProps {} // The reveal toggle swaps one 16px glyph for another in place. A hard cut // at that scale reads as a flicker, so the two icons cross-fade over // `micro` (80ms) — a beat that only registers as a beat. // // This is the one bidirectional transition in this pass, and it earns it: // a cross-fade needs both layers mounted at once, which an enter-only // animation cannot give. It is safe because nothing observes the icon's // unmount — `aria-label` and `aria-pressed` live on the )} {result && (

{/* `ft-password-strength-bar` is a styling hook, not a state class: every segment carries it at every tier, so the colour transition in the stylesheet has one selector to attach to instead of four. */} {result.label}

)} ); } ); PasswordInput.displayName = "PasswordInput"; 55:Ta36,/* * The brand accent has no semantic token, so it is declared locally with a * light-dark() fallback — the same shape Input and Textarea use for their * own accent ring. The ring lives on the wrapper via :focus-within rather * than on the bare input, because the input itself has no border or * background of its own here — the wrapper is the visual field surface. */ .ft-password-input:focus-within { --ft-field-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); border-color: var(--ft-field-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ft-field-accent) 25%, transparent); } /* * `--ft-status-done` is the family's "operation landed"/success * vocabulary — the same token FormField, CopyButton, ToolCall and others * read for their own success state. Reusing it here (fallback hue * included, not a fresh literal) means a strong-password cue sitting near * any of those on the same page reads as one palette. */ .ft-password-strength-bar--strong { background: var(--ft-status-done, light-dark(oklch(0.5 0.14 145), oklch(0.72 0.15 145))); } /* * Deliberately NOT inside `@media (prefers-reduced-motion: no-preference)`: * a colour change is not motion, nothing here travels or scales, and gating * it would make a tier change snap for exactly the users who asked for a * calmer interface. The meter is the one part of this component that * restates itself on every keystroke, so easing the colour is what keeps a * password crossing a tier boundary from reading as a flash. * * `background-color`, not `width` or `scaleX`: the bars are a four-segment * meter, and growing them would read as a progress bar filling rather than * a tier changing. * * 150ms = tokens.DURATIONS.fast, cubic-bezier(0.4, 0, 0.2, 1) = * tokens.EASINGS.inout — a reversible state flip, since a tier can go back * down as easily as up. */ .ft-password-strength-bar { transition: background-color var(--ft-password-strength-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-inout, cubic-bezier(0.4, 0, 0.2, 1)); } /* * The reveal toggle's two icon layers share one grid cell, so both can be * mounted during the cross-fade without either one moving the other or * changing the button's width mid-swap. `grid-area: 1 / 1` is what makes * the overlap free: the wrapper sizes to the larger of the two glyphs (they * are the same 16px box) and stays that size whether one layer is mounted * or two. */ .ft-password-input-eye { display: grid; } .ft-password-input-eye-layer { grid-area: 1 / 1; display: inline-flex; } 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":[null,["$","$L52",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals.json","https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/internals-motion.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"react/src/components/password-input/PasswordInput.tsx","content":"$54","type":"registry:ui","target":"@ui/fancy/components/password-input/PasswordInput.tsx"},{"path":"react/src/components/password-input/index.ts","content":"\"use client\";\n\nexport { PasswordInput } from \"./PasswordInput\";\nexport type { PasswordInputProps, PasswordStrengthResult } from \"./PasswordInput\";\n","type":"registry:ui","target":"@ui/fancy/components/password-input/index.ts"},{"path":"react/src/components/password-input/password-input.css","content":"$55","type":"registry:ui","target":"@ui/fancy/components/password-input/password-input.css"}],"className":"h-[70svh] min-h-80"}]]}]