@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/forms/file-upload/index.js

@@ -0,0 +1,346 @@
+"use client";
+import { LinearProgress } from "../../data-display/progress/linear-progress.js";
+import { formatFileSize, matchesMimeType, validateFiles } from "./file-upload.utils.js";
+import "./file-upload.css";
+import { cn } from "@puzzle-ui/core";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Icon } from "@puzzle-ui/icons";
+// src/components/forms/file-upload/index.tsx
+const FileUpload = ({ accept = [], multiple = false, maxFiles, maxFileSize, maxTotalSize, name, required = false, disabled = false, title = "Drop files here", description = "Drag and drop your files here or browse to select them.", browseLabel = "Browse files", onChange, onReject, onUpload, className, style, id, ref, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...rootProps }) => {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const descriptionId = `${generatedId}-description`;
+	const inputRef = useRef(null);
+	const itemIdRef = useRef(0);
+	const itemsRef = useRef([]);
+	const controllersRef = useRef(/* @__PURE__ */ new Map());
+	const dragDepthRef = useRef(0);
+	const [items, setItems] = useState([]);
+	const [rejections, setRejections] = useState([]);
+	const [dragActive, setDragActive] = useState(false);
+	const [dragRejected, setDragRejected] = useState(false);
+	const acceptAttribute = accept.join(",");
+	const commitItems = useCallback((nextItems) => {
+		itemsRef.current = nextItems;
+		setItems(nextItems);
+		onChange?.(nextItems.map((item) => item.file));
+	}, [onChange]);
+	const updateItem = useCallback((id, update) => {
+		const nextItems = itemsRef.current.map((item) => item.id === id ? {
+			...item,
+			...update
+		} : item);
+		itemsRef.current = nextItems;
+		setItems(nextItems);
+	}, []);
+	const uploadItem = useCallback(async (id, file) => {
+		if (!onUpload) return;
+		controllersRef.current.get(id)?.abort();
+		const controller = new AbortController();
+		controllersRef.current.set(id, controller);
+		updateItem(id, {
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		});
+		try {
+			await onUpload(file, {
+				signal: controller.signal,
+				onProgress: (progress) => {
+					if (controller.signal.aborted) return;
+					updateItem(id, { progress: Number.isFinite(progress) ? Math.min(100, Math.max(0, progress)) : 0 });
+				}
+			});
+			if (controller.signal.aborted) return;
+			updateItem(id, {
+				status: "complete",
+				progress: 100,
+				error: void 0
+			});
+		} catch (error) {
+			if (controller.signal.aborted) return;
+			updateItem(id, {
+				status: "error",
+				error: error instanceof Error ? error.message : "Upload failed."
+			});
+		} finally {
+			if (controllersRef.current.get(id) === controller) controllersRef.current.delete(id);
+		}
+	}, [onUpload, updateItem]);
+	const addFiles = useCallback((incomingFiles) => {
+		if (disabled || incomingFiles.length === 0) return;
+		const existingItems = itemsRef.current;
+		const result = validateFiles(incomingFiles, multiple ? existingItems.map((item) => item.file) : [], {
+			accept,
+			maxFileSize,
+			maxTotalSize,
+			maxFiles,
+			multiple
+		});
+		setRejections(result.rejected);
+		if (result.rejected.length > 0) onReject?.(result.rejected);
+		if (result.accepted.length === 0) return;
+		if (!multiple) existingItems.forEach((item) => {
+			controllersRef.current.get(item.id)?.abort();
+			controllersRef.current.delete(item.id);
+		});
+		const acceptedItems = result.accepted.map((file) => ({
+			id: `${generatedId}-${++itemIdRef.current}`,
+			file,
+			status: onUpload ? "uploading" : "queued",
+			progress: 0
+		}));
+		const nextItems = multiple ? [...existingItems, ...acceptedItems] : acceptedItems;
+		commitItems(nextItems);
+		acceptedItems.forEach((item) => {
+			if (onUpload) uploadItem(item.id, item.file);
+		});
+	}, [
+		accept,
+		commitItems,
+		disabled,
+		generatedId,
+		maxFileSize,
+		maxFiles,
+		maxTotalSize,
+		multiple,
+		onReject,
+		onUpload,
+		uploadItem
+	]);
+	const handleInputChange = (event) => {
+		addFiles(Array.from(event.currentTarget.files ?? []));
+		event.currentTarget.value = "";
+	};
+	const handleDragEnter = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current++;
+		if (dragDepthRef.current !== 1) return;
+		setDragActive(true);
+		const types = Array.from(event.dataTransfer.items).filter((item) => item.kind === "file").map((item) => item.type).filter(Boolean);
+		const hasRejectedType = accept.length > 0 && types.some((type) => !matchesMimeType(type, accept));
+		setDragRejected(hasRejectedType);
+	};
+	const handleDragLeave = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (disabled) return;
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) {
+			setDragActive(false);
+			setDragRejected(false);
+		}
+	};
+	const handleDragOver = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		if (!disabled) event.dataTransfer.dropEffect = "copy";
+	};
+	const handleDrop = (event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		dragDepthRef.current = 0;
+		setDragActive(false);
+		setDragRejected(false);
+		if (disabled) return;
+		addFiles(Array.from(event.dataTransfer.files));
+	};
+	const handleKeyDown = (event) => {
+		if (disabled || event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		inputRef.current?.click();
+	};
+	const removeFile = (id) => {
+		controllersRef.current.get(id)?.abort();
+		controllersRef.current.delete(id);
+		const nextItems = itemsRef.current.filter((item) => item.id !== id);
+		commitItems(nextItems);
+	};
+	const retryFile = (item) => {
+		if (disabled || !onUpload) return;
+		uploadItem(item.id, item.file);
+	};
+	const openFilePicker = () => {
+		if (!disabled) inputRef.current?.click();
+	};
+	useEffect(() => {
+		return () => {
+			controllersRef.current.forEach((controller) => {
+				controller.abort();
+			});
+			controllersRef.current.clear();
+		};
+	}, []);
+	const currentTotalSize = items.reduce((total, item) => total + item.file.size, 0);
+	const isDragRejected = dragActive && dragRejected;
+	const resolvedDescription = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		ref,
+		className: cn("puzzle-file-upload", className),
+		style,
+		"data-disabled": disabled || void 0,
+		"data-invalid": ariaInvalid || void 0,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				id: inputId,
+				className: "puzzle-file-upload__input",
+				type: "file",
+				name,
+				accept: acceptAttribute || void 0,
+				multiple,
+				required,
+				disabled,
+				tabIndex: -1,
+				"aria-hidden": "true",
+				"aria-describedby": resolvedDescription,
+				"aria-invalid": ariaInvalid,
+				onChange: handleInputChange
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "puzzle-file-upload__dropzone",
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": ariaLabel ?? title,
+				"aria-describedby": resolvedDescription,
+				"aria-disabled": disabled || void 0,
+				"data-dragging": dragActive || void 0,
+				"data-rejected": isDragRejected || void 0,
+				onClick: openFilePicker,
+				onKeyDown: handleKeyDown,
+				onDragEnter: handleDragEnter,
+				onDragLeave: handleDragLeave,
+				onDragOver: handleDragOver,
+				onDrop: handleDrop,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "puzzle-file-upload__icon",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ jsx(Icon, { name: "lucide:upload-cloud" })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "puzzle-file-upload__title",
+						children: isDragRejected ? "Unsupported file type" : dragActive ? "Drop your files here" : title
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "puzzle-file-upload__description",
+						id: descriptionId,
+						children: description
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "puzzle-file-upload__browse",
+						children: browseLabel
+					}),
+					accept.length > 0 && /* @__PURE__ */ jsxs("span", {
+						className: "puzzle-file-upload__hint",
+						children: ["Accepted: ", accept.join(", ")]
+					})
+				]
+			}),
+			items.length > 0 && /* @__PURE__ */ jsxs("div", {
+				className: "puzzle-file-upload__files",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "puzzle-file-upload__files-header",
+					children: [/* @__PURE__ */ jsxs("span", { children: [
+						"Selected files (",
+						items.length,
+						")"
+					] }), maxTotalSize !== void 0 && /* @__PURE__ */ jsxs("span", { children: [
+						formatFileSize(currentTotalSize),
+						" / ",
+						formatFileSize(maxTotalSize)
+					] })]
+				}), /* @__PURE__ */ jsx("ul", {
+					className: "puzzle-file-upload__list",
+					"aria-label": "Selected files",
+					"aria-live": "polite",
+					"aria-relevant": "additions removals",
+					children: items.map((item) => /* @__PURE__ */ jsxs("li", {
+						className: "puzzle-file-upload__item",
+						"data-status": item.status,
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "puzzle-file-upload__file-icon",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx(Icon, { name: "lucide:file" })
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "puzzle-file-upload__file-content",
+								children: [
+									/* @__PURE__ */ jsxs("div", {
+										className: "puzzle-file-upload__file-header",
+										children: [/* @__PURE__ */ jsx("span", {
+											className: "puzzle-file-upload__filename",
+											title: item.file.name,
+											children: item.file.name
+										}), /* @__PURE__ */ jsx("span", {
+											className: "puzzle-file-upload__filesize",
+											children: formatFileSize(item.file.size)
+										})]
+									}),
+									item.status === "uploading" && /* @__PURE__ */ jsxs("div", {
+										className: "puzzle-file-upload__progress",
+										children: [/* @__PURE__ */ jsx(LinearProgress, {
+											value: item.progress,
+											showTrack: true,
+											"aria-label": `Uploading ${item.file.name}`
+										}), /* @__PURE__ */ jsxs("span", { children: [Math.round(item.progress), "%"] })]
+									}),
+									item.status === "queued" && /* @__PURE__ */ jsx("span", {
+										className: "puzzle-file-upload__status",
+										children: "Ready to upload"
+									}),
+									item.status === "complete" && /* @__PURE__ */ jsx("span", {
+										className: "puzzle-file-upload__status puzzle-file-upload__status--success",
+										role: "status",
+										children: "Upload complete"
+									}),
+									item.status === "error" && /* @__PURE__ */ jsx("span", {
+										className: "puzzle-file-upload__status puzzle-file-upload__status--error",
+										role: "status",
+										children: item.error ?? "Upload failed."
+									})
+								]
+							}),
+							item.status === "error" && onUpload && /* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "puzzle-file-upload__retry",
+								disabled,
+								onClick: () => retryFile(item),
+								"aria-label": `Retry upload of ${item.file.name}`,
+								children: /* @__PURE__ */ jsx(Icon, { name: "lucide:refresh-cw" })
+							}),
+							/* @__PURE__ */ jsx("button", {
+								type: "button",
+								className: "puzzle-file-upload__remove",
+								disabled,
+								"aria-label": `Remove ${item.file.name}`,
+								onClick: () => removeFile(item.id),
+								children: /* @__PURE__ */ jsx(Icon, { name: "lucide:x" })
+							})
+						]
+					}, item.id))
+				})]
+			}),
+			rejections.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "puzzle-file-upload__rejections",
+				role: "alert",
+				children: rejections.map((rejection, index) => /* @__PURE__ */ jsxs("div", {
+					className: "puzzle-file-upload__rejection",
+					children: [/* @__PURE__ */ jsx(Icon, { name: "lucide:alert-circle" }), /* @__PURE__ */ jsxs("span", { children: [
+						/* @__PURE__ */ jsx("strong", { children: rejection.file.name }),
+						" — ",
+						rejection.message
+					] })]
+				}, `${rejection.file.name}-${index}`))
+			})
+		]
+	});
+};
+export { FileUpload };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/file-upload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/file-upload/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport { LinearProgress } from \"../../data-display/progress/linear-progress\";\n\nimport {\n  formatFileSize,\n  matchesMimeType,\n  validateFiles,\n} from \"./file-upload.utils\";\n\nimport type {\n  FileUploadProps,\n  FileUploadItem,\n  FileUploadStatus,\n  FileUploadRejection,\n  FileUploadRejectionCode,\n  FileUploadUploadContext,\n  FileUploadUploadHandler,\n} from \"./file-upload.types\";\n\nimport \"./file-upload.css\";\n\nconst FileUpload = ({\n  accept = [],\n  multiple = false,\n  maxFiles,\n  maxFileSize,\n  maxTotalSize,\n  name,\n  required = false,\n  disabled = false,\n  title = \"Drop files here\",\n  description = \"Drag and drop your files here or browse to select them.\",\n  browseLabel = \"Browse files\",\n  onChange,\n  onReject,\n  onUpload,\n  className,\n  style,\n  id,\n  ref,\n  \"aria-label\": ariaLabel,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-invalid\": ariaInvalid,\n  ...rootProps\n}: FileUploadProps) => {\n  const generatedId = useId();\n\n  const inputId = id ?? generatedId;\n  const descriptionId = `${generatedId}-description`;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const itemIdRef = useRef(0);\n\n  const itemsRef = useRef<FileUploadItem[]>([]);\n  const controllersRef = useRef(new Map<string, AbortController>());\n\n  const dragDepthRef = useRef(0);\n\n  const [items, setItems] = useState<FileUploadItem[]>([]);\n  const [rejections, setRejections] = useState<FileUploadRejection[]>([]);\n\n  const [dragActive, setDragActive] = useState(false);\n  const [dragRejected, setDragRejected] = useState(false);\n\n  const acceptAttribute = accept.join(\",\");\n\n  const commitItems = useCallback(\n    (nextItems: FileUploadItem[]) => {\n      itemsRef.current = nextItems;\n      setItems(nextItems);\n      onChange?.(nextItems.map((item) => item.file));\n    },\n    [onChange],\n  );\n\n  const updateItem = useCallback(\n    (id: string, update: Partial<FileUploadItem>) => {\n      const nextItems = itemsRef.current.map((item) =>\n        item.id === id ? { ...item, ...update } : item,\n      );\n\n      itemsRef.current = nextItems;\n      setItems(nextItems);\n    },\n    [],\n  );\n\n  const uploadItem = useCallback(\n    async (id: string, file: File) => {\n      if (!onUpload) return;\n\n      controllersRef.current.get(id)?.abort();\n\n      const controller = new AbortController();\n\n      controllersRef.current.set(id, controller);\n\n      updateItem(id, {\n        status: \"uploading\",\n        progress: 0,\n        error: undefined,\n      });\n\n      try {\n        await onUpload(file, {\n          signal: controller.signal,\n          onProgress: (progress) => {\n            if (controller.signal.aborted) return;\n\n            const normalizedProgress = Number.isFinite(progress)\n              ? Math.min(100, Math.max(0, progress))\n              : 0;\n\n            updateItem(id, {\n              progress: normalizedProgress,\n            });\n          },\n        });\n\n        if (controller.signal.aborted) return;\n\n        updateItem(id, {\n          status: \"complete\",\n          progress: 100,\n          error: undefined,\n        });\n      } catch (error) {\n        if (controller.signal.aborted) return;\n\n        updateItem(id, {\n          status: \"error\",\n          error: error instanceof Error ? error.message : \"Upload failed.\",\n        });\n      } finally {\n        if (controllersRef.current.get(id) === controller) {\n          controllersRef.current.delete(id);\n        }\n      }\n    },\n    [onUpload, updateItem],\n  );\n\n  const addFiles = useCallback(\n    (incomingFiles: File[]) => {\n      if (disabled || incomingFiles.length === 0) return;\n\n      const existingItems = itemsRef.current;\n\n      const result = validateFiles(\n        incomingFiles,\n        multiple ? existingItems.map((item) => item.file) : [],\n        {\n          accept,\n          maxFileSize,\n          maxTotalSize,\n          maxFiles,\n          multiple,\n        },\n      );\n\n      setRejections(result.rejected);\n\n      if (result.rejected.length > 0) {\n        onReject?.(result.rejected);\n      }\n\n      if (result.accepted.length === 0) return;\n\n      // Single mode replaces the previous selection.\n      if (!multiple) {\n        existingItems.forEach((item) => {\n          controllersRef.current.get(item.id)?.abort();\n          controllersRef.current.delete(item.id);\n        });\n      }\n\n      const acceptedItems: FileUploadItem[] = result.accepted.map((file) => ({\n        id: `${generatedId}-${++itemIdRef.current}`,\n        file,\n        status: onUpload ? \"uploading\" : \"queued\",\n        progress: 0,\n      }));\n\n      const nextItems = multiple\n        ? [...existingItems, ...acceptedItems]\n        : acceptedItems;\n\n      commitItems(nextItems);\n\n      acceptedItems.forEach((item) => {\n        if (onUpload) {\n          void uploadItem(item.id, item.file);\n        }\n      });\n    },\n    [\n      accept,\n      commitItems,\n      disabled,\n      generatedId,\n      maxFileSize,\n      maxFiles,\n      maxTotalSize,\n      multiple,\n      onReject,\n      onUpload,\n      uploadItem,\n    ],\n  );\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    addFiles(Array.from(event.currentTarget.files ?? []));\n\n    // Allow selecting the same file again.\n    event.currentTarget.value = \"\";\n  };\n\n  const handleDragEnter = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (disabled) return;\n\n    dragDepthRef.current++;\n\n    if (dragDepthRef.current !== 1) return;\n\n    setDragActive(true);\n\n    const types = Array.from(event.dataTransfer.items)\n      .filter((item) => item.kind === \"file\")\n      .map((item) => item.type)\n      .filter(Boolean);\n\n    const hasRejectedType =\n      accept.length > 0 && types.some((type) => !matchesMimeType(type, accept));\n\n    setDragRejected(hasRejectedType);\n  };\n\n  const handleDragLeave = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (disabled) return;\n\n    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);\n\n    if (dragDepthRef.current === 0) {\n      setDragActive(false);\n      setDragRejected(false);\n    }\n  };\n\n  const handleDragOver = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (!disabled) {\n      event.dataTransfer.dropEffect = \"copy\";\n    }\n  };\n\n  const handleDrop = (event: DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    dragDepthRef.current = 0;\n\n    setDragActive(false);\n    setDragRejected(false);\n\n    if (disabled) return;\n\n    addFiles(Array.from(event.dataTransfer.files));\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (disabled || (event.key !== \"Enter\" && event.key !== \" \")) {\n      return;\n    }\n\n    event.preventDefault();\n    inputRef.current?.click();\n  };\n\n  const removeFile = (id: string) => {\n    controllersRef.current.get(id)?.abort();\n    controllersRef.current.delete(id);\n\n    const nextItems = itemsRef.current.filter((item) => item.id !== id);\n\n    commitItems(nextItems);\n  };\n\n  const retryFile = (item: FileUploadItem) => {\n    if (disabled || !onUpload) return;\n\n    void uploadItem(item.id, item.file);\n  };\n\n  const openFilePicker = () => {\n    if (!disabled) {\n      inputRef.current?.click();\n    }\n  };\n\n  useEffect(() => {\n    return () => {\n      controllersRef.current.forEach((controller) => {\n        controller.abort();\n      });\n\n      controllersRef.current.clear();\n    };\n  }, []);\n\n  const currentTotalSize = items.reduce(\n    (total, item) => total + item.file.size,\n    0,\n  );\n\n  const isDragRejected = dragActive && dragRejected;\n\n  const resolvedDescription = [ariaDescribedBy, descriptionId]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      {...rootProps}\n      ref={ref}\n      className={cn(\"puzzle-file-upload\", className)}\n      style={style}\n      data-disabled={disabled || undefined}\n      data-invalid={ariaInvalid || undefined}\n    >\n      <input\n        ref={inputRef}\n        id={inputId}\n        className=\"puzzle-file-upload__input\"\n        type=\"file\"\n        name={name}\n        accept={acceptAttribute || undefined}\n        multiple={multiple}\n        required={required}\n        disabled={disabled}\n        tabIndex={-1}\n        aria-hidden=\"true\"\n        aria-describedby={resolvedDescription}\n        aria-invalid={ariaInvalid}\n        onChange={handleInputChange}\n      />\n\n      <div\n        className=\"puzzle-file-upload__dropzone\"\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={ariaLabel ?? title}\n        aria-describedby={resolvedDescription}\n        aria-disabled={disabled || undefined}\n        data-dragging={dragActive || undefined}\n        data-rejected={isDragRejected || undefined}\n        onClick={openFilePicker}\n        onKeyDown={handleKeyDown}\n        onDragEnter={handleDragEnter}\n        onDragLeave={handleDragLeave}\n        onDragOver={handleDragOver}\n        onDrop={handleDrop}\n      >\n        <span className=\"puzzle-file-upload__icon\" aria-hidden=\"true\">\n          <Icon name=\"lucide:upload-cloud\" />\n        </span>\n\n        <span className=\"puzzle-file-upload__title\">\n          {isDragRejected\n            ? \"Unsupported file type\"\n            : dragActive\n              ? \"Drop your files here\"\n              : title}\n        </span>\n\n        <span className=\"puzzle-file-upload__description\" id={descriptionId}>\n          {description}\n        </span>\n\n        <span className=\"puzzle-file-upload__browse\">{browseLabel}</span>\n\n        {accept.length > 0 && (\n          <span className=\"puzzle-file-upload__hint\">\n            Accepted: {accept.join(\", \")}\n          </span>\n        )}\n      </div>\n\n      {items.length > 0 && (\n        <div className=\"puzzle-file-upload__files\">\n          <div className=\"puzzle-file-upload__files-header\">\n            <span>Selected files ({items.length})</span>\n\n            {maxTotalSize !== undefined && (\n              <span>\n                {formatFileSize(currentTotalSize)}\n                {\" / \"}\n                {formatFileSize(maxTotalSize)}\n              </span>\n            )}\n          </div>\n\n          <ul\n            className=\"puzzle-file-upload__list\"\n            aria-label=\"Selected files\"\n            aria-live=\"polite\"\n            aria-relevant=\"additions removals\"\n          >\n            {items.map((item) => (\n              <li\n                key={item.id}\n                className=\"puzzle-file-upload__item\"\n                data-status={item.status}\n              >\n                <span\n                  className=\"puzzle-file-upload__file-icon\"\n                  aria-hidden=\"true\"\n                >\n                  <Icon name=\"lucide:file\" />\n                </span>\n\n                <div className=\"puzzle-file-upload__file-content\">\n                  <div className=\"puzzle-file-upload__file-header\">\n                    <span\n                      className=\"puzzle-file-upload__filename\"\n                      title={item.file.name}\n                    >\n                      {item.file.name}\n                    </span>\n\n                    <span className=\"puzzle-file-upload__filesize\">\n                      {formatFileSize(item.file.size)}\n                    </span>\n                  </div>\n\n                  {item.status === \"uploading\" && (\n                    <div className=\"puzzle-file-upload__progress\">\n                      <LinearProgress\n                        value={item.progress}\n                        showTrack\n                        aria-label={`Uploading ${item.file.name}`}\n                      />\n\n                      <span>{Math.round(item.progress)}%</span>\n                    </div>\n                  )}\n\n                  {item.status === \"queued\" && (\n                    <span className=\"puzzle-file-upload__status\">\n                      Ready to upload\n                    </span>\n                  )}\n\n                  {item.status === \"complete\" && (\n                    <span\n                      className=\"puzzle-file-upload__status puzzle-file-upload__status--success\"\n                      role=\"status\"\n                    >\n                      Upload complete\n                    </span>\n                  )}\n\n                  {item.status === \"error\" && (\n                    <span\n                      className=\"puzzle-file-upload__status puzzle-file-upload__status--error\"\n                      role=\"status\"\n                    >\n                      {item.error ?? \"Upload failed.\"}\n                    </span>\n                  )}\n                </div>\n\n                {item.status === \"error\" && onUpload && (\n                  <button\n                    type=\"button\"\n                    className=\"puzzle-file-upload__retry\"\n                    disabled={disabled}\n                    onClick={() => retryFile(item)}\n                    aria-label={`Retry upload of ${item.file.name}`}\n                  >\n                    <Icon name=\"lucide:refresh-cw\" />\n                  </button>\n                )}\n\n                <button\n                  type=\"button\"\n                  className=\"puzzle-file-upload__remove\"\n                  disabled={disabled}\n                  aria-label={`Remove ${item.file.name}`}\n                  onClick={() => removeFile(item.id)}\n                >\n                  <Icon name=\"lucide:x\" />\n                </button>\n              </li>\n            ))}\n          </ul>\n        </div>\n      )}\n\n      {rejections.length > 0 && (\n        <div className=\"puzzle-file-upload__rejections\" role=\"alert\">\n          {rejections.map((rejection, index) => (\n            <div\n              key={`${rejection.file.name}-${index}`}\n              className=\"puzzle-file-upload__rejection\"\n            >\n              <Icon name=\"lucide:alert-circle\" />\n\n              <span>\n                <strong>{rejection.file.name}</strong>\n                {\" — \"}\n                {rejection.message}\n              </span>\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport {\n  FileUpload,\n  type FileUploadProps,\n  type FileUploadItem,\n  type FileUploadStatus,\n  type FileUploadRejection,\n  type FileUploadRejectionCode,\n  type FileUploadUploadContext,\n  type FileUploadUploadHandler,\n};\n"],"mappings":"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"}

