@maanlamp/react-web-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,170 @@
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import { Field, useFieldIds } from "../field/field.js";
+import { PhotoInput } from "./photo-input.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/photo-field/photo-field.tsx
+/**
+* A labelled photo picker: the label, the circle that is both the photo and
+* the button that changes it, then the description and error. The label is
+* not a native one, because the circle is named by it through
+* `aria-labelledby` and also announces whether a photo is set.
+*
+* @example
+* <PhotoField
+* 	label="Profile photo"
+* 	optionalLabel="optional"
+* 	value={file}
+* 	onValueChange={setFile}
+* 	hasStoredImage={user.photo !== null}
+* 	defaultPreview={<Avatar name={user.name} />}
+* 	accept={["image/png", "image/jpeg"]}
+* 	previewLabel="Preview"
+* 	photoSetLabel="Photo set"
+* 	noPhotoLabel="No photo"
+* 	removeLabel="Remove photo"
+* />
+*/
+var PhotoField = (t0) => {
+	const $ = c(46);
+	let className;
+	let controlProps;
+	let description;
+	let dirty;
+	let errors;
+	let label;
+	let optionalLabel;
+	let pending;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending, readOnly, className, ...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;
+	} else {
+		className = $[1];
+		controlProps = $[2];
+		description = $[3];
+		dirty = $[4];
+		errors = $[5];
+		label = $[6];
+		optionalLabel = $[7];
+		pending = $[8];
+		readOnly = $[9];
+		requiredness = $[10];
+		touched = $[11];
+	}
+	const ids = useFieldIds();
+	const { labelId, descriptionId, errorId } = ids;
+	let t1;
+	if ($[12] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[12] = errors;
+		$[13] = t1;
+	} else t1 = $[13];
+	const invalid = t1.length > 0;
+	let t2;
+	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsx("span", {});
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== label || $[16] !== labelId || $[17] !== optionalLabel || $[18] !== requiredness) {
+		t3 = /* @__PURE__ */ jsx(Field.Label, {
+			id: labelId,
+			nativeLabel: false,
+			requiredness,
+			optionalLabel,
+			render: t2,
+			children: label
+		});
+		$[15] = label;
+		$[16] = labelId;
+		$[17] = optionalLabel;
+		$[18] = requiredness;
+		$[19] = t3;
+	} else t3 = $[19];
+	let t4;
+	if ($[20] !== description || $[21] !== ids || $[22] !== invalid) {
+		t4 = ids.describedBy(description !== void 0, invalid);
+		$[20] = description;
+		$[21] = ids;
+		$[22] = invalid;
+		$[23] = t4;
+	} else t4 = $[23];
+	let t5;
+	if ($[24] !== controlProps || $[25] !== invalid || $[26] !== labelId || $[27] !== pending || $[28] !== readOnly || $[29] !== t4) {
+		t5 = /* @__PURE__ */ jsx(PhotoInput, {
+			...controlProps,
+			labelledBy: labelId,
+			describedBy: t4,
+			readOnly,
+			invalid,
+			pending
+		});
+		$[24] = controlProps;
+		$[25] = invalid;
+		$[26] = labelId;
+		$[27] = pending;
+		$[28] = readOnly;
+		$[29] = t4;
+		$[30] = t5;
+	} else t5 = $[30];
+	let t6;
+	if ($[31] !== description || $[32] !== descriptionId) {
+		t6 = /* @__PURE__ */ jsx(Field.Description, {
+			id: descriptionId,
+			children: description
+		});
+		$[31] = description;
+		$[32] = descriptionId;
+		$[33] = t6;
+	} else t6 = $[33];
+	let t7;
+	if ($[34] !== errorId || $[35] !== errors) {
+		t7 = /* @__PURE__ */ jsx(Field.Error, {
+			id: errorId,
+			children: errors
+		});
+		$[34] = errorId;
+		$[35] = errors;
+		$[36] = t7;
+	} else t7 = $[36];
+	let t8;
+	if ($[37] !== className || $[38] !== dirty || $[39] !== invalid || $[40] !== t3 || $[41] !== t5 || $[42] !== t6 || $[43] !== t7 || $[44] !== touched) {
+		t8 = /* @__PURE__ */ jsxs(Field.Root, {
+			className,
+			invalid,
+			dirty,
+			touched,
+			children: [
+				t3,
+				t5,
+				t6,
+				t7
+			]
+		});
+		$[37] = className;
+		$[38] = dirty;
+		$[39] = invalid;
+		$[40] = t3;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t7;
+		$[44] = touched;
+		$[45] = t8;
+	} else t8 = $[45];
+	return t8;
+};
+export { PhotoField };

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

