@yamada-ui/react/dist/esm/components/password-input/password-input.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { createSlotComponent } from "../../core/components/create-component.js";
import { EyeIcon } from "../icon/icons/eye-icon.js";
import { EyeOffIcon } from "../icon/icons/eye-off-icon.js";
import { Input, useInputPropsContext } from "../input/input.js";
import { InputElement } from "../input/input-element.js";
import { useGroupItemProps } from "../group/use-group.js";
import { InputGroupRoot } from "../input/input-group.js";
import { passwordInputStyle } from "./password-input.style.js";
import { usePasswordInput } from "./use-password-input.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/password-input/password-input.tsx
const { PropsContext: PasswordInputPropsContext, usePropsContext: usePasswordInputPropsContext, withContext, withProvider } = createSlotComponent("password-input", passwordInputStyle);
/**
* `PasswordInput` is a component that allows users to input passwords with a visibility toggle.
*
* @see https://yamada-ui.com/docs/components/password-input
*/
const PasswordInput = withProvider(({ className, css, colorScheme, visibilityIcon = {
	off: /* @__PURE__ */ jsx(EyeOffIcon, {}),
	on: /* @__PURE__ */ jsx(EyeIcon, {})
}, buttonProps, elementProps, rootProps,...props }) => {
	const [groupItemProps, rest] = useGroupItemProps(props);
	const { visible, getButtonProps, getInputProps } = usePasswordInput(rest);
	return /* @__PURE__ */ jsxs(InputGroupRoot, {
		className,
		css,
		colorScheme,
		...groupItemProps,
		...rootProps,
		children: [/* @__PURE__ */ jsx(PasswordInputField, { ...getInputProps() }), /* @__PURE__ */ jsx(InputElement, {
			clickable: true,
			...elementProps,
			children: /* @__PURE__ */ jsx(PasswordInputButton, {
				...getButtonProps(buttonProps),
				children: visible ? visibilityIcon.off : visibilityIcon.on
			})
		})]
	});
}, "root")((props) => {
	return {
		...useInputPropsContext(),
		...props
	};
});
const PasswordInputField = withContext(Input, "field")({ "data-group-propagate": "" });
const PasswordInputButton = withContext("button", "button")();

//#endregion
export { PasswordInput, PasswordInputPropsContext, usePasswordInputPropsContext };
//# sourceMappingURL=password-input.js.map