@mantine/core/esm/components/PasswordInput/PasswordInput.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getSize } from "../../core/utils/get-size/get-size.mjs";
import { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useResolvedStylesApi } from "../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { extractStyleProps } from "../../core/Box/style-props/extract-style-props/extract-style-props.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { ActionIcon } from "../ActionIcon/ActionIcon.mjs";
import { Input } from "../Input/Input.mjs";
import { InputBase } from "../InputBase/InputBase.mjs";
import { PasswordToggleIcon } from "./PasswordToggleIcon.mjs";
import PasswordInput_module_default from "./PasswordInput.module.mjs";
import { useId, useUncontrolled } from "@mantine/hooks";
import cx from "clsx";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/PasswordInput/PasswordInput.tsx
const defaultProps = { visibilityToggleIcon: PasswordToggleIcon };
const varsResolver = createVarsResolver((_, { size }) => ({ root: {
	"--psi-icon-size": getSize(size, "psi-icon-size"),
	"--psi-button-size": getSize(size, "psi-button-size")
} }));
const PasswordInput = factory((_props) => {
	const props = useProps("PasswordInput", defaultProps, _props);
	const { classNames, className, style, styles, unstyled, vars, required, error, leftSection, disabled, id, variant, inputContainer, description, label, size, errorProps, descriptionProps, labelProps, withAsterisk, inputWrapperOrder, wrapperProps, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, leftSectionWidth, visible, defaultVisible, onVisibilityChange, visibilityToggleIcon: VisibilityToggleIcon, visibilityToggleButtonProps, rightSectionProps, leftSectionProps, leftSectionPointerEvents, withErrorStyles, mod, attributes, ...others } = props;
	const uuid = useId(id);
	const [_visible, setVisibility] = useUncontrolled({
		value: visible,
		defaultValue: defaultVisible,
		finalValue: false,
		onChange: onVisibilityChange
	});
	const toggleVisibility = () => setVisibility(!_visible);
	const getStyles = useStyles({
		name: "PasswordInput",
		classes: PasswordInput_module_default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	const { styleProps, rest } = extractStyleProps(others);
	const errorId = errorProps?.id || `${uuid}-error`;
	const descriptionId = descriptionProps?.id || `${uuid}-description`;
	const _describedBy = `${!!error && typeof error !== "boolean" ? errorId : ""} ${!!description ? descriptionId : ""}`;
	const describedBy = _describedBy.trim().length > 0 ? _describedBy.trim() : void 0;
	const visibilityToggleButton = /* @__PURE__ */ jsx(ActionIcon, {
		...getStyles("visibilityToggle"),
		disabled,
		radius,
		"aria-pressed": _visible,
		tabIndex: -1,
		"aria-label": "Toggle password visibility",
		...visibilityToggleButtonProps,
		variant: visibilityToggleButtonProps?.variant ?? "subtle",
		color: "gray",
		unstyled,
		onTouchEnd: (event) => {
			event.preventDefault();
			visibilityToggleButtonProps?.onTouchEnd?.(event);
			toggleVisibility();
		},
		onMouseDown: (event) => {
			event.preventDefault();
			visibilityToggleButtonProps?.onMouseDown?.(event);
			toggleVisibility();
		},
		onKeyDown: (event) => {
			visibilityToggleButtonProps?.onKeyDown?.(event);
			if (event.key === " ") {
				event.preventDefault();
				toggleVisibility();
			}
		},
		children: /* @__PURE__ */ jsx(VisibilityToggleIcon, { reveal: _visible })
	});
	return /* @__PURE__ */ jsx(Input.Wrapper, {
		required,
		id: uuid,
		label,
		error,
		description,
		size,
		classNames: resolvedClassNames,
		styles: resolvedStyles,
		__staticSelector: "PasswordInput",
		__stylesApiProps: props,
		unstyled,
		withAsterisk,
		inputWrapperOrder,
		inputContainer,
		variant,
		labelProps: {
			...labelProps,
			htmlFor: uuid
		},
		descriptionProps: {
			...descriptionProps,
			id: descriptionId
		},
		errorProps: {
			...errorProps,
			id: errorId
		},
		mod,
		attributes,
		...getStyles("root"),
		...styleProps,
		...wrapperProps,
		children: /* @__PURE__ */ jsx(Input, {
			component: "div",
			error,
			leftSection,
			size,
			classNames: {
				...resolvedClassNames,
				input: cx(PasswordInput_module_default.input, resolvedClassNames.input)
			},
			styles: resolvedStyles,
			radius,
			disabled,
			__staticSelector: "PasswordInput",
			__stylesApiProps: props,
			rightSectionWidth,
			rightSection: rightSection ?? visibilityToggleButton,
			variant,
			unstyled,
			leftSectionWidth,
			rightSectionPointerEvents: rightSectionPointerEvents || "all",
			rightSectionProps,
			leftSectionProps,
			leftSectionPointerEvents,
			withAria: false,
			withErrorStyles,
			attributes,
			children: /* @__PURE__ */ jsx("input", {
				required,
				"data-invalid": !!error || void 0,
				"data-with-left-section": !!leftSection || void 0,
				...getStyles("innerInput"),
				disabled,
				id: uuid,
				...rest,
				"aria-describedby": describedBy,
				autoComplete: rest.autoComplete || "off",
				type: _visible ? "text" : "password"
			})
		})
	});
});
PasswordInput.classes = {
	...InputBase.classes,
	...PasswordInput_module_default
};
PasswordInput.varsResolver = varsResolver;
PasswordInput.displayName = "@mantine/core/PasswordInput";
//#endregion
export { PasswordInput };

//# sourceMappingURL=PasswordInput.mjs.map