@alfakit/react 0.0.0-stage → 0.1.1

package/dist/components/fields/file-upload.js

@@ -0,0 +1,397 @@
+import { useChoice, usePanel, useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../ui/button.js";
+import { useStore } from "../../hooks/use-store.js";
+import { Spinner } from "../ui/spinner.js";
+import { useField, useFormStore } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { ImageEditorDialog } from "./image-editor-dialog-lazy.js";
+import { canEditImage, concurrencyLimiter, cssAspectRatio, editableImageName, fetchEditableImage, fieldMemory, fileUploadAccept, fileUploadPaths, filesFromClipboard, formatBytes, insertUploadedFile, moveRepeaterItem, panelUploadOptions, requestJson, transformImage, uploadTemporaryFile, uploadedFileLinks } from "@alfakit/core";
+import { useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon, DownloadIcon, ExternalLinkIcon, FileIcon, PencilIcon, UploadCloudIcon, XIcon } from "lucide-react";
+//#region src/components/fields/file-upload.tsx
+function FileUploadField({ component }) {
+	const t = useT();
+	const choice = useChoice();
+	const panel = usePanel();
+	const { value, setValue, error, id, disabled, readOnly, aria } = useField(component);
+	const locked = disabled || readOnly;
+	const store = useFormStore();
+	const uploadingStore = fieldMemory(store, `${component.statePath}:uploading`, () => []);
+	const uploadedStore = fieldMemory(store, `${component.statePath}:uploaded`, () => []);
+	const uploading = useStore(uploadingStore);
+	const uploaded = useStore(uploadedStore);
+	const setUploading = uploadingStore.set;
+	const setUploaded = uploadedStore.set;
+	const [dragging, setDragging] = useState(false);
+	const [brokenPreviews, setBrokenPreviews] = useState(() => /* @__PURE__ */ new Set());
+	const inputRef = useRef(null);
+	const [dragPath, setDragPath] = useState(null);
+	const [editing, setEditing] = useState(null);
+	const editImage = (file) => new Promise((resolve) => setEditing({
+		file,
+		resolve: (edited) => {
+			setEditing(null);
+			resolve(edited);
+		}
+	}));
+	const objectUrls = fieldMemory(store, `${component.statePath}:previews`, () => /* @__PURE__ */ new Set()).get();
+	const releasePreview = (url) => {
+		if (url && objectUrls.delete(url)) URL.revokeObjectURL(url);
+	};
+	const paths = fileUploadPaths(value);
+	const files = paths.map((path) => [...component.files, ...uploaded].find((file) => file.path === path) ?? {
+		path,
+		name: path.replace(/^tmp:/, "")
+	});
+	const maxFiles = component.multiple ? component.maxFiles ?? Infinity : 1;
+	const canAddMore = files.length + uploading.length < maxFiles;
+	const commit = (next) => setValue(component.multiple ? next : next[0] ?? null);
+	const upload = async (list) => {
+		const endpoint = panel.endpoints.upload;
+		if (!endpoint) return;
+		const accepted = Array.from(list).slice(0, Math.max(0, maxFiles - files.length - uploading.length));
+		const limit = concurrencyLimiter(component.maxParallelUploads ?? 1);
+		const queued = [];
+		for (const [position, picked] of accepted.entries()) {
+			let original = picked;
+			const edit = Boolean(component.imageEditor && canEditImage(picked));
+			if (edit) {
+				const edited = await editImage(picked);
+				if (!edited) continue;
+				original = edited;
+			}
+			const file = await prepare(original, edit);
+			if (!file) continue;
+			const local = pendingFile(file, position);
+			setUploading((state) => [...state, local]);
+			queued.push(limit(() => send(endpoint, file, local)));
+		}
+		await Promise.all(queued);
+	};
+	/** Resize and orient a picked (or edited) file, and check its size. Null when rejected. */
+	const prepare = async (original, edited) => {
+		const file = component.imageCropAspectRatio || component.imageResizeTargetWidth || component.imageResizeTargetHeight || component.orientImagesFromExif ? await transformImage(original, {
+			aspectRatio: edited ? null : component.imageCropAspectRatio,
+			mode: component.imageResizeMode,
+			width: component.imageResizeTargetWidth,
+			height: component.imageResizeTargetHeight,
+			orient: component.orientImagesFromExif
+		}) : original;
+		if (component.minSize && file.size < component.minSize * 1024) {
+			setUploading((state) => [...state, {
+				path: file.name,
+				name: file.name,
+				size: file.size,
+				error: t("form.file_too_small", {}, "This file is too small.")
+			}]);
+			return null;
+		}
+		if (component.maxSize && file.size > component.maxSize * 1024) {
+			setUploading((state) => [...state, {
+				path: file.name,
+				name: file.name,
+				size: file.size,
+				error: t("form.file_too_large", {}, "This file is too large.")
+			}]);
+			return null;
+		}
+		return file;
+	};
+	/** The in-progress entry shown while `file` uploads. */
+	const pendingFile = (file, position) => {
+		const local = {
+			path: `pending:${position}:${file.lastModified}:${file.size}:${file.name}`,
+			name: file.name,
+			size: file.size,
+			progress: 0,
+			preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : void 0
+		};
+		if (local.preview) objectUrls.add(local.preview);
+		return local;
+	};
+	/**
+	* The "Edit" button on an uploaded image: open it in the editor and upload the result
+	* in its place (the old file goes like any removed one: a temporary upload is deleted
+	* now, a stored file when the form is saved with `deleteRemovedFiles()`).
+	*/
+	const editExisting = async (existing) => {
+		const endpoint = panel.endpoints.upload;
+		const url = existing.url ?? existing.preview;
+		const name = editableImageName(existing);
+		if (!endpoint || !url || !name) return;
+		const source = await fetchEditableImage(url, name);
+		if (!source) {
+			setUploading((state) => [...state, {
+				path: `failed:${existing.path}`,
+				name: existing.name,
+				error: t("image_editor.load_failed", {}, "The image could not be opened.")
+			}]);
+			return;
+		}
+		const edited = await editImage(source);
+		if (!edited || edited === source) return;
+		const file = await prepare(edited, true);
+		if (!file) return;
+		const local = pendingFile(file, `edit:${existing.path}`);
+		setUploading((state) => [...state, local]);
+		await send(endpoint, file, local, existing.path);
+	};
+	const send = async (endpoint, file, local, replacing) => {
+		try {
+			const response = await uploadTemporaryFile(endpoint, file, {
+				...panelUploadOptions(panel, component.uploadPolicy),
+				onProgress: (progress) => setUploading((state) => state.map((item) => item.path === local.path ? {
+					...item,
+					progress
+				} : item))
+			});
+			setUploaded((state) => [...state, {
+				path: response.key,
+				name: response.name,
+				size: response.size,
+				temporary: true,
+				url: local.preview
+			}]);
+			setUploading((state) => state.filter((item) => item.path !== local.path));
+			const current = fileUploadPaths(store.getValue(component.statePath, null));
+			if (replacing !== void 0 && current.includes(replacing)) {
+				commit(current.map((path) => path === replacing ? response.key : path));
+				discard(replacing);
+			} else commit(insertUploadedFile(current, response.key, component, maxFiles));
+		} catch (uploadError) {
+			const message = uploadError.errors?.file?.[0] ?? uploadError.message;
+			setUploading((state) => state.map((item) => item.path === local.path ? {
+				...item,
+				error: message,
+				progress: void 0
+			} : item));
+		}
+	};
+	const remove = (path) => {
+		commit(paths.filter((item) => item !== path));
+		discard(path);
+	};
+	/** Release a file that left the field: its preview, and a temporary upload's file. */
+	const discard = (path) => {
+		releasePreview(uploadedStore.get().find((file) => file.path === path)?.url);
+		if (path.startsWith("tmp:") && panel.endpoints.uploadDestroy) requestJson(panel.endpoints.uploadDestroy, {
+			method: "DELETE",
+			body: { key: path }
+		}).catch(() => void 0);
+	};
+	const onDrop = (event) => {
+		event.preventDefault();
+		setDragging(false);
+		if (!locked && event.dataTransfer.files.length > 0) upload(event.dataTransfer.files);
+	};
+	const onPaste = (event) => {
+		if (locked || component.pasteable === false) return;
+		const pasted = filesFromClipboard(event.clipboardData);
+		if (pasted.length > 0) {
+			event.preventDefault();
+			upload(pasted);
+		}
+	};
+	const move = (from, to) => commit(moveRepeaterItem(paths, from, to));
+	const reorderable = Boolean(component.reorderable && component.multiple && !locked);
+	const isImage = (file) => component.previewable !== false && (component.image || /\.(png|jpe?g|gif|webp|svg|avif)$/i.test(file.name));
+	const circle = component.panelLayout === "circle" || component.avatar;
+	const integrated = component.panelLayout === "integrated" && !circle;
+	const removeAtStart = component.positions?.removeButton === "start";
+	const progressAtStart = component.positions?.progressIndicator === "start";
+	const uploadAlign = component.positions?.uploadButton ?? "center";
+	const canEditExisting = (file, index) => Boolean(component.imageEditor) && !locked && index < files.length && !file.missing && Boolean(file.url ?? file.preview) && editableImageName(file) !== null;
+	const renderRemove = (file) => component.deletable && !locked && /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: circle ? "secondary" : "ghost",
+		size: "icon-xs",
+		className: cn(circle && "rounded-full shadow"),
+		"aria-label": t("remove", {}, "Remove"),
+		onClick: () => {
+			if (file.error || file.progress !== void 0) {
+				releasePreview(file.preview);
+				setUploading((state) => state.filter((item) => item.path !== file.path));
+			} else remove(file.path);
+		},
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	});
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-slot": "file-upload",
+			"data-layout": component.panelLayout,
+			className: cn("flex flex-col gap-3", integrated && "rounded-md border p-2"),
+			children: [
+				(files.length > 0 || uploading.length > 0) && /* @__PURE__ */ jsx("ul", {
+					className: cn("grid gap-2", component.panelLayout === "grid" && "grid-cols-2 sm:grid-cols-3 md:grid-cols-4", circle && "justify-items-center"),
+					children: [...files, ...uploading].map((file, index) => /* @__PURE__ */ jsxs("li", {
+						draggable: reorderable && index < files.length,
+						onDragStart: () => setDragPath(file.path),
+						onDragOver: (event) => reorderable && event.preventDefault(),
+						onDrop: (event) => {
+							if (!reorderable || dragPath === null) return;
+							event.preventDefault();
+							event.stopPropagation();
+							const from = paths.indexOf(dragPath);
+							if (from !== -1 && index < files.length) move(from, index);
+							setDragPath(null);
+						},
+						onDragEnd: () => setDragPath(null),
+						className: cn(dragPath === file.path && "opacity-50", "bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm", circle && "size-28 justify-center rounded-full border-0 p-0", file.error && "border-destructive"),
+						children: [
+							!circle && removeAtStart && renderRemove(file),
+							!circle && progressAtStart && file.progress !== void 0 && !file.error && /* @__PURE__ */ jsx(Spinner, {}),
+							isImage(file) && (file.url || file.preview) && !brokenPreviews.has(file.path) ? /* @__PURE__ */ jsx("img", {
+								src: file.url ?? file.preview,
+								alt: "",
+								onError: () => setBrokenPreviews((current) => new Set(current).add(file.path)),
+								className: cn("size-12 shrink-0 rounded object-cover", circle && "size-28 rounded-full"),
+								style: !circle && component.imagePreviewHeight ? {
+									height: cssLength(component.imagePreviewHeight),
+									width: "auto",
+									maxWidth: "50%"
+								} : void 0
+							}) : !circle && /* @__PURE__ */ jsx(FileIcon, { className: "text-muted-foreground size-6 shrink-0" }),
+							!circle && /* @__PURE__ */ jsxs("div", {
+								className: "min-w-0 flex-1",
+								children: [/* @__PURE__ */ jsx("p", {
+									className: "truncate font-medium",
+									children: file.name
+								}), /* @__PURE__ */ jsx("p", {
+									className: cn("text-muted-foreground text-xs", file.missing && "text-destructive"),
+									children: file.error ?? (file.missing ? t("form.file_missing", {}, "This file no longer exists.") : file.progress !== void 0 && !file.error ? component.uploadingMessage ?? t("form.uploading", {}, "Uploading…") : file.size ? formatBytes(file.size) : file.temporary ? t("form.uploading", {}, "Pending") : "")
+								})]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: cn("flex items-center gap-1", circle && "absolute -end-1 -bottom-1"),
+								children: [
+									(circle || !progressAtStart) && file.progress !== void 0 && !file.error && /* @__PURE__ */ jsx(Spinner, {}),
+									reorderable && index < files.length && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										"aria-label": t("form.move_up", {}, "Move up"),
+										disabled: index === 0,
+										onClick: () => move(index, index - 1),
+										children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+									}), /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										"aria-label": t("form.move_down", {}, "Move down"),
+										disabled: index === files.length - 1,
+										onClick: () => move(index, index + 1),
+										children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+									})] }),
+									canEditExisting(file, index) && /* @__PURE__ */ jsx(Button, {
+										type: "button",
+										variant: circle ? "secondary" : "ghost",
+										size: "icon-xs",
+										className: cn(circle && "rounded-full shadow"),
+										"aria-label": t("image_editor.title", {}, "Edit image"),
+										title: t("image_editor.title", {}, "Edit image"),
+										"data-action": "edit-image",
+										onClick: () => void editExisting(file),
+										children: /* @__PURE__ */ jsx(PencilIcon, {})
+									}),
+									component.openable && uploadedFileLinks(file).open && /* @__PURE__ */ jsx(Button, {
+										asChild: true,
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										children: /* @__PURE__ */ jsx("a", {
+											href: uploadedFileLinks(file).open,
+											target: "_blank",
+											rel: "noopener noreferrer",
+											"aria-label": `${t("open", {}, "Open")} ${t("opens_in_new_tab", {}, "(opens in a new tab)")}`,
+											children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
+										})
+									}),
+									component.downloadable && uploadedFileLinks(file).download && /* @__PURE__ */ jsx(Button, {
+										asChild: true,
+										type: "button",
+										variant: "ghost",
+										size: "icon-xs",
+										children: /* @__PURE__ */ jsx("a", {
+											href: uploadedFileLinks(file).download,
+											download: true,
+											"aria-label": t("download", {}, "Download"),
+											children: /* @__PURE__ */ jsx(DownloadIcon, {})
+										})
+									}),
+									(circle || !removeAtStart) && renderRemove(file)
+								]
+							})
+						]
+					}, file.path))
+				}),
+				canAddMore && !locked && /* @__PURE__ */ jsxs("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => inputRef.current?.click(),
+					"aria-describedby": aria["aria-describedby"],
+					onKeyDown: (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							inputRef.current?.click();
+						}
+					},
+					onDragOver: (event) => {
+						event.preventDefault();
+						setDragging(true);
+					},
+					onDragLeave: () => setDragging(false),
+					onDrop,
+					onPaste,
+					style: !circle && component.panelAspectRatio ? { aspectRatio: cssAspectRatio(component.panelAspectRatio) } : void 0,
+					"data-align": uploadAlign,
+					className: cn("text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors", uploadAlign === "start" ? "items-start text-start" : uploadAlign === "end" ? "items-end text-end" : "items-center text-center", integrated && "border-transparent", dragging && "border-ring bg-accent", circle && "size-28 items-center rounded-full py-0"),
+					children: [
+						/* @__PURE__ */ jsx(UploadCloudIcon, { className: "size-5" }),
+						!circle && /* @__PURE__ */ jsx("span", { children: component.placeholder ?? t("form.drop_files", {}, "Drop files here or click to browse") }),
+						!circle && (component.acceptedFileTypes || component.maxSize || component.minFiles) && /* @__PURE__ */ jsx("span", {
+							className: "text-muted-foreground text-xs",
+							children: [
+								component.acceptedFileTypes?.join(", "),
+								component.maxSize ? `≤ ${formatBytes(component.maxSize * 1024, 0)}` : null,
+								component.minFiles ? choice("form.min_files", component.minFiles, {}, "At least :count file|At least :count files") : null
+							].filter(Boolean).join(" · ")
+						})
+					]
+				}),
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id,
+					type: "file",
+					className: "sr-only",
+					tabIndex: -1,
+					...aria,
+					multiple: component.multiple,
+					accept: fileUploadAccept(component),
+					disabled: locked,
+					onChange: (event) => {
+						const picked = event.target.files ? Array.from(event.target.files) : [];
+						event.target.value = "";
+						upload(picked);
+					}
+				}),
+				component.imageEditor && /* @__PURE__ */ jsx(ImageEditorDialog, {
+					request: editing,
+					options: component.imageEditor
+				})
+			]
+		})
+	});
+}
+/** `imagePreviewHeight()`: numbers are pixels, strings are CSS lengths (`'250px'`, `'10rem'`). */
+function cssLength(value) {
+	return typeof value === "number" || /^\d+(\.\d+)?$/.test(value) ? `${value}px` : value;
+}
+//#endregion
+export { FileUploadField };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/components/fields/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/fields/file-upload.tsx"],"sourcesContent":["import type { FileUploadSchema, UploadedFile } from '@alfakit/core'\nimport {\n  canEditImage,\n  concurrencyLimiter,\n  cssAspectRatio,\n  editableImageName,\n  fetchEditableImage,\n  fieldMemory,\n  filesFromClipboard,\n  fileUploadAccept,\n  fileUploadPaths,\n  formatBytes,\n  insertUploadedFile,\n  moveRepeaterItem,\n  panelUploadOptions,\n  requestJson,\n  transformImage,\n  uploadedFileLinks,\n  uploadTemporaryFile,\n} from '@alfakit/core'\nimport {\n  ChevronDownIcon,\n  ChevronUpIcon,\n  DownloadIcon,\n  ExternalLinkIcon,\n  FileIcon,\n  PencilIcon,\n  UploadCloudIcon,\n  XIcon,\n} from 'lucide-react'\nimport { useRef, useState, type ClipboardEvent, type DragEvent } from 'react'\nimport { useChoice, usePanel, useT } from '../../context'\nimport { useStore } from '../../hooks/use-store'\nimport { cn } from '../../lib/utils'\nimport { useField, useFormStore } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { Button } from '../ui/button'\nimport { Spinner } from '../ui/spinner'\nimport type { ImageEditRequest } from './image-editor-dialog'\nimport { ImageEditorDialog } from './image-editor-dialog-lazy'\n\ninterface LocalFile extends UploadedFile {\n  progress?: number\n  error?: string\n  preview?: string\n}\n\nexport function FileUploadField({ component }: { component: FileUploadSchema }) {\n  const t = useT()\n  const choice = useChoice()\n  const panel = usePanel()\n  const { value, setValue, error, id, disabled, readOnly, aria } = useField<\n    string | string[] | null\n  >(component)\n  // Read-only keeps open/download links but hides upload and remove controls.\n  const locked = disabled || readOnly\n  const store = useFormStore()\n  // In-flight uploads and the metadata of files uploaded in this session (the server schema\n  // only knows about saved files) live in the form's field memory, not in component state:\n  // a virtualised Repeater item unmounts when scrolled out of view and finds them again,\n  // local image previews included, when it mounts back.\n  const uploadingStore = fieldMemory<LocalFile[]>(\n    store,\n    `${component.statePath}:uploading`,\n    () => [],\n  )\n  const uploadedStore = fieldMemory<FileUploadSchema['files']>(\n    store,\n    `${component.statePath}:uploaded`,\n    () => [],\n  )\n  const uploading = useStore(uploadingStore)\n  const uploaded = useStore(uploadedStore)\n  const setUploading = uploadingStore.set\n  const setUploaded = uploadedStore.set\n  const [dragging, setDragging] = useState(false)\n  // Previews whose image failed to load (missing or unreachable file) show the file icon.\n  const [brokenPreviews, setBrokenPreviews] = useState<ReadonlySet<string>>(() => new Set())\n  const inputRef = useRef<HTMLInputElement>(null)\n  const [dragPath, setDragPath] = useState<string | null>(null)\n  // The image open in the editor (`imageEditor()`), one at a time.\n  const [editing, setEditing] = useState<ImageEditRequest | null>(null)\n  const editImage = (file: File) =>\n    new Promise<File | null>((resolve) =>\n      setEditing({\n        file,\n        resolve: (edited) => {\n          setEditing(null)\n          resolve(edited)\n        },\n      }),\n    )\n  // Object URLs made for local image previews; released when the file is removed.\n  const objectUrls = fieldMemory<Set<string>>(\n    store,\n    `${component.statePath}:previews`,\n    () => new Set(),\n  ).get()\n\n  const releasePreview = (url: string | undefined) => {\n    if (url && objectUrls.delete(url)) URL.revokeObjectURL(url)\n  }\n\n  const paths = fileUploadPaths(value)\n  const files: LocalFile[] = paths.map(\n    (path) =>\n      [...component.files, ...uploaded].find((file) => file.path === path) ?? {\n        path,\n        name: path.replace(/^tmp:/, ''),\n      },\n  )\n  const maxFiles = component.multiple ? (component.maxFiles ?? Infinity) : 1\n  const canAddMore = files.length + uploading.length < maxFiles\n\n  const commit = (next: string[]) => setValue(component.multiple ? next : (next[0] ?? null))\n\n  const upload = async (list: FileList | File[]) => {\n    const endpoint = panel.endpoints.upload\n\n    if (!endpoint) {\n      return\n    }\n\n    const accepted = Array.from(list).slice(\n      0,\n      Math.max(0, maxFiles - files.length - uploading.length),\n    )\n\n    // `maxParallelUploads()`: files are prepared (edited, resized) one by one and then\n    // queued, so at most that many upload at once.\n    const limit = concurrencyLimiter(component.maxParallelUploads ?? 1)\n    const queued: Promise<void>[] = []\n\n    for (const [position, picked] of accepted.entries()) {\n      let original = picked\n      const edit = Boolean(component.imageEditor && canEditImage(picked))\n\n      if (edit) {\n        const edited = await editImage(picked)\n\n        // Cancelled: the file is not uploaded.\n        if (!edited) continue\n\n        original = edited\n      }\n\n      const file = await prepare(original, edit)\n\n      if (!file) continue\n\n      const local = pendingFile(file, position)\n      setUploading((state) => [...state, local])\n\n      queued.push(limit(() => send(endpoint, file, local)))\n    }\n\n    await Promise.all(queued)\n  }\n\n  /** Resize and orient a picked (or edited) file, and check its size. Null when rejected. */\n  const prepare = async (original: File, edited: boolean): Promise<File | null> => {\n    const file =\n      component.imageCropAspectRatio ||\n      component.imageResizeTargetWidth ||\n      component.imageResizeTargetHeight ||\n      component.orientImagesFromExif\n        ? await transformImage(original, {\n            // The editor already cropped the image.\n            aspectRatio: edited ? null : component.imageCropAspectRatio,\n            mode: component.imageResizeMode,\n            width: component.imageResizeTargetWidth,\n            height: component.imageResizeTargetHeight,\n            orient: component.orientImagesFromExif,\n          })\n        : original\n\n    if (component.minSize && file.size < component.minSize * 1024) {\n      setUploading((state) => [\n        ...state,\n        {\n          path: file.name,\n          name: file.name,\n          size: file.size,\n          error: t('form.file_too_small', {}, 'This file is too small.'),\n        },\n      ])\n\n      return null\n    }\n\n    if (component.maxSize && file.size > component.maxSize * 1024) {\n      setUploading((state) => [\n        ...state,\n        {\n          path: file.name,\n          name: file.name,\n          size: file.size,\n          error: t('form.file_too_large', {}, 'This file is too large.'),\n        },\n      ])\n\n      return null\n    }\n\n    return file\n  }\n\n  /** The in-progress entry shown while `file` uploads. */\n  const pendingFile = (file: File, position: number | string): LocalFile => {\n    const local: LocalFile = {\n      // Unique within the batch and across re-picks of a changed file.\n      path: `pending:${position}:${file.lastModified}:${file.size}:${file.name}`,\n      name: file.name,\n      size: file.size,\n      progress: 0,\n      preview: file.type.startsWith('image/') ? URL.createObjectURL(file) : undefined,\n    }\n    if (local.preview) objectUrls.add(local.preview)\n\n    return local\n  }\n\n  /**\n   * The \"Edit\" button on an uploaded image: open it in the editor and upload the result\n   * in its place (the old file goes like any removed one: a temporary upload is deleted\n   * now, a stored file when the form is saved with `deleteRemovedFiles()`).\n   */\n  const editExisting = async (existing: LocalFile) => {\n    const endpoint = panel.endpoints.upload\n    const url = existing.url ?? existing.preview\n    const name = editableImageName(existing)\n\n    if (!endpoint || !url || !name) return\n\n    const source = await fetchEditableImage(url, name)\n\n    if (!source) {\n      setUploading((state) => [\n        ...state,\n        {\n          path: `failed:${existing.path}`,\n          name: existing.name,\n          error: t('image_editor.load_failed', {}, 'The image could not be opened.'),\n        },\n      ])\n\n      return\n    }\n\n    const edited = await editImage(source)\n\n    // Cancelled, or the editor couldn't decode it: keep the file as it is.\n    if (!edited || edited === source) return\n\n    const file = await prepare(edited, true)\n\n    if (!file) return\n\n    const local = pendingFile(file, `edit:${existing.path}`)\n    setUploading((state) => [...state, local])\n    await send(endpoint, file, local, existing.path)\n  }\n\n  const send = async (endpoint: string, file: File, local: LocalFile, replacing?: string) => {\n    try {\n      // Large files go in resumable chunks; progress covers the whole file.\n      const response = await uploadTemporaryFile(endpoint, file, {\n        ...panelUploadOptions(panel, component.uploadPolicy),\n        onProgress: (progress) =>\n          setUploading((state) =>\n            state.map((item) => (item.path === local.path ? { ...item, progress } : item)),\n          ),\n      })\n\n      setUploaded((state) => [\n        ...state,\n        {\n          path: response.key,\n          name: response.name,\n          size: response.size,\n          temporary: true,\n          url: local.preview,\n        },\n      ])\n      setUploading((state) => state.filter((item) => item.path !== local.path))\n      // Read the store, not `value`: it's stale after the first file of a batch.\n      const current = fileUploadPaths(\n        store.getValue<string | string[] | null>(component.statePath, null),\n      )\n\n      if (replacing !== undefined && current.includes(replacing)) {\n        // An edited image takes the old one's place.\n        commit(current.map((path) => (path === replacing ? response.key : path)))\n        discard(replacing)\n      } else {\n        commit(insertUploadedFile(current, response.key, component, maxFiles))\n      }\n    } catch (uploadError) {\n      const message =\n        (uploadError as { errors?: Record<string, string[]> }).errors?.file?.[0] ??\n        (uploadError as Error).message\n      setUploading((state) =>\n        state.map((item) =>\n          item.path === local.path ? { ...item, error: message, progress: undefined } : item,\n        ),\n      )\n    }\n  }\n\n  const remove = (path: string) => {\n    commit(paths.filter((item) => item !== path))\n    discard(path)\n  }\n\n  /** Release a file that left the field: its preview, and a temporary upload's file. */\n  const discard = (path: string) => {\n    releasePreview(uploadedStore.get().find((file) => file.path === path)?.url)\n\n    if (path.startsWith('tmp:') && panel.endpoints.uploadDestroy) {\n      void requestJson(panel.endpoints.uploadDestroy, {\n        method: 'DELETE',\n        body: { key: path },\n      }).catch(() => undefined)\n    }\n  }\n\n  const onDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault()\n    setDragging(false)\n\n    if (!locked && event.dataTransfer.files.length > 0) {\n      void upload(event.dataTransfer.files)\n    }\n  }\n\n  // `pasteable()`: images and files pasted while the drop zone has focus.\n  const onPaste = (event: ClipboardEvent<HTMLDivElement>) => {\n    if (locked || component.pasteable === false) return\n\n    const pasted = filesFromClipboard(event.clipboardData)\n\n    if (pasted.length > 0) {\n      event.preventDefault()\n      void upload(pasted)\n    }\n  }\n\n  const move = (from: number, to: number) => commit(moveRepeaterItem(paths, from, to) as string[])\n  const reorderable = Boolean(component.reorderable && component.multiple && !locked)\n\n  // `previewable(false)` shows every file as a name and icon, without the image.\n  const isImage = (file: LocalFile) =>\n    component.previewable !== false &&\n    (component.image || /\\.(png|jpe?g|gif|webp|svg|avif)$/i.test(file.name))\n  const circle = component.panelLayout === 'circle' || component.avatar\n  const integrated = component.panelLayout === 'integrated' && !circle\n  const removeAtStart = component.positions?.removeButton === 'start'\n  const progressAtStart = component.positions?.progressIndicator === 'start'\n  const uploadAlign = component.positions?.uploadButton ?? 'center'\n\n  // `imageEditor()`: uploaded JPEG, PNG and WebP images can be edited again.\n  const canEditExisting = (file: LocalFile, index: number) =>\n    Boolean(component.imageEditor) &&\n    !locked &&\n    index < files.length &&\n    !file.missing &&\n    Boolean(file.url ?? file.preview) &&\n    editableImageName(file) !== null\n\n  const renderRemove = (file: LocalFile) =>\n    component.deletable &&\n    !locked && (\n      <Button\n        type=\"button\"\n        variant={circle ? 'secondary' : 'ghost'}\n        size=\"icon-xs\"\n        className={cn(circle && 'rounded-full shadow')}\n        aria-label={t('remove', {}, 'Remove')}\n        onClick={() => {\n          if (file.error || file.progress !== undefined) {\n            releasePreview(file.preview)\n            setUploading((state) => state.filter((item) => item.path !== file.path))\n          } else {\n            remove(file.path)\n          }\n        }}\n      >\n        <XIcon />\n      </Button>\n    )\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div\n        data-slot=\"file-upload\"\n        data-layout={component.panelLayout}\n        className={cn('flex flex-col gap-3', integrated && 'rounded-md border p-2')}\n      >\n        {(files.length > 0 || uploading.length > 0) && (\n          <ul\n            className={cn(\n              'grid gap-2',\n              component.panelLayout === 'grid' && 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4',\n              circle && 'justify-items-center',\n            )}\n          >\n            {[...files, ...uploading].map((file, index) => (\n              <li\n                key={file.path}\n                draggable={reorderable && index < files.length}\n                onDragStart={() => setDragPath(file.path)}\n                onDragOver={(event) => reorderable && event.preventDefault()}\n                onDrop={(event) => {\n                  if (!reorderable || dragPath === null) return\n                  event.preventDefault()\n                  event.stopPropagation()\n                  const from = paths.indexOf(dragPath)\n                  if (from !== -1 && index < files.length) move(from, index)\n                  setDragPath(null)\n                }}\n                onDragEnd={() => setDragPath(null)}\n                className={cn(\n                  dragPath === file.path && 'opacity-50',\n                  'bg-muted/30 relative flex min-w-0 items-center gap-3 overflow-hidden rounded-md border p-2 text-sm',\n                  circle && 'size-28 justify-center rounded-full border-0 p-0',\n                  file.error && 'border-destructive',\n                )}\n              >\n                {!circle && removeAtStart && renderRemove(file)}\n                {!circle && progressAtStart && file.progress !== undefined && !file.error && (\n                  <Spinner />\n                )}\n                {isImage(file) && (file.url || file.preview) && !brokenPreviews.has(file.path) ? (\n                  <img\n                    src={file.url ?? file.preview}\n                    alt=\"\"\n                    onError={() => setBrokenPreviews((current) => new Set(current).add(file.path))}\n                    className={cn(\n                      'size-12 shrink-0 rounded object-cover',\n                      circle && 'size-28 rounded-full',\n                    )}\n                    style={\n                      !circle && component.imagePreviewHeight\n                        ? {\n                            height: cssLength(component.imagePreviewHeight),\n                            width: 'auto',\n                            maxWidth: '50%',\n                          }\n                        : undefined\n                    }\n                  />\n                ) : (\n                  !circle && <FileIcon className=\"text-muted-foreground size-6 shrink-0\" />\n                )}\n                {!circle && (\n                  <div className=\"min-w-0 flex-1\">\n                    <p className=\"truncate font-medium\">{file.name}</p>\n                    <p\n                      className={cn(\n                        'text-muted-foreground text-xs',\n                        file.missing && 'text-destructive',\n                      )}\n                    >\n                      {file.error ??\n                        (file.missing\n                          ? t('form.file_missing', {}, 'This file no longer exists.')\n                          : file.progress !== undefined && !file.error\n                            ? (component.uploadingMessage ?? t('form.uploading', {}, 'Uploading…'))\n                            : file.size\n                              ? formatBytes(file.size)\n                              : file.temporary\n                                ? t('form.uploading', {}, 'Pending')\n                                : '')}\n                    </p>\n                  </div>\n                )}\n                <div\n                  className={cn('flex items-center gap-1', circle && 'absolute -end-1 -bottom-1')}\n                >\n                  {(circle || !progressAtStart) && file.progress !== undefined && !file.error && (\n                    <Spinner />\n                  )}\n                  {reorderable && index < files.length && (\n                    <>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label={t('form.move_up', {}, 'Move up')}\n                        disabled={index === 0}\n                        onClick={() => move(index, index - 1)}\n                      >\n                        <ChevronUpIcon />\n                      </Button>\n                      <Button\n                        type=\"button\"\n                        variant=\"ghost\"\n                        size=\"icon-xs\"\n                        aria-label={t('form.move_down', {}, 'Move down')}\n                        disabled={index === files.length - 1}\n                        onClick={() => move(index, index + 1)}\n                      >\n                        <ChevronDownIcon />\n                      </Button>\n                    </>\n                  )}\n                  {canEditExisting(file, index) && (\n                    <Button\n                      type=\"button\"\n                      variant={circle ? 'secondary' : 'ghost'}\n                      size=\"icon-xs\"\n                      className={cn(circle && 'rounded-full shadow')}\n                      aria-label={t('image_editor.title', {}, 'Edit image')}\n                      title={t('image_editor.title', {}, 'Edit image')}\n                      data-action=\"edit-image\"\n                      onClick={() => void editExisting(file)}\n                    >\n                      <PencilIcon />\n                    </Button>\n                  )}\n                  {component.openable && uploadedFileLinks(file).open && (\n                    <Button asChild type=\"button\" variant=\"ghost\" size=\"icon-xs\">\n                      <a\n                        href={uploadedFileLinks(file).open}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label={`${t('open', {}, 'Open')} ${t('opens_in_new_tab', {}, '(opens in a new tab)')}`}\n                      >\n                        <ExternalLinkIcon />\n                      </a>\n                    </Button>\n                  )}\n                  {component.downloadable && uploadedFileLinks(file).download && (\n                    <Button asChild type=\"button\" variant=\"ghost\" size=\"icon-xs\">\n                      <a\n                        href={uploadedFileLinks(file).download}\n                        download\n                        aria-label={t('download', {}, 'Download')}\n                      >\n                        <DownloadIcon />\n                      </a>\n                    </Button>\n                  )}\n                  {(circle || !removeAtStart) && renderRemove(file)}\n                </div>\n              </li>\n            ))}\n          </ul>\n        )}\n        {canAddMore && !locked && (\n          <div\n            role=\"button\"\n            tabIndex={0}\n            onClick={() => inputRef.current?.click()}\n            aria-describedby={aria['aria-describedby']}\n            onKeyDown={(event) => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                event.preventDefault()\n                inputRef.current?.click()\n              }\n            }}\n            onDragOver={(event) => {\n              event.preventDefault()\n              setDragging(true)\n            }}\n            onDragLeave={() => setDragging(false)}\n            onDrop={onDrop}\n            onPaste={onPaste}\n            style={\n              !circle && component.panelAspectRatio\n                ? { aspectRatio: cssAspectRatio(component.panelAspectRatio) }\n                : undefined\n            }\n            data-align={uploadAlign}\n            className={cn(\n              'text-muted-foreground hover:border-ring flex cursor-pointer flex-col justify-center gap-1 rounded-md border border-dashed px-4 py-6 text-sm transition-colors',\n              uploadAlign === 'start'\n                ? 'items-start text-start'\n                : uploadAlign === 'end'\n                  ? 'items-end text-end'\n                  : 'items-center text-center',\n              integrated && 'border-transparent',\n              dragging && 'border-ring bg-accent',\n              circle && 'size-28 items-center rounded-full py-0',\n            )}\n          >\n            <UploadCloudIcon className=\"size-5\" />\n            {!circle && (\n              <span>\n                {component.placeholder ??\n                  t('form.drop_files', {}, 'Drop files here or click to browse')}\n              </span>\n            )}\n            {!circle &&\n              (component.acceptedFileTypes || component.maxSize || component.minFiles) && (\n                <span className=\"text-muted-foreground text-xs\">\n                  {[\n                    component.acceptedFileTypes?.join(', '),\n                    component.maxSize ? `≤ ${formatBytes(component.maxSize * 1024, 0)}` : null,\n                    component.minFiles\n                      ? choice(\n                          'form.min_files',\n                          component.minFiles,\n                          {},\n                          'At least :count file|At least :count files',\n                        )\n                      : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' · ')}\n                </span>\n              )}\n          </div>\n        )}\n        <input\n          ref={inputRef}\n          id={id}\n          type=\"file\"\n          className=\"sr-only\"\n          tabIndex={-1}\n          {...aria}\n          multiple={component.multiple}\n          accept={fileUploadAccept(component)}\n          disabled={locked}\n          onChange={(event) => {\n            // Copy the list: clearing the input empties it while the editor is open.\n            const picked = event.target.files ? Array.from(event.target.files) : []\n            event.target.value = ''\n            void upload(picked)\n          }}\n        />\n        {component.imageEditor && (\n          <ImageEditorDialog request={editing} options={component.imageEditor} />\n        )}\n      </div>\n    </FieldWrapper>\n  )\n}\n\n/** `imagePreviewHeight()`: numbers are pixels, strings are CSS lengths (`'250px'`, `'10rem'`). */\nfunction cssLength(value: number | string): string {\n  return typeof value === 'number' || /^\\d+(\\.\\d+)?$/.test(value) ? `${value}px` : value\n}\n"],"mappings":"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"}

package/dist/components/fields/hidden.d.ts

@@ -0,0 +1,7 @@
+import { HiddenSchema } from "@alfakit/core";
+//#region src/components/fields/hidden.d.ts
+export declare function HiddenField({ component }: {
+  component: HiddenSchema;
+}): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=hidden.d.ts.map

package/dist/components/fields/hidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.d.ts","names":[],"sources":["../../../src/components/fields/hidden.tsx"],"mappings":";;wBAGgB,cAAc;EAAe,WAAW;oBAAc,IAAA"}

package/dist/components/fields/hidden.js

@@ -0,0 +1,17 @@
+import { useField } from "../form/form-context.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/fields/hidden.tsx
+function HiddenField({ component }) {
+	const { value, id } = useField(component);
+	return /* @__PURE__ */ jsx("input", {
+		type: "hidden",
+		id,
+		name: component.name,
+		value: value ?? "",
+		readOnly: true
+	});
+}
+//#endregion
+export { HiddenField };
+
+//# sourceMappingURL=hidden.js.map

package/dist/components/fields/hidden.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hidden.js","names":[],"sources":["../../../src/components/fields/hidden.tsx"],"sourcesContent":["import type { HiddenSchema } from '@alfakit/core'\nimport { useField } from '../form/form-context'\n\nexport function HiddenField({ component }: { component: HiddenSchema }) {\n  const { value, id } = useField<string | number | null>(component)\n\n  return <input type=\"hidden\" id={id} name={component.name} value={value ?? ''} readOnly />\n}\n"],"mappings":";;;AAGA,SAAgB,YAAY,EAAE,aAA0C;CACtE,MAAM,EAAE,OAAO,OAAO,SAAiC,SAAS;CAEhE,OAAO,oBAAC,SAAD;EAAO,MAAK;EAAa;EAAI,MAAM,UAAU;EAAM,OAAO,SAAS;EAAI,UAAA;CAAU,CAAA;AAC1F"}

