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

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

@@ -1,5 +1,8 @@
+import { IconButton } from "../button/button.js";
+import { Field } from "../field/field.js";
 import { TextInput } from "../text-field/text-input.js";
 import { PasswordStrength } from "./password-strength.js";
+import { Spinner } from "../spinner/spinner.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
@@ -22,7 +25,7 @@ import { useState } from "react";
 * />
 */
 var PasswordField = (t0) => {
-	const $ = c(63);
+	const $ = c(67);
 	let className;
 	let description;
 	let dirty;
@@ -99,88 +102,108 @@ var PasswordField = (t0) => {
 	}
 	const [revealed, setRevealed] = useState(false);
 	let t1;
-	if ($[24] !== label) {
-		t1 = /* @__PURE__ */ jsx(TextInput.Label, { children: label });
-		$[24] = label;
+	if ($[24] !== optionalLabel) {
+		t1 = /* @__PURE__ */ jsx(Field.Requiredness, { optionalLabel });
+		$[24] = optionalLabel;
 		$[25] = t1;
 	} else t1 = $[25];
-	const t2 = revealed ? "text" : "password";
-	let t3;
-	if ($[26] !== inputProps || $[27] !== t2) {
-		t3 = /* @__PURE__ */ jsx(TextInput.Input, {
+	let t2;
+	if ($[26] !== label || $[27] !== t1) {
+		t2 = /* @__PURE__ */ jsxs(TextInput.Label, { children: [
+			label,
+			" ",
+			t1
+		] });
+		$[26] = label;
+		$[27] = t1;
+		$[28] = t2;
+	} else t2 = $[28];
+	const t3 = revealed ? "text" : "password";
+	let t4;
+	if ($[29] !== inputProps || $[30] !== t3) {
+		t4 = /* @__PURE__ */ jsx(TextInput.Input, {
 			...inputProps,
-			type: t2
+			type: t3
 		});
-		$[26] = inputProps;
-		$[27] = t2;
-		$[28] = t3;
-	} else t3 = $[28];
-	let t4;
-	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(TextInput.Pending, {});
-		$[29] = t4;
-	} else t4 = $[29];
-	const t5 = revealed ? hidePasswordLabel : showPasswordLabel;
-	const t6 = revealed ? hidePasswordIcon : showPasswordIcon;
-	let t7;
-	if ($[30] !== revealed || $[31] !== t5 || $[32] !== t6) {
-		t7 = /* @__PURE__ */ jsx(TextInput.Reveal, {
+		$[29] = inputProps;
+		$[30] = t3;
+		$[31] = t4;
+	} else t4 = $[31];
+	let t5;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(TextInput.Pending, { children: /* @__PURE__ */ jsx(Spinner, { size: 1 }) });
+		$[32] = t5;
+	} else t5 = $[32];
+	const t6 = revealed ? hidePasswordLabel : showPasswordLabel;
+	const t7 = revealed ? hidePasswordIcon : showPasswordIcon;
+	let t8;
+	if ($[33] !== t6 || $[34] !== t7) {
+		t8 = /* @__PURE__ */ jsx(IconButton, {
+			label: t6,
+			variant: "tertiary",
+			size: "sm",
+			children: t7
+		});
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== revealed || $[37] !== t8) {
+		t9 = /* @__PURE__ */ jsx(TextInput.Reveal, {
 			revealed,
 			onRevealedChange: setRevealed,
-			label: t5,
-			children: t6
+			render: t8
 		});
-		$[30] = revealed;
-		$[31] = t5;
-		$[32] = t6;
-		$[33] = t7;
-	} else t7 = $[33];
-	let t8;
-	if ($[34] !== t3 || $[35] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
-			t3,
+		$[36] = revealed;
+		$[37] = t8;
+		$[38] = t9;
+	} else t9 = $[38];
+	let t10;
+	if ($[39] !== t4 || $[40] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
 			t4,
-			t7
+			t5,
+			t9
 		] });
-		$[34] = t3;
-		$[35] = t7;
-		$[36] = t8;
-	} else t8 = $[36];
-	let t9;
-	if ($[37] !== languages || $[38] !== scoreLabels || $[39] !== strength || $[40] !== strengthLabel || $[41] !== value) {
-		t9 = strength === true && /* @__PURE__ */ jsx(PasswordStrength, {
+		$[39] = t4;
+		$[40] = t9;
+		$[41] = t10;
+	} else t10 = $[41];
+	let t11;
+	if ($[42] !== languages || $[43] !== scoreLabels || $[44] !== strength || $[45] !== strengthLabel || $[46] !== value) {
+		t11 = strength === true && /* @__PURE__ */ jsx(PasswordStrength, {
 			password: value,
 			label: strengthLabel,
 			scoreLabels,
 			languages
 		});
-		$[37] = languages;
-		$[38] = scoreLabels;
-		$[39] = strength;
-		$[40] = strengthLabel;
-		$[41] = value;
-		$[42] = t9;
-	} else t9 = $[42];
-	let t10;
-	if ($[43] !== description) {
-		t10 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
-		$[43] = description;
-		$[44] = t10;
-	} else t10 = $[44];
-	let t11;
-	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(TextInput.Error, {});
-		$[45] = t11;
-	} else t11 = $[45];
+		$[42] = languages;
+		$[43] = scoreLabels;
+		$[44] = strength;
+		$[45] = strengthLabel;
+		$[46] = value;
+		$[47] = t11;
+	} else t11 = $[47];
 	let t12;
-	if ($[46] !== className || $[47] !== dirty || $[48] !== disabled || $[49] !== errors || $[50] !== onValueChange || $[51] !== optionalLabel || $[52] !== pending || $[53] !== readOnly || $[54] !== requiredness || $[55] !== state || $[56] !== t1 || $[57] !== t10 || $[58] !== t8 || $[59] !== t9 || $[60] !== touched || $[61] !== value) {
-		t12 = /* @__PURE__ */ jsxs(TextInput.Root, {
+	if ($[48] !== description) {
+		t12 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
+		$[48] = description;
+		$[49] = t12;
+	} else t12 = $[49];
+	let t13;
+	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[50] = t13;
+	} else t13 = $[50];
+	let t14;
+	if ($[51] !== className || $[52] !== dirty || $[53] !== disabled || $[54] !== errors || $[55] !== onValueChange || $[56] !== pending || $[57] !== readOnly || $[58] !== requiredness || $[59] !== state || $[60] !== t10 || $[61] !== t11 || $[62] !== t12 || $[63] !== t2 || $[64] !== touched || $[65] !== value) {
+		t14 = /* @__PURE__ */ jsxs(TextInput.Root, {
 			value,
 			onValueChange,
 			disabled,
 			readOnly,
 			requiredness,
-			optionalLabel,
 			errors,
 			dirty,
 			touched,
@@ -188,31 +211,30 @@ var PasswordField = (t0) => {
 			state,
 			className,
 			children: [
-				t1,
-				t8,
-				t9,
+				t2,
 				t10,
-				t11
+				t11,
+				t12,
+				t13
 			]
 		});
-		$[46] = className;
-		$[47] = dirty;
-		$[48] = disabled;
-		$[49] = errors;
-		$[50] = onValueChange;
-		$[51] = optionalLabel;
-		$[52] = pending;
-		$[53] = readOnly;
-		$[54] = requiredness;
-		$[55] = state;
-		$[56] = t1;
-		$[57] = t10;
-		$[58] = t8;
-		$[59] = t9;
-		$[60] = touched;
-		$[61] = value;
+		$[51] = className;
+		$[52] = dirty;
+		$[53] = disabled;
+		$[54] = errors;
+		$[55] = onValueChange;
+		$[56] = pending;
+		$[57] = readOnly;
+		$[58] = requiredness;
+		$[59] = state;
+		$[60] = t10;
+		$[61] = t11;
 		$[62] = t12;
-	} else t12 = $[62];
-	return t12;
+		$[63] = t2;
+		$[64] = touched;
+		$[65] = value;
+		$[66] = t14;
+	} else t14 = $[66];
+	return t14;
 };
 export { PasswordField };

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

@@ -1,12 +1,12 @@
 import './password-field.css';// src/components/password-field/password-field.module.scss
-var strength = "_strength_1dakz_3";
-var meter = "_meter_1dakz_8";
-var meterLabel = "_meterLabel_1dakz_30";
-var meterValue = "_meterValue_1dakz_35";
-var meterTrack = "_meterTrack_1dakz_40";
-var meterIndicator = "_meterIndicator_1dakz_47";
-var feedback = "_feedback_1dakz_56";
-var suggestions = "_suggestions_1dakz_60";
+var strength = "_strength_1q8qt_3";
+var meter = "_meter_1q8qt_8";
+var meterLabel = "_meterLabel_1q8qt_30";
+var meterValue = "_meterValue_1q8qt_35";
+var meterTrack = "_meterTrack_1q8qt_40";
+var meterIndicator = "_meterIndicator_1q8qt_47";
+var feedback = "_feedback_1q8qt_56";
+var suggestions = "_suggestions_1q8qt_60";
 var password_field_module_default = {
 	strength,
 	meter,

package/dist/components/password-field/password-strength.d.ts

@@ -1,8 +1,97 @@
+import { Meter } from "@base-ui/react/meter";
+import { useRender } from "@base-ui/react/use-render";
 import type { Score } from "@zxcvbn-ts/core";
-import type { ReactNode } from "react";
+import { type ReactElement, type ReactNode } from "react";
 import { type ZxcvbnLanguages } from "../../lib/password-strength/password-strength.ts";
 /** The name of each strength band, from 0 (weakest) to 4 (strongest). */
 export type PasswordScoreLabels = Readonly<Record<Score, string>>;
+export type PasswordStrengthRootProps = useRender.ComponentProps<"div"> & Readonly<{
+    password: string;
+    /**
+     * zxcvbn language packs beside the kit's English and Dutch ones, by lowercase
+     * language tag: `{ de: () => import("@zxcvbn-ts/language-de") }`.
+     */
+    languages?: ZxcvbnLanguages;
+}>;
+/**
+ * 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.Root password={password}>…</PasswordStrength.Root>
+ */
+declare const Root: ({ password, languages, className, render, ref, ...props }: PasswordStrengthRootProps) => ReactNode;
+export type PasswordStrengthMeterProps = Omit<Meter.Root.Props, "value" | "max" | "getAriaValueText"> & Readonly<{
+    /** The name of each band, such as "Very weak" for 0. */
+    scoreLabels: PasswordScoreLabels;
+}>;
+/**
+ * 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>
+ */
+declare const StrengthMeter: ({ scoreLabels, className, ...props }: PasswordStrengthMeterProps) => ReactNode;
+/**
+ * The meter's label, such as "Password strength".
+ *
+ * @example
+ * <PasswordStrength.Label>Password strength</PasswordStrength.Label>
+ */
+declare const Label: ({ className, ...props }: Meter.Label.Props) => ReactNode;
+export type PasswordStrengthValueProps = Omit<Meter.Value.Props, "children">;
+/**
+ * The band's name, such as "Fair", from the meter's `scoreLabels`.
+ *
+ * @example
+ * <PasswordStrength.Value />
+ */
+declare const Value: ({ className, ...props }: PasswordStrengthValueProps) => ReactNode;
+/**
+ * The bar the indicator fills.
+ *
+ * @example
+ * <PasswordStrength.Track><PasswordStrength.Indicator /></PasswordStrength.Track>
+ */
+declare const Track: ({ className, ...props }: Meter.Track.Props) => ReactNode;
+/**
+ * The fill of the track, as far as the band reaches and in its colour.
+ *
+ * @example
+ * <PasswordStrength.Indicator />
+ */
+declare const Indicator: ({ className, ...props }: Meter.Indicator.Props) => ReactNode;
+export type PasswordStrengthFeedbackProps = Omit<useRender.ComponentProps<"p">, "children">;
+/**
+ * zxcvbn's own warning, in the locale's language. Renders nothing without one.
+ *
+ * @example
+ * <PasswordStrength.Feedback />
+ */
+declare const Feedback: ({ className, render, ref, ...props }: PasswordStrengthFeedbackProps) => ReactElement | null;
+export type PasswordStrengthSuggestionsProps = Omit<useRender.ComponentProps<"ul">, "children"> & Readonly<{
+    /** Renders one of zxcvbn's suggestions, such as a `Suggestion`. */
+    children: (suggestion: string) => ReactNode;
+}>;
+/**
+ * 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>
+ */
+declare const Suggestions: ({ className, render, ref, children, ...props }: PasswordStrengthSuggestionsProps) => ReactElement | null;
+/**
+ * One of zxcvbn's suggestions.
+ *
+ * @example
+ * <PasswordStrength.Suggestion>{suggestion}</PasswordStrength.Suggestion>
+ */
+declare const Suggestion: ({ className, render, ref, ...props }: useRender.ComponentProps<"li">) => ReactElement;
 export type PasswordStrengthProps = Readonly<{
     password: string;
     /** The meter's label, such as "Password strength". */
@@ -16,12 +105,27 @@ export type PasswordStrengthProps = Readonly<{
     languages?: ZxcvbnLanguages;
     className?: string;
 }>;
+declare const Prefab: ({ password, label, scoreLabels, languages, className, }: PasswordStrengthProps) => ReactNode;
+/** The parts of a password strength meter, hanging off its prefab. */
+export type PasswordStrengthParts = typeof Prefab & Readonly<{
+    Root: typeof Root;
+    Meter: typeof StrengthMeter;
+    Label: typeof Label;
+    Value: typeof Value;
+    Track: typeof Track;
+    Indicator: typeof Indicator;
+    Feedback: typeof Feedback;
+    Suggestions: typeof Suggestions;
+    Suggestion: typeof Suggestion;
+}>;
 /**
  * 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.
+ * 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} />
  */
-export declare const PasswordStrength: ({ password, label, scoreLabels, languages, className, }: PasswordStrengthProps) => ReactNode;
+export declare const PasswordStrength: PasswordStrengthParts;
+export {};