@@ -0,0 +1,112 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._photoInput_1spic_3 {
+    position: relative;
+    inline-size: var(--photo-input-size, var(--sys-unit-64));
+  }
+  ._well_1spic_7 {
+    --_well-state-layer: 0;
+    position: relative;
+    display: grid;
+    box-sizing: border-box;
+    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);
+    background-color: var(--photo-input-bg, var(--sys-color-surface));
+    color: var(--sys-color-text);
+    cursor: pointer;
+  }
+  ._well_1spic_7 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._well_1spic_7:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._well_1spic_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_1spic_7:is(:hover, :focus-visible):not([data-readonly]), ._well_1spic_7[data-dragover] {
+    --_well-state-layer: var(--sys-state-hover);
+    border-color: var(--photo-input-active-border, var(--sys-color-primary));
+  }
+  ._well_1spic_7[data-dragover] {
+    --_well-state-layer: var(--sys-state-dragged);
+    background-color: var(--photo-input-drop-bg, var(--sys-color-primary-container));
+  }
+  ._well_1spic_7[data-pending] {
+    cursor: progress;
+    caret-color: var(--sys-color-text-muted);
+  }
+  ._well_1spic_7[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-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_1spic_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);
+    cursor: default;
+  }
+  ._face_1spic_61 {
+    position: relative;
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    border-radius: var(--sys-radius-circle);
+  }
+  ._face_1spic_61::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: var(--sys-color-primary);
+    opacity: var(--_well-state-layer);
+    pointer-events: none;
+  }
+  ._face_1spic_61 img,
+  ._face_1spic_61 svg {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    border-radius: var(--sys-radius-circle);
+  }
+  ._badge_1spic_83 {
+    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);
+    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_1spic_97 {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    border: 3px solid var(--sys-color-surface);
+  }
+  ._picker_1spic_103,
+  ._valueText_1spic_104 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+}

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

@@ -0,0 +1,55 @@
+import { type ReactNode } from "react";
+export type PhotoInputProps = 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;
+    /** Shown until a photo is picked, typically the stored one. */
+    defaultPreview?: ReactNode;
+    /** Whether `defaultPreview` is a stored photo rather than a placeholder. */
+    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. */
+    labelledBy: string;
+    /** The ids of the description and error, joined. */
+    describedBy?: string;
+    /** Submits the picked file under this name. */
+    name?: string;
+    /** Shows the photo without letting it be changed. */
+    readOnly?: boolean;
+    invalid?: boolean;
+    /** Background work, such as an upload, is in flight. */
+    pending?: boolean;
+    onBlur?: () => void;
+    /** 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 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`.
+ *
+ * @example
+ * <PhotoInput
+ * 	labelledBy={labelId}
+ * 	value={file}
+ * 	onValueChange={setFile}
+ * 	defaultPreview={<Avatar name={user.name} />}
+ * 	previewLabel="Preview"
+ * 	photoSetLabel="Photo set"
+ * 	noPhotoLabel="No photo"
+ * 	removeLabel="Remove photo"
+ * />
+ */
+export declare const PhotoInput: ({ value, onValueChange, defaultPreview, hasStoredImage, accept, labelledBy, describedBy, name, readOnly, invalid, pending, onBlur, previewLabel, photoSetLabel, noPhotoLabel, removeLabel, }: PhotoInputProps) => ReactNode;
+//# sourceMappingURL=photo-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"photo-input.d.ts","sourceRoot":"","sources":["../../../src/components/photo-field/photo-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EACN,KAAK,SAAS,EAMd,MAAM,OAAO,CAAC;AAwBf,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACtC,iEAAiE;IACjE,KAAK,EAAE,IAAI,GAAG,SAAS,CAAC;IAExB,gFAAgF;IAChF,aAAa,CAAC,EAAE,CACf,IAAI,EAAE,IAAI,GAAG,SAAS,KAClB,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAE1B,+DAA+D;IAC/D,cAAc,CAAC,EAAE,SAAS,CAAC;IAE3B,4EAA4E;IAC5E,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,uFAAuF;IACvF,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAE3B,kDAAkD;IAClD,UAAU,EAAE,MAAM,CAAC;IAEnB,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,8DAA8D;IAC9D,YAAY,EAAE,MAAM,CAAC;IAErB,4EAA4E;IAC5E,aAAa,EAAE,MAAM,CAAC;IAEtB,4EAA4E;IAC5E,YAAY,EAAE,MAAM,CAAC;IAErB,yFAAyF;IACzF,WAAW,EAAE,MAAM,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,UAAU,iMAiBpB,eAAe,KAAG,SAgIpB,CAAC"}

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