package/dist/components/forms/form-field/form-field-state.cjs

@@ -0,0 +1,25 @@
+// src/components/forms/form-field/form-field-state.ts
+const resolveFormFieldState = ({ generatedId, controlId, childProps, description, error, invalid }) => {
+	const resolvedControlId = controlId ?? (typeof childProps.id === "string" ? childProps.id : generatedId);
+	const isInvalid = invalid ?? (error !== void 0 && error !== null && error !== false);
+	const errorContent = error === true ? "Invalid value" : error;
+	const hasError = isInvalid && errorContent !== void 0 && errorContent !== null;
+	const descriptionId = description != null ? `${resolvedControlId}-description` : void 0;
+	const errorId = hasError ? `${resolvedControlId}-error` : void 0;
+	return {
+		resolvedControlId,
+		isInvalid,
+		errorContent,
+		hasError,
+		descriptionId,
+		errorId,
+		describedBy: [
+			typeof childProps["aria-describedby"] === "string" ? childProps["aria-describedby"] : void 0,
+			descriptionId,
+			errorId
+		].filter(Boolean).join(" ") || void 0
+	};
+};
+exports.resolveFormFieldState = resolveFormFieldState;
+
+//# sourceMappingURL=form-field-state.cjs.map

package/dist/components/forms/form-field/form-field-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-state.cjs","names":[],"sources":["../../../../src/components/forms/form-field/form-field-state.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype FormFieldStateInput = {\n  generatedId: string;\n  controlId?: string;\n  childProps: Record<string, unknown>;\n  description?: ReactNode;\n  error?: ReactNode | boolean;\n  invalid?: boolean;\n};\n\nconst resolveFormFieldState = ({\n  generatedId,\n  controlId,\n  childProps,\n  description,\n  error,\n  invalid,\n}: FormFieldStateInput) => {\n  const resolvedControlId =\n    controlId ??\n    (typeof childProps.id === \"string\" ? childProps.id : generatedId);\n\n  const isInvalid =\n    invalid ?? (error !== undefined && error !== null && error !== false);\n\n  const errorContent = error === true ? \"Invalid value\" : error;\n  const hasError =\n    isInvalid && errorContent !== undefined && errorContent !== null;\n\n  const descriptionId =\n    description != null ? `${resolvedControlId}-description` : undefined;\n\n  const errorId = hasError ? `${resolvedControlId}-error` : undefined;\n\n  const existingDescribedBy =\n    typeof childProps[\"aria-describedby\"] === \"string\"\n      ? childProps[\"aria-describedby\"]\n      : undefined;\n\n  const describedBy =\n    [existingDescribedBy, descriptionId, errorId].filter(Boolean).join(\" \") ||\n    undefined;\n\n  return {\n    resolvedControlId,\n    isInvalid,\n    errorContent,\n    hasError,\n    descriptionId,\n    errorId,\n    describedBy,\n  };\n};\n\nexport { resolveFormFieldState };\n"],"mappings":";AAWA,MAAM,yBAAyB,EAC7B,aACA,WACA,YACA,aACA,OACA,cACyB;CACzB,MAAM,oBACJ,cACC,OAAO,WAAW,OAAO,WAAW,WAAW,KAAK;CAEvD,MAAM,YACJ,YAAY,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAEjE,MAAM,eAAe,UAAU,OAAO,kBAAkB;CACxD,MAAM,WACJ,aAAa,iBAAiB,KAAA,KAAa,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,OAAO,GAAG,kBAAkB,gBAAgB,KAAA;CAE7D,MAAM,UAAU,WAAW,GAAG,kBAAkB,UAAU,KAAA;CAW1D,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,aAVA;GALA,OAAO,WAAW,wBAAwB,WACtC,WAAW,sBACX,KAAA;GAGkB;GAAe;EAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACtE,KAAA;CAUF;AACF"}

