@psnext/design-system 2.3.0 → 2.5.0

package/dist/primitives/FileUpload/index.js

@@ -0,0 +1,351 @@
+import { t as cn } from "../../cn.js";
+import { Button } from "../Button/index.js";
+import { Progress } from "../Progress/index.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckCircle2, CircleAlert, FileIcon, Loader2, UploadCloud, XIcon } from "lucide-react";
+//#region src/primitives/FileUpload/FileUpload.tsx
+function clamp(value, min, max) {
+	return Math.min(max, Math.max(min, value));
+}
+function formatBytes(value) {
+	if (!Number.isFinite(value) || value <= 0) return "0 B";
+	const units = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);
+	const size = value / 1024 ** exponent;
+	return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;
+}
+function getAcceptTokens(accept) {
+	return (accept ?? "").split(",").map((token) => token.trim().toLowerCase()).filter(Boolean);
+}
+function matchesAccept(file, accept) {
+	const tokens = getAcceptTokens(accept);
+	if (tokens.length === 0) return true;
+	const fileName = file.name.toLowerCase();
+	const fileType = file.type.toLowerCase();
+	return tokens.some((token) => {
+		if (token.startsWith(".")) return fileName.endsWith(token);
+		if (token.endsWith("/*")) {
+			const category = token.slice(0, token.length - 1);
+			return fileType.startsWith(category);
+		}
+		return fileType === token;
+	});
+}
+function createFileItem(file) {
+	return {
+		id: typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`,
+		file,
+		status: "idle",
+		progress: 0
+	};
+}
+function hasFiles(event) {
+	return Array.from(event.dataTransfer?.types ?? []).includes("Files");
+}
+function getStatusLabel(item) {
+	if (item.status === "idle") return "Ready to upload";
+	if (item.status === "uploading") return `Uploading… ${Math.round(item.progress)}%`;
+	if (item.status === "success") return "Upload complete";
+	return item.error ? `Upload failed: ${item.error}` : "Upload failed";
+}
+/** File upload primitive with click-to-browse and drag-and-drop interactions, validation, and per-file upload states. */
+function FileUpload({ className, multiple = false, accept, maxFiles, maxFileSize, validateFile, onUpload, onItemsChange, dropzoneAriaLabel = "File upload drop zone", disabled, ...props }) {
+	const inputRef = React.useRef(null);
+	const uploadControllersRef = React.useRef(/* @__PURE__ */ new Map());
+	const [items, setItems] = React.useState([]);
+	const [errors, setErrors] = React.useState([]);
+	const [dragState, setDragState] = React.useState("idle");
+	const dragDepthRef = React.useRef(0);
+	const baseId = React.useId();
+	const hintId = `${baseId}-hint`;
+	const errorId = `${baseId}-errors`;
+	const updateItem = React.useCallback((itemId, updater) => {
+		setItems((current) => current.map((item) => item.id === itemId ? updater(item) : item));
+	}, []);
+	const removeItem = React.useCallback((itemId) => {
+		uploadControllersRef.current.get(itemId)?.abort();
+		uploadControllersRef.current.delete(itemId);
+		setItems((current) => current.filter((item) => item.id !== itemId));
+	}, []);
+	const beginUpload = React.useCallback((item) => {
+		if (!onUpload) return;
+		const controller = new AbortController();
+		uploadControllersRef.current.set(item.id, controller);
+		updateItem(item.id, (current) => ({
+			...current,
+			status: "uploading",
+			progress: 0,
+			error: void 0
+		}));
+		onUpload({
+			file: item.file,
+			signal: controller.signal,
+			reportProgress: (value) => {
+				updateItem(item.id, (current) => {
+					if (current.status !== "uploading") return current;
+					return {
+						...current,
+						progress: clamp(value, 0, 100)
+					};
+				});
+			}
+		}).then(() => {
+			if (controller.signal.aborted) return;
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "success",
+				progress: 100,
+				error: void 0
+			}));
+		}).catch((uploadError) => {
+			if (controller.signal.aborted) return;
+			const message = uploadError instanceof Error && uploadError.message ? uploadError.message : "Upload failed.";
+			updateItem(item.id, (current) => ({
+				...current,
+				status: "error",
+				error: message
+			}));
+		}).finally(() => {
+			uploadControllersRef.current.delete(item.id);
+		});
+	}, [onUpload, updateItem]);
+	const queueFiles = React.useCallback((queuedFiles) => {
+		const incoming = Array.isArray(queuedFiles) ? queuedFiles : Array.from(queuedFiles);
+		if (incoming.length === 0) return;
+		if (!multiple) {
+			uploadControllersRef.current.forEach((controller) => controller.abort());
+			uploadControllersRef.current.clear();
+		}
+		const nextErrors = [];
+		const acceptedItems = [];
+		const nextItems = multiple ? [...items] : [];
+		const effectiveMaxFiles = multiple ? maxFiles ?? Number.POSITIVE_INFINITY : 1;
+		let candidates = incoming;
+		if (!multiple && incoming.length > 1) {
+			nextErrors.push("Only one file can be selected at a time.");
+			candidates = [incoming[0]];
+		}
+		const availableSlots = Math.max(0, effectiveMaxFiles - nextItems.length);
+		if (availableSlots < candidates.length) {
+			nextErrors.push(`You can upload up to ${effectiveMaxFiles} file${effectiveMaxFiles === 1 ? "" : "s"}.`);
+			candidates = candidates.slice(0, availableSlots);
+		}
+		for (const file of candidates) {
+			if (!matchesAccept(file, accept)) {
+				nextErrors.push(`${file.name} has an unsupported file type.`);
+				continue;
+			}
+			if (maxFileSize != null && file.size > maxFileSize) {
+				nextErrors.push(`${file.name} exceeds the ${formatBytes(maxFileSize)} size limit.`);
+				continue;
+			}
+			const customError = validateFile?.(file);
+			if (customError) {
+				nextErrors.push(customError);
+				continue;
+			}
+			const item = createFileItem(file);
+			acceptedItems.push(item);
+			nextItems.push(item);
+		}
+		setItems(nextItems);
+		setErrors(nextErrors);
+		setDragState(nextErrors.length > 0 ? "invalid-drop" : "idle");
+		if (onUpload) acceptedItems.forEach((item) => beginUpload(item));
+	}, [
+		accept,
+		beginUpload,
+		items,
+		maxFileSize,
+		maxFiles,
+		multiple,
+		onUpload,
+		validateFile
+	]);
+	const openPicker = React.useCallback(() => {
+		if (disabled) return;
+		inputRef.current?.click();
+	}, [disabled]);
+	const handleInputChange = React.useCallback((event) => {
+		queueFiles(event.target.files ?? []);
+		event.target.value = "";
+	}, [queueFiles]);
+	const handleDragEnter = React.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setDragState("invalid-drop");
+			return;
+		}
+		dragDepthRef.current += 1;
+		setDragState("drag-over");
+	}, [disabled]);
+	const handleDragOver = React.useCallback((event) => {
+		event.preventDefault();
+		if (disabled) return;
+		if (event.dataTransfer) event.dataTransfer.dropEffect = "copy";
+		if (!hasFiles(event)) setDragState("invalid-drop");
+	}, [disabled]);
+	const handleDragLeave = React.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);
+		if (dragDepthRef.current === 0) setDragState("idle");
+	}, []);
+	const handleDrop = React.useCallback((event) => {
+		event.preventDefault();
+		dragDepthRef.current = 0;
+		if (disabled) return;
+		if (!hasFiles(event)) {
+			setErrors(["Only files can be dropped here."]);
+			setDragState("invalid-drop");
+			return;
+		}
+		queueFiles(event.dataTransfer.files);
+	}, [disabled, queueFiles]);
+	React.useEffect(() => {
+		onItemsChange?.(items);
+	}, [items, onItemsChange]);
+	React.useEffect(() => () => {
+		uploadControllersRef.current.forEach((controller) => controller.abort());
+		uploadControllersRef.current.clear();
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload",
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				accept,
+				multiple,
+				disabled,
+				"data-slot": "file-upload-input",
+				className: "hidden",
+				onChange: handleInputChange,
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "file-upload-dropzone",
+				"data-drag-state": dragState,
+				role: "button",
+				tabIndex: disabled ? -1 : 0,
+				"aria-label": dropzoneAriaLabel,
+				"aria-disabled": disabled || void 0,
+				"aria-describedby": errors.length > 0 ? `${hintId} ${errorId}` : hintId,
+				className: cn("flex cursor-pointer flex-col items-center justify-center gap-2 rounded-12 border-2 border-dashed px-5 py-8 text-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus", "data-[drag-state=idle]:border-primary-border data-[drag-state=idle]:bg-secondary-bg/25", "data-[drag-state=drag-over]:border-primary-invert-border data-[drag-state=drag-over]:bg-primary-bg", "data-[drag-state=invalid-drop]:border-danger-border data-[drag-state=invalid-drop]:bg-danger-bg/35", disabled && "cursor-not-allowed opacity-60"),
+				onClick: openPicker,
+				onKeyDown: (event) => {
+					if (event.key === "Enter" || event.key === " ") {
+						event.preventDefault();
+						openPicker();
+					}
+				},
+				onDragEnter: handleDragEnter,
+				onDragOver: handleDragOver,
+				onDragLeave: handleDragLeave,
+				onDrop: handleDrop,
+				children: [
+					/* @__PURE__ */ jsx(UploadCloud, {
+						className: "size-8 text-muted-txt",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "font-medium text-sm text-primary-txt",
+						children: "Drag files here or click to browse"
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						id: hintId,
+						className: "text-muted-txt text-xs",
+						children: [
+							multiple ? "Supports multiple files." : "Supports one file.",
+							accept ? ` Accepted: ${accept}.` : "",
+							maxFileSize ? ` Max file size: ${formatBytes(maxFileSize)}.` : ""
+						]
+					})
+				]
+			}),
+			errors.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				id: errorId,
+				role: "alert",
+				className: "space-y-1 text-danger-txt text-xs",
+				children: errors.map((message, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex items-start gap-1.5",
+					children: [/* @__PURE__ */ jsx(CircleAlert, {
+						className: "mt-0.5 size-3.5 shrink-0",
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", { children: message })]
+				}, `${message}-${index}`))
+			}) : null,
+			items.length > 0 ? /* @__PURE__ */ jsx("ul", {
+				"data-slot": "file-upload-list",
+				className: "space-y-2",
+				"aria-live": "polite",
+				children: items.map((item) => {
+					const showProgress = item.status === "uploading" || item.status === "success";
+					const progressVariant = item.status === "error" ? "destructive" : "default";
+					return /* @__PURE__ */ jsx("li", {
+						"data-slot": "file-upload-item",
+						"data-state": item.status,
+						className: "rounded-12 border border-primary-border bg-secondary-bg/20 px-3 py-2",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex items-start gap-2.5",
+							children: [
+								/* @__PURE__ */ jsx("div", {
+									className: "mt-0.5 shrink-0 text-muted-txt",
+									"aria-hidden": "true",
+									children: item.status === "success" ? /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success-txt" }) : item.status === "error" ? /* @__PURE__ */ jsx(CircleAlert, { className: "size-4 text-danger-txt" }) : item.status === "uploading" ? /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin" }) : /* @__PURE__ */ jsx(FileIcon, { className: "size-4" })
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "min-w-0 flex-1",
+									children: [
+										/* @__PURE__ */ jsxs("div", {
+											className: "flex items-center justify-between gap-3",
+											children: [/* @__PURE__ */ jsx("p", {
+												className: "truncate font-medium text-sm text-primary-txt",
+												children: item.file.name
+											}), /* @__PURE__ */ jsx("p", {
+												className: "shrink-0 text-muted-txt text-xs",
+												children: formatBytes(item.file.size)
+											})]
+										}),
+										/* @__PURE__ */ jsx("p", {
+											className: "mt-0.5 text-muted-txt text-xs",
+											children: getStatusLabel(item)
+										}),
+										showProgress ? /* @__PURE__ */ jsx(Progress, {
+											className: "mt-2",
+											value: item.status === "success" ? 100 : item.progress,
+											variant: progressVariant,
+											"aria-label": `Upload progress for ${item.file.name}`
+										}) : null
+									]
+								}),
+								/* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: item.status === "uploading" ? "destructive-ghost" : "ghost",
+									size: "icon-sm",
+									shape: "square",
+									"aria-label": item.status === "uploading" ? `Cancel upload for ${item.file.name}` : `Remove ${item.file.name}`,
+									onClick: () => removeItem(item.id),
+									children: /* @__PURE__ */ jsx(XIcon, {})
+								})
+							]
+						})
+					}, item.id);
+				})
+			}) : null
+		]
+	});
+}
+//#endregion
+export { FileUpload };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/FileUpload/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/FileUpload/FileUpload.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircle2, CircleAlert, FileIcon, Loader2, UploadCloud, XIcon } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/primitives/Button\";\nimport { Progress } from \"@/primitives/Progress\";\nimport { cn } from \"@/utils\";\n\ntype FileUploadStatus = \"idle\" | \"uploading\" | \"success\" | \"error\";\n\ntype FileUploadItem = {\n  id: string;\n  file: File;\n  status: FileUploadStatus;\n  progress: number;\n  error?: string;\n};\n\ntype FileUploadHandler = (params: {\n  file: File;\n  signal: AbortSignal;\n  reportProgress: (value: number) => void;\n}) => Promise<void>;\n\ntype FileUploadProps = Omit<React.ComponentProps<\"div\">, \"onChange\"> & {\n  /** Disable click, drag/drop, and file selection. */\n  disabled?: boolean;\n  /** Allow selecting or dropping multiple files in one interaction. */\n  multiple?: boolean;\n  /** Native file accept filter (e.g. `image/*,.pdf`). */\n  accept?: string;\n  /** Maximum number of files held by the component at once. */\n  maxFiles?: number;\n  /** Maximum file size in bytes; oversized files are rejected with an error message. */\n  maxFileSize?: number;\n  /** Optional custom validator. Return a message to reject the file, or `null` to accept it. */\n  validateFile?: (file: File) => string | null;\n  /** Called for each accepted file; receives a progress reporter and abort signal. */\n  onUpload?: FileUploadHandler;\n  /** Called whenever file entries change (added, progress updates, completed, removed). */\n  onItemsChange?: (items: FileUploadItem[]) => void;\n  /** Accessible label for the drag-and-drop region. */\n  dropzoneAriaLabel?: string;\n};\n\nfunction clamp(value: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, value));\n}\n\nfunction formatBytes(value: number) {\n  if (!Number.isFinite(value) || value <= 0) {\n    return \"0 B\";\n  }\n\n  const units = [\"B\", \"KB\", \"MB\", \"GB\", \"TB\"];\n  const exponent = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1);\n  const size = value / 1024 ** exponent;\n  return `${size.toFixed(size >= 10 || exponent === 0 ? 0 : 1)} ${units[exponent]}`;\n}\n\nfunction getAcceptTokens(accept?: string) {\n  return (accept ?? \"\")\n    .split(\",\")\n    .map((token) => token.trim().toLowerCase())\n    .filter(Boolean);\n}\n\nfunction matchesAccept(file: File, accept?: string) {\n  const tokens = getAcceptTokens(accept);\n  if (tokens.length === 0) {\n    return true;\n  }\n\n  const fileName = file.name.toLowerCase();\n  const fileType = file.type.toLowerCase();\n\n  return tokens.some((token) => {\n    if (token.startsWith(\".\")) {\n      return fileName.endsWith(token);\n    }\n\n    if (token.endsWith(\"/*\")) {\n      const category = token.slice(0, token.length - 1);\n      return fileType.startsWith(category);\n    }\n\n    return fileType === token;\n  });\n}\n\nfunction createFileItem(file: File): FileUploadItem {\n  const id =\n    typeof crypto !== \"undefined\" && typeof crypto.randomUUID === \"function\"\n      ? crypto.randomUUID()\n      : `${file.name}-${file.lastModified}-${Math.random().toString(36).slice(2)}`;\n\n  return {\n    id,\n    file,\n    status: \"idle\",\n    progress: 0,\n  };\n}\n\nfunction hasFiles(event: React.DragEvent<HTMLElement>) {\n  return Array.from(event.dataTransfer?.types ?? []).includes(\"Files\");\n}\n\nfunction getStatusLabel(item: FileUploadItem) {\n  if (item.status === \"idle\") {\n    return \"Ready to upload\";\n  }\n\n  if (item.status === \"uploading\") {\n    return `Uploading… ${Math.round(item.progress)}%`;\n  }\n\n  if (item.status === \"success\") {\n    return \"Upload complete\";\n  }\n\n  return item.error ? `Upload failed: ${item.error}` : \"Upload failed\";\n}\n\n/** File upload primitive with click-to-browse and drag-and-drop interactions, validation, and per-file upload states. */\nfunction FileUpload({\n  className,\n  multiple = false,\n  accept,\n  maxFiles,\n  maxFileSize,\n  validateFile,\n  onUpload,\n  onItemsChange,\n  dropzoneAriaLabel = \"File upload drop zone\",\n  disabled,\n  ...props\n}: FileUploadProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const uploadControllersRef = React.useRef<Map<string, AbortController>>(new Map());\n\n  const [items, setItems] = React.useState<FileUploadItem[]>([]);\n  const [errors, setErrors] = React.useState<string[]>([]);\n  const [dragState, setDragState] = React.useState<\"idle\" | \"drag-over\" | \"invalid-drop\">(\"idle\");\n  const dragDepthRef = React.useRef(0);\n\n  const baseId = React.useId();\n  const hintId = `${baseId}-hint`;\n  const errorId = `${baseId}-errors`;\n\n  const updateItem = React.useCallback(\n    (itemId: string, updater: (item: FileUploadItem) => FileUploadItem) => {\n      setItems((current) => current.map((item) => (item.id === itemId ? updater(item) : item)));\n    },\n    [],\n  );\n\n  const removeItem = React.useCallback((itemId: string) => {\n    const controller = uploadControllersRef.current.get(itemId);\n    controller?.abort();\n    uploadControllersRef.current.delete(itemId);\n    setItems((current) => current.filter((item) => item.id !== itemId));\n  }, []);\n\n  const beginUpload = React.useCallback(\n    (item: FileUploadItem) => {\n      if (!onUpload) {\n        return;\n      }\n\n      const controller = new AbortController();\n      uploadControllersRef.current.set(item.id, controller);\n\n      updateItem(item.id, (current) => ({\n        ...current,\n        status: \"uploading\",\n        progress: 0,\n        error: undefined,\n      }));\n\n      void onUpload({\n        file: item.file,\n        signal: controller.signal,\n        reportProgress: (value) => {\n          updateItem(item.id, (current) => {\n            if (current.status !== \"uploading\") {\n              return current;\n            }\n\n            return {\n              ...current,\n              progress: clamp(value, 0, 100),\n            };\n          });\n        },\n      })\n        .then(() => {\n          if (controller.signal.aborted) {\n            return;\n          }\n\n          updateItem(item.id, (current) => ({\n            ...current,\n            status: \"success\",\n            progress: 100,\n            error: undefined,\n          }));\n        })\n        .catch((uploadError) => {\n          if (controller.signal.aborted) {\n            return;\n          }\n\n          const message =\n            uploadError instanceof Error && uploadError.message\n              ? uploadError.message\n              : \"Upload failed.\";\n\n          updateItem(item.id, (current) => ({\n            ...current,\n            status: \"error\",\n            error: message,\n          }));\n        })\n        .finally(() => {\n          uploadControllersRef.current.delete(item.id);\n        });\n    },\n    [onUpload, updateItem],\n  );\n\n  const queueFiles = React.useCallback(\n    (queuedFiles: File[] | FileList) => {\n      const incoming = Array.isArray(queuedFiles) ? queuedFiles : Array.from(queuedFiles);\n      if (incoming.length === 0) {\n        return;\n      }\n\n      if (!multiple) {\n        uploadControllersRef.current.forEach((controller) => controller.abort());\n        uploadControllersRef.current.clear();\n      }\n\n      const nextErrors: string[] = [];\n      const acceptedItems: FileUploadItem[] = [];\n      const nextItems = multiple ? [...items] : [];\n\n      const effectiveMaxFiles = multiple ? (maxFiles ?? Number.POSITIVE_INFINITY) : 1;\n      let candidates = incoming;\n\n      if (!multiple && incoming.length > 1) {\n        nextErrors.push(\"Only one file can be selected at a time.\");\n        candidates = [incoming[0]];\n      }\n\n      const availableSlots = Math.max(0, effectiveMaxFiles - nextItems.length);\n      if (availableSlots < candidates.length) {\n        nextErrors.push(\n          `You can upload up to ${effectiveMaxFiles} file${effectiveMaxFiles === 1 ? \"\" : \"s\"}.`,\n        );\n        candidates = candidates.slice(0, availableSlots);\n      }\n\n      for (const file of candidates) {\n        if (!matchesAccept(file, accept)) {\n          nextErrors.push(`${file.name} has an unsupported file type.`);\n          continue;\n        }\n\n        if (maxFileSize != null && file.size > maxFileSize) {\n          nextErrors.push(`${file.name} exceeds the ${formatBytes(maxFileSize)} size limit.`);\n          continue;\n        }\n\n        const customError = validateFile?.(file);\n        if (customError) {\n          nextErrors.push(customError);\n          continue;\n        }\n\n        const item = createFileItem(file);\n        acceptedItems.push(item);\n        nextItems.push(item);\n      }\n\n      setItems(nextItems);\n      setErrors(nextErrors);\n      setDragState(nextErrors.length > 0 ? \"invalid-drop\" : \"idle\");\n\n      if (onUpload) {\n        acceptedItems.forEach((item) => beginUpload(item));\n      }\n    },\n    [accept, beginUpload, items, maxFileSize, maxFiles, multiple, onUpload, validateFile],\n  );\n\n  const openPicker = React.useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    inputRef.current?.click();\n  }, [disabled]);\n\n  const handleInputChange = React.useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      queueFiles(event.target.files ?? []);\n      event.target.value = \"\";\n    },\n    [queueFiles],\n  );\n\n  const handleDragEnter = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (disabled) {\n        return;\n      }\n\n      if (!hasFiles(event)) {\n        setDragState(\"invalid-drop\");\n        return;\n      }\n\n      dragDepthRef.current += 1;\n      setDragState(\"drag-over\");\n    },\n    [disabled],\n  );\n\n  const handleDragOver = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      if (disabled) {\n        return;\n      }\n\n      if (event.dataTransfer) {\n        event.dataTransfer.dropEffect = \"copy\";\n      }\n\n      if (!hasFiles(event)) {\n        setDragState(\"invalid-drop\");\n      }\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = React.useCallback((event: React.DragEvent<HTMLDivElement>) => {\n    event.preventDefault();\n\n    dragDepthRef.current = Math.max(0, dragDepthRef.current - 1);\n    if (dragDepthRef.current === 0) {\n      setDragState(\"idle\");\n    }\n  }, []);\n\n  const handleDrop = React.useCallback(\n    (event: React.DragEvent<HTMLDivElement>) => {\n      event.preventDefault();\n      dragDepthRef.current = 0;\n\n      if (disabled) {\n        return;\n      }\n\n      if (!hasFiles(event)) {\n        setErrors([\"Only files can be dropped here.\"]);\n        setDragState(\"invalid-drop\");\n        return;\n      }\n\n      queueFiles(event.dataTransfer.files);\n    },\n    [disabled, queueFiles],\n  );\n\n  React.useEffect(() => {\n    onItemsChange?.(items);\n  }, [items, onItemsChange]);\n\n  React.useEffect(\n    () => () => {\n      uploadControllersRef.current.forEach((controller) => controller.abort());\n      uploadControllersRef.current.clear();\n    },\n    [],\n  );\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      <input\n        ref={inputRef}\n        type=\"file\"\n        accept={accept}\n        multiple={multiple}\n        disabled={disabled}\n        data-slot=\"file-upload-input\"\n        className=\"hidden\"\n        onChange={handleInputChange}\n        tabIndex={-1}\n      />\n\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-drag-state={dragState}\n        role=\"button\"\n        tabIndex={disabled ? -1 : 0}\n        aria-label={dropzoneAriaLabel}\n        aria-disabled={disabled || undefined}\n        aria-describedby={errors.length > 0 ? `${hintId} ${errorId}` : hintId}\n        className={cn(\n          \"flex cursor-pointer flex-col items-center justify-center gap-2 rounded-12 border-2 border-dashed px-5 py-8 text-center outline-none transition-colors focus-visible:ring-3 focus-visible:ring-focus\",\n          \"data-[drag-state=idle]:border-primary-border data-[drag-state=idle]:bg-secondary-bg/25\",\n          \"data-[drag-state=drag-over]:border-primary-invert-border data-[drag-state=drag-over]:bg-primary-bg\",\n          \"data-[drag-state=invalid-drop]:border-danger-border data-[drag-state=invalid-drop]:bg-danger-bg/35\",\n          disabled && \"cursor-not-allowed opacity-60\",\n        )}\n        onClick={openPicker}\n        onKeyDown={(event) => {\n          if (event.key === \"Enter\" || event.key === \" \") {\n            event.preventDefault();\n            openPicker();\n          }\n        }}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <UploadCloud className=\"size-8 text-muted-txt\" aria-hidden=\"true\" />\n        <p className=\"font-medium text-sm text-primary-txt\">Drag files here or click to browse</p>\n        <p id={hintId} className=\"text-muted-txt text-xs\">\n          {multiple ? \"Supports multiple files.\" : \"Supports one file.\"}\n          {accept ? ` Accepted: ${accept}.` : \"\"}\n          {maxFileSize ? ` Max file size: ${formatBytes(maxFileSize)}.` : \"\"}\n        </p>\n      </div>\n\n      {errors.length > 0 ? (\n        <ul id={errorId} role=\"alert\" className=\"space-y-1 text-danger-txt text-xs\">\n          {errors.map((message, index) => (\n            <li key={`${message}-${index}`} className=\"flex items-start gap-1.5\">\n              <CircleAlert className=\"mt-0.5 size-3.5 shrink-0\" aria-hidden=\"true\" />\n              <span>{message}</span>\n            </li>\n          ))}\n        </ul>\n      ) : null}\n\n      {items.length > 0 ? (\n        <ul data-slot=\"file-upload-list\" className=\"space-y-2\" aria-live=\"polite\">\n          {items.map((item) => {\n            const showProgress = item.status === \"uploading\" || item.status === \"success\";\n            const progressVariant = item.status === \"error\" ? \"destructive\" : \"default\";\n\n            return (\n              <li\n                key={item.id}\n                data-slot=\"file-upload-item\"\n                data-state={item.status}\n                className=\"rounded-12 border border-primary-border bg-secondary-bg/20 px-3 py-2\"\n              >\n                <div className=\"flex items-start gap-2.5\">\n                  <div className=\"mt-0.5 shrink-0 text-muted-txt\" aria-hidden=\"true\">\n                    {item.status === \"success\" ? (\n                      <CheckCircle2 className=\"size-4 text-success-txt\" />\n                    ) : item.status === \"error\" ? (\n                      <CircleAlert className=\"size-4 text-danger-txt\" />\n                    ) : item.status === \"uploading\" ? (\n                      <Loader2 className=\"size-4 animate-spin\" />\n                    ) : (\n                      <FileIcon className=\"size-4\" />\n                    )}\n                  </div>\n\n                  <div className=\"min-w-0 flex-1\">\n                    <div className=\"flex items-center justify-between gap-3\">\n                      <p className=\"truncate font-medium text-sm text-primary-txt\">\n                        {item.file.name}\n                      </p>\n                      <p className=\"shrink-0 text-muted-txt text-xs\">\n                        {formatBytes(item.file.size)}\n                      </p>\n                    </div>\n                    <p className=\"mt-0.5 text-muted-txt text-xs\">{getStatusLabel(item)}</p>\n                    {showProgress ? (\n                      <Progress\n                        className=\"mt-2\"\n                        value={item.status === \"success\" ? 100 : item.progress}\n                        variant={progressVariant}\n                        aria-label={`Upload progress for ${item.file.name}`}\n                      />\n                    ) : null}\n                  </div>\n\n                  <Button\n                    type=\"button\"\n                    variant={item.status === \"uploading\" ? \"destructive-ghost\" : \"ghost\"}\n                    size=\"icon-sm\"\n                    shape=\"square\"\n                    aria-label={\n                      item.status === \"uploading\"\n                        ? `Cancel upload for ${item.file.name}`\n                        : `Remove ${item.file.name}`\n                    }\n                    onClick={() => removeItem(item.id)}\n                  >\n                    <XIcon />\n                  </Button>\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      ) : null}\n    </div>\n  );\n}\n\nexport {\n  FileUpload,\n  type FileUploadHandler,\n  type FileUploadItem,\n  type FileUploadProps,\n  type FileUploadStatus,\n};\n"],"mappings":"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"}

