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

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

@@ -1,3 +1,4 @@
+import { IconButton } from "../button/button.js";
 import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { PhotoInput } from "./photo-input.js";
@@ -28,7 +29,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var PhotoField = (t0) => {
-	const $ = c(77);
+	const $ = c(84);
 	let className;
 	let controlProps;
 	let defaultPreview;
@@ -113,150 +114,174 @@ var PhotoField = (t0) => {
 	} else t1 = $[26];
 	const field = useFieldState(t1);
 	const { invalid } = field;
-	let t2;
-	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx("span", {});
-		$[27] = t2;
-	} else t2 = $[27];
+	const t2 = field.disabled;
 	let t3;
-	if ($[28] !== label || $[29] !== labelId || $[30] !== optionalLabel || $[31] !== requiredness) {
-		t3 = /* @__PURE__ */ jsx(Field.Label, {
-			id: labelId,
-			nativeLabel: false,
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx("span", {});
+		$[27] = t3;
+	} else t3 = $[27];
+	let t4;
+	if ($[28] !== optionalLabel || $[29] !== requiredness) {
+		t4 = /* @__PURE__ */ jsx(Field.Requiredness, {
 			requiredness,
-			optionalLabel,
-			render: t2,
-			children: label
+			optionalLabel
 		});
-		$[28] = label;
-		$[29] = labelId;
-		$[30] = optionalLabel;
-		$[31] = requiredness;
-		$[32] = t3;
-	} else t3 = $[32];
-	let t4;
-	if ($[33] !== description || $[34] !== ids || $[35] !== invalid) {
-		t4 = ids.describedBy(description !== void 0, invalid);
-		$[33] = description;
-		$[34] = ids;
-		$[35] = invalid;
-		$[36] = t4;
-	} else t4 = $[36];
+		$[28] = optionalLabel;
+		$[29] = requiredness;
+		$[30] = t4;
+	} else t4 = $[30];
 	let t5;
-	if ($[37] !== defaultPreview || $[38] !== previewLabel) {
-		t5 = /* @__PURE__ */ jsx(PhotoInput.Face, {
-			previewLabel,
-			children: defaultPreview
+	if ($[31] !== label || $[32] !== labelId || $[33] !== t4) {
+		t5 = /* @__PURE__ */ jsxs(Field.Label, {
+			id: labelId,
+			nativeLabel: false,
+			render: t3,
+			children: [
+				label,
+				" ",
+				t4
+			]
 		});
-		$[37] = defaultPreview;
-		$[38] = previewLabel;
-		$[39] = t5;
-	} else t5 = $[39];
+		$[31] = label;
+		$[32] = labelId;
+		$[33] = t4;
+		$[34] = t5;
+	} else t5 = $[34];
 	let t6;
-	if ($[40] !== icon) {
-		t6 = /* @__PURE__ */ jsx(PhotoInput.Badge, { children: icon });
-		$[40] = icon;
-		$[41] = t6;
-	} else t6 = $[41];
+	if ($[35] !== description || $[36] !== ids || $[37] !== invalid) {
+		t6 = ids.describedBy(description !== void 0, invalid);
+		$[35] = description;
+		$[36] = ids;
+		$[37] = invalid;
+		$[38] = t6;
+	} else t6 = $[38];
 	let t7;
-	if ($[42] !== t5 || $[43] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(PhotoInput.Well, { children: [t5, t6] });
-		$[42] = t5;
-		$[43] = t6;
-		$[44] = t7;
-	} else t7 = $[44];
+	if ($[39] !== previewLabel) {
+		t7 = /* @__PURE__ */ jsx(PhotoInput.Image, { alt: previewLabel });
+		$[39] = previewLabel;
+		$[40] = t7;
+	} else t7 = $[40];
 	let t8;
-	if ($[45] !== removeIcon || $[46] !== removeLabel) {
-		t8 = /* @__PURE__ */ jsx(PhotoInput.Remove, {
-			label: removeLabel,
-			icon: removeIcon
-		});
-		$[45] = removeIcon;
-		$[46] = removeLabel;
-		$[47] = t8;
-	} else t8 = $[47];
+	if ($[41] !== defaultPreview) {
+		t8 = /* @__PURE__ */ jsx(PhotoInput.Fallback, { children: defaultPreview });
+		$[41] = defaultPreview;
+		$[42] = t8;
+	} else t8 = $[42];
 	let t9;
-	if ($[48] !== noPhotoLabel || $[49] !== photoSetLabel) {
-		t9 = /* @__PURE__ */ jsx(PhotoInput.ValueText, {
+	if ($[43] !== t7 || $[44] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(PhotoInput.Face, { children: [t7, t8] });
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t9;
+	} else t9 = $[45];
+	let t10;
+	if ($[46] !== icon) {
+		t10 = /* @__PURE__ */ jsx(PhotoInput.Badge, { children: icon });
+		$[46] = icon;
+		$[47] = t10;
+	} else t10 = $[47];
+	let t11;
+	if ($[48] !== t10 || $[49] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(PhotoInput.Well, { children: [t9, t10] });
+		$[48] = t10;
+		$[49] = t9;
+		$[50] = t11;
+	} else t11 = $[50];
+	let t12;
+	if ($[51] !== removeIcon || $[52] !== removeLabel) {
+		t12 = /* @__PURE__ */ jsx(PhotoInput.Remove, { render: /* @__PURE__ */ jsx(IconButton, {
+			label: removeLabel,
+			variant: "secondary",
+			children: removeIcon
+		}) });
+		$[51] = removeIcon;
+		$[52] = removeLabel;
+		$[53] = t12;
+	} else t12 = $[53];
+	let t13;
+	if ($[54] !== noPhotoLabel || $[55] !== photoSetLabel) {
+		t13 = /* @__PURE__ */ jsx(PhotoInput.ValueText, {
 			photoSetLabel,
 			noPhotoLabel
 		});
-		$[48] = noPhotoLabel;
-		$[49] = photoSetLabel;
-		$[50] = t9;
-	} else t9 = $[50];
-	let t10;
-	if ($[51] !== controlProps || $[52] !== field.state.pending || $[53] !== hasStoredImage || $[54] !== invalid || $[55] !== labelId || $[56] !== readOnly || $[57] !== t4 || $[58] !== t7 || $[59] !== t8 || $[60] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(PhotoInput.Root, {
+		$[54] = noPhotoLabel;
+		$[55] = photoSetLabel;
+		$[56] = t13;
+	} else t13 = $[56];
+	let t14;
+	if ($[57] !== controlProps || $[58] !== field.state.pending || $[59] !== hasStoredImage || $[60] !== invalid || $[61] !== labelId || $[62] !== readOnly || $[63] !== t11 || $[64] !== t12 || $[65] !== t13 || $[66] !== t6) {
+		t14 = /* @__PURE__ */ jsxs(PhotoInput.Root, {
 			...controlProps,
 			hasStoredImage,
 			labelledBy: labelId,
-			describedBy: t4,
+			describedBy: t6,
 			readOnly,
 			invalid,
 			pending: field.state.pending,
 			children: [
-				t7,
-				t8,
-				t9
+				t11,
+				t12,
+				t13
 			]
 		});
-		$[51] = controlProps;
-		$[52] = field.state.pending;
-		$[53] = hasStoredImage;
-		$[54] = invalid;
-		$[55] = labelId;
-		$[56] = readOnly;
-		$[57] = t4;
-		$[58] = t7;
-		$[59] = t8;
-		$[60] = t9;
-		$[61] = t10;
-	} else t10 = $[61];
-	let t11;
-	if ($[62] !== description || $[63] !== descriptionId) {
-		t11 = /* @__PURE__ */ jsx(Field.Description, {
+		$[57] = controlProps;
+		$[58] = field.state.pending;
+		$[59] = hasStoredImage;
+		$[60] = invalid;
+		$[61] = labelId;
+		$[62] = readOnly;
+		$[63] = t11;
+		$[64] = t12;
+		$[65] = t13;
+		$[66] = t6;
+		$[67] = t14;
+	} else t14 = $[67];
+	let t15;
+	if ($[68] !== description || $[69] !== descriptionId) {
+		t15 = /* @__PURE__ */ jsx(Field.Description, {
 			id: descriptionId,
 			children: description
 		});
-		$[62] = description;
-		$[63] = descriptionId;
-		$[64] = t11;
-	} else t11 = $[64];
-	let t12;
-	if ($[65] !== errorId || $[66] !== errors) {
-		t12 = /* @__PURE__ */ jsx(Field.Error, {
+		$[68] = description;
+		$[69] = descriptionId;
+		$[70] = t15;
+	} else t15 = $[70];
+	let t16;
+	if ($[71] !== errorId || $[72] !== errors) {
+		t16 = /* @__PURE__ */ jsx(Field.Error, {
 			id: errorId,
 			children: errors
 		});
-		$[65] = errorId;
-		$[66] = errors;
-		$[67] = t12;
-	} else t12 = $[67];
-	let t13;
-	if ($[68] !== className || $[69] !== dirty || $[70] !== invalid || $[71] !== t10 || $[72] !== t11 || $[73] !== t12 || $[74] !== t3 || $[75] !== touched) {
-		t13 = /* @__PURE__ */ jsxs(Field.Root, {
+		$[71] = errorId;
+		$[72] = errors;
+		$[73] = t16;
+	} else t16 = $[73];
+	let t17;
+	if ($[74] !== className || $[75] !== dirty || $[76] !== field.disabled || $[77] !== invalid || $[78] !== t14 || $[79] !== t15 || $[80] !== t16 || $[81] !== t5 || $[82] !== touched) {
+		t17 = /* @__PURE__ */ jsxs(Field.Root, {
 			className,
+			disabled: t2,
 			invalid,
 			dirty,
 			touched,
 			children: [
-				t3,
-				t10,
-				t11,
-				t12
+				t5,
+				t14,
+				t15,
+				t16
 			]
 		});
-		$[68] = className;
-		$[69] = dirty;
-		$[70] = invalid;
-		$[71] = t10;
-		$[72] = t11;
-		$[73] = t12;
-		$[74] = t3;
-		$[75] = touched;
-		$[76] = t13;
-	} else t13 = $[76];
-	return t13;
+		$[74] = className;
+		$[75] = dirty;
+		$[76] = field.disabled;
+		$[77] = invalid;
+		$[78] = t14;
+		$[79] = t15;
+		$[80] = t16;
+		$[81] = t5;
+		$[82] = touched;
+		$[83] = t17;
+	} else t17 = $[83];
+	return t17;
 };
 export { PhotoField };

package/dist/components/photo-field/photo-input.css

@@ -1,10 +1,10 @@
 @layer kit.reset, kit.base, kit.components;
 @layer kit.components {
-  ._photoInput_1q2zc_3 {
+  ._photoInput_1l3vc_3 {
     position: relative;
     inline-size: var(--photo-input-size, var(--sys-unit-64));
   }
-  ._well_1q2zc_7 {
+  ._well_1l3vc_7 {
     --_well-state-layer: 0;
     position: relative;
     display: grid;
@@ -12,97 +12,120 @@
     inline-size: 100%;
     aspect-ratio: 1;
     margin: 0;
-    border: 1px solid var(--photo-input-border, var(--sys-color-border));
-    border-radius: var(--sys-radius-circle);
-    padding: var(--sys-unit-2);
+    border: var(--photo-input-border-width, 1px) solid var(--photo-input-border, var(--sys-color-border));
+    border-radius: var(--photo-input-radius, var(--sys-radius-circle));
+    padding: var(--photo-input-pad-y, var(--sys-unit-2)) var(--photo-input-pad-x, var(--sys-unit-2));
     background-color: var(--photo-input-bg, var(--sys-color-surface));
-    color: var(--sys-color-text);
+    color: var(--photo-input-fg, var(--sys-color-text));
     cursor: pointer;
   }
-  ._well_1q2zc_7 {
+  ._well_1l3vc_7 {
     outline: 0 solid var(--sys-color-focus-ring);
     outline-offset: var(--sys-focus-ring-offset);
   }
-  ._well_1q2zc_7:focus-visible {
+  ._well_1l3vc_7:focus-visible {
     outline-width: var(--sys-focus-ring-width);
   }
   @media not (prefers-reduced-motion) {
-    ._well_1q2zc_7 {
+    ._well_1l3vc_7 {
       transition: border-color var(--sys-motion-instant) var(--sys-motion-standard), background-color var(--sys-motion-instant) var(--sys-motion-standard), outline-width var(--sys-motion-instant) var(--sys-motion-standard);
     }
   }
-  ._well_1q2zc_7:is(:hover, :focus-visible):not([data-readonly]), ._well_1q2zc_7[data-dragover] {
+  ._well_1l3vc_7:is(:hover, :focus-visible):not([data-readonly]), ._well_1l3vc_7[data-dragover] {
     --_well-state-layer: var(--sys-state-hover);
     border-color: var(--photo-input-active-border, var(--sys-color-primary));
   }
-  ._well_1q2zc_7[data-dragover] {
+  ._well_1l3vc_7[data-dragover] {
     --_well-state-layer: var(--sys-state-dragged);
     background-color: var(--photo-input-drop-bg, var(--sys-color-primary-container));
   }
-  ._well_1q2zc_7[data-pending] {
+  ._well_1l3vc_7[data-pending] {
     cursor: progress;
-    caret-color: var(--sys-color-text-muted);
-  }
-  ._well_1q2zc_7[data-invalid] {
-    --field-fg: var(--sys-color-error-fg);
-    --field-muted-fg: var(--sys-color-error-fg);
-    --field-placeholder-fg: var(--sys-color-error-fg);
-    border-color: var(--sys-color-error-fg);
-    background-color: var(--sys-color-error-bg);
-    color: var(--field-fg);
-  }
-  ._well_1q2zc_7[data-readonly] {
-    --field-fg: var(--sys-color-text);
-    border-style: dashed;
-    border-color: var(--sys-color-outline);
-    background: var(--sys-color-surface-high);
-    color: var(--field-fg);
+    caret-color: var(--field-pending-caret, var(--sys-color-text-muted));
+  }
+  ._well_1l3vc_7[data-invalid] {
+    --_field-fg: var(
+    	--field-invalid-fg,
+    	var(--sys-color-error-fg)
+    );
+    --_field-muted-fg: var(
+    	--field-invalid-muted-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-placeholder-fg: var(
+    	--field-invalid-placeholder-fg,
+    	var(--field-invalid-fg, var(--sys-color-error-fg))
+    );
+    --_field-fill: var(
+    	--field-invalid-bg,
+    	var(--sys-color-error-bg)
+    );
+    border-color: var(--field-invalid-border, var(--sys-color-error-fg));
+    background-color: var(--_field-fill);
+    color: var(--_field-fg);
+  }
+  ._well_1l3vc_7[data-readonly] {
+    --_field-fg: var(
+    	--field-readonly-fg,
+    	var(--sys-color-text)
+    );
+    --_field-fill: var(
+    	--field-readonly-bg,
+    	var(--sys-color-surface-high)
+    );
+    border-style: var(--field-readonly-border-style, dashed);
+    border-color: var(--field-readonly-border, var(--sys-color-outline));
+    background: var(--_field-fill);
+    color: var(--_field-fg);
     cursor: default;
   }
-  ._face_1q2zc_62 {
+  ._face_1l3vc_82 {
     position: relative;
     display: grid;
     place-items: center;
     overflow: hidden;
-    border-radius: var(--sys-radius-circle);
+    border-radius: var(--photo-input-radius, var(--sys-radius-circle));
   }
-  ._face_1q2zc_62::after {
+  ._face_1l3vc_82::after {
     content: "";
     position: absolute;
     inset: 0;
-    background-color: var(--sys-color-primary);
+    background-color: var(--photo-input-state-layer-bg, var(--sys-color-primary));
     opacity: var(--_well-state-layer);
     pointer-events: none;
   }
-  ._face_1q2zc_62 img,
-  ._face_1q2zc_62 svg {
+  ._face_1l3vc_82 img,
+  ._face_1l3vc_82 svg {
     inline-size: 100%;
     block-size: 100%;
     object-fit: cover;
-    border-radius: var(--sys-radius-circle);
+    border-radius: var(--photo-input-radius, var(--sys-radius-circle));
   }
-  ._badge_1q2zc_84 {
+  ._fallback_1l3vc_104 {
+    display: contents;
+  }
+  ._badge_1l3vc_107 {
     position: absolute;
     inset-block-end: 0;
     inset-inline-end: 0;
     display: grid;
     place-items: center;
-    inline-size: var(--sys-unit-20);
-    block-size: var(--sys-unit-20);
-    border: 3px solid var(--sys-color-surface);
-    border-radius: var(--sys-radius-circle);
+    inline-size: var(--photo-input-badge-size, var(--sys-unit-20));
+    block-size: var(--photo-input-badge-size, var(--sys-unit-20));
+    border: var(--photo-input-badge-border-width, 3px) solid var(--photo-input-badge-border, var(--sys-color-surface));
+    border-radius: var(--photo-input-badge-radius, var(--sys-radius-circle));
     background-color: var(--photo-input-badge-bg, var(--sys-color-primary));
     color: var(--photo-input-badge-fg, var(--sys-color-on-primary));
     pointer-events: none;
   }
-  ._remove_1q2zc_98 {
+  ._remove_1l3vc_121 {
     position: absolute;
     inset-block-start: 0;
     inset-inline-end: 0;
-    border: 3px solid var(--sys-color-surface);
+    border: var(--photo-input-remove-border-width, 3px) solid var(--photo-input-remove-border, var(--sys-color-surface));
   }
-  ._picker_1q2zc_104,
-  ._valueText_1q2zc_105 {
+  ._picker_1l3vc_127,
+  ._valueText_1l3vc_128 {
     position: absolute;
     overflow: hidden;
     clip-path: inset(50%);

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

@@ -1,4 +1,5 @@
-import { type ComponentProps, type HTMLAttributes, type ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { type ComponentProps, type ComponentPropsWithRef, type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { type FieldBlurHandler } from "../field/index.ts";
 /** What the circle shows until a photo is picked: a placeholder, or the stored photo. */
 export type PhotoInputPreviewProps = Readonly<{
@@ -43,22 +44,56 @@ export type PhotoInputWellProps = HTMLAttributes<HTMLElement>;
  * Read-only, it is a focusable image that opens nothing.
  */
 declare const PhotoInputWell: ({ className, ...props }: PhotoInputWellProps) => ReactNode;
-export type PhotoInputFaceProps = ComponentProps<"span"> & Readonly<{
+/**
+ * The picture inside the well, holding the picked photo's `Image` and the
+ * `Fallback` shown until one is picked.
+ *
+ * @example
+ * <PhotoInput.Face>
+ * 	<PhotoInput.Image alt="Preview" />
+ * 	<PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
+ * </PhotoInput.Face>
+ */
+declare const PhotoInputFace: ({ className, ...props }: ComponentProps<"span">) => ReactNode;
+export type PhotoInputImageProps = Omit<ComponentProps<"img">, "src" | "alt"> & Readonly<{
     /** The picked photo's alternative text, such as "Preview". */
-    previewLabel: string;
+    alt: string;
 }>;
-/** The picture inside the well: the picked photo, else its children, such as a placeholder or the stored photo. */
-declare const PhotoInputFace: ({ previewLabel, className, children, ...props }: PhotoInputFaceProps) => ReactNode;
+/**
+ * The picked photo. Renders nothing until one is picked.
+ *
+ * @example
+ * <PhotoInput.Image alt="Preview" />
+ */
+declare const PhotoInputImage: ({ alt, ...props }: PhotoInputImageProps) => ReactNode;
+/**
+ * What the face shows until a photo is picked, such as a placeholder or the
+ * stored photo. Renders nothing once one is picked, or without children.
+ *
+ * @example
+ * <PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
+ */
+declare const PhotoInputFallback: ({ className, children, ...props }: ComponentProps<"span">) => ReactNode;
 /** The badge on the well's rim. Its children are the icon, such as a camera; without them, or read-only, it renders nothing. */
 declare const PhotoInputBadge: ({ className, children, ...props }: ComponentProps<"span">) => ReactNode;
-export type PhotoInputRemoveProps = Omit<ComponentProps<"button">, "children"> & Readonly<{
-    /** The button's accessible name and tooltip, such as "Remove photo". */
-    label: string;
-    /** The button's icon, such as a cross. */
-    icon: ReactNode;
+export type PhotoInputRemoveProps = Omit<ComponentPropsWithRef<"button">, "children"> & Readonly<{
+    /** The button to render, such as `<IconButton label="Remove photo" variant="secondary"><CloseIcon /></IconButton>`. */
+    render: useRender.RenderProp;
 }>;
-/** The icon-only button on the rim that removes a picked photo. It renders only while one is picked. */
-declare const PhotoInputRemove: ({ label, icon, className, onClick, ...props }: PhotoInputRemoveProps) => ReactNode;
+/**
+ * The button on the rim that removes a picked photo. It renders whichever
+ * button it is given, only while a photo is picked.
+ *
+ * @example
+ * <PhotoInput.Remove
+ * 	render={
+ * 		<IconButton label="Remove photo" variant="secondary">
+ * 			<CloseIcon />
+ * 		</IconButton>
+ * 	}
+ * />
+ */
+declare const PhotoInputRemove: ({ render, className, onClick, ...props }: PhotoInputRemoveProps) => ReactElement | null;
 export type PhotoInputValueTextProps = Omit<ComponentProps<"span">, "children" | "id"> & Readonly<{
     /** What the well announces while a photo is set, such as "Photo set". */
     photoSetLabel: string;
@@ -72,6 +107,8 @@ export type PhotoInputParts = Readonly<{
     Root: typeof PhotoInputRoot;
     Well: typeof PhotoInputWell;
     Face: typeof PhotoInputFace;
+    Image: typeof PhotoInputImage;
+    Fallback: typeof PhotoInputFallback;
     Badge: typeof PhotoInputBadge;
     Remove: typeof PhotoInputRemove;
     ValueText: typeof PhotoInputValueText;
@@ -85,12 +122,19 @@ export type PhotoInputParts = Readonly<{
  * @example
  * <PhotoInput.Root labelledBy={labelId} value={file} onValueChange={setFile}>
  * 	<PhotoInput.Well>
- * 		<PhotoInput.Face previewLabel="Preview">
- * 			<Avatar name={user.name} />
+ * 		<PhotoInput.Face>
+ * 			<PhotoInput.Image alt="Preview" />
+ * 			<PhotoInput.Fallback><Avatar name={user.name} /></PhotoInput.Fallback>
  * 		</PhotoInput.Face>
  * 		<PhotoInput.Badge><PhotoCameraIcon /></PhotoInput.Badge>
  * 	</PhotoInput.Well>
- * 	<PhotoInput.Remove label="Remove photo" icon={<CloseIcon />} />
+ * 	<PhotoInput.Remove
+ * 		render={
+ * 			<IconButton label="Remove photo" variant="secondary">
+ * 				<CloseIcon />
+ * 			</IconButton>
+ * 		}
+ * 	/>
  * 	<PhotoInput.ValueText photoSetLabel="Photo set" noPhotoLabel="No photo" />
  * </PhotoInput.Root>
  */