package/dist/components/forms/form-field/form-field-state.js

@@ -0,0 +1,25 @@
+// src/components/forms/form-field/form-field-state.ts
+const resolveFormFieldState = ({ generatedId, controlId, childProps, description, error, invalid }) => {
+	const resolvedControlId = controlId ?? (typeof childProps.id === "string" ? childProps.id : generatedId);
+	const isInvalid = invalid ?? (error !== void 0 && error !== null && error !== false);
+	const errorContent = error === true ? "Invalid value" : error;
+	const hasError = isInvalid && errorContent !== void 0 && errorContent !== null;
+	const descriptionId = description != null ? `${resolvedControlId}-description` : void 0;
+	const errorId = hasError ? `${resolvedControlId}-error` : void 0;
+	return {
+		resolvedControlId,
+		isInvalid,
+		errorContent,
+		hasError,
+		descriptionId,
+		errorId,
+		describedBy: [
+			typeof childProps["aria-describedby"] === "string" ? childProps["aria-describedby"] : void 0,
+			descriptionId,
+			errorId
+		].filter(Boolean).join(" ") || void 0
+	};
+};
+export { resolveFormFieldState };
+
+//# sourceMappingURL=form-field-state.js.map

package/dist/components/forms/form-field/form-field-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-field-state.js","names":[],"sources":["../../../../src/components/forms/form-field/form-field-state.ts"],"sourcesContent":["import type { ReactNode } from \"react\";\n\ntype FormFieldStateInput = {\n  generatedId: string;\n  controlId?: string;\n  childProps: Record<string, unknown>;\n  description?: ReactNode;\n  error?: ReactNode | boolean;\n  invalid?: boolean;\n};\n\nconst resolveFormFieldState = ({\n  generatedId,\n  controlId,\n  childProps,\n  description,\n  error,\n  invalid,\n}: FormFieldStateInput) => {\n  const resolvedControlId =\n    controlId ??\n    (typeof childProps.id === \"string\" ? childProps.id : generatedId);\n\n  const isInvalid =\n    invalid ?? (error !== undefined && error !== null && error !== false);\n\n  const errorContent = error === true ? \"Invalid value\" : error;\n  const hasError =\n    isInvalid && errorContent !== undefined && errorContent !== null;\n\n  const descriptionId =\n    description != null ? `${resolvedControlId}-description` : undefined;\n\n  const errorId = hasError ? `${resolvedControlId}-error` : undefined;\n\n  const existingDescribedBy =\n    typeof childProps[\"aria-describedby\"] === \"string\"\n      ? childProps[\"aria-describedby\"]\n      : undefined;\n\n  const describedBy =\n    [existingDescribedBy, descriptionId, errorId].filter(Boolean).join(\" \") ||\n    undefined;\n\n  return {\n    resolvedControlId,\n    isInvalid,\n    errorContent,\n    hasError,\n    descriptionId,\n    errorId,\n    describedBy,\n  };\n};\n\nexport { resolveFormFieldState };\n"],"mappings":";AAWA,MAAM,yBAAyB,EAC7B,aACA,WACA,YACA,aACA,OACA,cACyB;CACzB,MAAM,oBACJ,cACC,OAAO,WAAW,OAAO,WAAW,WAAW,KAAK;CAEvD,MAAM,YACJ,YAAY,UAAU,KAAA,KAAa,UAAU,QAAQ,UAAU;CAEjE,MAAM,eAAe,UAAU,OAAO,kBAAkB;CACxD,MAAM,WACJ,aAAa,iBAAiB,KAAA,KAAa,iBAAiB;CAE9D,MAAM,gBACJ,eAAe,OAAO,GAAG,kBAAkB,gBAAgB,KAAA;CAE7D,MAAM,UAAU,WAAW,GAAG,kBAAkB,UAAU,KAAA;CAW1D,OAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,aAVA;GALA,OAAO,WAAW,wBAAwB,WACtC,WAAW,sBACX,KAAA;GAGkB;GAAe;EAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KACtE,KAAA;CAUF;AACF"}

