@yamada-ui/password-input
Version:
Yamada UI password input component
255 lines (250 loc) • 8.87 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/password-input.tsx
var password_input_exports = {};
__export(password_input_exports, {
PasswordInput: () => PasswordInput
});
module.exports = __toCommonJS(password_input_exports);
var import_core3 = require("@yamada-ui/core");
var import_core4 = require("@yamada-ui/core");
var import_utils4 = require("@yamada-ui/utils");
// src/password-input-context.ts
var import_utils = require("@yamada-ui/utils");
var [PasswordInputProvider, usePasswordInputContext] = (0, import_utils.createContext)({
name: "PasswordInputContext",
errorMessage: `usePasswordInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<PasswordInput />"`
});
// src/password-input-icon.tsx
var import_core = require("@yamada-ui/core");
var import_icon = require("@yamada-ui/icon");
var import_utils2 = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var PasswordInputIcon = (0, import_core.forwardRef)(
({ className, children, ...rest }, ref) => {
const { styles } = usePasswordInputContext();
const validChildren = (0, import_utils2.getValidChildren)(children);
const cloneChildren = validChildren.map(
(child) => (0, import_react.cloneElement)(child, {
style: {
color: "currentColor",
maxHeight: "1em",
maxWidth: "1em"
},
"aria-hidden": true,
focusable: false
})
);
const css = { ...styles.icon };
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.button,
{
ref,
type: "button",
className: (0, import_utils2.cx)("ui-password-input__icon", className),
__css: css,
...rest,
children: cloneChildren
}
);
}
);
PasswordInputIcon.displayName = "PasswordInputIcon";
PasswordInputIcon.__ui__ = "PasswordInputIcon";
var EyeIcon = ({ ...rest }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_icon.Icon,
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" })
]
}
);
};
EyeIcon.displayName = "EyeIcon";
EyeIcon.__ui__ = "EyeIcon";
var EyeOffIcon = ({ ...rest }) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
import_icon.Icon,
{
fill: "none",
stroke: "currentColor",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: "2",
viewBox: "0 0 24 24",
...rest,
children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m2 2 20 20" })
]
}
);
};
EyeOffIcon.displayName = "EyeOffIcon";
EyeOffIcon.__ui__ = "EyeOffIcon";
// src/use-password-input.tsx
var import_core2 = require("@yamada-ui/core");
var import_form_control = require("@yamada-ui/form-control");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils3 = require("@yamada-ui/utils");
var import_react2 = require("react");
var usePasswordInput = (props) => {
const {
defaultIsVisible,
defaultVisible = defaultIsVisible,
isVisible,
visible: visibleProp = isVisible,
onVisibleChange,
...rest
} = (0, import_form_control.useFormControlProps)(props);
const { "aria-readonly": ariaReadonly, ...formControlProps } = (0, import_utils3.pickObject)(
rest,
import_form_control.formControlProperties
);
const [containerProps, inputProps] = (0, import_utils3.splitObject)(rest, import_core2.layoutStyleProperties);
const { disabled } = formControlProps;
const [visible, setVisible] = (0, import_use_controllable_state.useControllableState)({
defaultValue: defaultVisible,
value: visibleProp,
onChange: onVisibleChange
});
const onPointerDown = (0, import_react2.useCallback)(
(ev) => {
if (disabled || ev.button !== 0) return;
ev.preventDefault();
setVisible((prev) => !prev);
},
[disabled, setVisible]
);
const getContainerProps = (0, import_react2.useCallback)(
(props2 = {}, ref = null) => ({
ref,
...containerProps,
...formControlProps,
...props2
}),
[containerProps, formControlProps]
);
const getInputProps = (0, import_react2.useCallback)(
(props2 = {}, ref = null) => ({
ref,
type: visible ? "text" : "password",
...inputProps,
"aria-readonly": ariaReadonly,
...formControlProps,
...props2
}),
[visible, inputProps, ariaReadonly, formControlProps]
);
const getIconProps = (0, import_react2.useCallback)(
(props2 = {}, ref = null) => ({
ref,
"aria-label": "Toggle password visibility",
tabIndex: -1,
...formControlProps,
...props2,
onPointerDown: (0, import_utils3.handlerAll)(props2.onPointerDown, onPointerDown)
}),
[formControlProps, onPointerDown]
);
return {
setVisible,
visible,
getContainerProps,
getIconProps,
getInputProps
};
};
// src/password-input.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var PasswordInput = (0, import_core4.forwardRef)(
(props, ref) => {
const [styles, mergedProps] = (0, import_core4.useComponentMultiStyle)("PasswordInput", props);
const {
className,
h,
height = h,
minH,
minHeight = minH,
visibilityIcon = { off: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EyeOffIcon, {}), on: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EyeIcon, {}) },
containerProps,
iconProps,
inputProps,
...rest
} = (0, import_core4.omitThemeProps)(mergedProps);
const { visible, getContainerProps, getIconProps, getInputProps } = usePasswordInput(rest);
const css = { ...styles.container };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PasswordInputProvider, { value: { styles }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core3.ui.div,
{
className: (0, import_utils4.cx)("ui-password-input", className),
__css: css,
...getContainerProps(containerProps),
children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
PasswordInputField,
{
height,
minHeight,
...getInputProps(inputProps, ref)
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PasswordInputIcon, { ...getIconProps(iconProps), children: visible ? visibilityIcon.off : visibilityIcon.on })
]
}
) });
}
);
PasswordInput.displayName = "PasswordInput";
PasswordInput.__ui__ = "PasswordInput";
var PasswordInputField = (0, import_core4.forwardRef)(
({ className, ...rest }, ref) => {
const { styles } = usePasswordInputContext();
const css = { ...styles.field };
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_core3.ui.input,
{
ref,
className: (0, import_utils4.cx)("ui-password-input__field", className),
__css: css,
...rest
}
);
}
);
PasswordInputField.displayName = "PasswordInputField";
PasswordInputField.__ui__ = "PasswordInputField";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
PasswordInput
});
//# sourceMappingURL=password-input.js.map