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

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

"use client";


import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { strengthMeterStyle } from "./strength-meter.style.js";
import { useStrengthMeter } from "./use-strength-meter.js";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/password-input/strength-meter.tsx
const { PropsContext: StrengthMeterPropsContext, usePropsContext: useStrengthMeterPropsContext, withContext, withProvider } = createSlotComponent("strength-meter", 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 } = useStrengthMeter({
		max,
		value,
		...rest
	});
	return /* @__PURE__ */ jsxs(styled.div, {
		...getRootProps(),
		children: [/* @__PURE__ */ jsx(StrengthMeterIndicators, { children: Array.from({ length: max }).map((_, index) => /* @__PURE__ */ jsx(StrengthMeterIndicator, { ...getIndicatorProps({
			index,
			...indicatorProps
		}) }, index)) }), withLabel && label ? /* @__PURE__ */ jsx(StrengthMeterLabel, { children: label }) : null]
	});
}, "root")();
const StrengthMeterIndicators = withContext("div", "indicators")();
const StrengthMeterIndicator = withContext("div", "indicator")();
const StrengthMeterLabel = withContext("span", "label")();

//#endregion
export { StrengthMeter, StrengthMeterPropsContext, useStrengthMeterPropsContext };
//# sourceMappingURL=strength-meter.js.map