@yamada-ui/password-input
Version:
Yamada UI password input component
73 lines (71 loc) • 2.3 kB
JavaScript
"use client"
// src/password-input-strength-meter.tsx
import { forwardRef, ui, useComponentMultiStyle } from "@yamada-ui/core";
import { cx, dataAttr } from "@yamada-ui/utils";
import { jsx, jsxs } from "react/jsx-runtime";
var getDefaultStrengthMeterIndicatorProps = (percent) => {
switch (true) {
case percent < 33:
return { label: "Low", _selected: { bg: "red.500" } };
case percent < 66:
return { label: "Medium", _selected: { bg: "orange.500" } };
default:
return { label: "High", _selected: { bg: "green.500" } };
}
};
var PasswordInputStrengthMeter = forwardRef((props, ref) => {
const [
styles,
{
className,
max = 4,
value,
withLabel = true,
getStrengthMeterIndicatorProps = getDefaultStrengthMeterIndicatorProps,
...rest
}
] = useComponentMultiStyle("PasswordInput", props);
const percent = value / max * 100;
const { label, ...indicatorProps } = getStrengthMeterIndicatorProps(percent);
return /* @__PURE__ */ jsxs(
ui.div,
{
ref,
className: cx("ui-password-input__strength-meter", className),
"aria-label": "Password strength meter",
"aria-valuemax": max,
"aria-valuemin": 0,
"aria-valuenow": value,
role: "meter",
__css: { ...styles.strengthMeter },
...rest,
children: [
/* @__PURE__ */ jsx(
ui.div,
{
ref,
className: "ui-password-input__strength-meter-indicators",
__css: { ...styles.strengthMeterIndicators },
...rest,
children: Array.from({ length: max }).map((_, index) => /* @__PURE__ */ jsx(
ui.div,
{
"data-selected": dataAttr(index < value),
__css: { ...styles.strengthMeterIndicator },
...indicatorProps
},
index
))
}
),
withLabel && label ? /* @__PURE__ */ jsx(ui.span, { __css: { ...styles.strengthMeterLabel }, children: label }) : null
]
}
);
});
PasswordInputStrengthMeter.displayName = "PasswordInputStrengthMeter";
PasswordInputStrengthMeter.__ui__ = "PasswordInputStrengthMeter";
export {
PasswordInputStrengthMeter
};
//# sourceMappingURL=chunk-ZFUFMRPW.mjs.map