@@ -0,0 +1,326 @@
+import SvgPhotoCamera from "../../vendor/@material-design-icons/svg/outlined/photo_camera.js";
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import { Button } from "../button/button.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { Icon } from "../icon/icon.js";
+import photo_input_module_default from "./photo-input.module.js";
+import { c } from "react/compiler-runtime";
+import { useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/photo-field/photo-input.tsx
+var IMAGES = ["image/*"];
+/** Points an image at the file through an object URL, made once per file and revoked when the file changes or the image unmounts. */
+var usePreviewSource = (file) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== file) {
+		t0 = (image) => {
+			if (image === null || file === void 0) return;
+			const url = URL.createObjectURL(file);
+			image.src = url;
+			return () => URL.revokeObjectURL(url);
+		};
+		$[0] = file;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+/**
+* 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`.
+*
+* @example
+* <PhotoInput
+* 	labelledBy={labelId}
+* 	value={file}
+* 	onValueChange={setFile}
+* 	defaultPreview={<Avatar name={user.name} />}
+* 	previewLabel="Preview"
+* 	photoSetLabel="Photo set"
+* 	noPhotoLabel="No photo"
+* 	removeLabel="Remove photo"
+* />
+*/
+var PhotoInput = (t0) => {
+	const $ = c(67);
+	const { value, onValueChange, defaultPreview, hasStoredImage: t1, accept: t2, labelledBy, describedBy, name, readOnly: t3, invalid: t4, pending: t5, onBlur, previewLabel, photoSetLabel, noPhotoLabel, removeLabel } = t0;
+	const hasStoredImage = t1 === void 0 ? false : t1;
+	const accept = t2 === void 0 ? IMAGES : t2;
+	const readOnly = t3 === void 0 ? false : t3;
+	const invalid = t4 === void 0 ? false : t4;
+	const pending = t5 === void 0 ? false : t5;
+	const valueId = useId();
+	const well = useRef(null);
+	const picker = useRef(null);
+	const [dragOver, setDragOver] = useState(false);
+	const previewSource = usePreviewSource(value);
+	const filled = value !== void 0 || hasStoredImage;
+	let t6;
+	if ($[0] !== defaultPreview || $[1] !== previewLabel || $[2] !== previewSource || $[3] !== value) {
+		t6 = value === void 0 ? defaultPreview : /* @__PURE__ */ jsx("img", {
+			ref: previewSource,
+			alt: previewLabel
+		});
+		$[0] = defaultPreview;
+		$[1] = previewLabel;
+		$[2] = previewSource;
+		$[3] = value;
+		$[4] = t6;
+	} else t6 = $[4];
+	let t7;
+	if ($[5] !== t6) {
+		t7 = /* @__PURE__ */ jsx("span", {
+			className: photo_input_module_default.face,
+			children: t6
+		});
+		$[5] = t6;
+		$[6] = t7;
+	} else t7 = $[6];
+	const face = t7;
+	let t8;
+	if ($[7] !== describedBy || $[8] !== valueId) {
+		t8 = [valueId, describedBy].filter(_temp);
+		$[7] = describedBy;
+		$[8] = valueId;
+		$[9] = t8;
+	} else t8 = $[9];
+	const description = t8.join(" ");
+	const t9 = filled ? photoSetLabel : noPhotoLabel;
+	let t10;
+	if ($[10] !== t9 || $[11] !== valueId) {
+		t10 = /* @__PURE__ */ jsx("span", {
+			id: valueId,
+			className: photo_input_module_default.valueText,
+			children: t9
+		});
+		$[10] = t9;
+		$[11] = valueId;
+		$[12] = t10;
+	} else t10 = $[12];
+	const valueText = t10;
+	let t11;
+	if ($[13] !== onValueChange) {
+		t11 = async () => {
+			await onValueChange?.(void 0);
+			well.current?.focus();
+		};
+		$[13] = onValueChange;
+		$[14] = t11;
+	} else t11 = $[14];
+	const remove = t11;
+	if (readOnly) {
+		let t12;
+		if ($[15] !== filled || $[16] !== pending) {
+			t12 = fieldStateAttributes({
+				readonly: true,
+				filled,
+				pending
+			});
+			$[15] = filled;
+			$[16] = pending;
+			$[17] = t12;
+		} else t12 = $[17];
+		let t13;
+		if ($[18] !== description || $[19] !== face || $[20] !== labelledBy || $[21] !== onBlur || $[22] !== t12) {
+			t13 = /* @__PURE__ */ jsx("span", {
+				role: "img",
+				tabIndex: 0,
+				"aria-labelledby": labelledBy,
+				"aria-describedby": description,
+				className: photo_input_module_default.well,
+				onBlur,
+				...t12,
+				children: face
+			});
+			$[18] = description;
+			$[19] = face;
+			$[20] = labelledBy;
+			$[21] = onBlur;
+			$[22] = t12;
+			$[23] = t13;
+		} else t13 = $[23];
+		let t14;
+		if ($[24] !== t13 || $[25] !== valueText) {
+			t14 = /* @__PURE__ */ jsxs("div", {
+				className: photo_input_module_default.photoInput,
+				children: [t13, valueText]
+			});
+			$[24] = t13;
+			$[25] = valueText;
+			$[26] = t14;
+		} else t14 = $[26];
+		return t14;
+	}
+	const t12 = value === void 0 ? void 0 : "Delete";
+	let t13;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = () => picker.current?.click();
+		$[27] = t13;
+	} else t13 = $[27];
+	let t14;
+	if ($[28] !== remove || $[29] !== value) {
+		t14 = (event) => {
+			if (event.key === "Delete" && value !== void 0) {
+				event.preventDefault();
+				remove();
+			}
+		};
+		$[28] = remove;
+		$[29] = value;
+		$[30] = t14;
+	} else t14 = $[30];
+	let t15;
+	let t16;
+	if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = (event_0) => {
+			event_0.preventDefault();
+			setDragOver(true);
+		};
+		t16 = () => setDragOver(false);
+		$[31] = t15;
+		$[32] = t16;
+	} else {
+		t15 = $[31];
+		t16 = $[32];
+	}
+	let t17;
+	if ($[33] !== onValueChange) {
+		t17 = (event_1) => {
+			event_1.preventDefault();
+			setDragOver(false);
+			const file = event_1.dataTransfer.files[0];
+			if (file !== void 0) onValueChange?.(file);
+		};
+		$[33] = onValueChange;
+		$[34] = t17;
+	} else t17 = $[34];
+	const t18 = dragOver || void 0;
+	let t19;
+	if ($[35] !== filled || $[36] !== invalid || $[37] !== pending) {
+		t19 = fieldStateAttributes({
+			invalid,
+			filled,
+			pending
+		});
+		$[35] = filled;
+		$[36] = invalid;
+		$[37] = pending;
+		$[38] = t19;
+	} else t19 = $[38];
+	let t20;
+	if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = /* @__PURE__ */ jsx("span", {
+			className: photo_input_module_default.badge,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(Icon, {
+				svg: SvgPhotoCamera,
+				label: ""
+			})
+		});
+		$[39] = t20;
+	} else t20 = $[39];
+	let t21;
+	if ($[40] !== description || $[41] !== face || $[42] !== labelledBy || $[43] !== onBlur || $[44] !== t12 || $[45] !== t14 || $[46] !== t17 || $[47] !== t18 || $[48] !== t19) {
+		t21 = /* @__PURE__ */ jsxs("button", {
+			ref: well,
+			type: "button",
+			"aria-labelledby": labelledBy,
+			"aria-describedby": description,
+			"aria-keyshortcuts": t12,
+			className: photo_input_module_default.well,
+			onClick: t13,
+			onBlur,
+			onKeyDown: t14,
+			onDragOver: t15,
+			onDragLeave: t16,
+			onDrop: t17,
+			"data-dragover": t18,
+			...t19,
+			children: [face, t20]
+		});
+		$[40] = description;
+		$[41] = face;
+		$[42] = labelledBy;
+		$[43] = onBlur;
+		$[44] = t12;
+		$[45] = t14;
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t19;
+		$[49] = t21;
+	} else t21 = $[49];
+	let t22;
+	if ($[50] !== remove || $[51] !== removeLabel || $[52] !== value) {
+		t22 = value !== void 0 && /* @__PURE__ */ jsx(Button, {
+			iconOnly: true,
+			icon: SvgClose,
+			label: removeLabel,
+			variant: "secondary",
+			className: photo_input_module_default.remove,
+			onClick: () => void remove()
+		});
+		$[50] = remove;
+		$[51] = removeLabel;
+		$[52] = value;
+		$[53] = t22;
+	} else t22 = $[53];
+	let t23;
+	if ($[54] !== accept) {
+		t23 = accept.join(",");
+		$[54] = accept;
+		$[55] = t23;
+	} else t23 = $[55];
+	let t24;
+	if ($[56] !== onValueChange) {
+		t24 = async (event_2) => {
+			const file_0 = event_2.target.files?.[0];
+			event_2.target.value = "";
+			if (file_0 !== void 0) await onValueChange?.(file_0);
+		};
+		$[56] = onValueChange;
+		$[57] = t24;
+	} else t24 = $[57];
+	let t25;
+	if ($[58] !== name || $[59] !== t23 || $[60] !== t24) {
+		t25 = /* @__PURE__ */ jsx("input", {
+			ref: picker,
+			type: "file",
+			name,
+			accept: t23,
+			tabIndex: -1,
+			"aria-hidden": "true",
+			className: photo_input_module_default.picker,
+			onChange: t24
+		});
+		$[58] = name;
+		$[59] = t23;
+		$[60] = t24;
+		$[61] = t25;
+	} else t25 = $[61];
+	let t26;
+	if ($[62] !== t21 || $[63] !== t22 || $[64] !== t25 || $[65] !== valueText) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: photo_input_module_default.photoInput,
+			children: [
+				t21,
+				t22,
+				t25,
+				valueText
+			]
+		});
+		$[62] = t21;
+		$[63] = t22;
+		$[64] = t25;
+		$[65] = valueText;
+		$[66] = t26;
+	} else t26 = $[66];
+	return t26;
+};
+function _temp(id) {
+	return id !== void 0;
+}
+export { PhotoInput };

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