package/dist/components/fields/icon-picker-lazy.d.ts

@@ -0,0 +1,9 @@
+import { LazyComponent } from "../../lib/lazy.js";
+import { IconPickerSchema } from "@alfakit/core";
+//#region src/components/fields/icon-picker-lazy.d.ts
+/** The icon picker; its code loads the first time one is shown in the browser. */
+export declare const IconPickerField: LazyComponent<{
+  component: IconPickerSchema;
+}>;
+//#endregion
+//# sourceMappingURL=icon-picker-lazy.d.ts.map

package/dist/components/fields/icon-picker-lazy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker-lazy.d.ts","names":["_$______lib_lazy0.LazyComponent"],"sources":["../../../src/components/fields/icon-picker-lazy.tsx"],"mappings":";;;;qBAwCa,iBAA6CA;EAAA,WAAA"}

package/dist/components/fields/icon-picker-lazy.js

@@ -0,0 +1,45 @@
+import { lazyComponent } from "../../lib/lazy.js";
+import { useField } from "../form/form-context.js";
+import { FieldWrapper } from "../schema/field-wrapper.js";
+import { IconPickerValue } from "./icon-picker-value.js";
+import { fieldIds, iconPickerPreview } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon } from "lucide-react";
+//#region src/components/fields/icon-picker-lazy.tsx
+/** What the server renders and hydration shows: the selected icon, not yet interactive. */
+function IconPickerPlaceholder({ component }) {
+	const { value, id, error, aria } = useField(component);
+	const current = typeof value === "string" && value !== "" ? value : null;
+	return /* @__PURE__ */ jsx(FieldWrapper, {
+		field: component,
+		htmlFor: id,
+		error,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "icon-picker",
+			className: "flex items-center gap-2",
+			children: /* @__PURE__ */ jsxs("button", {
+				id,
+				type: "button",
+				disabled: true,
+				"aria-busy": "true",
+				"data-slot": "icon-picker-trigger",
+				"data-input": "",
+				...aria,
+				"aria-labelledby": `${fieldIds(id).label} ${id}-value`,
+				className: "border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs",
+				children: [/* @__PURE__ */ jsx(IconPickerValue, {
+					id: `${id}-value`,
+					component,
+					value: current,
+					preview: iconPickerPreview(component.selected, current)
+				}), /* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "size-4 shrink-0 opacity-50" })]
+			})
+		})
+	});
+}
+/** The icon picker; its code loads the first time one is shown in the browser. */
+const IconPickerField = lazyComponent(() => import("./icon-picker.js").then((module) => module.IconPickerField), (props) => /* @__PURE__ */ jsx(IconPickerPlaceholder, { ...props }));
+//#endregion
+export { IconPickerField };
+
+//# sourceMappingURL=icon-picker-lazy.js.map

package/dist/components/fields/icon-picker-lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker-lazy.js","names":[],"sources":["../../../src/components/fields/icon-picker-lazy.tsx"],"sourcesContent":["import { fieldIds, iconPickerPreview, type IconPickerSchema } from '@alfakit/core'\nimport { ChevronsUpDownIcon } from 'lucide-react'\nimport { lazyComponent } from '../../lib/lazy'\nimport { useField } from '../form/form-context'\nimport { FieldWrapper } from '../schema/field-wrapper'\nimport { IconPickerValue } from './icon-picker-value'\n\n/** What the server renders and hydration shows: the selected icon, not yet interactive. */\nfunction IconPickerPlaceholder({ component }: { component: IconPickerSchema }) {\n  const { value, id, error, aria } = useField<string | null>(component)\n  const current = typeof value === 'string' && value !== '' ? value : null\n\n  return (\n    <FieldWrapper field={component} htmlFor={id} error={error}>\n      <div data-slot=\"icon-picker\" className=\"flex items-center gap-2\">\n        <button\n          id={id}\n          type=\"button\"\n          disabled\n          aria-busy=\"true\"\n          data-slot=\"icon-picker-trigger\"\n          data-input=\"\"\n          {...aria}\n          aria-labelledby={`${fieldIds(id).label} ${id}-value`}\n          className=\"border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center justify-between gap-2 rounded-md border bg-transparent px-3 text-start text-sm shadow-xs\"\n        >\n          <IconPickerValue\n            id={`${id}-value`}\n            component={component}\n            value={current}\n            preview={iconPickerPreview(component.selected, current)}\n          />\n          <ChevronsUpDownIcon className=\"size-4 shrink-0 opacity-50\" />\n        </button>\n      </div>\n    </FieldWrapper>\n  )\n}\n\n/** The icon picker; its code loads the first time one is shown in the browser. */\nexport const IconPickerField = lazyComponent<{ component: IconPickerSchema }>(\n  () => import('./icon-picker').then((module) => module.IconPickerField),\n  (props) => <IconPickerPlaceholder {...props} />,\n)\n"],"mappings":";;;;;;;;;AAQA,SAAS,sBAAsB,EAAE,aAA8C;CAC7E,MAAM,EAAE,OAAO,IAAI,OAAO,SAAS,SAAwB,SAAS;CACpE,MAAM,UAAU,OAAO,UAAU,YAAY,UAAU,KAAK,QAAQ;CAEpE,OACE,oBAAC,cAAD;EAAc,OAAO;EAAW,SAAS;EAAW;EAClD,UAAA,oBAAC,OAAD;GAAK,aAAU;GAAc,WAAU;GACrC,UAAA,qBAAC,UAAD;IACM;IACJ,MAAK;IACL,UAAA;IACA,aAAU;IACV,aAAU;IACV,cAAW;IACX,GAAI;IACJ,mBAAiB,GAAG,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,GAAG;IAC7C,WAAU;IATZ,UAAA,CAWE,oBAAC,iBAAD;KACE,IAAI,GAAG,GAAG;KACC;KACX,OAAO;KACP,SAAS,kBAAkB,UAAU,UAAU,OAAO;IACvD,CAAA,GACD,oBAAC,oBAAD,EAAoB,WAAU,6BAA8B,CAAA,CACtD;;EACL,CAAA;CACO,CAAA;AAElB;;AAGA,MAAa,kBAAkB,oBACvB,OAAO,mBAAgB,CAAC,MAAM,WAAW,OAAO,eAAe,IACpE,UAAU,oBAAC,uBAAD,EAAuB,GAAI,MAAQ,CAAA,CAChD"}

package/dist/components/fields/icon-picker-value.js

@@ -0,0 +1,48 @@
+import { useT } from "../../context.js";
+import { cn } from "../../lib/utils.js";
+import { Icon } from "../../lib/icons.js";
+import { isCustomSvgIcon } from "@alfakit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/fields/icon-picker-value.tsx
+/** Icon sizes per `previewSize()`: the drawn icon and its grid cell. */
+const ICON_PICKER_SIZES = {
+	sm: {
+		icon: "size-4",
+		cell: "h-8"
+	},
+	md: {
+		icon: "size-5",
+		cell: "h-10"
+	},
+	lg: {
+		icon: "size-6",
+		cell: "h-12"
+	}
+};
+/** The selected icon and its name (or the placeholder), inside the picker's trigger. */
+function IconPickerValue({ id, component, value, preview }) {
+	const t = useT();
+	const size = ICON_PICKER_SIZES[component.previewSize] ?? ICON_PICKER_SIZES.md;
+	const custom = isCustomSvgIcon(value);
+	if (!value) return /* @__PURE__ */ jsx("span", {
+		id,
+		className: "text-muted-foreground truncate",
+		children: component.placeholder ?? t("form.icon_picker.placeholder", {}, "Choose an icon")
+	});
+	return /* @__PURE__ */ jsxs("span", {
+		id,
+		"data-slot": "icon-picker-value",
+		className: "flex min-w-0 items-center gap-2",
+		children: [/* @__PURE__ */ jsx(Icon, {
+			name: preview ?? "square-code",
+			className: cn(size.icon)
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: custom ? t("form.icon_picker.custom_svg", {}, "Custom SVG") : value
+		})]
+	});
+}
+//#endregion
+export { ICON_PICKER_SIZES, IconPickerValue };
+
+//# sourceMappingURL=icon-picker-value.js.map

package/dist/components/fields/icon-picker-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-picker-value.js","names":[],"sources":["../../../src/components/fields/icon-picker-value.tsx"],"sourcesContent":["import { isCustomSvgIcon, type IconPickerSchema } from '@alfakit/core'\nimport { useT } from '../../context'\nimport { Icon } from '../../lib/icons'\nimport { cn } from '../../lib/utils'\n\n/** Icon sizes per `previewSize()`: the drawn icon and its grid cell. */\nexport const ICON_PICKER_SIZES = {\n  sm: { icon: 'size-4', cell: 'h-8' },\n  md: { icon: 'size-5', cell: 'h-10' },\n  lg: { icon: 'size-6', cell: 'h-12' },\n} as const\n\n/** The selected icon and its name (or the placeholder), inside the picker's trigger. */\nexport function IconPickerValue({\n  id,\n  component,\n  value,\n  preview,\n}: {\n  /** Named by the trigger's `aria-labelledby`, after the field label. */\n  id: string\n  component: IconPickerSchema\n  value: string | null\n  preview: string | null\n}) {\n  const t = useT()\n  const size = ICON_PICKER_SIZES[component.previewSize] ?? ICON_PICKER_SIZES.md\n  const custom = isCustomSvgIcon(value)\n\n  if (!value) {\n    return (\n      <span id={id} className=\"text-muted-foreground truncate\">\n        {component.placeholder ?? t('form.icon_picker.placeholder', {}, 'Choose an icon')}\n      </span>\n    )\n  }\n\n  return (\n    <span id={id} data-slot=\"icon-picker-value\" className=\"flex min-w-0 items-center gap-2\">\n      <Icon name={preview ?? 'square-code'} className={cn(size.icon)} />\n      <span className=\"truncate\">\n        {custom ? t('form.icon_picker.custom_svg', {}, 'Custom SVG') : value}\n      </span>\n    </span>\n  )\n}\n"],"mappings":";;;;;;;AAMA,MAAa,oBAAoB;CAC/B,IAAI;EAAE,MAAM;EAAU,MAAM;CAAM;CAClC,IAAI;EAAE,MAAM;EAAU,MAAM;CAAO;CACnC,IAAI;EAAE,MAAM;EAAU,MAAM;CAAO;AACrC;;AAGA,SAAgB,gBAAgB,EAC9B,IACA,WACA,OACA,WAOC;CACD,MAAM,IAAI,KAAK;CACf,MAAM,OAAO,kBAAkB,UAAU,gBAAgB,kBAAkB;CAC3E,MAAM,SAAS,gBAAgB,KAAK;CAEpC,IAAI,CAAC,OACH,OACE,oBAAC,QAAD;EAAU;EAAI,WAAU;EACrB,UAAA,UAAU,eAAe,EAAE,gCAAgC,CAAC,GAAG,gBAAgB;CAC5E,CAAA;CAIV,OACE,qBAAC,QAAD;EAAU;EAAI,aAAU;EAAoB,WAAU;EAAtD,UAAA,CACE,oBAAC,MAAD;GAAM,MAAM,WAAW;GAAe,WAAW,GAAG,KAAK,IAAI;EAAI,CAAA,GACjE,oBAAC,QAAD;GAAM,WAAU;GACb,UAAA,SAAS,EAAE,+BAA+B,CAAC,GAAG,YAAY,IAAI;EAC3D,CAAA,CACF;;AAEV"}