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

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

@@ -1,14 +1,14 @@
 import { normalizeFieldErrors } from "../../lib/forms/errors.js";
 import { formatBytes } from "../../lib/format-bytes.js";
-import { useFieldIds } from "../field/field.js";
+import { Field } from "../field/field.js";
 import { useFieldState } from "../field/use-field-state.js";
 import { useLocale } from "../locale-provider/locale-provider.js";
 import { FileInput } from "./file-input.js";
 import { isOversized, oversizedFiles } from "./file-size.js";
 import { isAccepted, wrongTypeFiles } from "./file-type.js";
 import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isFileDropItem } from "react-aria-components";
 // src/components/file-field/file-field.tsx
 /**
@@ -30,16 +30,17 @@ import { isFileDropItem } from "react-aria-components";
 * 	chooseLabel="Choose files"
 * 	filesLabel="Files for attachments"
 * 	removeLabel="Remove"
+* 	removeIcon={<CloseIcon />}
 * 	fileHint={(name, size) => `${name} (${size})`}
 * 	tooLargeError={(name, maxSize) => `${name} is larger than ${maxSize}.`}
 * 	wrongTypeError={name => `${name} is not an accepted file type.`}
 * />
 */
 var FileField = (t0) => {
-	const $ = c(86);
-	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, onValueChange, onBlur, maxFileSize, accept, multiple, disabled, readOnly, dropTargetLabel, dropHint, chooseLabel, filesLabel, removeLabel, fileHint, tooLargeError, wrongTypeError, className } = t0;
+	const $ = c(93);
+	const { label, description, errors, requiredness, optionalLabel, dirty, touched, pending, value, onValueChange, onBlur, maxFileSize, accept, multiple, disabled, readOnly, dropTargetLabel, dropHint, dropIcon, chooseLabel, chooseIcon, filesLabel, removeLabel, removeIcon, fileIcon, fileHint, tooLargeError, wrongTypeError, className } = t0;
 	const locale = useLocale();
