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

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

@@ -24,6 +24,10 @@ export type PasswordFieldBaseProps = Omit<TextFieldBaseProps, "type" | "icon" |
     showPasswordLabel: string;
     /** The reveal button's accessible name while the password shows, such as "Hide password". */
     hidePasswordLabel: string;
+    /** The reveal button's icon while the password is hidden. */
+    showPasswordIcon: ReactNode;
+    /** The reveal button's icon while the password shows. */
+    hidePasswordIcon: ReactNode;
 }>;
 export type PasswordFieldProps = PasswordFieldBaseProps & PasswordFieldStrengthProps;
 /**
@@ -36,9 +40,11 @@ export type PasswordFieldProps = PasswordFieldBaseProps & PasswordFieldStrengthP
  * 	optionalLabel="optional"
  * 	showPasswordLabel="Show password"
  * 	hidePasswordLabel="Hide password"
+ * 	showPasswordIcon={<VisibilityIcon />}
+ * 	hidePasswordIcon={<VisibilityOffIcon />}
  * 	value={password}
  * 	onValueChange={setPassword}
  * 	autoComplete="current-password"
  * />
  */
-export declare const PasswordField: ({ label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps }: PasswordFieldProps) => ReactNode;
+export declare const PasswordField: ({ label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, showPasswordIcon, hidePasswordIcon, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps }: PasswordFieldProps) => ReactNode;

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

@@ -1,12 +1,8 @@
-import SvgVisibility from "../../vendor/@material-design-icons/svg/outlined/visibility.js";
-import SvgVisibilityOff from "../../vendor/@material-design-icons/svg/outlined/visibility_off.js";
-import { Button } from "../button/button.js";
 import { TextInput } from "../text-field/text-input.js";
-import text_field_module_default from "../text-field/text-field.module.js";
 import { PasswordStrength } from "./password-strength.js";
 import { c } from "react/compiler-runtime";
