@igne-agency/react-web-ui 0.4.0 → 0.6.0

package/dist/components/password-field/password-strength.js

@@ -1,124 +1,601 @@
 import { usePasswordStrength } from "../../lib/password-strength/password-strength.js";
+import { useRequiredContext } from "../../lib/use-required-context.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import password_field_module_default from "./password-field.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext } from "react";
 import { Meter } from "@base-ui/react/meter";
 // src/components/password-field/password-strength.tsx
 var MAX_SCORE = 4;
+var StrengthContext = createContext(null);
+var useStrength = () => {
+	return useRequiredContext(StrengthContext, "PasswordStrength parts must be rendered within <PasswordStrength.Root>.");
+};
+var BandContext = createContext(null);
+var useBand = () => {
+	return useRequiredContext(BandContext, "PasswordStrength.Value must be rendered within <PasswordStrength.Meter>.");
+};
 /**
-* The strength band of a password as a labelled meter, followed by zxcvbn's own
-* warning and suggestions in the locale's language. It suspends while that
-* language's dictionaries load, and renders nothing for an empty password.
+* Judges `password` with zxcvbn in the locale's language and hands the result
+* to the parts inside it. It suspends while that language's dictionaries load,
+* and renders nothing for an empty password.
 *
 * @example
-* <PasswordStrength password={password} label="Password strength" scoreLabels={SCORE_LABELS} />
+* <PasswordStrength.Root password={password}>…</PasswordStrength.Root>
 */
