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

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

@@ -1,4 +1,4 @@
-import { Field, useFieldIds } from "../field/field.js";
+import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { PhotoInput } from "./photo-input.js";
 import { c } from "react/compiler-runtime";
@@ -19,56 +19,82 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 	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 />}
 * />
 */
 var PhotoField = (t0) => {
-	const $ = c(51);
+	const $ = c(77);
 	let className;
 	let controlProps;
+	let defaultPreview;
 	let description;
 	let dirty;
 	let errors;
+	let hasStoredImage;
+	let icon;
 	let label;
+	let noPhotoLabel;
 	let optionalLabel;
 	let pending;
+	let photoSetLabel;
+	let previewLabel;
 	let readOnly;
+	let removeIcon;
+	let removeLabel;
 	let requiredness;
 	let touched;
 	if ($[0] !== t0) {
-		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, ...controlProps} = t0);
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, defaultPreview, hasStoredImage, previewLabel, photoSetLabel, noPhotoLabel, removeLabel, removeIcon, icon, ...controlProps} = t0);
 		$[0] = t0;
 		$[1] = className;
 		$[2] = controlProps;
-		$[3] = description;
-		$[4] = dirty;
-		$[5] = errors;
-		$[6] = label;
-		$[7] = optionalLabel;
-		$[8] = pending;
-		$[9] = readOnly;
-		$[10] = requiredness;
-		$[11] = touched;
+		$[3] = defaultPreview;
+		$[4] = description;
+		$[5] = dirty;
+		$[6] = errors;
+		$[7] = hasStoredImage;
+		$[8] = icon;
+		$[9] = label;
+		$[10] = noPhotoLabel;
+		$[11] = optionalLabel;
+		$[12] = pending;
+		$[13] = photoSetLabel;
+		$[14] = previewLabel;
+		$[15] = readOnly;
+		$[16] = removeIcon;
+		$[17] = removeLabel;
+		$[18] = requiredness;
+		$[19] = touched;
 	} else {
 		className = $[1];
 		controlProps = $[2];
-		description = $[3];
-		dirty = $[4];
-		errors = $[5];
-		label = $[6];
-		optionalLabel = $[7];
-		pending = $[8];
-		readOnly = $[9];
-		requiredness = $[10];
-		touched = $[11];
+		defaultPreview = $[3];
+		description = $[4];
+		dirty = $[5];
+		errors = $[6];
+		hasStoredImage = $[7];
+		icon = $[8];
+		label = $[9];
+		noPhotoLabel = $[10];
+		optionalLabel = $[11];
+		pending = $[12];
+		photoSetLabel = $[13];
+		previewLabel = $[14];
+		readOnly = $[15];
+		removeIcon = $[16];
+		removeLabel = $[17];
+		requiredness = $[18];
+		touched = $[19];
 	}
-	const ids = useFieldIds();
+	const ids = Field.useIds();
 	const { labelId, descriptionId, errorId } = ids;
 	let t1;
-	if ($[12] !== dirty || $[13] !== errors || $[14] !== pending || $[15] !== readOnly || $[16] !== requiredness || $[17] !== touched) {
+	if ($[20] !== dirty || $[21] !== errors || $[22] !== pending || $[23] !== readOnly || $[24] !== requiredness || $[25] !== touched) {
 		t1 = {
 			errors,
 			requiredness,
@@ -77,23 +103,23 @@ var PhotoField = (t0) => {
 			pending,
 			readOnly
 		};
-		$[12] = dirty;
-		$[13] = errors;
-		$[14] = pending;
-		$[15] = readOnly;
-		$[16] = requiredness;
-		$[17] = touched;
-		$[18] = t1;
-	} else t1 = $[18];
+		$[20] = dirty;
+		$[21] = errors;
+		$[22] = pending;
+		$[23] = readOnly;
+		$[24] = requiredness;
+		$[25] = touched;
+		$[26] = t1;
+	} else t1 = $[26];
 	const field = useFieldState(t1);
 	const { invalid } = field;
 	let t2;
-	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = /* @__PURE__ */ jsx("span", {});
-		$[19] = t2;
-	} else t2 = $[19];
+		$[27] = t2;
+	} else t2 = $[27];
 	let t3;