package/dist/components/forms/form-field/form-field.css

@@ -0,0 +1,44 @@
+.puzzle-form-field {
+  align-items: stretch;
+  gap: var(--puzzle-space-2, .5rem);
+  flex-direction: column;
+  width: 100%;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-form-field__label {
+  align-self: flex-start;
+}
+
+.puzzle-form-field__control {
+  width: 100%;
+  min-width: 0;
+}
+
+.puzzle-form-field__description, .puzzle-form-field__error {
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+}
+
+.puzzle-form-field__description {
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-form-field__error {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-form-field[data-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.puzzle-form-field[data-disabled="true"] .puzzle-form-field__label, .puzzle-form-field[data-disabled="true"] .puzzle-form-field__description {
+  color: var(--puzzle-color-text-muted);
+}
+
+@media (forced-colors: active) {
+  .puzzle-form-field__error {
+    color: mark;
+  }
+}

package/dist/components/forms/form-field/index.cjs

@@ -0,0 +1,61 @@
+const require_index = require("../label/index.cjs");
+const require_form_field_state = require("./form-field-state.cjs");
+;/* empty css                 */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/form-field/index.tsx
+const FormField = ({ label, description, error, invalid, required = false, disabled = false, controlId, optional = false, className, children, ...rootProps }) => {
+	const generatedId = (0, react.useId)();
+	const child = children;
+	const childProps = child.props;
+	const { resolvedControlId, isInvalid, errorContent, hasError, descriptionId, errorId, describedBy } = require_form_field_state.resolveFormFieldState({
+		generatedId,
+		controlId,
+		childProps,
+		description,
+		error,
+		invalid
+	});
+	const control = (0, react.cloneElement)(child, {
+		id: resolvedControlId,
+		required: required || childProps.required === true,
+		disabled: disabled || childProps.disabled === true,
+		"aria-describedby": describedBy,
+		"aria-invalid": isInvalid ? true : childProps["aria-invalid"]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...rootProps,
+		className: (0, _puzzle_ui_core.cn)("puzzle-form-field", className),
+		"data-invalid": isInvalid || void 0,
+		"data-disabled": disabled || void 0,
+		children: [
+			label != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.Label, {
+				htmlFor: resolvedControlId,
+				required,
+				optional,
+				className: "puzzle-form-field__label",
+				children: label
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "puzzle-form-field__control",
+				children: control
+			}),
+			description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: descriptionId,
+				className: "puzzle-form-field__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				id: errorId,
+				className: "puzzle-form-field__error",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: errorContent
+			})
+		]
+	});
+};
+exports.FormField = FormField;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/form-field/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","resolveFormFieldState","cloneElement","cn","Label"],"sources":["../../../../src/components/forms/form-field/index.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Label } from \"../label\";\nimport { resolveFormFieldState } from \"./form-field-state\";\n\nimport \"./form-field.css\";\n\ntype FormFieldProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  /** Visible label associated with the control. */\n  label?: ReactNode;\n\n  /** Supporting text displayed below the control. */\n  description?: ReactNode;\n\n  /** Validation error message. */\n  error?: ReactNode | boolean;\n\n  /** Explicitly controls the invalid state. Defaults to whether an error exists. */\n  invalid?: boolean;\n\n  /** Marks the control as required. */\n  required?: boolean;\n\n  /** Disables the control. */\n  disabled?: boolean;\n\n  /** ID applied to the actual form control. */\n  controlId?: string;\n\n  /** Displays an optional indicator beside the label. */\n  optional?: boolean;\n\n  /** A single Puzzle control or native form element. */\n  children: ReactElement;\n};\n\nconst FormField = ({\n  label,\n  description,\n  error,\n  invalid,\n  required = false,\n  disabled = false,\n  controlId,\n  optional = false,\n  className,\n  children,\n  ...rootProps\n}: FormFieldProps) => {\n  const generatedId = useId();\n\n  const child = children as ReactElement<Record<string, unknown>>;\n  const childProps = child.props;\n\n  const {\n    resolvedControlId,\n    isInvalid,\n    errorContent,\n    hasError,\n    descriptionId,\n    errorId,\n    describedBy,\n  } = resolveFormFieldState({\n    generatedId,\n    controlId,\n    childProps,\n    description,\n    error,\n    invalid,\n  });\n\n  const control = cloneElement(child, {\n    id: resolvedControlId,\n    required: required || childProps.required === true,\n    disabled: disabled || childProps.disabled === true,\n    \"aria-describedby\": describedBy,\n    \"aria-invalid\": isInvalid ? true : childProps[\"aria-invalid\"],\n  });\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-form-field\", className)}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n    >\n      {label != null && (\n        <Label\n          htmlFor={resolvedControlId}\n          required={required}\n          optional={optional}\n          className=\"puzzle-form-field__label\"\n        >\n          {label}\n        </Label>\n      )}\n\n      <div className=\"puzzle-form-field__control\">{control}</div>\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-form-field__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div\n          id={errorId}\n          className=\"puzzle-form-field__error\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {errorContent}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { FormField, type FormFieldProps };\n"],"mappings":";;;;;;;AA4CA,MAAM,aAAa,EACjB,OACA,aACA,OACA,SACA,WAAW,OACX,WAAW,OACX,WACA,WAAW,OACX,WACA,UACA,GAAG,gBACiB;CACpB,MAAM,eAAA,GAAcA,MAAAA,MAAAA,CAAM;CAE1B,MAAM,QAAQ;CACd,MAAM,aAAa,MAAM;CAEzB,MAAM,EACJ,mBACA,WACA,cACA,UACA,eACA,SACA,gBACEC,yBAAAA,sBAAsB;EACxB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,WAAA,GAAUC,MAAAA,aAAAA,CAAa,OAAO;EAClC,IAAI;EACJ,UAAU,YAAY,WAAW,aAAa;EAC9C,UAAU,YAAY,WAAW,aAAa;EAC9C,oBAAoB;EACpB,gBAAgB,YAAY,OAAO,WAAW;CAChD,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,GAAI;EACJ,YAAA,GAAWC,gBAAAA,GAAAA,CAAG,qBAAqB,SAAS;EAC5C,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAJ7B,UAAA;GAMG,SAAS,QACR,iBAAA,GAAA,kBAAA,IAAA,CAACC,cAAAA,OAAD;IACE,SAAS;IACC;IACA;IACV,WAAU;IAET,UAAA;GACI,CAAA;GAGT,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAA8B,UAAA;GAAa,CAAA;GAEzD,eAAe,QACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,IAAI;IAAe,WAAU;IAC/B,UAAA;GACE,CAAA;GAGN,YACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,IAAI;IACJ,WAAU;IACV,aAAU;IACV,eAAY;IAEX,UAAA;GACE,CAAA;EAEJ;;AAET"}