@@ -0,0 +1,18 @@
+import './photo-input.css';// src/components/photo-field/photo-input.module.scss
+var photoInput = "_photoInput_1spic_3";
+var well = "_well_1spic_7";
+var face = "_face_1spic_61";
+var badge = "_badge_1spic_83";
+var remove = "_remove_1spic_97";
+var picker = "_picker_1spic_103";
+var valueText = "_valueText_1spic_104";
+var photo_input_module_default = {
+	photoInput,
+	well,
+	face,
+	badge,
+	remove,
+	picker,
+	valueText
+};
+export { badge, photo_input_module_default as default, face, photoInput, picker, remove, valueText, well };

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type PhotoFieldProps } from "./photo-field.tsx";
+export type TSFPhotoFieldProps = Omit<PhotoFieldProps, keyof ConnectedFieldProps | "value" | "onValueChange"> & Readonly<{
+    /** Runs alongside the field's own change handling, for side effects. */
+    onValueChange?: (file: File | undefined) => void;
+}>;
+/**
+ * `PhotoField` bound to the TanStack Form field it renders in, reached as
+ * `field.PhotoField`. The field's value is the picked `File`, or nothing while
+ * the stored photo stands.
+ *
+ * @example
+ * <form.AppField name="photo">
+ * 	{field => <field.PhotoField label="Profile photo" optionalLabel="optional" hasStoredImage {...photoCopy} />}
+ * </form.AppField>
+ */
+export declare const TSFPhotoField: ({ onValueChange, ...props }: TSFPhotoFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-photo-field.d.ts.map