@mantine/core/cjs/components/PasswordInput/PasswordInput.cjs

React components library focused on usability, accessibility and developer experience

"use client";
const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
const require_get_size = require("../../core/utils/get-size/get-size.cjs");
const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
const require_use_resolved_styles_api = require("../../core/styles-api/use-resolved-styles-api/use-resolved-styles-api.cjs");
const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
const require_extract_style_props = require("../../core/Box/style-props/extract-style-props/extract-style-props.cjs");
const require_factory = require("../../core/factory/factory.cjs");
const require_ActionIcon = require("../ActionIcon/ActionIcon.cjs");
const require_Input = require("../Input/Input.cjs");
const require_InputBase = require("../InputBase/InputBase.cjs");
const require_PasswordToggleIcon = require("./PasswordToggleIcon.cjs");
const require_PasswordInput_module = require("./PasswordInput.module.cjs");
let _mantine_hooks = require("@mantine/hooks");
let clsx = require("clsx");
clsx = require_runtime.__toESM(clsx);
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/PasswordInput/PasswordInput.tsx
const defaultProps = { visibilityToggleIcon: require_PasswordToggleIcon.PasswordToggleIcon };
const varsResolver = require_create_vars_resolver.createVarsResolver((_, { size }) => ({ root: {
	"--psi-icon-size": require_get_size.getSize(size, "psi-icon-size"),
	"--psi-button-size": require_get_size.getSize(size, "psi-button-size")
} }));
const PasswordInput = require_factory.factory((_props) => {
	const props = require_use_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 = (0, _mantine_hooks.useId)(id);
	const [_visible, setVisibility] = (0, _mantine_hooks.useUncontrolled)({
		value: visible,
		defaultValue: defaultVisible,
		finalValue: false,
		onChange: onVisibilityChange
	});
	const toggleVisibility = () => setVisibility(!_visible);
	const getStyles = require_use_styles.useStyles({
		name: "PasswordInput",
		classes: require_PasswordInput_module.default,
		props,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		vars,
		varsResolver
	});
	const { resolvedClassNames, resolvedStyles } = require_use_resolved_styles_api.useResolvedStylesApi({
		classNames,
		styles,
		props
	});
	const { styleProps, rest } = require_extract_style_props.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__ */ (0, react_jsx_runtime.jsx)(require_ActionIcon.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__ */ (0, react_jsx_runtime.jsx)(VisibilityToggleIcon, { reveal: _visible })
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.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__ */ (0, react_jsx_runtime.jsx)(require_Input.Input, {
			component: "div",
			error,
			leftSection,
			size,
			classNames: {
				...resolvedClassNames,
				input: (0, clsx.default)(require_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__ */ (0, react_jsx_runtime.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 = {
	...require_InputBase.InputBase.classes,
	...require_PasswordInput_module.default
};
PasswordInput.varsResolver = varsResolver;
PasswordInput.displayName = "@mantine/core/PasswordInput";
//#endregion
exports.PasswordInput = PasswordInput;

//# sourceMappingURL=PasswordInput.cjs.map