@arcfusionz/arc-primitive-ui 0.2.12 → 0.2.14

package/dist/components/FileUpload/FileUpload.js

@@ -0,0 +1,515 @@
+import { cn } from "../../lib/cn.js";
+import { Button } from "../Button/Button.js";
+import { FieldContext } from "../Field/FieldContext.js";
+import { Progress } from "../Progress/Progress.js";
+import { SystemState } from "../SystemState/SystemState.js";
+import { Fragment, createContext, forwardRef, useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/FileUpload/FileUpload.tsx
+/** `1023 B`, `1.5 KB`, `12 MB` — a compact, locale-neutral size readout. */
+function formatFileSize(bytes) {
+	if (!Number.isFinite(bytes) || bytes < 0) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	const units = [
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	let value = bytes / 1024;
+	let unit = 0;
+	while (value >= 1024 && unit < units.length - 1) {
+		value /= 1024;
+		unit += 1;
+	}
+	return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
+}
+function matchesAccept(file, accept) {
+	if (!accept) return true;
+	const tokens = accept.split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+	if (tokens.length === 0) return true;
+	const name = file.name.toLowerCase();
+	const mime = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return name.endsWith(token);
+		if (token.endsWith("/*")) return mime.startsWith(token.slice(0, -1));
+		return mime === token;
+	});
+}
+function fileKey(file) {
+	return `${file.name}:${file.size}:${file.lastModified}`;
+}
+const FileUploadContext = createContext(null);
+function useFileUploadContext(part) {
+	const context = useContext(FileUploadContext);
+	if (context == null) throw new Error(`${part} must be rendered inside <FileUpload>.`);
+	return context;
+}
+/**
+* Read the enclosing `FileUpload`'s state and controls — for building custom
+* pieces the flat parts don't cover (a file counter, an "Upload all" button, a
+* dropzone that hides once a file is chosen). Must be called under `FileUpload`.
+*/
+function useFileUpload() {
+	const context = useFileUploadContext("useFileUpload");
+	return {
+		files: context.files,
+		isDragging: context.isDragging,
+		disabled: context.disabled,
+		invalid: context.invalid,
+		open: context.openPicker,
+		remove: context.removeFile,
+		clear: context.clear
+	};
+}
+const rootClasses = "flex w-full flex-col gap-3";
+const stateAttributesMapping = {
+	dragging: (value) => value ? { "data-dragging": "" } : null,
+	disabled: (value) => value ? { "data-disabled": "" } : null,
+	invalid: (value) => value ? { "data-invalid": "" } : null,
+	empty: (value) => value ? { "data-empty": "" } : null
+};
+/**
+* Drag-and-drop / browse file selection built on a native input. Owns the
+* selected-file list, drag interaction, and client-side validation (`accept`,
+* `maxSize`/`minSize`, `maxFiles`, custom `validate`); the actual upload stays
+* with the consumer, reflected per file through `FileUploadItem`. The empty
+* dropzone is a `SystemState` (`upload` / `upload-error`).
+*
+* Accessibility: the input is visually hidden and the `FileUploadTrigger`
+* button is the focusable, keyboard-operable control (drag-and-drop is a
+* pointer enhancement). Announce added or rejected files yourself — the
+* component is not a live region. Inside a `Field` it inherits
+* `disabled`/`invalid`/`required`.
+*/
+const FileUpload = forwardRef(({ accept, multiple = false, maxFiles, maxSize, minSize, validate, allowDrop = true, preventDocumentDrop = true, directory = false, capture, value, defaultValue, onValueChange, onAccept, onReject, disabled, invalid, required, name, inputLabel, render, className, children, ...rest }, ref) => {
+	const fieldContext = useContext(FieldContext);
+	const resolvedDisabled = disabled ?? fieldContext?.control?.disabled ?? false;
+	const resolvedInvalid = invalid ?? fieldContext?.invalid ?? false;
+	const resolvedRequired = required ?? fieldContext?.required ?? false;
+	const inputId = `${useId()}-file-input`;
+	const inputRef = useRef(null);
+	const rootRef = useRef(null);
+	const dragDepth = useRef(0);
+	const isControlled = value !== void 0;
+	const [internalFiles, setInternalFiles] = useState(defaultValue ?? []);
+	const files = isControlled ? value : internalFiles;
+	const [isDragging, setIsDragging] = useState(false);
+	const syncInputFiles = (list) => {
+		const input = inputRef.current;
+		if (!input || typeof DataTransfer === "undefined") return;
+		try {
+			const transfer = new DataTransfer();
+			for (const file of list) transfer.items.add(file);
+			input.files = transfer.files;
+		} catch {}
+	};
+	useEffect(() => {
+		syncInputFiles(files);
+	}, [files]);
+	const commit = (next) => {
+		if (!isControlled) setInternalFiles(next);
+		onValueChange?.(next);
+	};
+	const getRejectionCodes = (file, projectedCount) => {
+		const codes = [];
+		if (!matchesAccept(file, accept)) codes.push("file-invalid-type");
+		if (typeof minSize === "number" && file.size < minSize) codes.push("file-too-small");
+		if (typeof maxSize === "number" && file.size > maxSize) codes.push("file-too-large");
+		if (projectedCount >= (multiple ? maxFiles ?? Infinity : 1)) codes.push("too-many-files");
+		const custom = validate?.(file);
+		if (custom) {
+			for (const code of custom) if (!codes.includes(code)) codes.push(code);
+		}
+		return codes;
+	};
+	const processIncoming = (incoming) => {
+		const kept = [...multiple ? files : []];
+		const accepted = [];
+		const rejections = [];
+		for (const file of incoming) {
+			if (kept.some((existing) => fileKey(existing) === fileKey(file))) continue;
+			const codes = getRejectionCodes(file, kept.length);
+			if (codes.length > 0) rejections.push({
+				file,
+				errors: codes
+			});
+			else {
+				kept.push(file);
+				accepted.push(file);
+			}
+		}
+		const next = multiple ? kept : accepted.length > 0 ? [accepted[0]] : files;
+		if (accepted.length > 0) onAccept?.(accepted);
+		if (rejections.length > 0) onReject?.(rejections);
+		if (next.length !== files.length || next.some((file, index) => file !== files[index])) commit(next);
+		syncInputFiles(next);
+	};
+	const openPicker = () => {
+		if (resolvedDisabled) return;
+		inputRef.current?.click();
+	};
+	const removeFile = (file) => {
+		commit(files.filter((existing) => fileKey(existing) !== fileKey(file)));
+	};
+	const clear = () => commit([]);
+	const dropHasFiles = (event) => Array.from(event.dataTransfer?.types ?? []).includes("Files");
+	const onDragEnter = (event) => {
+		if (resolvedDisabled || !allowDrop || !dropHasFiles(event)) return;
+		event.preventDefault();
+		dragDepth.current += 1;
+		setIsDragging(true);
+	};
+	const onDragOver = (event) => {
+		if (resolvedDisabled || !allowDrop || !dropHasFiles(event)) return;
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "copy";
+	};
+	const onDragLeave = (event) => {
+		if (resolvedDisabled || !allowDrop) return;
+		event.preventDefault();
+		dragDepth.current = Math.max(0, dragDepth.current - 1);
+		if (dragDepth.current === 0) setIsDragging(false);
+	};
+	const onDrop = (event) => {
+		if (resolvedDisabled || !allowDrop) return;
+		event.preventDefault();
+		dragDepth.current = 0;
+		setIsDragging(false);
+		const dropped = Array.from(event.dataTransfer?.files ?? []);
+		if (dropped.length > 0) processIncoming(dropped);
+	};
+	useEffect(() => {
+		if (!preventDocumentDrop || !allowDrop || typeof document === "undefined") return;
+		const isOutside = (event) => {
+			const root = rootRef.current;
+			return !root || !(event.target instanceof Node) || !root.contains(event.target);
+		};
+		const prevent = (event) => {
+			if (isOutside(event)) event.preventDefault();
+		};
+		document.addEventListener("dragover", prevent);
+		document.addEventListener("drop", prevent);
+		return () => {
+			document.removeEventListener("dragover", prevent);
+			document.removeEventListener("drop", prevent);
+		};
+	}, [preventDocumentDrop, allowDrop]);
+	const contextValue = {
+		files,
+		disabled: resolvedDisabled,
+		invalid: resolvedInvalid,
+		multiple,
+		isDragging,
+		inputId,
+		openPicker,
+		removeFile,
+		clear,
+		dropzoneListeners: {
+			onDragEnter,
+			onDragOver,
+			onDragLeave,
+			onDrop
+		}
+	};
+	const state = {
+		dragging: isDragging,
+		disabled: resolvedDisabled,
+		invalid: resolvedInvalid,
+		empty: files.length === 0
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: [ref, rootRef],
+		state,
+		stateAttributesMapping,
+		props: {
+			className: cn(rootClasses, className),
+			children: /* @__PURE__ */ jsxs(FileUploadContext.Provider, {
+				value: contextValue,
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id: inputId,
+					type: "file",
+					accept,
+					multiple,
+					capture,
+					disabled: resolvedDisabled || void 0,
+					required: resolvedRequired || void 0,
+					name,
+					"aria-label": inputLabel ?? (multiple ? "Upload files" : "Upload file"),
+					"aria-invalid": resolvedInvalid || void 0,
+					tabIndex: -1,
+					className: "sr-only",
+					onChange: (event) => {
+						const list = event.target.files;
+						if (list && list.length > 0) processIncoming(Array.from(list));
+					},
+					...directory ? { webkitdirectory: "" } : null
+				}), children]
+			}),
+			...rest
+		}
+	});
+});
+FileUpload.displayName = "FileUpload";
+const dropzoneClasses = "relative flex w-full flex-col items-center justify-center rounded-md border-2 border-dashed border-border bg-transparent cursor-pointer transition-colors duration-150 hover:border-slate-300 hover:bg-surface has-[:focus-visible]:border-primary has-[:focus-visible]:bg-primary-50 data-dragging:border-primary data-dragging:bg-primary-50 data-invalid:border-destructive data-disabled:cursor-default data-disabled:opacity-50 data-disabled:hover:border-border data-disabled:hover:bg-transparent";
+/**
+* Class list for an element styled as the dashed drop area — for building a
+* bespoke dropzone while keeping the brand's border, hover, and drag/invalid
+* looks. The drag state hooks are `data-dragging` / `data-invalid` /
+* `data-disabled`.
+*/
+function fileUploadDropzoneVariants({ className } = {}) {
+	return cn(dropzoneClasses, className);
+}
+/**
+* The dashed drop area. Clicking anywhere in it opens the picker (a pointer
+* convenience); the `FileUploadTrigger` inside is the focusable control for
+* keyboard and assistive tech. With no `children` it renders a `SystemState`
+* (`upload`, or `upload-error` when invalid) with a browse button; pass
+* `children` to supply your own prompt. Highlights via `data-dragging` while a
+* file is dragged over it.
+*/
+const FileUploadDropzone = forwardRef(({ children, className, onClick, ...rest }, ref) => {
+	const context = useFileUploadContext("FileUploadDropzone");
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-dragging": context.isDragging ? "" : void 0,
+		"data-invalid": context.invalid ? "" : void 0,
+		"data-disabled": context.disabled ? "" : void 0,
+		className: fileUploadDropzoneVariants({ className }),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) context.openPicker();
+		},
+		...context.dropzoneListeners,
+		...rest,
+		children: children ?? /* @__PURE__ */ jsx(SystemState, {
+			variant: context.invalid ? "upload-error" : "upload",
+			bg: "transparent",
+			action: /* @__PURE__ */ jsx(FileUploadTrigger, {})
+		})
+	});
+});
+FileUploadDropzone.displayName = "FileUploadDropzone";
+/**
+* Button that opens the file picker. Rendered inside `FileUploadDropzone` by
+* default; use it on its own for a compact "attach a file" control with no drop
+* area. Defaults to the `outline` variant and an upload-icon + "Browse files"
+* label. A custom label opts into an icon via `startIcon`; pass
+* `startIcon={null}` to remove the default one. Inherits the upload's
+* `disabled` state.
+*/
+const FileUploadTrigger = forwardRef(({ variant = "outline", disabled, onClick, startIcon, children, ...rest }, ref) => {
+	const context = useFileUploadContext("FileUploadTrigger");
+	const resolvedStartIcon = startIcon !== void 0 ? startIcon : children == null ? /* @__PURE__ */ jsx(UploadIcon, {}) : void 0;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "button",
+		variant,
+		disabled: disabled ?? context.disabled,
+		startIcon: resolvedStartIcon,
+		onClick: (event) => {
+			event.stopPropagation();
+			onClick?.(event);
+			if (!event.defaultPrevented) context.openPicker();
+		},
+		...rest,
+		children: children ?? "Browse files"
+	});
+});
+FileUploadTrigger.displayName = "FileUploadTrigger";
+const listClasses = "flex w-full flex-col gap-2";
+/**
+* Container for the selected files. `role="list"` is set explicitly so the
+* list semantics survive the `flex` reset in Safari/VoiceOver. Renders nothing
+* while empty in the default (auto or render-prop) mode.
+*/
+const FileUploadList = forwardRef(({ children, className, ...rest }, ref) => {
+	const context = useFileUploadContext("FileUploadList");
+	const isRenderProp = typeof children === "function";
+	if ((children == null || isRenderProp) && context.files.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		role: "list",
+		className: cn(listClasses, className),
+		...rest,
+		children: isRenderProp ? context.files.map((file, index) => /* @__PURE__ */ jsx(Fragment, { children: children(file, index) }, `${fileKey(file)}-${index}`)) : children ?? context.files.map((file, index) => /* @__PURE__ */ jsx(FileUploadItem, { file }, `${fileKey(file)}-${index}`))
+	});
+});
+FileUploadList.displayName = "FileUploadList";
+const itemClasses = "flex items-center gap-3 rounded-md border border-border bg-background px-3 py-2.5 data-[status=error]:border-destructive";
+const itemNameClasses = "truncate font-sans text-sm font-medium text-foreground";
+const itemMetaClasses = "font-sans text-xs text-muted-foreground";
+const itemErrorClasses = "font-sans text-xs font-medium text-error-700";
+/**
+* One selected file: a thumbnail (auto-generated for images) or file icon, the
+* name, and — depending on `status` — its size, an upload progress bar, or an
+* error message, plus a remove button. `status`/`progress`/`error` are
+* consumer-driven so the row reflects real upload state.
+*/
+const FileUploadItem = forwardRef(({ file, status = "idle", progress, error, removable = true, onRemove, removeLabel, preview, children, className, ...rest }, ref) => {
+	const context = useFileUploadContext("FileUploadItem");
+	const handleRemove = onRemove ?? (() => context.removeFile(file));
+	return /* @__PURE__ */ jsx("li", {
+		ref,
+		"data-status": status,
+		className: cn(itemClasses, className),
+		...rest,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "shrink-0",
+				children: preview ?? /* @__PURE__ */ jsx(FileUploadThumbnail, { file })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: itemNameClasses,
+							children: file.name
+						}),
+						status === "success" && /* @__PURE__ */ jsx(CheckCircleIcon, {
+							className: "ms-auto size-4 shrink-0 text-success-700",
+							"aria-hidden": "true"
+						}),
+						status === "error" && /* @__PURE__ */ jsx(AlertCircleIcon, {
+							className: "ms-auto size-4 shrink-0 text-error-700",
+							"aria-hidden": "true"
+						})
+					]
+				}), status === "uploading" ? /* @__PURE__ */ jsx(Progress, {
+					size: "sm",
+					value: progress ?? null,
+					"aria-label": `Uploading ${file.name}`
+				}) : status === "error" ? /* @__PURE__ */ jsx("span", {
+					className: itemErrorClasses,
+					children: error ?? "Upload failed"
+				}) : /* @__PURE__ */ jsx("span", {
+					className: itemMetaClasses,
+					children: formatFileSize(file.size)
+				})]
+			}),
+			removable && /* @__PURE__ */ jsx(Button, {
+				iconOnly: true,
+				size: "sm",
+				variant: "ghost",
+				type: "button",
+				"aria-label": removeLabel ?? `Remove ${file.name}`,
+				disabled: context.disabled,
+				onClick: handleRemove,
+				className: "ms-auto shrink-0 self-start",
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		] })
+	});
+});
+FileUploadItem.displayName = "FileUploadItem";
+function FileUploadThumbnail({ file }) {
+	const [url, setUrl] = useState(null);
+	useEffect(() => {
+		if (typeof URL === "undefined" || !file.type.startsWith("image/")) {
+			setUrl(null);
+			return;
+		}
+		const objectUrl = URL.createObjectURL(file);
+		setUrl(objectUrl);
+		return () => URL.revokeObjectURL(objectUrl);
+	}, [file]);
+	if (url != null) return /* @__PURE__ */ jsx("img", {
+		src: url,
+		alt: "",
+		"aria-hidden": "true",
+		className: "size-10 rounded-md object-cover",
+		draggable: false
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "flex size-10 items-center justify-center rounded-md bg-muted text-muted-foreground",
+		children: /* @__PURE__ */ jsx(FileIcon, {
+			className: "size-5",
+			"aria-hidden": "true"
+		})
+	});
+}
+function UploadIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "m17 8-5-5-5 5" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 3v12" })
+		]
+	});
+}
+function FileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })]
+	});
+}
+function XIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+	});
+}
+function CheckCircleIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "10"
+		}), /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })]
+	});
+}
+function AlertCircleIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 8v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+		]
+	});
+}
+//#endregion
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadList, FileUploadTrigger, fileUploadDropzoneVariants, formatFileSize, useFileUpload };