-var PasswordStrength = (t0) => {
-	const $ = c(23);
-	const { password, label, scoreLabels, languages, className } = t0;
+var Root = (t0) => {
+	const $ = c(20);
+	let className;
+	let languages;
+	let password;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({password, languages, className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = languages;
+		$[3] = password;
+		$[4] = props;
+		$[5] = ref;
+		$[6] = render;
+	} else {
+		className = $[1];
+		languages = $[2];
+		password = $[3];
+		props = $[4];
+		ref = $[5];
+		render = $[6];
+	}
 	const strength = usePasswordStrength(password, useLocale(), languages);
-	if (strength === null) return null;
-	const band = scoreLabels[strength.score];
+	const t1 = strength !== null;
+	let t2;
+	if ($[7] !== className) {
+		t2 = clsx(password_field_module_default.strength, className);
+		$[7] = className;
+		$[8] = t2;
+	} else t2 = $[8];
+	let t3;
+	if ($[9] !== props || $[10] !== t2) {
+		t3 = {
+			...props,
+			className: t2
+		};
+		$[9] = props;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	let t4;
+	if ($[12] !== ref || $[13] !== render || $[14] !== t1 || $[15] !== t3) {
+		t4 = {
+			render,
+			ref,
+			enabled: t1,
+			props: t3
+		};
+		$[12] = ref;
+		$[13] = render;
+		$[14] = t1;
+		$[15] = t3;
+		$[16] = t4;
+	} else t4 = $[16];
+	const element = useRender(t4);
+	let t5;
+	if ($[17] !== element || $[18] !== strength) {
+		t5 = strength === null ? null : /* @__PURE__ */ jsx(StrengthContext, {
+			value: strength,
+			children: element
+		});
+		$[17] = element;
+		$[18] = strength;
+		$[19] = t5;
+	} else t5 = $[19];
+	return t5;
+};
+/**
+* The strength band as a meter, read as the band's name. It sets `data-score`,
+* which the `Value` and `Indicator` inside it colour by.
+*
+* @example
+* <PasswordStrength.Meter scoreLabels={SCORE_LABELS}>…</PasswordStrength.Meter>
+*/
+var StrengthMeter = (t0) => {
+	const $ = c(16);
+	let className;
+	let props;
+	let scoreLabels;
+	if ($[0] !== t0) {
+		({scoreLabels, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = scoreLabels;
+	} else {
+		className = $[1];
+		props = $[2];
+		scoreLabels = $[3];
+	}
+	const { score } = useStrength();
+	const band = scoreLabels[score];
 	let t1;
-	if ($[0] !== className) {
-		t1 = clsx(password_field_module_default.strength, className);
-		$[0] = className;
-		$[1] = t1;
-	} else t1 = $[1];
+	if ($[4] !== band) {
+		t1 = () => band;
+		$[4] = band;
+		$[5] = t1;
+	} else t1 = $[5];
 	let t2;
-	if ($[2] !== band) {
-		t2 = () => band;
-		$[2] = band;
-		$[3] = t2;
-	} else t2 = $[3];
+	if ($[6] !== className) {
+		t2 = clsx(password_field_module_default.meter, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
 	let t3;
-	if ($[4] !== label) {
-		t3 = /* @__PURE__ */ jsx(Meter.Label, {
-			className: password_field_module_default.meterLabel,
-			children: label
+	if ($[8] !== props || $[9] !== score || $[10] !== t1 || $[11] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Meter.Root, {
+			value: score,
+			max: MAX_SCORE,
+			"data-score": score,
+			getAriaValueText: t1,
+			className: t2,
+			...props
 		});
-		$[4] = label;
-		$[5] = t3;
-	} else t3 = $[5];
+		$[8] = props;
+		$[9] = score;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+	} else t3 = $[12];
 	let t4;
-	if ($[6] !== band) {
-		t4 = /* @__PURE__ */ jsx(Meter.Value, {
-			className: password_field_module_default.meterValue,
-			children: () => band
+	if ($[13] !== band || $[14] !== t3) {
+		t4 = /* @__PURE__ */ jsx(BandContext, {
+			value: band,
+			children: t3
 		});
-		$[6] = band;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Meter.Track, {
-			className: password_field_module_default.meterTrack,
-			children: /* @__PURE__ */ jsx(Meter.Indicator, { className: password_field_module_default.meterIndicator })
+		$[13] = band;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+};
+/**
+* The meter's label, such as "Password strength".
+*
+* @example
+* <PasswordStrength.Label>Password strength</PasswordStrength.Label>
+*/
+var Label = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(password_field_module_default.meterLabel, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Meter.Label, {
+			className: t1,
+			...props
 		});
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] !== strength.score || $[10] !== t2 || $[11] !== t3 || $[12] !== t4) {
-		t6 = /* @__PURE__ */ jsxs(Meter.Root, {
-			value: strength.score,
-			max: MAX_SCORE,
-			"data-score": strength.score,
-			getAriaValueText: t2,
-			className: password_field_module_default.meter,
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The band's name, such as "Fair", from the meter's `scoreLabels`.
+*
+* @example
+* <PasswordStrength.Value />
+*/
+var Value = (t0) => {
+	const $ = c(11);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const band = useBand();
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(password_field_module_default.meterValue, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== band) {
+		t2 = () => band;
+		$[5] = band;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t1 || $[9] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Meter.Value, {
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+};
+/**
+* The bar the indicator fills.
+*
+* @example
+* <PasswordStrength.Track><PasswordStrength.Indicator /></PasswordStrength.Track>
+*/
+var Track = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(password_field_module_default.meterTrack, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Meter.Track, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* The fill of the track, as far as the band reaches and in its colour.
+*
+* @example
+* <PasswordStrength.Indicator />
+*/
+var Indicator = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(password_field_module_default.meterIndicator, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Meter.Indicator, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+/**
+* zxcvbn's own warning, in the locale's language. Renders nothing without one.
+*
+* @example
+* <PasswordStrength.Feedback />
+*/
+var Feedback = (t0) => {
+	const $ = c(16);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	const { warning } = useStrength();
+	const t1 = warning !== "";
+	let t2;
+	if ($[5] !== className) {
+		t2 = clsx(password_field_module_default.feedback, className);
+		$[5] = className;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] !== props || $[8] !== t2 || $[9] !== warning) {
+		t3 = {
+			...props,
+			className: t2,
+			children: warning
+		};
+		$[7] = props;
+		$[8] = t2;
+		$[9] = warning;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== ref || $[12] !== render || $[13] !== t1 || $[14] !== t3) {
+		t4 = {
+			defaultTagName: "p",
+			render,
+			ref,
+			enabled: t1,
+			props: t3
+		};
+		$[11] = ref;
+		$[12] = render;
+		$[13] = t1;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return useRender(t4);
+};
+/**
+* zxcvbn's own suggestions, in the locale's language, as a list. Renders
+* nothing without any.
+*
+* @example
+* <PasswordStrength.Suggestions>
+* 	{suggestion => <PasswordStrength.Suggestion key={suggestion}>{suggestion}</PasswordStrength.Suggestion>}
+* </PasswordStrength.Suggestions>
+*/
+var Suggestions = (t0) => {
+	const $ = c(20);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = render;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		render = $[5];
+	}
+	const { suggestions } = useStrength();
+	const t1 = suggestions.length > 0;
+	let t2;
+	if ($[6] !== className) {
+		t2 = clsx(password_field_module_default.suggestions, className);
+		$[6] = className;
+		$[7] = t2;
+	} else t2 = $[7];
+	let t3;
+	if ($[8] !== children || $[9] !== suggestions) {
+		t3 = suggestions.map(children);
+		$[8] = children;
+		$[9] = suggestions;
+		$[10] = t3;
+	} else t3 = $[10];
+	let t4;
+	if ($[11] !== props || $[12] !== t2 || $[13] !== t3) {
+		t4 = {
+			...props,
+			className: t2,
+			children: t3
+		};
+		$[11] = props;
+		$[12] = t2;
+		$[13] = t3;
+		$[14] = t4;
+	} else t4 = $[14];
+	let t5;
+	if ($[15] !== ref || $[16] !== render || $[17] !== t1 || $[18] !== t4) {
+		t5 = {
+			defaultTagName: "ul",
+			render,
+			ref,
+			enabled: t1,
+			props: t4
+		};
+		$[15] = ref;
+		$[16] = render;
+		$[17] = t1;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
+	return useRender(t5);
+};
+/**
+* One of zxcvbn's suggestions.
+*
+* @example
+* <PasswordStrength.Suggestion>{suggestion}</PasswordStrength.Suggestion>
+*/
+var Suggestion = (t0) => {
+	const $ = c(14);
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({className, render, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = clsx(password_field_module_default.feedback, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
+	let t3;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			defaultTagName: "li",
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
+		$[12] = t2;
+		$[13] = t3;
+	} else t3 = $[13];
+	return useRender(t3);
+};
+var Prefab = (t0) => {
+	const $ = c(14);
+	const { password, label, scoreLabels, languages, className } = t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = /* @__PURE__ */ jsx(Label, { children: label });
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx(Value, {});
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Track, { children: /* @__PURE__ */ jsx(Indicator, {}) });
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== scoreLabels || $[5] !== t1) {
+		t4 = /* @__PURE__ */ jsxs(StrengthMeter, {
+			scoreLabels,
 			children: [
-				t3,
-				t4,
-				t5
+				t1,
+				t2,
+				t3
 			]
 		});
-		$[9] = strength.score;
-		$[10] = t2;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t6;
-	} else t6 = $[13];
+		$[4] = scoreLabels;
+		$[5] = t1;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	let t6;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Feedback, {});
+		t6 = /* @__PURE__ */ jsx(Suggestions, { children: _temp });
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		t5 = $[7];
+		t6 = $[8];
+	}
 	let t7;
-	if ($[14] !== strength.warning) {
-		t7 = strength.warning !== "" && /* @__PURE__ */ jsx("p", {
-			className: password_field_module_default.feedback,
-			children: strength.warning
-		});
-		$[14] = strength.warning;
-		$[15] = t7;
-	} else t7 = $[15];
-	let t8;
-	if ($[16] !== strength.suggestions) {
-		t8 = strength.suggestions.length > 0 && /* @__PURE__ */ jsx("ul", {
-			className: password_field_module_default.suggestions,
-			children: strength.suggestions.map(_temp)
-		});
-		$[16] = strength.suggestions;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
-	if ($[18] !== t1 || $[19] !== t6 || $[20] !== t7 || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsxs("div", {
-			className: t1,
+	if ($[9] !== className || $[10] !== languages || $[11] !== password || $[12] !== t4) {
+		t7 = /* @__PURE__ */ jsxs(Root, {
+			password,
+			languages,
+			className,
 			children: [
-				t6,
-				t7,
-				t8
+				t4,
+				t5,
+				t6
 			]
 		});
-		$[18] = t1;
-		$[19] = t6;
-		$[20] = t7;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	return t9;
+		$[9] = className;
+		$[10] = languages;
+		$[11] = password;
+		$[12] = t4;
+		$[13] = t7;
+	} else t7 = $[13];
+	return t7;
 };
+/**
+* The strength band of a password as a labelled meter, followed by zxcvbn's own
+* warning and suggestions in the locale's language. It suspends while that
+* language's dictionaries load, and renders nothing for an empty password. The
+* parts hanging off it compose a meter by hand.
+*
+* @example
+* <PasswordStrength password={password} label="Password strength" scoreLabels={SCORE_LABELS} />
+*/
+var PasswordStrength = Object.assign(Prefab, {
+	Root,
+	Meter: StrengthMeter,
+	Label,
+	Value,
+	Track,
+	Indicator,
+	Feedback,
+	Suggestions,
+	Suggestion
+});
 function _temp(suggestion) {
-	return /* @__PURE__ */ jsx("li", {
-		className: password_field_module_default.feedback,
-		children: suggestion
-	}, suggestion);
+	return /* @__PURE__ */ jsx(Suggestion, { children: suggestion }, suggestion);
 }
 export { PasswordStrength };