@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/ui/file-upload.js

@@ -1,269 +1,245 @@
 "use client";
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import * as r from "react";
-import { IconPaperclip as Z, IconCheck as q, IconUpload as G } from "@tabler/icons-react";
-import { cn as h } from "./lib/utils.js";
-import { springs as w, tweens as N } from "./lib/motion.js";
-import { Spinner as B } from "./spinner.js";
-import { Icon as I } from "./icon.js";
-import { m as c, A as M } from "../_chunks/framer.js";
-const H = 10 * 1024 * 1024;
-function J(a, l) {
-  return l.split(",").map((s) => s.trim()).some((s) => s.startsWith(".") ? a.name.toLowerCase().endsWith(s.toLowerCase()) : s.endsWith("/*") ? a.type.startsWith(s.slice(0, s.indexOf("/") + 1)) : a.type === s);
+import { a as e, c as t } from "../_chunks/framer.js";
+import { durations as n, springs as r, tweens as i } from "./lib/motion.js";
+import { cn as a } from "./lib/utils.js";
+import { Spinner as o } from "./spinner.js";
+import { Icon as s } from "./icon.js";
+import * as c from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { IconCheck as d, IconPaperclip as f, IconUpload as p } from "@tabler/icons-react";
+//#region src/ui/file-upload.tsx
+var m = 10 * 1024 * 1024;
+function h(e, t) {
+	return t.split(",").map((e) => e.trim()).some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t.toLowerCase()) : t.endsWith("/*") ? e.type.startsWith(t.slice(0, t.indexOf("/") + 1)) : e.type === t);
 }