-	const ids = useFieldIds();
+	const ids = Field.useIds();
 	const triggerRef = useRef(null);
 	let t1;
 	if ($[0] !== accept || $[1] !== errors || $[2] !== locale || $[3] !== maxFileSize || $[4] !== tooLargeError || $[5] !== value || $[6] !== wrongTypeError) {
@@ -131,8 +132,20 @@ var FileField = (t0) => {
 	} else t6 = $[31];
 	const remove = t6;
 	let t7;
-	if ($[32] !== accept || $[33] !== fieldState.disabled || $[34] !== fileHint || $[35] !== filesLabel || $[36] !== locale || $[37] !== maxFileSize || $[38] !== readOnly || $[39] !== remove || $[40] !== removeLabel || $[41] !== value) {
-		t7 = value.length === 0 ? null : /* @__PURE__ */ jsx(FileInput.List, {
+	if ($[32] !== readOnly || $[33] !== removeIcon || $[34] !== removeLabel) {
+		t7 = readOnly === true ? {} : {
+			removeLabel,
+			removeIcon
+		};
+		$[32] = readOnly;
+		$[33] = removeIcon;
+		$[34] = removeLabel;
+		$[35] = t7;
+	} else t7 = $[35];
+	const removal = t7;
+	let t8;
+	if ($[36] !== accept || $[37] !== fieldState.disabled || $[38] !== fileHint || $[39] !== fileIcon || $[40] !== filesLabel || $[41] !== locale || $[42] !== maxFileSize || $[43] !== readOnly || $[44] !== removal || $[45] !== remove || $[46] !== value) {
+		t8 = value.length === 0 ? null : /* @__PURE__ */ jsx(FileInput.List, {
 			label: filesLabel,
 			onRemove: readOnly === true ? void 0 : remove,
 			children: value.map((file_3, index_1) => /* @__PURE__ */ jsx(FileInput.Item, {
@@ -141,55 +154,61 @@ var FileField = (t0) => {
 				hint: fileHint(file_3.name, formatBytes(file_3.size, locale)),
 				invalid: isOversized(file_3, maxFileSize) || !isAccepted(file_3, accept ?? []),
 				disabled: fieldState.disabled,
-				removeLabel: readOnly === true ? void 0 : removeLabel
+				icon: fileIcon,
+				...removal
 			}, keyOf(file_3, index_1)))
 		});
-		$[32] = accept;
-		$[33] = fieldState.disabled;
-		$[34] = fileHint;
-		$[35] = filesLabel;
-		$[36] = locale;
-		$[37] = maxFileSize;
-		$[38] = readOnly;
-		$[39] = remove;
-		$[40] = removeLabel;
-		$[41] = value;
-		$[42] = t7;
-	} else t7 = $[42];
-	const tiles = t7;
-	let t8;
-	if ($[43] !== onBlur) {
-		t8 = (event) => {
+		$[36] = accept;
+		$[37] = fieldState.disabled;
+		$[38] = fileHint;
+		$[39] = fileIcon;
+		$[40] = filesLabel;
+		$[41] = locale;
+		$[42] = maxFileSize;
+		$[43] = readOnly;
+		$[44] = removal;
+		$[45] = remove;
+		$[46] = value;
+		$[47] = t8;
+	} else t8 = $[47];
+	const tiles = t8;
+	let t9;
+	if ($[48] !== onBlur) {
+		t9 = (event) => {
 			if (!(event.relatedTarget instanceof Node && event.currentTarget.contains(event.relatedTarget))) onBlur?.();
 		};
-		$[43] = onBlur;
-		$[44] = t8;
-	} else t8 = $[44];
-	let t9;
-	if ($[45] !== label || $[46] !== optionalLabel || $[47] !== requiredness) {
-		t9 = /* @__PURE__ */ jsx(FileInput.Legend, {
+		$[48] = onBlur;
+		$[49] = t9;
+	} else t9 = $[49];
+	let t10;
+	if ($[50] !== label || $[51] !== optionalLabel || $[52] !== requiredness) {
+		t10 = /* @__PURE__ */ jsx(FileInput.Legend, {
 			requiredness,
 			optionalLabel,
 			children: label
 		});
-		$[45] = label;
-		$[46] = optionalLabel;
-		$[47] = requiredness;
-		$[48] = t9;
-	} else t9 = $[48];
-	const t10 = readOnly === true ? _temp2 : void 0;
-	let t11;
-	if ($[49] !== add) {
-		t11 = async (event_0) => {
+		$[50] = label;
+		$[51] = optionalLabel;
+		$[52] = requiredness;
+		$[53] = t10;
+	} else t10 = $[53];
+	const t11 = readOnly === true ? _temp2 : void 0;
+	let t12;
+	if ($[54] !== add) {
+		t12 = async (event_0) => {
 			add(await Promise.all(event_0.items.filter(isFileDropItem).map(_temp3)));
 		};
-		$[49] = add;
-		$[50] = t11;
-	} else t11 = $[50];
-	let t12;
-	if ($[51] !== accept || $[52] !== add || $[53] !== chooseLabel || $[54] !== describedBy || $[55] !== dropHint || $[56] !== field.disabled || $[57] !== field.invalid || $[58] !== multiple || $[59] !== readOnly) {
-		t12 = readOnly === true ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(FileInput.Hint, { children: dropHint }), /* @__PURE__ */ jsx(FileInput.Trigger, {
+		$[54] = add;
+		$[55] = t12;
+	} else t12 = $[55];
+	let t13;
+	if ($[56] !== accept || $[57] !== add || $[58] !== chooseIcon || $[59] !== chooseLabel || $[60] !== describedBy || $[61] !== dropHint || $[62] !== dropIcon || $[63] !== field.disabled || $[64] !== field.invalid || $[65] !== multiple || $[66] !== readOnly) {
+		t13 = readOnly === true ? null : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileInput.Hint, {
+			icon: dropIcon,
+			children: dropHint
+		}), /* @__PURE__ */ jsx(FileInput.Trigger, {
 			label: chooseLabel,
+			icon: chooseIcon,
 			disabled: field.disabled,
 			describedBy,
 			buttonRef: triggerRef,
@@ -198,91 +217,93 @@ var FileField = (t0) => {
 			acceptedFileTypes: accept,
 			onSelect: (files) => add(files === null ? [] : [...files])
 		})] });
-		$[51] = accept;
-		$[52] = add;
-		$[53] = chooseLabel;
-		$[54] = describedBy;
-		$[55] = dropHint;
-		$[56] = field.disabled;
-		$[57] = field.invalid;
-		$[58] = multiple;
-		$[59] = readOnly;
-		$[60] = t12;
-	} else t12 = $[60];
-	let t13;
-	if ($[61] !== field.phase) {
-		t13 = field.phase !== "fresh" && /* @__PURE__ */ jsx(FileInput.Pending, {});
-		$[61] = field.phase;
-		$[62] = t13;
-	} else t13 = $[62];
+		$[56] = accept;
+		$[57] = add;
+		$[58] = chooseIcon;
+		$[59] = chooseLabel;
+		$[60] = describedBy;
+		$[61] = dropHint;
+		$[62] = dropIcon;
+		$[63] = field.disabled;
+		$[64] = field.invalid;
+		$[65] = multiple;
+		$[66] = readOnly;
+		$[67] = t13;
+	} else t13 = $[67];
 	let t14;
-	if ($[63] !== dropTargetLabel || $[64] !== field.disabled || $[65] !== fieldState || $[66] !== t10 || $[67] !== t11 || $[68] !== t12 || $[69] !== t13 || $[70] !== tiles) {
-		t14 = /* @__PURE__ */ jsxs(FileInput.DropTarget, {
+	if ($[68] !== field.phase) {
+		t14 = field.phase !== "fresh" && /* @__PURE__ */ jsx(FileInput.Pending, {});
+		$[68] = field.phase;
+		$[69] = t14;
+	} else t14 = $[69];
+	let t15;
+	if ($[70] !== dropTargetLabel || $[71] !== field.disabled || $[72] !== fieldState || $[73] !== t11 || $[74] !== t12 || $[75] !== t13 || $[76] !== t14 || $[77] !== tiles) {
+		t15 = /* @__PURE__ */ jsxs(FileInput.DropTarget, {
 			"aria-label": dropTargetLabel,
 			state: fieldState,
 			isDisabled: field.disabled,
-			getDropOperation: t10,
-			onDrop: t11,
+			getDropOperation: t11,
+			onDrop: t12,
 			children: [
-				t12,
+				t13,
 				tiles,
-				t13
+				t14
 			]
 		});
-		$[63] = dropTargetLabel;
-		$[64] = field.disabled;
-		$[65] = fieldState;
-		$[66] = t10;
-		$[67] = t11;
-		$[68] = t12;
-		$[69] = t13;
-		$[70] = tiles;
-		$[71] = t14;
-	} else t14 = $[71];
-	let t15;
-	if ($[72] !== description || $[73] !== ids.descriptionId) {
-		t15 = /* @__PURE__ */ jsx(FileInput.Description, {
+		$[70] = dropTargetLabel;
+		$[71] = field.disabled;
+		$[72] = fieldState;
+		$[73] = t11;
+		$[74] = t12;
+		$[75] = t13;
+		$[76] = t14;
+		$[77] = tiles;
+		$[78] = t15;
+	} else t15 = $[78];
+	let t16;
+	if ($[79] !== description || $[80] !== ids.descriptionId) {
+		t16 = /* @__PURE__ */ jsx(FileInput.Description, {
 			id: ids.descriptionId,
 			children: description
 		});
-		$[72] = description;
-		$[73] = ids.descriptionId;
-		$[74] = t15;
-	} else t15 = $[74];
-	let t16;
-	if ($[75] !== ids.errorId || $[76] !== messages) {
-		t16 = /* @__PURE__ */ jsx(FileInput.Error, {
+		$[79] = description;
+		$[80] = ids.descriptionId;
+		$[81] = t16;
+	} else t16 = $[81];
+	let t17;
+	if ($[82] !== ids.errorId || $[83] !== messages) {
+		t17 = /* @__PURE__ */ jsx(FileInput.Error, {
 			id: ids.errorId,
 			children: messages
 		});
-		$[75] = ids.errorId;
-		$[76] = messages;
-		$[77] = t16;
-	} else t16 = $[77];
-	let t17;
-	if ($[78] !== className || $[79] !== fieldState || $[80] !== t14 || $[81] !== t15 || $[82] !== t16 || $[83] !== t8 || $[84] !== t9) {
-		t17 = /* @__PURE__ */ jsxs(FileInput.Root, {
+		$[82] = ids.errorId;
+		$[83] = messages;
+		$[84] = t17;
+	} else t17 = $[84];
+	let t18;
+	if ($[85] !== className || $[86] !== fieldState || $[87] !== t10 || $[88] !== t15 || $[89] !== t16 || $[90] !== t17 || $[91] !== t9) {
+		t18 = /* @__PURE__ */ jsxs(FileInput.Root, {
 			state: fieldState,
 			disabled: fieldState.disabled,
 			className,
-			onBlur: t8,
+			onBlur: t9,
 			children: [
-				t9,
-				t14,
+				t10,
 				t15,
-				t16
+				t16,
+				t17
 			]
 		});
-		$[78] = className;
-		$[79] = fieldState;
-		$[80] = t14;
-		$[81] = t15;
-		$[82] = t16;
-		$[83] = t8;
-		$[84] = t9;
-		$[85] = t17;
-	} else t17 = $[85];
-	return t17;
+		$[85] = className;
+		$[86] = fieldState;
+		$[87] = t10;
+		$[88] = t15;
+		$[89] = t16;
+		$[90] = t17;
+		$[91] = t9;
+		$[92] = t18;
+	} else t18 = $[92];
+	return t18;
 };
 function _temp(file_1, index) {
 	return `${index}-${file_1.name}`;

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

@@ -1,10 +1,12 @@
 import './file-field.css';// src/components/file-field/file-field.module.scss
-var dropTarget = "_dropTarget_ohenx_3";
-var hint = "_hint_ohenx_82";
-var list = "_list_ohenx_92";
+var dropTarget = "_dropTarget_1ap1m_3";
+var hint = "_hint_1ap1m_82";
+var hintIcon = "_hintIcon_1ap1m_92";
+var list = "_list_1ap1m_96";
 var file_field_module_default = {
 	dropTarget,
 	hint,
+	hintIcon,
 	list
 };
-export { file_field_module_default as default, dropTarget, hint, list };
+export { file_field_module_default as default, dropTarget, hint, hintIcon, list };

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

@@ -5,7 +5,9 @@ export type FileInputRootProps = FieldRootProps & Readonly<{
     /** The states projected onto the field as `data-*` attributes. */
     state?: FieldState;
 }>;
+/** The fieldset around the file input, which projects its state as `data-*` attributes. */
 declare const FileInputRoot: ({ state, disabled, ...props }: FileInputRootProps) => ReactNode;
+/** The legend that names the fieldset. */
 declare const FileInputLegend: (props: FieldLabelProps) => ReactNode;
 export type FileInputDropTargetProps = Omit<AriaDropZoneProps, "className" | "aria-label"> & Readonly<{
     /** Accessible name for the drop target, which is not a labelable element. */
@@ -14,8 +16,14 @@ export type FileInputDropTargetProps = Omit<AriaDropZoneProps, "className" | "ar
     state?: FieldState;
     className?: string;
 }>;
+/** The area files are dropped on, holding the hint, the picker button and the staged files. */
 declare const FileInputDropTarget: ({ state, className, ...props }: FileInputDropTargetProps) => ReactNode;
-declare const FileInputHint: ({ className, children, ...props }: ComponentProps<"p">) => ReactNode;
+export type FileInputHintProps = ComponentProps<"p"> & Readonly<{
+    /** Drawn above the prompt, such as an upload icon. */
+    icon?: ReactNode;
+}>;
+/** The prompt inside the drop target, with an optional `icon` above it. */
+declare const FileInputHint: ({ className, icon, children, ...props }: FileInputHintProps) => ReactNode;
 export type FileInputTriggerProps = Omit<AriaFileTriggerProps, "children"> & Readonly<{
     /** Visible label on the picker button. */
     label: string;
@@ -26,8 +34,11 @@ export type FileInputTriggerProps = Omit<AriaFileTriggerProps, "children"> & Rea
     buttonRef?: Ref<HTMLButtonElement>;
     /** Marks the picker button as the field's invalid control. */
     invalid?: boolean;
+    /** Drawn before the button's label, such as an attach icon. */
+    icon?: ReactNode;
 }>;
-declare const FileInputTrigger: ({ label, disabled, describedBy, buttonRef, invalid, ...props }: FileInputTriggerProps) => ReactNode;
+/** The button that opens the file dialog. */
+declare const FileInputTrigger: ({ label, disabled, describedBy, buttonRef, invalid, icon, ...props }: FileInputTriggerProps) => ReactNode;
 export type FileInputListProps = Readonly<{
     /** Accessible name for the group of tiles. */
     label: string;
@@ -36,7 +47,18 @@ export type FileInputListProps = Readonly<{
     children: ReactNode;
     className?: string;
 }>;
+/** The staged files, as a group of removable tiles. */
 declare const FileInputList: ({ label, onRemove, children, className, }: FileInputListProps) => ReactNode;
+/** A tile's remove button: its name and icon together, or neither for a fixed tile. */
+export type FileInputItemRemoval = Readonly<{
+    /** Accessible name for the remove button. */
+    removeLabel: string;
+    /** The remove button's icon, such as a cross. */
+    removeIcon: ReactNode;
+}> | Readonly<{
+    removeLabel?: undefined;
+    removeIcon?: undefined;
+}>;
 export type FileInputItemProps = Readonly<{
     /** Key the surrounding list removes this file by. */
     id: string;
@@ -46,10 +68,11 @@ export type FileInputItemProps = Readonly<{
     /** Marks the tile as rejected, such as over the size limit. */
     invalid?: boolean;
     disabled?: boolean;
-    /** Accessible name for the remove button; without one the tile is fixed. */
-    removeLabel?: string;
-}>;
-declare const FileInputItem: ({ id, file, hint, invalid, disabled, removeLabel, }: FileInputItemProps) => ReactNode;
+    /** Drawn on a tile that has no image preview, such as a file icon. */
+    icon?: ReactNode;
+}> & FileInputItemRemoval;
+/** One staged file as an `AttachmentTile`. */
+declare const FileInputItem: ({ invalid, disabled, ...props }: FileInputItemProps) => ReactNode;
 /** The parts of a file input. */
 export type FileInputParts = Readonly<{
     Root: typeof FileInputRoot;
@@ -73,10 +96,10 @@ export type FileInputParts = Readonly<{
  * <FileInput.Root state={{ requiredness: "optional" }}>
  * 	<FileInput.Legend optionalLabel="optional">Attachments</FileInput.Legend>
  * 	<FileInput.DropTarget aria-label="Drop zone for attachments" onDrop={onDrop}>
- * 		<FileInput.Hint>Drag files here</FileInput.Hint>
- * 		<FileInput.Trigger label="Choose files" onSelect={onSelect} />
+ * 		<FileInput.Hint icon={<UploadFileIcon />}>Drag files here</FileInput.Hint>
+ * 		<FileInput.Trigger label="Choose files" icon={<AttachFileIcon />} onSelect={onSelect} />
  * 		<FileInput.List label="Files for attachments" onRemove={onRemove}>
- * 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" />
+ * 			<FileInput.Item id={id} file={file} hint="invoice.pdf (12 kB)" removeLabel="Remove" removeIcon={<CloseIcon />} />
  * 		</FileInput.List>
  * 	</FileInput.DropTarget>
  * </FileInput.Root>