@yamada-ui/password-input
Version:
Yamada UI password input component
85 lines (83 loc) • 2.33 kB
JavaScript
"use client"
import {
EyeIcon,
EyeOffIcon,
PasswordInputIcon
} from "./chunk-3MNF7ESX.mjs";
import {
PasswordInputProvider,
usePasswordInputContext
} from "./chunk-JKICLSDF.mjs";
import {
usePasswordInput
} from "./chunk-VRAZOS6L.mjs";
// src/password-input.tsx
import { ui } from "@yamada-ui/core";
import {
forwardRef,
omitThemeProps,
useComponentMultiStyle
} from "@yamada-ui/core";
import { cx } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var PasswordInput = forwardRef(
(props, ref) => {
const [styles, mergedProps] = useComponentMultiStyle("PasswordInput", props);
const {
className,
h,
height = h,
minH,
minHeight = minH,
visibilityIcon = { off: /* @__PURE__ */ jsx(EyeOffIcon, {}), on: /* @__PURE__ */ jsx(EyeIcon, {}) },
containerProps,
iconProps,
inputProps,
...rest
} = omitThemeProps(mergedProps);
const { visible, getContainerProps, getIconProps, getInputProps } = usePasswordInput(rest);
const css = { ...styles.container };
return /* @__PURE__ */ jsx(PasswordInputProvider, { value: { styles }, children: /* @__PURE__ */ jsxs(
ui.div,
{
className: cx("ui-password-input", className),
__css: css,
...getContainerProps(containerProps),
children: [
/* @__PURE__ */ jsx(
PasswordInputField,
{
height,
minHeight,
...getInputProps(inputProps, ref)
}
),
/* @__PURE__ */ jsx(PasswordInputIcon, { ...getIconProps(iconProps), children: visible ? visibilityIcon.off : visibilityIcon.on })
]
}
) });
}
);
PasswordInput.displayName = "PasswordInput";
PasswordInput.__ui__ = "PasswordInput";
var PasswordInputField = forwardRef(
({ className, ...rest }, ref) => {
const { styles } = usePasswordInputContext();
const css = { ...styles.field };
return /* @__PURE__ */ jsx(
ui.input,
{
ref,
className: cx("ui-password-input__field", className),
__css: css,
...rest
}
);
}
);
PasswordInputField.displayName = "PasswordInputField";
PasswordInputField.__ui__ = "PasswordInputField";
export {
PasswordInput
};
//# sourceMappingURL=chunk-FKSCXE2T.mjs.map