-function U(a) {
-  return a < 1024 ? `${a} B` : a < 1024 * 1024 ? `${(a / 1024).toFixed(1)} KB` : `${(a / (1024 * 1024)).toFixed(1)} MB`;
+function g(e) {
+	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-const Q = r.forwardRef(
-  ({
-    accept: a,
-    maxSize: l = H,
-    multiple: s = !1,
-    uploading: o = !1,
-    progress: x = 0,
-    onFiles: A,
-    error: F,
-    compact: W = !1,
-    disabled: n = !1,
-    className: E,
-    label: v,
-    sublabel: j,
-    ...L
-  }, R) => {
-    const y = r.useRef(null), [b, f] = r.useState(!1), [K, d] = r.useState(
-      null
-    ), g = r.useRef(!1), k = r.useRef(!1), u = F || K, C = r.useCallback(() => {
-      n || o || y.current?.click();
-    }, [n, o]), m = r.useCallback(
-      (e) => {
-        d(null);
-        for (const i of e) {
-          if (i.size > l) {
-            d(
-              `File "${i.name}" exceeds the maximum size of ${U(l)}`
-            );
-            return;
-          }
-          if (a && !J(i, a)) {
-            d(
-              `File "${i.name}" is not an accepted file type`
-            );
-            return;
-          }
-        }
-        A(e);
-      },
-      [l, a, A]
-    ), $ = r.useCallback(
-      (e) => {
-        k.current = !0;
-        const i = e.target.files;
-        !i || i.length === 0 || (m(Array.from(i)), e.target.value = "");
-      },
-      [m]
-    ), P = r.useCallback(() => {
-      g.current = !0, k.current = !1;
-    }, []), z = r.useCallback(() => {
-      g.current && !k.current && a && d("File type is not accepted"), g.current = !1;
-    }, [a]), S = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), !n && !o && f(!0);
-      },
-      [n, o]
-    ), T = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), !n && !o && f(!0);
-      },
-      [n, o]
-    ), _ = r.useCallback(
-      (e) => {
-        e.preventDefault(), e.stopPropagation(), f(!1);
-      },
-      []
-    ), V = r.useCallback(
-      (e) => {
-        if (e.preventDefault(), e.stopPropagation(), f(!1), n || o) return;
-        const i = e.dataTransfer.files;
-        !i || i.length === 0 || m(Array.from(i));
-      },
-      [n, o, m]
-    ), O = v ?? "Drop files here or click to browse", X = j ?? `Max file size: ${U(l)}`, D = r.useId();
-    return W ? /* @__PURE__ */ p("div", { ref: R, className: h("inline-flex flex-col", E), ...L, children: [
-      /* @__PURE__ */ p(
-        "button",
-        {
-          type: "button",
-          onClick: C,
-          disabled: n,
-          className: h(
-            "inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02",
-            "text-ds-sm font-medium",
-            "border border-surface-border-strong",
-            "bg-surface-raised-hover text-surface-fg-muted",
-            "hover:bg-accent-2",
-            "disabled:opacity-action-disabled disabled:cursor-not-allowed",
-            "transition-colors"
-          ),
-          children: [
-            o ? /* @__PURE__ */ t(B, { size: "sm" }) : /* @__PURE__ */ t(I, { icon: Z, size: "sm" }),
-            v ?? "Attach files"
-          ]
-        }
-      ),
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: y,
-          id: D,
-          type: "file",
-          className: "sr-only",
-          style: { visibility: "hidden" },
-          "aria-hidden": "true",
-          "aria-label": v ?? "Attach files",
-          accept: a,
-          multiple: s,
-          disabled: n,
-          onChange: $,
-          onClick: P,
-          onFocus: z,
-          tabIndex: -1
-        }
-      ),
-      u && /* @__PURE__ */ t(
-        "p",
-        {
-          role: "alert",
-          "aria-live": "polite",
-          className: "mt-ds-02 text-ds-xs text-error-11",
-          children: u
-        }
-      )
-    ] }) : /* @__PURE__ */ p(
-      "div",
-      {
-        ref: R,
-        ...L,
-        role: "presentation",
-        className: h("flex flex-col", E),
-        "data-drag-active": b ? "true" : void 0,
-        onDragEnter: S,
-        onDragOver: T,
-        onDragLeave: _,
-        onDrop: V,
-        children: [
-          /* @__PURE__ */ p(
-            c.div,
-            {
-              role: "button",
-              tabIndex: 0,
-              "aria-disabled": n || void 0,
-              onClick: n ? void 0 : C,
-              onKeyDown: (e) => {
-                !n && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C());
-              },
-              className: h(
-                "flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg",
-                "border-2 border-dashed p-ds-08",
-                "cursor-pointer",
-                "border-surface-border-strong bg-surface-raised-hover",
-                b && "border-accent-7 bg-accent-2",
-                n && "opacity-action-disabled cursor-not-allowed"
-              ),
-              animate: {
-                scale: b ? 1.02 : 1
-              },
-              transition: w.snappy,
-              children: [
-                /* @__PURE__ */ t(M, { mode: "wait", children: o ? /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: { opacity: 1, scale: 1 },
-                    exit: { opacity: 0, scale: 0.5 },
-                    transition: N.fade,
-                    children: /* @__PURE__ */ t(B, { size: "md" })
-                  },
-                  "spinner"
-                ) : x === 100 && !F ? /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0, scale: 0.5 },
-                    animate: { opacity: 1, scale: 1 },
-                    exit: { opacity: 0, scale: 0.5 },
-                    transition: w.bouncy,
-                    children: /* @__PURE__ */ t(I, { icon: q, size: "2xl", className: "text-success-11" })
-                  },
-                  "complete"
-                ) : /* @__PURE__ */ t(
-                  c.div,
-                  {
-                    initial: { opacity: 0 },
-                    animate: { opacity: 1 },
-                    exit: { opacity: 0 },
-                    transition: N.fade,
-                    children: /* @__PURE__ */ t(I, { icon: G, size: "2xl", className: "text-surface-fg-subtle" })
-                  },
-                  "upload"
-                ) }),
-                /* @__PURE__ */ t("span", { id: D + "-label", className: "text-ds-sm text-surface-fg-muted", children: O }),
-                o ? /* @__PURE__ */ t("div", { className: "w-full max-w-xs", children: /* @__PURE__ */ t(
-                  "div",
-                  {
-                    role: "progressbar",
-                    "aria-valuenow": x,
-                    "aria-valuemin": 0,
-                    "aria-valuemax": 100,
-                    className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
-                    children: /* @__PURE__ */ t(
-                      c.div,
-                      {
-                        className: "h-full rounded-ds-full bg-accent-9",
-                        animate: { width: `${x}%` },
-                        transition: w.smooth
-                      }
-                    )
-                  }
-                ) }) : /* @__PURE__ */ t("span", { className: "text-ds-xs text-surface-fg-subtle", children: X })
-              ]
-            }
-          ),
-          /* @__PURE__ */ t(
-            "input",
-            {
-              ref: y,
-              id: D,
-              type: "file",
-              className: "sr-only",
-              style: { visibility: "hidden" },
-              "aria-hidden": "true",
-              "aria-label": O,
-              accept: a,
-              multiple: s,
-              disabled: n,
-              onChange: $,
-              onClick: P,
-              onFocus: z,
-              tabIndex: -1
-            }
-          ),
-          /* @__PURE__ */ t(M, { children: u && /* @__PURE__ */ t(
-            c.p,
-            {
-              role: "alert",
-              className: "mt-ds-02 text-ds-xs text-error-11",
-              initial: { opacity: 0, x: 0 },
-              animate: { opacity: 1, x: [0, -4, 4, -4, 4, 0] },
-              exit: { opacity: 0 },
-              transition: { opacity: N.fade, x: { type: "tween", duration: 0.4, ease: "easeOut" } },
-              children: u
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-Q.displayName = "FileUpload";
-export {
-  Q as FileUpload
-};
+var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading: b = !1, progress: x = 0, onFiles: S, error: C, compact: w = !1, disabled: T = !1, className: E, label: D, sublabel: O, ...k }, A) => {
+	let j = c.useRef(null), [M, N] = c.useState(!1), [P, F] = c.useState(null), I = c.useRef(!1), L = c.useRef(!1), R = C || P, z = c.useCallback(() => {
+		T || b || j.current?.click();
+	}, [T, b]), B = c.useCallback((e) => {
+		F(null);
+		for (let t of e) {
+			if (t.size > v) {
+				F(`File "${t.name}" exceeds the maximum size of ${g(v)}`);
+				return;
+			}
+			if (_ && !h(t, _)) {
+				F(`File "${t.name}" is not an accepted file type`);
+				return;
+			}
+		}
+		S(e);
+	}, [
+		v,
+		_,
+		S
+	]), V = c.useCallback((e) => {
+		L.current = !0;
+		let t = e.target.files;
+		!t || t.length === 0 || (B(Array.from(t)), e.target.value = "");
+	}, [B]), H = c.useCallback(() => {
+		I.current = !0, L.current = !1;
+	}, []), U = c.useCallback(() => {
+		I.current && !L.current && _ && F("File type is not accepted"), I.current = !1;
+	}, [_]), W = c.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), !T && !b && N(!0);
+	}, [T, b]), G = c.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), !T && !b && N(!0);
+	}, [T, b]), K = c.useCallback((e) => {
+		e.preventDefault(), e.stopPropagation(), N(!1);
+	}, []), q = c.useCallback((e) => {
+		if (e.preventDefault(), e.stopPropagation(), N(!1), T || b) return;
+		let t = e.dataTransfer.files;
+		!t || t.length === 0 || B(Array.from(t));
+	}, [
+		T,
+		b,
+		B
+	]), J = D ?? "Drop files here or click to browse", Y = O ?? `Max file size: ${g(v)}`, X = c.useId();
+	return w ? /* @__PURE__ */ u("div", {
+		ref: A,
+		className: a("inline-flex flex-col", E),
+		...k,
+		children: [
+			/* @__PURE__ */ u("button", {
+				type: "button",
+				onClick: z,
+				disabled: T,
+				className: a("inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+				children: [b ? /* @__PURE__ */ l(o, { size: "sm" }) : /* @__PURE__ */ l(s, {
+					icon: f,
+					size: "sm"
+				}), D ?? "Attach files"]
+			}),
+			/* @__PURE__ */ l("input", {
+				ref: j,
+				id: X,
+				type: "file",
+				className: "sr-only",
+				style: { visibility: "hidden" },
+				"aria-hidden": "true",
+				"aria-label": D ?? "Attach files",
+				accept: _,
+				multiple: y,
+				disabled: T,
+				onChange: V,
+				onClick: H,
+				onFocus: U,
+				tabIndex: -1
+			}),
+			R && /* @__PURE__ */ l("p", {
+				role: "alert",
+				"aria-live": "polite",
+				className: "mt-ds-02 text-ds-xs text-error-11",
+				children: R
+			})
+		]
+	}) : /* @__PURE__ */ u("div", {
+		ref: A,
+		...k,
+		role: "presentation",
+		className: a("flex flex-col", E),
+		"data-drag-active": M ? "true" : void 0,
+		onDragEnter: W,
+		onDragOver: G,
+		onDragLeave: K,
+		onDrop: q,
+		children: [
+			/* @__PURE__ */ u(e.div, {
+				role: "button",
+				tabIndex: 0,
+				"aria-disabled": T || void 0,
+				onClick: T ? void 0 : z,
+				onKeyDown: (e) => {
+					!T && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
+				},
+				className: a("flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", M && "border-accent-7 bg-accent-2", T && "opacity-action-disabled cursor-not-allowed"),
+				animate: { scale: M ? 1.02 : 1 },
+				transition: r.snappy,
+				children: [
+					/* @__PURE__ */ l(t, {
+						mode: "wait",
+						children: b ? /* @__PURE__ */ l(e.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							transition: i.fade,
+							children: /* @__PURE__ */ l(o, { size: "md" })
+						}, "spinner") : x === 100 && !C ? /* @__PURE__ */ l(e.div, {
+							initial: {
+								opacity: 0,
+								scale: .5
+							},
+							animate: {
+								opacity: 1,
+								scale: 1
+							},
+							exit: {
+								opacity: 0,
+								scale: .5
+							},
+							transition: r.bouncy,
+							children: /* @__PURE__ */ l(s, {
+								icon: d,
+								size: "2xl",
+								className: "text-success-11"
+							})
+						}, "complete") : /* @__PURE__ */ l(e.div, {
+							initial: { opacity: 0 },
+							animate: { opacity: 1 },
+							exit: { opacity: 0 },
+							transition: i.fade,
+							children: /* @__PURE__ */ l(s, {
+								icon: p,
+								size: "2xl",
+								className: "text-surface-fg-subtle"
+							})
+						}, "upload")
+					}),
+					/* @__PURE__ */ l("span", {
+						id: X + "-label",
+						className: "text-ds-sm text-surface-fg-muted",
+						children: J
+					}),
+					b ? /* @__PURE__ */ l("div", {
+						className: "w-full max-w-xs",
+						children: /* @__PURE__ */ l("div", {
+							role: "progressbar",
+							"aria-valuenow": x,
+							"aria-valuemin": 0,
+							"aria-valuemax": 100,
+							className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
+							children: /* @__PURE__ */ l(e.div, {
+								className: "h-full rounded-ds-full bg-accent-9",
+								animate: { width: `${x}%` },
+								transition: r.smooth
+							})
+						})
+					}) : /* @__PURE__ */ l("span", {
+						className: "text-ds-xs text-surface-fg-subtle",
+						children: Y
+					})
+				]
+			}),
+			/* @__PURE__ */ l("input", {
+				ref: j,
+				id: X,
+				type: "file",
+				className: "sr-only",
+				style: { visibility: "hidden" },
+				"aria-hidden": "true",
+				"aria-label": J,
+				accept: _,
+				multiple: y,
+				disabled: T,
+				onChange: V,
+				onClick: H,
+				onFocus: U,
+				tabIndex: -1
+			}),
+			/* @__PURE__ */ l(t, { children: R && /* @__PURE__ */ l(e.p, {
+				role: "alert",
+				className: "mt-ds-02 text-ds-xs text-error-11",
+				initial: {
+					opacity: 0,
+					x: 0
+				},
+				animate: {
+					opacity: 1,
+					x: [
+						0,
+						-4,
+						4,
+						-4,
+						4,
+						0
+					]
+				},
+				exit: { opacity: 0 },
+				transition: {
+					opacity: i.fade,
+					x: {
+						type: "tween",
+						duration: n.slow01,
+						ease: "easeOut"
+					}
+				},
+				children: R
+			}) })
+		]
+	});
+});
+_.displayName = "FileUpload";
+//#endregion
+export { _ as FileUpload };