package/dist/components/FileUpload/index.d.ts

@@ -0,0 +1,2 @@
+import { FileUpload, FileUploadDropzone, FileUploadDropzoneProps, FileUploadDropzoneVariantsOptions, FileUploadHandle, FileUploadItem, FileUploadItemProps, FileUploadItemStatus, FileUploadList, FileUploadListProps, FileUploadProps, FileUploadRejection, FileUploadRejectionCode, FileUploadRenderState, FileUploadTrigger, FileUploadTriggerProps, fileUploadDropzoneVariants, formatFileSize, useFileUpload } from "./FileUpload.js";
+export { FileUpload, FileUploadDropzone, type FileUploadDropzoneProps, type FileUploadDropzoneVariantsOptions, type FileUploadHandle, FileUploadItem, type FileUploadItemProps, type FileUploadItemStatus, FileUploadList, type FileUploadListProps, type FileUploadProps, type FileUploadRejection, type FileUploadRejectionCode, type FileUploadRenderState, FileUploadTrigger, type FileUploadTriggerProps, fileUploadDropzoneVariants, formatFileSize, useFileUpload };

package/dist/components/FileUpload/index.js

@@ -0,0 +1,2 @@
+import { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadList, FileUploadTrigger, fileUploadDropzoneVariants, formatFileSize, useFileUpload } from "./FileUpload.js";
+export { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadList, FileUploadTrigger, fileUploadDropzoneVariants, formatFileSize, useFileUpload };

