@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
55 lines (51 loc) • 2.52 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_strength_meter_style = require('./strength-meter.style.cjs');
const require_use_strength_meter = require('./use-strength-meter.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
//#region src/components/password-input/strength-meter.tsx
const { PropsContext: StrengthMeterPropsContext, usePropsContext: useStrengthMeterPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("strength-meter", require_strength_meter_style.strengthMeterStyle);
const StrengthMeter = withProvider(({ max = 4, value, withLabel = true, getIndicatorProps: getCustomIndicatorProps,...rest }) => {
const percent = value / max * 100;
const getDefaultIndicatorProps = (percent$1) => {
switch (true) {
case percent$1 < 33: return {
label: "Low",
_selected: { bg: "red.500" }
};
case percent$1 < 66: return {
label: "Medium",
_selected: { bg: "orange.500" }
};
default: return {
label: "High",
_selected: { bg: "green.500" }
};
}
};
getCustomIndicatorProps ??= getDefaultIndicatorProps;
const { label,...indicatorProps } = getCustomIndicatorProps(percent);
const { getIndicatorProps, getRootProps } = require_use_strength_meter.useStrengthMeter({
max,
value,
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getRootProps(),
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterIndicators, { children: Array.from({ length: max }).map((_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterIndicator, { ...getIndicatorProps({
index,
...indicatorProps
}) }, index)) }), withLabel && label ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StrengthMeterLabel, { children: label }) : null]
});
}, "root")();
const StrengthMeterIndicators = withContext("div", "indicators")();
const StrengthMeterIndicator = withContext("div", "indicator")();
const StrengthMeterLabel = withContext("span", "label")();
//#endregion
exports.StrengthMeter = StrengthMeter;
exports.StrengthMeterPropsContext = StrengthMeterPropsContext;
exports.useStrengthMeterPropsContext = useStrengthMeterPropsContext;
//# sourceMappingURL=strength-meter.cjs.map