-import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 // src/components/password-field/password-field.tsx
 /**
 * A password field with a reveal toggle, and optionally a strength meter fed by
@@ -18,18 +14,21 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 	optionalLabel="optional"
 * 	showPasswordLabel="Show password"
 * 	hidePasswordLabel="Hide password"
+* 	showPasswordIcon={<VisibilityIcon />}
+* 	hidePasswordIcon={<VisibilityOffIcon />}
 * 	value={password}
 * 	onValueChange={setPassword}
 * 	autoComplete="current-password"
 * />
 */
 var PasswordField = (t0) => {
-	const $ = c(65);
+	const $ = c(63);
 	let className;
 	let description;
 	let dirty;
 	let disabled;
 	let errors;
+	let hidePasswordIcon;
 	let hidePasswordLabel;
 	let inputProps;
 	let label;
@@ -40,6 +39,7 @@ var PasswordField = (t0) => {
 	let readOnly;
 	let requiredness;
 	let scoreLabels;
+	let showPasswordIcon;
 	let showPasswordLabel;
 	let state;
 	let strength;
@@ -47,143 +47,134 @@ var PasswordField = (t0) => {
 	let touched;
 	let value;
 	if ($[0] !== t0) {
-		({label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps} = t0);
+		({label, description, errors, requiredness, optionalLabel, showPasswordLabel, hidePasswordLabel, showPasswordIcon, hidePasswordIcon, strength, strengthLabel, scoreLabels, languages, value, onValueChange, disabled, readOnly, dirty, touched, pending, state, className, ...inputProps} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = description;
 		$[3] = dirty;
 		$[4] = disabled;
 		$[5] = errors;
-		$[6] = hidePasswordLabel;
-		$[7] = inputProps;
-		$[8] = label;
-		$[9] = languages;
-		$[10] = onValueChange;
-		$[11] = optionalLabel;
-		$[12] = pending;
-		$[13] = readOnly;
-		$[14] = requiredness;
-		$[15] = scoreLabels;
-		$[16] = showPasswordLabel;
-		$[17] = state;
-		$[18] = strength;
-		$[19] = strengthLabel;
-		$[20] = touched;
-		$[21] = value;
+		$[6] = hidePasswordIcon;
+		$[7] = hidePasswordLabel;
+		$[8] = inputProps;
+		$[9] = label;
+		$[10] = languages;
+		$[11] = onValueChange;
+		$[12] = optionalLabel;
+		$[13] = pending;
+		$[14] = readOnly;
+		$[15] = requiredness;
+		$[16] = scoreLabels;
+		$[17] = showPasswordIcon;
+		$[18] = showPasswordLabel;
+		$[19] = state;
+		$[20] = strength;
+		$[21] = strengthLabel;
+		$[22] = touched;
+		$[23] = value;
 	} else {
 		className = $[1];
 		description = $[2];
 		dirty = $[3];
 		disabled = $[4];
 		errors = $[5];
-		hidePasswordLabel = $[6];
-		inputProps = $[7];
-		label = $[8];
-		languages = $[9];
-		onValueChange = $[10];
-		optionalLabel = $[11];
-		pending = $[12];
-		readOnly = $[13];
-		requiredness = $[14];
-		scoreLabels = $[15];
-		showPasswordLabel = $[16];
-		state = $[17];
-		strength = $[18];
-		strengthLabel = $[19];
-		touched = $[20];
-		value = $[21];
+		hidePasswordIcon = $[6];
+		hidePasswordLabel = $[7];
+		inputProps = $[8];
+		label = $[9];
+		languages = $[10];
+		onValueChange = $[11];
+		optionalLabel = $[12];
+		pending = $[13];
+		readOnly = $[14];
+		requiredness = $[15];
+		scoreLabels = $[16];
+		showPasswordIcon = $[17];
+		showPasswordLabel = $[18];
+		state = $[19];
+		strength = $[20];
+		strengthLabel = $[21];
+		touched = $[22];
+		value = $[23];
 	}
 	const [revealed, setRevealed] = useState(false);
 	let t1;
-	if ($[22] !== label) {
+	if ($[24] !== label) {
 		t1 = /* @__PURE__ */ jsx(TextInput.Label, { children: label });
-		$[22] = label;
-		$[23] = t1;
-	} else t1 = $[23];
+		$[24] = label;
+		$[25] = t1;
+	} else t1 = $[25];
 	const t2 = revealed ? "text" : "password";
 	let t3;
-	if ($[24] !== inputProps || $[25] !== t2) {
+	if ($[26] !== inputProps || $[27] !== t2) {
 		t3 = /* @__PURE__ */ jsx(TextInput.Input, {
 			...inputProps,
 			type: t2
 		});
-		$[24] = inputProps;
-		$[25] = t2;
-		$[26] = t3;
-	} else t3 = $[26];
+		$[26] = inputProps;
+		$[27] = t2;
+		$[28] = t3;
+	} else t3 = $[28];
 	let t4;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
 		t4 = /* @__PURE__ */ jsx(TextInput.Pending, {});
-		$[27] = t4;
-	} else t4 = $[27];
-	const t5 = revealed ? SvgVisibilityOff : SvgVisibility;
-	const t6 = revealed ? hidePasswordLabel : showPasswordLabel;
+		$[29] = t4;
+	} else t4 = $[29];
+	const t5 = revealed ? hidePasswordLabel : showPasswordLabel;
+	const t6 = revealed ? hidePasswordIcon : showPasswordIcon;
 	let t7;
-	if ($[28] !== revealed) {
-		t7 = () => setRevealed(!revealed);
-		$[28] = revealed;
-		$[29] = t7;
-	} else t7 = $[29];
-	let t8;
-	if ($[30] !== disabled || $[31] !== revealed || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
-		t8 = /* @__PURE__ */ jsx(Button, {
-			iconOnly: true,
-			icon: t5,
-			label: t6,
-			variant: "tertiary",
-			size: "sm",
-			"aria-pressed": revealed,
-			disabled,
-			className: text_field_module_default.action,
-			onClick: t7
+	if ($[30] !== revealed || $[31] !== t5 || $[32] !== t6) {
+		t7 = /* @__PURE__ */ jsx(TextInput.Reveal, {
+			revealed,
+			onRevealedChange: setRevealed,
+			label: t5,
+			children: t6
 		});
-		$[30] = disabled;
-		$[31] = revealed;
-		$[32] = t5;
-		$[33] = t6;
-		$[34] = t7;
-		$[35] = t8;
-	} else t8 = $[35];
-	let t9;
-	if ($[36] !== t3 || $[37] !== t8) {
-		t9 = /* @__PURE__ */ jsxs(TextInput.Group, { children: [
+		$[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,
 			t4,
-			t8
+			t7
 		] });
-		$[36] = t3;
-		$[37] = t8;
-		$[38] = t9;
-	} else t9 = $[38];
-	let t10;
-	if ($[39] !== languages || $[40] !== scoreLabels || $[41] !== strength || $[42] !== strengthLabel || $[43] !== value) {
-		t10 = strength === true && /* @__PURE__ */ jsx(PasswordStrength, {
+		$[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, {
 			password: value,
 			label: strengthLabel,
 			scoreLabels,
 			languages
 		});
-		$[39] = languages;
-		$[40] = scoreLabels;
-		$[41] = strength;
-		$[42] = strengthLabel;
-		$[43] = value;
+		$[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] !== description) {
-		t11 = /* @__PURE__ */ jsx(TextInput.Description, { children: description });
-		$[45] = description;
-		$[46] = t11;
-	} else t11 = $[46];
+	if ($[45] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(TextInput.Error, {});
+		$[45] = t11;
+	} else t11 = $[45];
 	let t12;
-	if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(TextInput.Error, {});
-		$[47] = t12;
-	} else t12 = $[47];
-	let t13;
-	if ($[48] !== className || $[49] !== dirty || $[50] !== disabled || $[51] !== errors || $[52] !== onValueChange || $[53] !== optionalLabel || $[54] !== pending || $[55] !== readOnly || $[56] !== requiredness || $[57] !== state || $[58] !== t1 || $[59] !== t10 || $[60] !== t11 || $[61] !== t9 || $[62] !== touched || $[63] !== value) {
-		t13 = /* @__PURE__ */ jsxs(TextInput.Root, {
+	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, {
 			value,
 			onValueChange,
 			disabled,
@@ -198,30 +189,30 @@ var PasswordField = (t0) => {
 			className,
 			children: [
 				t1,
+				t8,
 				t9,
 				t10,
-				t11,
-				t12
+				t11
 			]
 		});
-		$[48] = className;
-		$[49] = dirty;
-		$[50] = disabled;
-		$[51] = errors;
-		$[52] = onValueChange;
-		$[53] = optionalLabel;
-		$[54] = pending;
-		$[55] = readOnly;
-		$[56] = requiredness;
-		$[57] = state;
-		$[58] = t1;
-		$[59] = t10;
-		$[60] = t11;
-		$[61] = t9;
-		$[62] = touched;
-		$[63] = value;
-		$[64] = t13;
-	} else t13 = $[64];
-	return 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;
+		$[62] = t12;
+	} else t12 = $[62];
+	return t12;
 };
 export { PasswordField };

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

@@ -2,8 +2,8 @@ import { usePasswordStrength } from "../../lib/password-strength/password-streng
 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 { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Meter } from "@base-ui/react/meter";
 // src/components/password-field/password-strength.tsx
 var MAX_SCORE = 4;

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

@@ -8,7 +8,7 @@ export type TSFPasswordFieldProps = Omit<PasswordFieldBaseProps, keyof Connected
  *
  * @example
  * <form.AppField name="password">
- * 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" />}
+ * 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" showPasswordIcon={<VisibilityIcon />} hidePasswordIcon={<VisibilityOffIcon />} />}
  * </form.AppField>
  */
 export declare const TSFPasswordField: (props: TSFPasswordFieldProps) => ReactNode;

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

@@ -9,7 +9,7 @@ import { jsx } from "react/jsx-runtime";
 *
 * @example
 * <form.AppField name="password">
-* 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" />}
+* 	{field => <field.PasswordField label="Password" optionalLabel="optional" showPasswordLabel="Show password" hidePasswordLabel="Hide password" showPasswordIcon={<VisibilityIcon />} hidePasswordIcon={<VisibilityOffIcon />} />}
 * </form.AppField>
 */
 var TSFPasswordField = (props) => {

package/dist/components/photo-field/photo-field.d.ts

@@ -1,7 +1,19 @@
 import type { ReactNode } from "react";
 import { type FieldProps } from "../field/index.ts";
-import { type PhotoInputPreviewProps, type PhotoInputProps } from "./photo-input.tsx";
-export type PhotoFieldProps = Omit<PhotoInputProps, keyof PhotoInputPreviewProps | "labelledBy" | "describedBy" | "invalid" | "pending"> & PhotoInputPreviewProps & FieldProps & Readonly<{
+import { type PhotoInputPreviewProps, type PhotoInputRootProps } from "./photo-input.tsx";
+export type PhotoFieldProps = Pick<PhotoInputRootProps, "value" | "onValueChange" | "accept" | "name" | "readOnly" | "onBlur"> & PhotoInputPreviewProps & FieldProps & Readonly<{
+    /** The picked photo's alternative text, such as "Preview". */
+    previewLabel: string;
+    /** What the control announces while a photo is set, such as "Photo set". */
+    photoSetLabel: string;
+    /** What the control announces while no photo is set, such as "No photo". */
+    noPhotoLabel: string;
+    /** Accessible name of the button that removes a picked photo, such as "Remove photo". */
+    removeLabel: string;
+    /** The remove button's icon, such as a cross. */
+    removeIcon: ReactNode;
+    /** The badge on the circle's rim, such as a camera icon. */
+    icon?: ReactNode;
     /** Applied to the field, where a caller lays it out itself. */
     className?: string;
 }>;
@@ -20,10 +32,12 @@ export type PhotoFieldProps = Omit<PhotoInputProps, keyof PhotoInputPreviewProps
  * 	hasStoredImage={user.photo !== null}
  * 	defaultPreview={<Avatar name={user.name} />}
  * 	accept={["image/png", "image/jpeg"]}
+ * 	icon={<PhotoCameraIcon />}
  * 	previewLabel="Preview"
  * 	photoSetLabel="Photo set"
  * 	noPhotoLabel="No photo"
  * 	removeLabel="Remove photo"
+ * 	removeIcon={<CloseIcon />}
  * />
  */
-export declare const PhotoField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, ...controlProps }: PhotoFieldProps) => ReactNode;
+export declare const PhotoField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, defaultPreview, hasStoredImage, previewLabel, photoSetLabel, noPhotoLabel, removeLabel, removeIcon, icon, ...controlProps }: PhotoFieldProps) => ReactNode;