package/dist/components/Stepper/Stepper.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { createContext, forwardRef, useContext, useEffect, useMemo, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Stepper/Stepper.tsx
 function CheckIcon(props) {
@@ -272,7 +272,7 @@ const StepperIndicator = forwardRef(({ children, render, className, ...rest }, r
 		props: {
 			...stepStateAttributes(item, orientation),
 			...rest,
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [children ?? glyph, statusLabel != null && /* @__PURE__ */ jsx("span", {
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [children ?? glyph, statusLabel != null && /* @__PURE__ */ jsx("span", {
 				className: "sr-only",
 				children: statusLabel
 			})] }),

package/dist/components/Switch/Switch.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef, useId } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Switch } from "@base-ui/react/switch";
 //#region src/components/Switch/Switch.tsx
 const trackClasses = "inline-flex shrink-0 cursor-pointer select-none items-center rounded-full border border-border bg-muted p-px transition-colors duration-150 hover:border-slate-300 hover:bg-slate-200 data-checked:border-primary data-checked:bg-primary hover:data-checked:border-primary-700 hover:data-checked:bg-primary-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring aria-invalid:border-destructive data-invalid:border-destructive aria-invalid:focus-visible:outline-destructive data-invalid:focus-visible:outline-destructive data-readonly:cursor-default disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50";
@@ -74,7 +74,7 @@ const Switch$1 = forwardRef(({ size = "md", label, description, labelPosition =
 		className: cn("inline-flex max-w-full flex-col gap-1 font-sans", "has-data-disabled:pointer-events-none has-data-disabled:opacity-50"),
 		children: [hasLabel ? /* @__PURE__ */ jsx("label", {
 			className: cn("inline-flex cursor-pointer items-start gap-2", "has-data-readonly:cursor-default", labelPosition === "start" && "justify-between"),
-			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment, { children: [control, labelText] })
+			children: labelPosition === "start" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [labelText, control] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [control, labelText] })
 		}) : control, description != null && /* @__PURE__ */ jsx("span", {
 			id: descriptionId,
 			className: cn("text-muted-foreground", descriptionTextClasses[size], labelPosition === "end" && descriptionIndentClasses[size]),

package/dist/components/SystemState/SystemState.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/SystemState/SystemState.d.ts
-type SystemStateVariant = "first-use" | "empty" | "no-results" | "completed" | "setup-required" | "sign-in-required" | "access-denied" | "feature-locked" | "unsupported" | "not-found" | "resource-unavailable" | "conflict" | "offline" | "network-error" | "timeout" | "rate-limited" | "maintenance" | "service-unavailable" | "server-error";
+type SystemStateVariant = "first-use" | "empty" | "no-results" | "completed" | "upload" | "upload-error" | "setup-required" | "sign-in-required" | "access-denied" | "feature-locked" | "unsupported" | "not-found" | "resource-unavailable" | "conflict" | "offline" | "network-error" | "timeout" | "rate-limited" | "maintenance" | "service-unavailable" | "server-error";
 type SystemStateScope = "inline" | "full";
 type SystemStateBackground = "transparent" | "background" | "surface" | "muted";
 type SystemStateTitleLevel = 1 | 2 | 3 | 4 | 5 | 6;
@@ -62,8 +62,9 @@ interface SystemStateProps extends Omit<ComponentPropsWithoutRef<"div">, "classN
   className?: string;
 }
 /**
- * Communicates a non-ideal or milestone state — empty, error, restricted, or
- * completed — with a brand illustration, copy, and optional recovery actions.
+ * Communicates a non-ideal or milestone state — empty, error, restricted,
+ * completed, or a file-upload prompt — with a brand illustration, copy, and
+ * optional recovery actions.
  */
 declare const SystemState: import("react").ForwardRefExoticComponent<SystemStateProps & import("react").RefAttributes<HTMLDivElement>>;
 //#endregion

package/dist/components/SystemState/SystemState.js

@@ -1,6 +1,6 @@
 import { cn } from "../../lib/cn.js";
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 import accessDeniedImage from "../../assets/system-states/access-denied.png";
 import completedImage from "../../assets/system-states/completed.png";
@@ -32,6 +32,16 @@ const variantDefaults = {
 		title: "All done",
 		description: "Everything here is taken care of. Nice work."
 	},
+	upload: {
+		image: firstUseImage,
+		title: "Drag and drop files here",
+		description: "or browse to choose files from your device."
+	},
+	"upload-error": {
+		image: setupRequiredImage,
+		title: "Upload failed",
+		description: "Something went wrong while uploading. Check your files and try again."
+	},
 	"setup-required": {
 		image: setupRequiredImage,
 		title: "Finish setting up",
@@ -132,8 +142,9 @@ const descriptionClasses = {
 	full: "font-sans text-base text-muted-foreground"
 };
 /**
-* Communicates a non-ideal or milestone state — empty, error, restricted, or
-* completed — with a brand illustration, copy, and optional recovery actions.
+* Communicates a non-ideal or milestone state — empty, error, restricted,
+* completed, or a file-upload prompt — with a brand illustration, copy, and
+* optional recovery actions.
 */
 const SystemState = forwardRef(({ variant, title, description, action, secondaryAction, scope = "inline", bg = "transparent", titleLevel, render, className, ...rest }, ref) => {
 	const defaults = variantDefaults[variant];
@@ -153,7 +164,7 @@ const SystemState = forwardRef(({ variant, title, description, action, secondary
 		},
 		props: {
 			className: cn(rootClasses, scopeClasses[scope], backgroundClasses[bg], className),
-			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
 				/* @__PURE__ */ jsx("img", {
 					src: defaults.image,
 					alt: "",