@sprawlify/primitives 0.0.23 → 0.0.25

package/dist/machines/file-upload/index.cjs

@@ -1,7 +1,7 @@
 const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
 const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
-const require_utils = require('../../utils-_6frwjgJ.cjs');
-const require_core = require('../../core-CQFbMdTl.cjs');
+const require_utils = require('../../utils-CtgLe8Vv.cjs');
+const require_core = require('../../core-DHn58LRl.cjs');
 const require_file_utils = require('../../file-utils-G9_tYexo.cjs');
 const require_i18n_utils = require('../../i18n-utils-B8IY1mOh.cjs');
 const require_create_props = require('../../create-props-l5q5b8Wo.cjs');
@@ -21,6 +21,8 @@ const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `file-upload:${ctx.id}:ite
 const getItemNameId = (ctx, id) => ctx.ids?.itemName?.(id) ?? `file-upload:${ctx.id}:item-name:${id}`;
 const getItemSizeTextId = (ctx, id) => ctx.ids?.itemSizeText?.(id) ?? `file-upload:${ctx.id}:item-size:${id}`;
 const getItemPreviewId = (ctx, id) => ctx.ids?.itemPreview?.(id) ?? `file-upload:${ctx.id}:item-preview:${id}`;
+const getItemDeleteTriggerId = (ctx, id) => ctx.ids?.itemDeleteTrigger?.(id) ?? `file:${ctx.id}:item-delete:${id}`;
+const getFileId = (file) => require_utils.hash(`${file.name}-${file.size}`);
 const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 const getDropzoneEl = (ctx) => ctx.getById(getDropzoneId(ctx));
@@ -103,29 +105,38 @@ function isInteractiveTarget(element, container) {
 function connect(service, normalize) {
 	const { state, send, prop, computed, scope, context } = service;
 	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
 	const required = !!prop("required");
 	const allowDrop = prop("allowDrop");
 	const translations = prop("translations");
 	const dragging = state.matches("dragging");
+	const focused = state.matches("focused") && !disabled;
+	const acceptedFiles = context.get("acceptedFiles");
+	const maxFiles = prop("maxFiles");
 	return {
 		dragging,
-		focused: state.matches("focused") && !disabled,
-		disabled: !!disabled,
+		focused,
+		disabled,
+		readOnly,
 		transforming: context.get("transforming"),
+		maxFilesReached: acceptedFiles.length >= maxFiles,
+		remainingFiles: Math.max(0, maxFiles - acceptedFiles.length),
 		openFilePicker() {
-			if (disabled) return;
+			if (disabled || readOnly) return;
 			send({ type: "OPEN" });
 		},
 		deleteFile(file, type = DEFAULT_ITEM_TYPE) {
+			if (disabled || readOnly) return;
 			send({
 				type: "FILE.DELETE",
 				file,
 				itemType: type
 			});
 		},
-		acceptedFiles: context.get("acceptedFiles"),
+		acceptedFiles,
 		rejectedFiles: context.get("rejectedFiles"),
 		setFiles(files) {
+			if (disabled || readOnly) return;
 			send({
 				type: "FILES.SET",
 				files,
@@ -133,9 +144,11 @@ function connect(service, normalize) {
 			});
 		},
 		clearRejectedFiles() {
+			if (disabled || readOnly) return;
 			send({ type: "REJECTED_FILES.CLEAR" });
 		},
 		clearFiles() {
+			if (disabled || readOnly) return;
 			send({ type: "FILES.CLEAR" });
 		},
 		getFileSize(file) {
@@ -148,7 +161,7 @@ function connect(service, normalize) {
 			return () => win.URL.revokeObjectURL(url);
 		},
 		setClipboardFiles(dt) {
-			if (disabled) return false;
+			if (disabled || readOnly) return false;
 			const files = Array.from(dt?.items ?? []).reduce((acc, item) => {
 				if (item.kind !== "file") return acc;
 				const file = item.getAsFile();
@@ -168,6 +181,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: getRootId(scope),
 				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
 				"data-dragging": require_dom_query.dataAttr(dragging)
 			});
 		},
@@ -176,15 +190,17 @@ function connect(service, normalize) {
 				...parts.dropzone.attrs,
 				dir: prop("dir"),
 				id: getDropzoneId(scope),
-				tabIndex: disabled || props$1.disableClick ? void 0 : 0,
+				tabIndex: disabled || readOnly || props$1.disableClick ? void 0 : 0,
 				role: props$1.disableClick ? "application" : "button",
 				"aria-label": translations.dropzone,
 				"aria-disabled": disabled,
+				"aria-readonly": readOnly,
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
 				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
 				"data-dragging": require_dom_query.dataAttr(dragging),
 				onKeyDown(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (event.defaultPrevented) return;
 					const target = require_dom_query.getEventTarget(event);
 					if (!require_dom_query.contains(event.currentTarget, target)) return;
@@ -197,7 +213,7 @@ function connect(service, normalize) {
 					});
 				},
 				onClick(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (event.defaultPrevented) return;
 					if (props$1.disableClick) return;
 					const target = require_dom_query.getEventTarget(event);
@@ -207,7 +223,7 @@ function connect(service, normalize) {
 					send({ type: "DROPZONE.CLICK" });
 				},
 				onDragOver(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (!allowDrop) return;
 					event.preventDefault();
 					event.stopPropagation();
@@ -222,19 +238,18 @@ function connect(service, normalize) {
 					});
 				},
 				onDragLeave(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (!allowDrop) return;
 					if (require_dom_query.contains(event.currentTarget, event.relatedTarget)) return;
 					send({ type: "DROPZONE.DRAG_LEAVE" });
 				},
 				onDrop(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (allowDrop) {
 						event.preventDefault();
 						event.stopPropagation();
 					}
-					const hasFiles = isEventWithFiles(event);
-					if (disabled || !hasFiles) return;
+					if (!isEventWithFiles(event)) return;
 					require_file_utils.getFileEntries(event.dataTransfer.items, prop("directory")).then((files) => {
 						send({
 							type: "DROPZONE.DROP",
@@ -243,11 +258,11 @@ function connect(service, normalize) {
 					});
 				},
 				onFocus() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "DROPZONE.FOCUS" });
 				},
 				onBlur() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "DROPZONE.BLUR" });
 				}
 			});
@@ -257,12 +272,13 @@ function connect(service, normalize) {
 				...parts.trigger.attrs,
 				dir: prop("dir"),
 				id: getTriggerId(scope),
-				disabled,
+				disabled: disabled || readOnly,
 				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
 				"data-invalid": require_dom_query.dataAttr(prop("invalid")),
 				type: "button",
 				onClick(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (require_dom_query.contains(getDropzoneEl(scope), event.currentTarget)) event.stopPropagation();
 					send({ type: "OPEN" });
 				}
@@ -272,7 +288,7 @@ function connect(service, normalize) {
 			return normalize.input({
 				id: getHiddenInputId(scope),
 				tabIndex: -1,
-				disabled,
+				disabled: disabled || readOnly,
 				type: "file",
 				required: prop("required"),
 				capture: prop("capture"),
@@ -285,7 +301,7 @@ function connect(service, normalize) {
 					event.currentTarget.value = "";
 				},
 				onInput(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					const { files } = event.currentTarget;
 					send({
 						type: "FILE.SELECT",
@@ -309,7 +325,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.item.attrs,
 				dir: prop("dir"),
-				id: getItemId(scope, file.name),
+				id: getItemId(scope, getFileId(file)),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-type": type
 			});
@@ -319,7 +335,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemName.attrs,
 				dir: prop("dir"),
-				id: getItemNameId(scope, file.name),
+				id: getItemNameId(scope, getFileId(file)),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-type": type
 			});
@@ -329,7 +345,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemSizeText.attrs,
 				dir: prop("dir"),
-				id: getItemSizeTextId(scope, file.name),
+				id: getItemSizeTextId(scope, getFileId(file)),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-type": type
 			});
@@ -339,7 +355,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemPreview.attrs,
 				dir: prop("dir"),
-				id: getItemPreviewId(scope, file.name),
+				id: getItemPreviewId(scope, getFileId(file)),
 				"data-disabled": require_dom_query.dataAttr(disabled),
 				"data-type": type
 			});
@@ -360,13 +376,15 @@ function connect(service, normalize) {
 			return normalize.button({
 				...parts.itemDeleteTrigger.attrs,
 				dir: prop("dir"),
+				id: getItemDeleteTriggerId(scope, getFileId(file)),
 				type: "button",
-				disabled,
+				disabled: disabled || readOnly,
 				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
 				"data-type": type,
 				"aria-label": translations.deleteFile?.(file),
 				onClick() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({
 						type: "FILE.DELETE",
 						file,
@@ -390,12 +408,13 @@ function connect(service, normalize) {
 				...parts.clearTrigger.attrs,
 				dir: prop("dir"),
 				type: "button",
-				disabled,
-				hidden: context.get("acceptedFiles").length === 0,
+				disabled: disabled || readOnly,
+				hidden: acceptedFiles.length === 0,
 				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
 				onClick(event) {
 					if (event.defaultPrevented) return;
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "FILES.CLEAR" });
 				}
 			});
@@ -608,6 +627,7 @@ const props = require_create_props.createProps()([
 	"onFileChange",
 	"onFileReject",
 	"preventDocumentDrop",
+	"readOnly",
 	"required",
 	"transformFiles",
 	"translations",

package/dist/machines/file-upload/index.d.cts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, o as LocaleProperties, t as Commo
 import { i as FileMimeType, r as FileError } from "../../types-xyuh-a2-.cjs";
 
 //#region src/machines/file-upload/file-upload.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "item" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">;
 //#endregion
 //#region src/machines/file-upload/file-upload.types.d.ts
 interface FileRejection {
@@ -35,6 +35,7 @@ type ElementIds = Partial<{
   itemName: (id: string) => string;
   itemSizeText: (id: string) => string;
   itemPreview: (id: string) => string;
+  itemDeleteTrigger: (id: string) => string;
 }>;
 interface IntlTranslations {
   dropzone?: string | undefined;
@@ -62,6 +63,7 @@ interface FileUploadProps extends LocaleProperties, CommonProperties {
   capture?: "user" | "environment" | undefined;
   directory?: boolean | undefined;
   invalid?: boolean | undefined;
+  readOnly?: boolean | undefined;
   transformFiles?: ((files: File[]) => Promise<File[]>) | undefined;
 }
 type PropsWithDefault = "minFileSize" | "maxFileSize" | "maxFiles" | "preventDocumentDrop" | "allowDrop" | "translations";
@@ -104,7 +106,10 @@ interface FileUploadApi<T extends PropTypes = PropTypes> {
   dragging: boolean;
   focused: boolean;
   disabled: boolean;
+  readOnly: boolean;
   transforming: boolean;
+  maxFilesReached: boolean;
+  remainingFiles: number;
   openFilePicker: VoidFunction;
   deleteFile: (file: File, type?: ItemType | undefined) => void;
   acceptedFiles: File[];

package/dist/machines/file-upload/index.d.mts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, o as LocaleProperties, t as Commo
 import { i as FileMimeType, r as FileError } from "../../types-CsK6JMut.mjs";
 
 //#region src/machines/file-upload/file-upload.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"root" | "label" | "item" | "trigger" | "dropzone" | "itemDeleteTrigger" | "itemGroup" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText" | "clearTrigger">;
+declare const anatomy: AnatomyInstance<"root" | "item" | "label" | "trigger" | "clearTrigger" | "itemGroup" | "dropzone" | "itemDeleteTrigger" | "itemName" | "itemPreview" | "itemPreviewImage" | "itemSizeText">;
 //#endregion
 //#region src/machines/file-upload/file-upload.types.d.ts
 interface FileRejection {
@@ -35,6 +35,7 @@ type ElementIds = Partial<{
   itemName: (id: string) => string;
   itemSizeText: (id: string) => string;
   itemPreview: (id: string) => string;
+  itemDeleteTrigger: (id: string) => string;
 }>;
 interface IntlTranslations {
   dropzone?: string | undefined;
@@ -62,6 +63,7 @@ interface FileUploadProps extends LocaleProperties, CommonProperties {
   capture?: "user" | "environment" | undefined;
   directory?: boolean | undefined;
   invalid?: boolean | undefined;
+  readOnly?: boolean | undefined;
   transformFiles?: ((files: File[]) => Promise<File[]>) | undefined;
 }
 type PropsWithDefault = "minFileSize" | "maxFileSize" | "maxFiles" | "preventDocumentDrop" | "allowDrop" | "translations";
@@ -104,7 +106,10 @@ interface FileUploadApi<T extends PropTypes = PropTypes> {
   dragging: boolean;
   focused: boolean;
   disabled: boolean;
+  readOnly: boolean;
   transforming: boolean;
+  maxFilesReached: boolean;
+  remainingFiles: number;
   openFilePicker: VoidFunction;
   deleteFile: (file: File, type?: ItemType | undefined) => void;
   acceptedFiles: File[];

package/dist/machines/file-upload/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-CArN8dVu.mjs";
 import { U as raf, Xt as contains, ft as getEventTarget, i as visuallyHiddenStyle, rn as getWindow, st as addDomEvent, vn as dataAttr } from "../../dom-query-Bwyyt0Vp.mjs";
-import { W as callAll, i as warn, u as createSplitProps, vt as flatArray } from "../../utils-hFKGi-oS.mjs";
-import { a as createMachine } from "../../core-qHH8MshY.mjs";
+import { W as callAll, i as warn, q as hash, u as createSplitProps, yt as flatArray } from "../../utils-BIwaJq8z.mjs";
+import { a as createMachine } from "../../core-DVmt6PX7.mjs";
 import { i as isFileEqual, r as isValidFileSize, s as getAcceptAttrString, t as isValidFileType, u as getFileEntries } from "../../file-utils-5E6-AtJ9.mjs";
 import { c as formatBytes } from "../../i18n-utils-DCz8B6DF.mjs";
 import { t as createProps } from "../../create-props-SRSjdUTq.mjs";
@@ -21,6 +21,8 @@ const getItemId = (ctx, id) => ctx.ids?.item?.(id) ?? `file-upload:${ctx.id}:ite
 const getItemNameId = (ctx, id) => ctx.ids?.itemName?.(id) ?? `file-upload:${ctx.id}:item-name:${id}`;
 const getItemSizeTextId = (ctx, id) => ctx.ids?.itemSizeText?.(id) ?? `file-upload:${ctx.id}:item-size:${id}`;
 const getItemPreviewId = (ctx, id) => ctx.ids?.itemPreview?.(id) ?? `file-upload:${ctx.id}:item-preview:${id}`;
