import type { TextFieldInputProps, TextFieldProps } from '../text-field/types.cjs'; import type { FormValidityHandle, FormValidityStateView } from '../utils/formControl.cjs'; import type { PrimitivePropsWithRef } from '../utils/primitive.cjs'; /** The methods a `ref` on {@link PasswordInput} exposes: TextField's validation API plus the visibility setter. */ export interface PasswordInputMethods extends FormValidityHandle { /** Shows or masks the password, firing `onVisibleChange`; a no-op while disabled. */ setVisible(visible: boolean): void; } /** What a `ref` on {@link PasswordInput} holds: the root element plus TextField's validation API and the visibility setter. */ export type PasswordInputHandle = HTMLDivElement & FormValidityStateView & PasswordInputMethods; /** @internal Shared state distributed from {@link PasswordInput} to its parts via context. */ export interface PasswordInputContextValue { visible: boolean; disabled: boolean; /** Native `readonly` for the field; the toggle deliberately stays operable. */ readOnly: boolean; /** Accessible name for the reveal button, which has only an icon of its own. */ revealLabel: string; setVisible: (visible: boolean) => void; } /** * Props for the {@link PasswordInput} root, extending {@link TextFieldProps} minus `trailing`. * Also drops `asChild`: the root always composes a Field plus an optional Clear button and * Toggle, so it never has the single child `asChild` needs to clone onto. */ export interface PasswordInputProps extends Omit { /** * Visual weight rung the skin gives the field, mirrored to `data-variant`. * @default undefined — the skin's own default weight. */ variant?: 'filled' | 'ghost' | (string & {}) | undefined; /** * Whether the characters are revealed, for controlled usage paired with `onVisibleChange`. * @default undefined — uncontrolled, tracks its own visibility internally. */ visible?: boolean | undefined; /** * Initial visibility, for uncontrolled usage, seeding the first render. * @default false — the field starts masked. */ defaultVisible?: boolean | undefined; /** * Accessible name for the reveal button, whose children are an icon with no text content. * @default 'Show password' — English; translate it. */ revealLabel?: string | undefined; /** * Makes the field read-only: focusable and submitted, but not editable; the toggle stays operable. * @default false */ readOnly?: boolean | undefined; /** * Fires with the new visibility whenever it changes, controlled or not. * @default undefined — no-op if omitted. */ onVisibleChange?: ((visible: boolean) => void) | undefined; /** * Words the polite live-region message announced when visibility changes; return `''` to announce nothing. * @default undefined — the built-in English wording ("Password shown" / "Password hidden"). */ getVisibilityAnnouncement?: ((visible: boolean) => string) | undefined; /** * Renders the derived `PasswordInputToggle`, ignored when `children` is given. * @default true */ showToggle?: boolean | undefined; } /** Props for {@link PasswordInputField}, the native ``, omitting `type`, which the component controls itself. */ export interface PasswordInputFieldProps extends Omit { } /** Props for {@link PasswordInputToggle}, the reveal button. */ export interface PasswordInputToggleProps extends PrimitivePropsWithRef<'button'> { }