package/dist/ui/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { IconUpload, IconPaperclip, IconCheck } from '@tabler/icons-react'\nimport { cn } from './lib/utils'\nimport { springs, tweens, durations } from './lib/motion'\nimport { Spinner } from './spinner'\nimport { Icon } from './icon'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-ds-full bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}

package/dist/ui/form.d.ts

@@ -4,6 +4,8 @@ export type FormHelperState = 'helper' | 'error' | 'warning' | 'success';
 interface FormFieldContextValue {
     state?: FormHelperState;
     helperTextId?: string;
+    /** Auto-generated id shared between Label (htmlFor) and the field input (id). */
+    inputId?: string;
     required?: boolean;
 }
 declare const FormFieldContext: React.Context<FormFieldContextValue>;
@@ -28,6 +30,12 @@ export interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {
      * Pass this to `useFormField()` consumers that need to set `aria-describedby`.
      */
     helperTextId?: string;
+    /**
+     * Custom ID for the field input element. If omitted, an auto-generated ID is used.
+     * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.
+     * Explicit `htmlFor` / `id` props on children always win.
+     */
+    inputId?: string;
     /** Current validation state — propagated to child `FormHelperText` via context */
     state?: FormHelperState;
     /** Whether the field is required — available to children via `useFormField()` */

package/dist/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAExE,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AACD,QAAA,MAAM,gBAAgB,sCAAiD,CAAA;AAEvE;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kFAAkF;IAClF,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAqBd,CAAA;AAMD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACrF,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AASD,QAAA,MAAM,cAAc,kGAoBnB,CAAA;AAGD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,IAAI,qBAAqB,CAEpD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAExE,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AACD,QAAA,MAAM,gBAAgB,sCAAiD,CAAA;AAEvE;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAsBd,CAAA;AAMD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACrF,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AASD,QAAA,MAAM,cAAc,kGAoBnB,CAAA;AAGD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,IAAI,qBAAqB,CAEpD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAA"}