-	if ($[20] !== label || $[21] !== labelId || $[22] !== optionalLabel || $[23] !== requiredness) {
+	if ($[28] !== label || $[29] !== labelId || $[30] !== optionalLabel || $[31] !== requiredness) {
 		t3 = /* @__PURE__ */ jsx(Field.Label, {
 			id: labelId,
 			nativeLabel: false,
@@ -102,82 +128,135 @@ var PhotoField = (t0) => {
 			render: t2,
 			children: label
 		});
-		$[20] = label;
-		$[21] = labelId;
-		$[22] = optionalLabel;
-		$[23] = requiredness;
-		$[24] = t3;
-	} else t3 = $[24];
+		$[28] = label;
+		$[29] = labelId;
+		$[30] = optionalLabel;
+		$[31] = requiredness;
+		$[32] = t3;
+	} else t3 = $[32];
 	let t4;
-	if ($[25] !== description || $[26] !== ids || $[27] !== invalid) {
+	if ($[33] !== description || $[34] !== ids || $[35] !== invalid) {
 		t4 = ids.describedBy(description !== void 0, invalid);
-		$[25] = description;
-		$[26] = ids;
-		$[27] = invalid;
-		$[28] = t4;
-	} else t4 = $[28];
+		$[33] = description;
+		$[34] = ids;
+		$[35] = invalid;
+		$[36] = t4;
+	} else t4 = $[36];
 	let t5;
-	if ($[29] !== controlProps || $[30] !== field.state.pending || $[31] !== invalid || $[32] !== labelId || $[33] !== readOnly || $[34] !== t4) {
-		t5 = /* @__PURE__ */ jsx(PhotoInput, {
+	if ($[37] !== defaultPreview || $[38] !== previewLabel) {
+		t5 = /* @__PURE__ */ jsx(PhotoInput.Face, {
+			previewLabel,
+			children: defaultPreview
+		});
+		$[37] = defaultPreview;
+		$[38] = previewLabel;
+		$[39] = t5;
+	} else t5 = $[39];
+	let t6;
+	if ($[40] !== icon) {
+		t6 = /* @__PURE__ */ jsx(PhotoInput.Badge, { children: icon });
+		$[40] = icon;
+		$[41] = t6;
+	} else t6 = $[41];
+	let t7;
+	if ($[42] !== t5 || $[43] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(PhotoInput.Well, { children: [t5, t6] });
+		$[42] = t5;
+		$[43] = t6;
+		$[44] = t7;
+	} else t7 = $[44];
+	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];
+	let t9;
+	if ($[48] !== noPhotoLabel || $[49] !== photoSetLabel) {
+		t9 = /* @__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, {
 			...controlProps,
+			hasStoredImage,
 			labelledBy: labelId,
 			describedBy: t4,
 			readOnly,
 			invalid,
-			pending: field.state.pending
+			pending: field.state.pending,
+			children: [
+				t7,
+				t8,
+				t9
+			]
 		});
-		$[29] = controlProps;
-		$[30] = field.state.pending;
-		$[31] = invalid;
-		$[32] = labelId;
-		$[33] = readOnly;
-		$[34] = t4;
-		$[35] = t5;
-	} else t5 = $[35];
-	let t6;
-	if ($[36] !== description || $[37] !== descriptionId) {
-		t6 = /* @__PURE__ */ jsx(Field.Description, {
+		$[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, {
 			id: descriptionId,
 			children: description
 		});
-		$[36] = description;
-		$[37] = descriptionId;
-		$[38] = t6;
-	} else t6 = $[38];
-	let t7;
-	if ($[39] !== errorId || $[40] !== errors) {
-		t7 = /* @__PURE__ */ jsx(Field.Error, {
+		$[62] = description;
+		$[63] = descriptionId;
+		$[64] = t11;
+	} else t11 = $[64];
+	let t12;
+	if ($[65] !== errorId || $[66] !== errors) {
+		t12 = /* @__PURE__ */ jsx(Field.Error, {
 			id: errorId,
 			children: errors
 		});
-		$[39] = errorId;
-		$[40] = errors;
-		$[41] = t7;
-	} else t7 = $[41];
-	let t8;
-	if ($[42] !== className || $[43] !== dirty || $[44] !== invalid || $[45] !== t3 || $[46] !== t5 || $[47] !== t6 || $[48] !== t7 || $[49] !== touched) {
-		t8 = /* @__PURE__ */ jsxs(Field.Root, {
+		$[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, {
 			className,
 			invalid,
 			dirty,
 			touched,
 			children: [
 				t3,
-				t5,
-				t6,
-				t7
+				t10,
+				t11,
+				t12
 			]
 		});
-		$[42] = className;
-		$[43] = dirty;
-		$[44] = invalid;
-		$[45] = t3;
-		$[46] = t5;
-		$[47] = t6;
-		$[48] = t7;
-		$[49] = touched;
-		$[50] = t8;
-	} else t8 = $[50];
-	return t8;
+		$[68] = className;
+		$[69] = dirty;
+		$[70] = invalid;
+		$[71] = t10;
+		$[72] = t11;
+		$[73] = t12;
+		$[74] = t3;
+		$[75] = touched;
+		$[76] = t13;
+	} else t13 = $[76];
+	return t13;
 };
 export { PhotoField };

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

@@ -0,0 +1,25 @@
+import { type Context, type RefObject } from "react";
+import type { FieldBlurHandler } from "../field/index.ts";
+export type PhotoInputContextValue = Readonly<{
+    value: File | undefined;
+    filled: boolean;
+    readOnly: boolean;
+    invalid: boolean;
+    pending: boolean;
+    labelledBy: string;
+    describedBy: string;
+    valueId: string;
+    well: RefObject<HTMLButtonElement | null>;
+    picker: RefObject<HTMLInputElement | null>;
+    pick: (file: File) => Promise<void> | void;
+    remove: () => Promise<void>;
+    onBlur: FieldBlurHandler | undefined;
+}>;
+export declare const PhotoInputContext: Context<PhotoInputContextValue | null>;
+/**
+ * The state the enclosing `PhotoInput.Root` holds, for the parts below it.
+ *
+ * @example
+ * const { value, remove } = usePhotoInput();
+ */
+export declare const usePhotoInput: () => PhotoInputContextValue;

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

@@ -0,0 +1,14 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { createContext } from "react";
+// src/components/photo-field/photo-input-context.ts
+var PhotoInputContext = createContext(null);
+/**
+* The state the enclosing `PhotoInput.Root` holds, for the parts below it.
+*
+* @example
+* const { value, remove } = usePhotoInput();
+*/
+var usePhotoInput = () => {
+	return useRequiredContext(PhotoInputContext, "The PhotoInput parts must be used within a <PhotoInput.Root>.");
+};
+export { PhotoInputContext, usePhotoInput };

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

@@ -1,4 +1,4 @@
-import { type ReactNode } from "react";
+import { type ComponentProps, type HTMLAttributes, 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<{
@@ -12,11 +12,13 @@ export type PhotoInputPreviewProps = Readonly<{
     /** Whether `defaultPreview` is a stored photo rather than a placeholder. */
     hasStoredImage: true;
 }>;
-export type PhotoInputProps = PhotoInputPreviewProps & Readonly<{
+export type PhotoInputRootProps = Omit<ComponentProps<"div">, "onBlur"> & Readonly<{
     /** The picked file, or nothing while the stored photo stands. */
     value: File | undefined;
     /** Called with a picked or dropped file, or with nothing once it is removed. */
     onValueChange?: (file: File | undefined) => Promise<void> | void;
+    /** Whether a stored photo stands until another is picked. */
+    hasStoredImage?: boolean;
     /** Mime types, wildcards or extensions the file dialog offers. @default ["image/*"] */
     accept?: readonly string[];
     /** The id of the label that names the control. */
@@ -31,33 +33,66 @@ export type PhotoInputProps = PhotoInputPreviewProps & Readonly<{
     /** Background work, such as an upload, is in flight. */
     pending?: boolean;
     onBlur?: FieldBlurHandler;
+}>;
+/** The photo input's state and frame, which holds the hidden file input the well opens. */
+declare const PhotoInputRoot: ({ value, onValueChange, hasStoredImage, accept, labelledBy, describedBy, name, readOnly, invalid, pending, onBlur, className, children, ...props }: PhotoInputRootProps) => ReactNode;
+export type PhotoInputWellProps = HTMLAttributes<HTMLElement>;
+/**
+ * The circle that shows the photo. It is the button that opens the file dialog
+ * and the target a file is dropped on, and Delete removes a picked photo.
+ * Read-only, it is a focusable image that opens nothing.
+ */
+declare const PhotoInputWell: ({ className, ...props }: PhotoInputWellProps) => ReactNode;
+export type PhotoInputFaceProps = ComponentProps<"span"> & 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". */
+}>;
+/** 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 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;
+}>;
+/** 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;
+export type PhotoInputValueTextProps = Omit<ComponentProps<"span">, "children" | "id"> & Readonly<{
+    /** What the well 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". */
+    /** What the well 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 hidden text that describes the well, saying whether a photo is set. */
+declare const PhotoInputValueText: ({ photoSetLabel, noPhotoLabel, className, ...props }: PhotoInputValueTextProps) => ReactNode;
+/** The parts of a photo input. */
+export type PhotoInputParts = Readonly<{
+    Root: typeof PhotoInputRoot;
+    Well: typeof PhotoInputWell;
+    Face: typeof PhotoInputFace;
+    Badge: typeof PhotoInputBadge;
+    Remove: typeof PhotoInputRemove;
+    ValueText: typeof PhotoInputValueText;
 }>;
 /**
- * The bare photo picker: a circle showing the photo, which is itself the
- * button that opens the file dialog and the target a file is dropped on. A
- * picked photo can be removed with the button on the rim, or with Delete on
- * the circle. Read-only, the circle stays focusable and opens nothing. It
- * carries no name of its own, so an enclosing field names it. For the
- * ordinary case, use `PhotoField`.
+ * The parts of a photo picker: a circle showing the photo, which is itself the
+ * button that opens the file dialog and the target a file is dropped on, with
+ * a remove button on its rim. It carries no name of its own, so an enclosing
+ * field names it. For the ordinary case, use `PhotoField`.
  *
  * @example
- * <PhotoInput
- * 	labelledBy={labelId}
- * 	value={file}
- * 	onValueChange={setFile}
- * 	defaultPreview={<Avatar name={user.name} />}
- * 	previewLabel="Preview"
- * 	photoSetLabel="Photo set"
- * 	noPhotoLabel="No photo"
- * 	removeLabel="Remove photo"
- * />
+ * <PhotoInput.Root labelledBy={labelId} value={file} onValueChange={setFile}>
+ * 	<PhotoInput.Well>
+ * 		<PhotoInput.Face previewLabel="Preview">
+ * 			<Avatar name={user.name} />
+ * 		</PhotoInput.Face>
+ * 		<PhotoInput.Badge><PhotoCameraIcon /></PhotoInput.Badge>
+ * 	</PhotoInput.Well>
+ * 	<PhotoInput.Remove label="Remove photo" icon={<CloseIcon />} />
+ * 	<PhotoInput.ValueText photoSetLabel="Photo set" noPhotoLabel="No photo" />
+ * </PhotoInput.Root>
  */
-export declare const PhotoInput: ({ value, onValueChange, defaultPreview, hasStoredImage, accept, labelledBy, describedBy, name, readOnly, invalid, pending, onBlur, previewLabel, photoSetLabel, noPhotoLabel, removeLabel, }: PhotoInputProps) => ReactNode;
+export declare const PhotoInput: PhotoInputParts;
+export {};