import { Machine, EventObject, Service } from '@zag-js/core'; import { PropTypes, DirectionProperty, CommonProperties } from '@zag-js/types'; interface VisibilityChangeDetails { visible: boolean; } interface ElementIds { input?: string | undefined; visibilityTrigger?: string | undefined; } interface IntlTranslations { visibilityTrigger?: ((visible: boolean) => string) | undefined; } interface PasswordInputProps extends DirectionProperty, CommonProperties { /** * The default visibility of the password input. */ defaultVisible?: boolean | undefined; /** * Whether the password input is visible. */ visible?: boolean | undefined; /** * Function called when the visibility changes. */ onVisibilityChange?: ((details: VisibilityChangeDetails) => void) | undefined; /** * The ids of the password input parts */ ids?: ElementIds | undefined; /** * Whether the password input is disabled. */ disabled?: boolean | undefined; /** * The invalid state of the password input. */ invalid?: boolean | undefined; /** * Whether the password input is read only. */ readOnly?: boolean | undefined; /** * Whether the password input is required. */ required?: boolean | undefined; /** * The localized messages to use. */ translations?: IntlTranslations | undefined; /** * When `true`, the input will ignore password managers. * * **Only works for the following password managers** * - 1Password, LastPass, Bitwarden, Dashlane, Proton Pass */ ignorePasswordManagers?: boolean | undefined; /** * The autocomplete attribute for the password input. * @default "current-password" */ autoComplete?: "current-password" | "new-password" | undefined; /** * The name of the password input. */ name?: string | undefined; } interface PasswordInputSchema { state: "idle"; props: PasswordInputProps; context: { visible: boolean; }; event: EventObject; action: string; guard: string; effect: string; } type PasswordInputService = Service; type PasswordInputMachine = Machine; interface PasswordInputApi { /** * Whether the password input is visible. */ visible: boolean; /** * Whether the password input is disabled. */ disabled: boolean; /** * Whether the password input is invalid. */ invalid: boolean; /** * Focus the password input. */ focus: VoidFunction; /** * Set the visibility of the password input. */ setVisible: (value: boolean) => void; /** * Toggle the visibility of the password input. */ toggleVisible: VoidFunction; getRootProps: () => T["element"]; getLabelProps: () => T["label"]; getInputProps: () => T["input"]; getVisibilityTriggerProps: () => T["button"]; getIndicatorProps: () => T["element"]; getControlProps: () => T["element"]; } export type { ElementIds, IntlTranslations, PasswordInputApi, PasswordInputMachine, PasswordInputProps, PasswordInputSchema, PasswordInputService, VisibilityChangeDetails };