+const getItemDeleteTriggerId = (ctx, id) => ctx.ids?.itemDeleteTrigger?.(id) ?? `file:${ctx.id}:item-delete:${id}`;
+const getFileId = (file) => hash(`${file.name}-${file.size}`);
 const getRootEl = (ctx) => ctx.getById(getRootId(ctx));
 const getHiddenInputEl = (ctx) => ctx.getById(getHiddenInputId(ctx));
 const getDropzoneEl = (ctx) => ctx.getById(getDropzoneId(ctx));
@@ -103,29 +105,38 @@ function isInteractiveTarget(element, container) {
 function connect(service, normalize) {
 	const { state, send, prop, computed, scope, context } = service;
 	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
 	const required = !!prop("required");
 	const allowDrop = prop("allowDrop");
 	const translations = prop("translations");
 	const dragging = state.matches("dragging");
+	const focused = state.matches("focused") && !disabled;
+	const acceptedFiles = context.get("acceptedFiles");
+	const maxFiles = prop("maxFiles");
 	return {
 		dragging,
-		focused: state.matches("focused") && !disabled,
-		disabled: !!disabled,
+		focused,
+		disabled,
+		readOnly,
 		transforming: context.get("transforming"),
+		maxFilesReached: acceptedFiles.length >= maxFiles,
+		remainingFiles: Math.max(0, maxFiles - acceptedFiles.length),
 		openFilePicker() {
-			if (disabled) return;
+			if (disabled || readOnly) return;
 			send({ type: "OPEN" });
 		},
 		deleteFile(file, type = DEFAULT_ITEM_TYPE) {
+			if (disabled || readOnly) return;
 			send({
 				type: "FILE.DELETE",
 				file,
 				itemType: type
 			});
 		},
-		acceptedFiles: context.get("acceptedFiles"),
+		acceptedFiles,
 		rejectedFiles: context.get("rejectedFiles"),
 		setFiles(files) {
+			if (disabled || readOnly) return;
 			send({
 				type: "FILES.SET",
 				files,
@@ -133,9 +144,11 @@ function connect(service, normalize) {
 			});
 		},
 		clearRejectedFiles() {
+			if (disabled || readOnly) return;
 			send({ type: "REJECTED_FILES.CLEAR" });
 		},
 		clearFiles() {
+			if (disabled || readOnly) return;
 			send({ type: "FILES.CLEAR" });
 		},
 		getFileSize(file) {
@@ -148,7 +161,7 @@ function connect(service, normalize) {
 			return () => win.URL.revokeObjectURL(url);
 		},
 		setClipboardFiles(dt) {
-			if (disabled) return false;
+			if (disabled || readOnly) return false;
 			const files = Array.from(dt?.items ?? []).reduce((acc, item) => {
 				if (item.kind !== "file") return acc;
 				const file = item.getAsFile();
@@ -168,6 +181,7 @@ function connect(service, normalize) {
 				dir: prop("dir"),
 				id: getRootId(scope),
 				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
 				"data-dragging": dataAttr(dragging)
 			});
 		},
@@ -176,15 +190,17 @@ function connect(service, normalize) {
 				...parts.dropzone.attrs,
 				dir: prop("dir"),
 				id: getDropzoneId(scope),
-				tabIndex: disabled || props$1.disableClick ? void 0 : 0,
+				tabIndex: disabled || readOnly || props$1.disableClick ? void 0 : 0,
 				role: props$1.disableClick ? "application" : "button",
 				"aria-label": translations.dropzone,
 				"aria-disabled": disabled,
+				"aria-readonly": readOnly,
 				"data-invalid": dataAttr(prop("invalid")),
 				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
 				"data-dragging": dataAttr(dragging),
 				onKeyDown(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (event.defaultPrevented) return;
 					const target = getEventTarget(event);
 					if (!contains(event.currentTarget, target)) return;
@@ -197,7 +213,7 @@ function connect(service, normalize) {
 					});
 				},
 				onClick(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (event.defaultPrevented) return;
 					if (props$1.disableClick) return;
 					const target = getEventTarget(event);
@@ -207,7 +223,7 @@ function connect(service, normalize) {
 					send({ type: "DROPZONE.CLICK" });
 				},
 				onDragOver(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (!allowDrop) return;
 					event.preventDefault();
 					event.stopPropagation();
@@ -222,19 +238,18 @@ function connect(service, normalize) {
 					});
 				},
 				onDragLeave(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (!allowDrop) return;
 					if (contains(event.currentTarget, event.relatedTarget)) return;
 					send({ type: "DROPZONE.DRAG_LEAVE" });
 				},
 				onDrop(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (allowDrop) {
 						event.preventDefault();
 						event.stopPropagation();
 					}
-					const hasFiles = isEventWithFiles(event);
-					if (disabled || !hasFiles) return;
+					if (!isEventWithFiles(event)) return;
 					getFileEntries(event.dataTransfer.items, prop("directory")).then((files) => {
 						send({
 							type: "DROPZONE.DROP",
@@ -243,11 +258,11 @@ function connect(service, normalize) {
 					});
 				},
 				onFocus() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "DROPZONE.FOCUS" });
 				},
 				onBlur() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "DROPZONE.BLUR" });
 				}
 			});
@@ -257,12 +272,13 @@ function connect(service, normalize) {
 				...parts.trigger.attrs,
 				dir: prop("dir"),
 				id: getTriggerId(scope),
-				disabled,
+				disabled: disabled || readOnly,
 				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
 				"data-invalid": dataAttr(prop("invalid")),
 				type: "button",
 				onClick(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					if (contains(getDropzoneEl(scope), event.currentTarget)) event.stopPropagation();
 					send({ type: "OPEN" });
 				}
@@ -272,7 +288,7 @@ function connect(service, normalize) {
 			return normalize.input({
 				id: getHiddenInputId(scope),
 				tabIndex: -1,
-				disabled,
+				disabled: disabled || readOnly,
 				type: "file",
 				required: prop("required"),
 				capture: prop("capture"),
@@ -285,7 +301,7 @@ function connect(service, normalize) {
 					event.currentTarget.value = "";
 				},
 				onInput(event) {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					const { files } = event.currentTarget;
 					send({
 						type: "FILE.SELECT",
@@ -309,7 +325,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.item.attrs,
 				dir: prop("dir"),
-				id: getItemId(scope, file.name),
+				id: getItemId(scope, getFileId(file)),
 				"data-disabled": dataAttr(disabled),
 				"data-type": type
 			});
@@ -319,7 +335,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemName.attrs,
 				dir: prop("dir"),
-				id: getItemNameId(scope, file.name),
+				id: getItemNameId(scope, getFileId(file)),
 				"data-disabled": dataAttr(disabled),
 				"data-type": type
 			});
@@ -329,7 +345,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemSizeText.attrs,
 				dir: prop("dir"),
-				id: getItemSizeTextId(scope, file.name),
+				id: getItemSizeTextId(scope, getFileId(file)),
 				"data-disabled": dataAttr(disabled),
 				"data-type": type
 			});
@@ -339,7 +355,7 @@ function connect(service, normalize) {
 			return normalize.element({
 				...parts.itemPreview.attrs,
 				dir: prop("dir"),
-				id: getItemPreviewId(scope, file.name),
+				id: getItemPreviewId(scope, getFileId(file)),
 				"data-disabled": dataAttr(disabled),
 				"data-type": type
 			});
@@ -360,13 +376,15 @@ function connect(service, normalize) {
 			return normalize.button({
 				...parts.itemDeleteTrigger.attrs,
 				dir: prop("dir"),
+				id: getItemDeleteTriggerId(scope, getFileId(file)),
 				type: "button",
-				disabled,
+				disabled: disabled || readOnly,
 				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
 				"data-type": type,
 				"aria-label": translations.deleteFile?.(file),
 				onClick() {
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({
 						type: "FILE.DELETE",
 						file,
@@ -390,12 +408,13 @@ function connect(service, normalize) {
 				...parts.clearTrigger.attrs,
 				dir: prop("dir"),
 				type: "button",
-				disabled,
-				hidden: context.get("acceptedFiles").length === 0,
+				disabled: disabled || readOnly,
+				hidden: acceptedFiles.length === 0,
 				"data-disabled": dataAttr(disabled),
+				"data-readonly": dataAttr(readOnly),
 				onClick(event) {
 					if (event.defaultPrevented) return;
-					if (disabled) return;
+					if (disabled || readOnly) return;
 					send({ type: "FILES.CLEAR" });
 				}
 			});
@@ -608,6 +627,7 @@ const props = createProps()([
 	"onFileChange",
 	"onFileReject",
 	"preventDocumentDrop",
+	"readOnly",
 	"required",
 	"transformFiles",
 	"translations",

package/dist/machines/floating-panel/index.cjs

@@ -1,7 +1,7 @@
 const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
 const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
-const require_utils = require('../../utils-_6frwjgJ.cjs');
-const require_core = require('../../core-CQFbMdTl.cjs');
+const require_utils = require('../../utils-CtgLe8Vv.cjs');
+const require_core = require('../../core-DHn58LRl.cjs');
 const require_rect_utils = require('../../rect-utils-Dp9Wvl7-.cjs');
 const require_store = require('../../store-DDjfrUhd.cjs');
 const require_create_props = require('../../create-props-l5q5b8Wo.cjs');

package/dist/machines/floating-panel/index.d.cts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { a as Point, o as Rect, y as Size } from "../../types-CaxzY9yP.cjs";
 
 //#region src/machines/floating-panel/floating-panel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"control" | "resizeTrigger" | "trigger" | "content" | "body" | "header" | "title" | "closeTrigger" | "positioner" | "dragTrigger" | "stageTrigger">;
+declare const anatomy: AnatomyInstance<"body" | "header" | "title" | "content" | "control" | "trigger" | "positioner" | "closeTrigger" | "resizeTrigger" | "dragTrigger" | "stageTrigger">;
 //#endregion
 //#region src/machines/floating-panel/floating-panel.types.d.ts
 interface PositionChangeDetails {

package/dist/machines/floating-panel/index.d.mts

@@ -4,7 +4,7 @@ import { b as NormalizeProps, g as RequiredBy, r as DirectionProperty, t as Comm
 import { a as Point, o as Rect, y as Size } from "../../types-ByFp2QfD.mjs";
 
 //#region src/machines/floating-panel/floating-panel.anatomy.d.ts
-declare const anatomy: AnatomyInstance<"control" | "resizeTrigger" | "trigger" | "content" | "body" | "header" | "title" | "closeTrigger" | "positioner" | "dragTrigger" | "stageTrigger">;
+declare const anatomy: AnatomyInstance<"body" | "header" | "title" | "content" | "control" | "trigger" | "positioner" | "closeTrigger" | "resizeTrigger" | "dragTrigger" | "stageTrigger">;
 //#endregion
 //#region src/machines/floating-panel/floating-panel.types.d.ts
 interface PositionChangeDetails {

package/dist/machines/floating-panel/index.mjs

@@ -1,7 +1,7 @@
 import { t as createAnatomy } from "../../create-anatomy-CArN8dVu.mjs";
 import { T as trackPointerMove, U as raf, dt as getEventStep, ft as getEventTarget, ln as isHTMLElement, lt as getEventKey, p as resizeObserverBorderBox, st as addDomEvent, vn as dataAttr, yt as isLeftClick } from "../../dom-query-Bwyyt0Vp.mjs";
-import { H as toPx, J as match, g as clampValue, n as ensureProps, p as pick, r as invariant, u as createSplitProps } from "../../utils-hFKGi-oS.mjs";
-import { a as createMachine, i as createGuards } from "../../core-qHH8MshY.mjs";
+import { H as toPx, Y as match, g as clampValue, n as ensureProps, p as pick, r as invariant, u as createSplitProps } from "../../utils-BIwaJq8z.mjs";
+import { a as createMachine, i as createGuards } from "../../core-DVmt6PX7.mjs";
 import { G as clampPoint, I as addPoints, K as clampSize, R as createRect, T as constrainRect, W as subtractPoints, d as getWindowRect, t as resizeRect, v as getElementRect, x as isSizeEqual, y as isPointEqual } from "../../rect-utils-j6C9uZk1.mjs";
 import { a as subscribe, n as proxy } from "../../store-CpMJ6RZR.mjs";
 import { t as createProps } from "../../create-props-SRSjdUTq.mjs";