package/dist/components/forms/form-field/index.d.cts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+type FormFieldProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+  /** Visible label associated with the control. */
+  label?: ReactNode;
+  /** Supporting text displayed below the control. */
+  description?: ReactNode;
+  /** Validation error message. */
+  error?: ReactNode | boolean;
+  /** Explicitly controls the invalid state. Defaults to whether an error exists. */
+  invalid?: boolean;
+  /** Marks the control as required. */
+  required?: boolean;
+  /** Disables the control. */
+  disabled?: boolean;
+  /** ID applied to the actual form control. */
+  controlId?: string;
+  /** Displays an optional indicator beside the label. */
+  optional?: boolean;
+  /** A single Puzzle control or native form element. */
+  children: ReactElement;
+};
+declare const FormField: ({ label, description, error, invalid, required, disabled, controlId, optional, className, children, ...rootProps }: FormFieldProps) => import("react").JSX.Element;
+export { FormField, type FormFieldProps };

package/dist/components/forms/form-field/index.d.ts

@@ -0,0 +1,23 @@
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
+type FormFieldProps = Omit<ComponentPropsWithoutRef<"div">, "children"> & {
+  /** Visible label associated with the control. */
+  label?: ReactNode;
+  /** Supporting text displayed below the control. */
+  description?: ReactNode;
+  /** Validation error message. */
+  error?: ReactNode | boolean;
+  /** Explicitly controls the invalid state. Defaults to whether an error exists. */
+  invalid?: boolean;
+  /** Marks the control as required. */
+  required?: boolean;
+  /** Disables the control. */
+  disabled?: boolean;
+  /** ID applied to the actual form control. */
+  controlId?: string;
+  /** Displays an optional indicator beside the label. */
+  optional?: boolean;
+  /** A single Puzzle control or native form element. */
+  children: ReactElement;
+};
+declare const FormField: ({ label, description, error, invalid, required, disabled, controlId, optional, className, children, ...rootProps }: FormFieldProps) => import("react").JSX.Element;
+export { FormField, type FormFieldProps };