package/dist/primitives/Form/index.cjs

@@ -4,8 +4,8 @@ const require_cn = require("../../cn.cjs");
 const require_primitives_Field_index = require("../Field/index.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 let react_hook_form = require("react-hook-form");
 //#region src/primitives/Form/Form.tsx
 /** Root provider that shares one react-hook-form instance with all nested form pieces. */

package/dist/primitives/Form/index.d.cts

@@ -1,2 +1,2 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index27.cjs";
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index29.cjs";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/primitives/Form/index.d.ts

@@ -1,2 +1,2 @@
-import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index27.js";
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index29.js";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/primitives/Form/index.js

@@ -1,8 +1,8 @@
 import { t as cn } from "../../cn.js";
 import { Field, FieldDescription, FieldError, FieldLabel } from "../Field/index.js";
 import * as React from "react";
-import { Slot } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { Slot } from "radix-ui";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 //#region src/primitives/Form/Form.tsx
 /** Root provider that shares one react-hook-form instance with all nested form pieces. */

package/dist/primitives/Heading/index.cjs

@@ -1,8 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/primitives/Heading/Heading.tsx
-const headingVariants = (0, require("class-variance-authority").cva)("font-heading text-balance", {
+const headingVariants = (0, class_variance_authority.cva)("font-heading text-balance", {
 	variants: {
 		size: {
 			"1": "text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal",

package/dist/primitives/Heading/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent\",\n      false: \"text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,mBAAA,qCAAA,EAAA,KAAsB,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--theme-brand-700)] to-[var(--theme-brand-500-primary)] bg-clip-text text-transparent\",\n      false: \"text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;;AAUA,MAAM,mBAAA,GAAA,yBAAA,KAAsB,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Heading/index.d.cts

@@ -1,2 +1,2 @@
-import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index28.cjs";
+import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index30.cjs";
 export { Heading, HeadingProps, headingVariants };

package/dist/primitives/Heading/index.d.ts

@@ -1,2 +1,2 @@
-import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index28.js";
+import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index30.js";
 export { Heading, HeadingProps, headingVariants };

package/dist/primitives/Heading/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+import { jsx } from "react/jsx-runtime";
 //#region src/primitives/Heading/Heading.tsx
 const headingVariants = cva("font-heading text-balance", {
 	variants: {

package/dist/primitives/HoverCard/index.cjs

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
-let radix_ui = require("radix-ui");
 let react_jsx_runtime = require("react/jsx-runtime");
+let radix_ui = require("radix-ui");
 //#region src/primitives/HoverCard/HoverCard.tsx
 /** Root that reveals a floating card when the user hovers (or focuses) the trigger. */
 function HoverCard({ ...props }) {

package/dist/primitives/HoverCard/index.d.cts

@@ -1,2 +1,2 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index29.cjs";
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index31.cjs";
 export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/HoverCard/index.d.ts

@@ -1,2 +1,2 @@
-import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index29.js";
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index31.js";
 export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/HoverCard/index.js

@@ -1,6 +1,6 @@
 import { t as cn } from "../../cn.js";
-import { HoverCard as HoverCard$1 } from "radix-ui";
 import { jsx } from "react/jsx-runtime";
+import { HoverCard as HoverCard$1 } from "radix-ui";
 //#region src/primitives/HoverCard/HoverCard.tsx
 /** Root that reveals a floating card when the user hovers (or focuses) the trigger. */
 function HoverCard({ ...props }) {

package/dist/primitives/Icon/index.d.cts

@@ -1,2 +1,2 @@
-import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index30.cjs";
+import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index32.cjs";
 export { ICON_NAMES, Icon, IconName, IconProps };

package/dist/primitives/Icon/index.d.ts

@@ -1,2 +1,2 @@
-import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index30.js";
+import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index32.js";
 export { ICON_NAMES, Icon, IconName, IconProps };

package/dist/primitives/InfoBanner/index.cjs

@@ -1,10 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_cn = require("../../cn.cjs");
+const require_Icon = require("../../Icon.cjs");
+let class_variance_authority = require("class-variance-authority");
 let react = require("react");
-let lucide_react = require("lucide-react");
 let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
 //#region src/primitives/InfoBanner/InfoBanner.tsx
-const infoBannerVariants = (0, require("class-variance-authority").cva)("flex w-full gap-4 rounded-12 px-4 py-3", {
+const infoBannerVariants = (0, class_variance_authority.cva)("flex w-full gap-4 rounded-12 px-4 py-3", {
 	variants: { variant: {
 		info: "bg-info-bg text-info-txt",
 		success: "bg-success-bg text-success-txt",
@@ -63,7 +65,8 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 				"aria-label": "Dismiss",
 				onClick: handleDismiss,
 				className: "-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+					as: lucide_react.X,
 					"data-slot": "info-banner-dismiss-icon",
 					className: "size-4",
 					"aria-hidden": "true"

package/dist/primitives/InfoBanner/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["Info","CircleCheck","TriangleAlert","CircleAlert","cn","X"],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAWA,MAAM,sBAAA,qCAAA,EAAA,KAAyB,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAMA,aAAAA;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACT,OAAOC,aAAAA;CACP,SAASH,aAAAA;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAWI,WAAAA,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}
+{"version":3,"file":"index.cjs","names":["Info","CircleCheck","TriangleAlert","CircleAlert","cn","Icon","X"],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { Icon } from \"@/primitives/Icon\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner (Figma \"Toast Messages\" on\n// the Alert page, node 3962:11659): status-bg surface, rounded-12, px-4 py-3,\n// heading-5 title in the status text color, 14/20 medium secondary description.\n// Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-4 rounded-12 px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-info-bg text-info-txt\",\n      success: \"bg-success-bg text-success-txt\",\n      warning: \"bg-warning-bg text-warning-txt\",\n      error: \"bg-danger-bg text-danger-txt\",\n      neutral: \"bg-muted-bg text-primary-txt\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Top-aligned like Alert; the icon aligner below sits it on the first line.\n        \"items-start\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0 pt-0.5\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <span\n          data-slot=\"info-banner-title\"\n          className=\"font-heading text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\"\n        >\n          {title}\n        </span>\n        {description != null && (\n          <span\n            data-slot=\"info-banner-description\"\n            className=\"text-sm leading-5 font-medium text-secondary-txt\"\n          >\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5\"\n        >\n          <Icon as={X} data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;;;AAYA,MAAM,sBAAA,GAAA,yBAAA,KAAyB,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAMA,aAAAA;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACT,OAAOC,aAAAA;CACP,SAASH,aAAAA;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAWI,WAAAA,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eACA,SACF;EACA,GAAI;YAVN;GAaE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAkB,eAAY;cACxE,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,GACL,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,aAAU;KACV,WAAU;eAET;IACG,CAAA,CAEL;;GAEJ,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,MAAD;KAAM,IAAIC,aAAAA;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACnF,CAAA;EAEP;;AAET"}

package/dist/primitives/InfoBanner/index.d.cts

@@ -1,2 +1,2 @@
-import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index31.cjs";
+import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index33.cjs";
 export { InfoBanner, InfoBannerProps, infoBannerVariants };

package/dist/primitives/InfoBanner/index.d.ts

@@ -1,2 +1,2 @@
-import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index31.js";
+import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index33.js";
 export { InfoBanner, InfoBannerProps, infoBannerVariants };

package/dist/primitives/InfoBanner/index.js

@@ -1,8 +1,9 @@
 import { t as cn } from "../../cn.js";
+import { t as Icon } from "../../Icon.js";
+import { cva } from "class-variance-authority";
 import { useState } from "react";
-import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { cva } from "class-variance-authority";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
 //#region src/primitives/InfoBanner/InfoBanner.tsx
 const infoBannerVariants = cva("flex w-full gap-4 rounded-12 px-4 py-3", {
 	variants: { variant: {
@@ -63,7 +64,8 @@ function InfoBanner({ title, description, variant, icon, dismissible = true, vis
 				"aria-label": "Dismiss",
 				onClick: handleDismiss,
 				className: "-mr-2 flex size-8 shrink-0 items-center justify-center rounded-8 text-primary-txt transition-colors hover:bg-primary-txt/5",
-				children: /* @__PURE__ */ jsx(X, {
+				children: /* @__PURE__ */ jsx(Icon, {
+					as: X,
 					"data-slot": "info-banner-dismiss-icon",
 					className: "size-4",
 					"aria-hidden": "true"