@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-RYPK72YP.js

@@ -0,0 +1,395 @@
+"use client";
+import {
+  Progress
+} from "./chunk-HND6FAMX.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/file-upload/file-upload.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { X, Upload, FileIcon, CheckCircle2, AlertCircle } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function fileMatchesAccept(file, accept) {
+  if (!accept) return true;
+  const patterns = accept.split(",").map((p) => p.trim().toLowerCase()).filter(Boolean);
+  if (patterns.length === 0) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return patterns.some((pattern) => {
+    if (pattern.startsWith(".")) return name.endsWith(pattern);
+    if (pattern.endsWith("/*")) return type.startsWith(pattern.slice(0, -1));
+    return type === pattern;
+  });
+}
+function makeUploadFileId(file) {
+  return `${file.name}-${Date.now()}-${Math.random()}`;
+}
+function describeFileRejection(rejection) {
+  switch (rejection.reason) {
+    case "accept":
+      return `${rejection.file.name} is not an accepted file type.`;
+    case "maxSize":
+      return `${rejection.file.name} is too large.`;
+    case "maxFiles":
+      return `${rejection.file.name} was not added \u2014 the file limit was reached.`;
+    case "multiple":
+      return `${rejection.file.name} was not added \u2014 only one file is allowed.`;
+    default:
+      return `${rejection.file.name} was not added.`;
+  }
+}
+var FileUploadContext = createContext(null);
+function useFileUpload() {
+  const ctx = use(FileUploadContext);
+  if (!ctx) throw new Error("FileUpload subcomponents must be used inside <FileUpload>.");
+  return ctx;
+}
+var FileUpload = forwardRef(function FileUpload2({
+  files: filesProp,
+  onFilesChange,
+  onFilesRejected,
+  accept,
+  multiple = false,
+  maxSize,
+  maxFiles,
+  disabled = false,
+  className,
+  children,
+  ...props
+}, ref) {
+  const isControlled = filesProp !== void 0;
+  const [internalFiles, setInternalFiles] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const inputRef = useRef(null);
+  const inputId = useId();
+  const files = useMemo(
+    () => isControlled ? filesProp ?? [] : internalFiles,
+    [isControlled, filesProp, internalFiles]
+  );
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternalFiles(next);
+      onFilesChange?.(next);
+    },
+    [isControlled, onFilesChange]
+  );
+  const addFiles = useCallback(
+    (incoming) => {
+      const rejections = [];
+      let candidates = incoming;
+      if (!multiple && candidates.length > 1) {
+        rejections.push(
+          ...candidates.slice(1).map((file) => ({ file, reason: "multiple" }))
+        );
+        candidates = candidates.slice(0, 1);
+      }
+      const toAdd = [];
+      for (const f of candidates) {
+        if (!fileMatchesAccept(f, accept)) {
+          rejections.push({ file: f, reason: "accept" });
+          continue;
+        }
+        if (maxSize && f.size > maxSize) {
+          rejections.push({ file: f, reason: "maxSize" });
+          continue;
+        }
+        toAdd.push(f);
+      }
+      const next = [...files];
+      for (const f of toAdd) {
+        if (maxFiles && next.length >= maxFiles) {
+          rejections.push({ file: f, reason: "maxFiles" });
+          continue;
+        }
+        next.push({ id: makeUploadFileId(f), file: f });
+      }
+      commit(next);
+      if (rejections.length > 0) onFilesRejected?.(rejections);
+    },
+    [files, accept, multiple, maxSize, maxFiles, commit, onFilesRejected]
+  );
+  const removeFile = useCallback(
+    (id) => {
+      commit(files.filter((f) => f.id !== id));
+    },
+    [files, commit]
+  );
+  const openPicker = useCallback(() => {
+    inputRef.current?.click();
+  }, []);
+  const handleInputChange = useCallback(
+    (e) => {
+      if (e.target.files) {
+        addFiles(Array.from(e.target.files));
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const ctx = useMemo(
+    () => ({
+      files,
+      addFiles,
+      removeFile,
+      isDragging,
+      openPicker,
+      accept,
+      multiple,
+      maxSize,
+      maxFiles,
+      disabled,
+      inputId
+    }),
+    [
+      files,
+      addFiles,
+      removeFile,
+      isDragging,
+      openPicker,
+      accept,
+      multiple,
+      maxSize,
+      maxFiles,
+      disabled,
+      inputId
+    ]
+  );
+  return /* @__PURE__ */ jsx(FileUploadContext, { value: ctx, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "file-upload",
+      "data-disabled": disabled || void 0,
+      className: cn("flex flex-col gap-3", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            type: "file",
+            accept,
+            multiple,
+            disabled,
+            "aria-hidden": "true",
+            tabIndex: -1,
+            className: "sr-only",
+            onChange: handleInputChange
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onDragEnter: () => {
+              if (!disabled) setIsDragging(true);
+            },
+            onDragLeave: (e) => {
+              if (!e.currentTarget.contains(e.relatedTarget)) {
+                setIsDragging(false);
+              }
+            },
+            onDragOver: (e) => {
+              e.preventDefault();
+            },
+            onDrop: (e) => {
+              e.preventDefault();
+              setIsDragging(false);
+              if (!disabled && e.dataTransfer.files.length > 0) {
+                addFiles(Array.from(e.dataTransfer.files));
+              }
+            },
+            className: "contents",
+            children
+          }
+        )
+      ]
+    }
+  ) });
+});
+var FileUploadDropzone = forwardRef(
+  function FileUploadDropzone2({ className, children, browseLabel, onClick, onKeyDown, ...props }, ref) {
+    const { isDragging, disabled, openPicker } = useFileUpload();
+    const { t } = useLocale();
+    const resolvedBrowseLabel = browseLabel ?? t("ui.fileUpload.browseFiles");
+    const isSelfControl = children != null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: isSelfControl ? "button" : void 0,
+        tabIndex: isSelfControl && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
+        onClick: (e) => {
+          onClick?.(e);
+          if (disabled || e.defaultPrevented) return;
+          openPicker();
+        },
+        onKeyDown: (e) => {
+          onKeyDown?.(e);
+          if (!isSelfControl || disabled || e.defaultPrevented) return;
+          if (e.target !== e.currentTarget) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            openPicker();
+          }
+        },
+        "data-slot": "file-upload-dropzone",
+        "data-dragging": isDragging || void 0,
+        "data-disabled": disabled || void 0,
+        className: cn(
+          "flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-border-strong bg-surface-muted px-6 py-10",
+          "cursor-pointer transition-colors duration-fast",
+          "hover:border-ring hover:bg-accent/50",
+          "data-[dragging]:border-primary data-[dragging]:bg-primary/5",
+          "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+          "focus-ring-within focus-within:ring-offset-2 focus-within:ring-offset-background",
+          className
+        ),
+        ...props,
+        children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(Upload, { className: "size-5 text-muted-foreground", "aria-hidden": "true" }) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-body font-medium text-foreground", children: t("ui.fileUpload.dragDropHere") }),
+            /* @__PURE__ */ jsxs("p", { className: "text-meta text-muted-foreground", children: [
+              "or",
+              " ",
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  disabled,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    openPicker();
+                  },
+                  className: cn(
+                    // #399 — inline text trigger inside a sentence → `-text` rung.
+                    "text-primary-text underline-offset-2 hover:underline focus-ring rounded-sm",
+                    // #322 — the dropzone's `focus-ring-within` (above) is the
+                    // one compound indicator for this composite control; this
+                    // button delegates rather than painting a second one.
+                    "focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0",
+                    "disabled:pointer-events-none disabled:opacity-50"
+                  ),
+                  children: resolvedBrowseLabel
+                }
+              )
+            ] })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+var FileUploadList = forwardRef(
+  function FileUploadList2({ className, children, ...props }, ref) {
+    const { files } = useFileUpload();
+    const { t } = useLocale();
+    if (files.length === 0 && !children) return null;
+    return (
+      // `aria-live="polite"` alone is enough to announce additions/removals —
+      // it does NOT require `role="status"`. Adding that role here used to
+      // override the `<ul>`'s implicit `list` role, which strips the
+      // `listitem` role from every `<FileUploadItem>` (`<li>`) inside it and
+      // fails axe's `listitem` rule the moment the list is non-empty.
+      /* @__PURE__ */ jsx(
+        "ul",
+        {
+          ref,
+          "aria-live": "polite",
+          "aria-label": t("ui.fileUpload.selectedFiles"),
+          "data-slot": "file-upload-list",
+          className: cn("flex flex-col gap-2", className),
+          ...props,
+          children
+        }
+      )
+    );
+  }
+);
+var statusIcon = {
+  pending: /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-muted-foreground", "aria-hidden": "true" }),
+  uploading: /* @__PURE__ */ jsx(FileIcon, { className: "size-4 text-primary", "aria-hidden": "true" }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { className: "size-4 text-success", "aria-hidden": "true" }),
+  error: /* @__PURE__ */ jsx(AlertCircle, { className: "size-4 text-destructive", "aria-hidden": "true" })
+};
+var FileUploadItem = forwardRef(
+  function FileUploadItem2({ uploadFile, progress, status = "pending", errorMessage, className, ...props }, ref) {
+    const { removeFile, disabled } = useFileUpload();
+    const resolvedProgress = progress ?? uploadFile.progress;
+    const resolvedStatus = status ?? uploadFile.status ?? "pending";
+    const resolvedError = errorMessage ?? uploadFile.errorMessage;
+    const isUploading = resolvedStatus === "uploading";
+    const isError = resolvedStatus === "error";
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ref,
+        "data-slot": "file-upload-item",
+        "data-status": resolvedStatus,
+        className: cn(
+          "flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            statusIcon[resolvedStatus],
+            /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 truncate text-body text-foreground", children: uploadFile.file.name }),
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta tabular-nums text-muted-foreground", children: formatFileSize(uploadFile.file.size) }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                "aria-label": `Remove ${uploadFile.file.name}`,
+                disabled,
+                onClick: () => removeFile(uploadFile.id),
+                className: "shrink-0",
+                children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          isUploading && resolvedProgress !== void 0 && /* @__PURE__ */ jsx(Progress, { value: resolvedProgress, className: "h-1" }),
+          isError && resolvedError && // #124: this is running text (the rejection reason), so it takes the
+          // >=4.5:1 ink rung `text-destructive-text` — not the 3:1 mark rung the
+          // `statusIcon.error` glyph above correctly keeps.
+          /* @__PURE__ */ jsx("p", { role: "alert", className: "text-meta text-destructive-text", children: resolvedError })
+        ]
+      }
+    );
+  }
+);
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes}\xA0B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}\xA0KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)}\xA0MB`;
+}
+
+export {
+  describeFileRejection,
+  useFileUpload,
+  FileUpload,
+  FileUploadDropzone,
+  FileUploadList,
+  FileUploadItem
+};
+//# sourceMappingURL=chunk-RYPK72YP.js.map

package/dist/chunk-RYPK72YP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n// a2ui.exposed: no\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useCallback,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type DragEvent,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { X, Upload, FileIcon, CheckCircle2, AlertCircle } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { useLocale } from \"../locale-provider\";\nimport { Progress } from \"../progress\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport type FileUploadStatus = \"pending\" | \"uploading\" | \"success\" | \"error\";\n\nexport interface UploadFile {\n  /** Unique identifier for this file in the list. */\n  id: string;\n  /** The underlying File object. */\n  file: File;\n  /** Upload progress 0–100. */\n  progress?: number;\n  /** Upload lifecycle status. */\n  status?: FileUploadStatus;\n  /** Error message shown when status is \"error\". */\n  errorMessage?: string;\n}\n\n/** Why `addFiles` (picker OR drag-and-drop) declined a file. */\nexport type FileRejectionReason = \"accept\" | \"maxSize\" | \"maxFiles\" | \"multiple\";\n\nexport interface FileRejection {\n  file: File;\n  reason: FileRejectionReason;\n}\n\n/**\n * Match a file against an `<input accept>`-style pattern list (comma-separated\n * extensions like `.png`, exact MIME types like `image/png`, or wildcards like\n * `image/*`). Drag-and-drop delivers files straight from `DataTransfer` — the\n * browser only enforces `accept` for the native picker dialog, never for a\n * drop — so this has to be re-applied by hand for the drop path to actually\n * \"respect `accept`\".\n */\nfunction fileMatchesAccept(file: File, accept: string | undefined): boolean {\n  if (!accept) return true;\n  const patterns = accept\n    .split(\",\")\n    .map((p) => p.trim().toLowerCase())\n    .filter(Boolean);\n  if (patterns.length === 0) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return patterns.some((pattern) => {\n    if (pattern.startsWith(\".\")) return name.endsWith(pattern);\n    if (pattern.endsWith(\"/*\")) return type.startsWith(pattern.slice(0, -1));\n    return type === pattern;\n  });\n}\n\nfunction makeUploadFileId(file: File): string {\n  return `${file.name}-${Date.now()}-${Math.random()}`;\n}\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface FileUploadContextValue {\n  files: UploadFile[];\n  addFiles: (incoming: File[]) => void;\n  removeFile: (id: string) => void;\n  isDragging: boolean;\n  /** Programmatically open the native file picker. */\n  openPicker: () => void;\n  accept?: string;\n  multiple?: boolean;\n  maxSize?: number;\n  maxFiles?: number;\n  disabled?: boolean;\n  inputId: string;\n}\n\n/** Read `accept`/`multiple`/`maxSize`/`maxFiles` off a rejection for a default message. */\nexport function describeFileRejection(rejection: FileRejection): string {\n  switch (rejection.reason) {\n    case \"accept\":\n      return `${rejection.file.name} is not an accepted file type.`;\n    case \"maxSize\":\n      return `${rejection.file.name} is too large.`;\n    case \"maxFiles\":\n      return `${rejection.file.name} was not added — the file limit was reached.`;\n    case \"multiple\":\n      return `${rejection.file.name} was not added — only one file is allowed.`;\n    default:\n      return `${rejection.file.name} was not added.`;\n  }\n}\n\nconst FileUploadContext = createContext<FileUploadContextValue | null>(null);\n\nfunction useFileUpload(): FileUploadContextValue {\n  const ctx = use(FileUploadContext);\n  if (!ctx) throw new Error(\"FileUpload subcomponents must be used inside <FileUpload>.\");\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Provider (FileUpload root)\n// ---------------------------------------------------------------------------\n\nexport interface FileUploadProps extends HTMLAttributes<HTMLDivElement> {\n  /** Controlled file list. */\n  files?: UploadFile[];\n  /** Called when files are added or removed. */\n  onFilesChange?: (files: UploadFile[]) => void;\n  /**\n   * Called with the files a picker selection OR a drag-and-drop declined —\n   * wrong type (`accept`), over `maxSize`, over `maxFiles`, or extra files\n   * dropped when `multiple` is false — each with its {@link FileRejectionReason}.\n   */\n  onFilesRejected?: (rejections: FileRejection[]) => void;\n  /** Accepted MIME types / extensions (forwarded to <input accept>). */\n  accept?: string;\n  /** Allow multiple files at once. */\n  multiple?: boolean;\n  /** Maximum individual file size in bytes. */\n  maxSize?: number;\n  /** Maximum number of files in the list at once. */\n  maxFiles?: number;\n  /** Disable all interactions. */\n  disabled?: boolean;\n  children?: ReactNode;\n}\n\n/**\n * FileUpload — compound-component root (Provider).\n *\n * Holds the selected-file list + drag state and exposes\n * `{ files, addFiles, removeFile, isDragging }` via context.\n * **Presentational** — the app drives per-item `progress` + `status` on\n * `<FileUploadItem>`. No upload/network logic lives here.\n *\n * Controlled via `files`/`onFilesChange`; uncontrolled by default.\n */\nexport const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function FileUpload(\n  {\n    files: filesProp,\n    onFilesChange,\n    onFilesRejected,\n    accept,\n    multiple = false,\n    maxSize,\n    maxFiles,\n    disabled = false,\n    className,\n    children,\n    ...props\n  },\n  ref,\n) {\n  const isControlled = filesProp !== undefined;\n  const [internalFiles, setInternalFiles] = useState<UploadFile[]>([]);\n  const [isDragging, setIsDragging] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = useId();\n\n  const files = useMemo(\n    () => (isControlled ? (filesProp ?? []) : internalFiles),\n    [isControlled, filesProp, internalFiles],\n  );\n\n  const commit = useCallback(\n    (next: UploadFile[]) => {\n      if (!isControlled) setInternalFiles(next);\n      onFilesChange?.(next);\n    },\n    [isControlled, onFilesChange],\n  );\n\n  const addFiles = useCallback(\n    (incoming: File[]) => {\n      const rejections: FileRejection[] = [];\n\n      // A drop can deliver more files than the native picker ever would —\n      // `multiple` is only enforced by the browser for the `<input>` dialog,\n      // never for `DataTransfer`, so re-apply it here for the drop path too.\n      let candidates = incoming;\n      if (!multiple && candidates.length > 1) {\n        rejections.push(\n          ...candidates.slice(1).map((file) => ({ file, reason: \"multiple\" as const })),\n        );\n        candidates = candidates.slice(0, 1);\n      }\n\n      const toAdd: File[] = [];\n      for (const f of candidates) {\n        if (!fileMatchesAccept(f, accept)) {\n          rejections.push({ file: f, reason: \"accept\" });\n          continue;\n        }\n        if (maxSize && f.size > maxSize) {\n          rejections.push({ file: f, reason: \"maxSize\" });\n          continue;\n        }\n        toAdd.push(f);\n      }\n\n      const next = [...files];\n      for (const f of toAdd) {\n        if (maxFiles && next.length >= maxFiles) {\n          rejections.push({ file: f, reason: \"maxFiles\" });\n          continue;\n        }\n        next.push({ id: makeUploadFileId(f), file: f });\n      }\n\n      commit(next);\n      if (rejections.length > 0) onFilesRejected?.(rejections);\n    },\n    [files, accept, multiple, maxSize, maxFiles, commit, onFilesRejected],\n  );\n\n  const removeFile = useCallback(\n    (id: string) => {\n      commit(files.filter((f) => f.id !== id));\n    },\n    [files, commit],\n  );\n\n  const openPicker = useCallback(() => {\n    inputRef.current?.click();\n  }, []);\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (e.target.files) {\n        addFiles(Array.from(e.target.files));\n        // Reset so the same file can be re-selected\n        e.target.value = \"\";\n      }\n    },\n    [addFiles],\n  );\n\n  const ctx = useMemo<FileUploadContextValue>(\n    () => ({\n      files,\n      addFiles,\n      removeFile,\n      isDragging,\n      openPicker,\n      accept,\n      multiple,\n      maxSize,\n      maxFiles,\n      disabled,\n      inputId,\n    }),\n    [\n      files,\n      addFiles,\n      removeFile,\n      isDragging,\n      openPicker,\n      accept,\n      multiple,\n      maxSize,\n      maxFiles,\n      disabled,\n      inputId,\n    ],\n  );\n\n  return (\n    <FileUploadContext value={ctx}>\n      <div\n        ref={ref}\n        data-slot=\"file-upload\"\n        data-disabled={disabled || undefined}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {/* Visually hidden real file input — always present for keyboard users */}\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          aria-hidden=\"true\"\n          tabIndex={-1}\n          className=\"sr-only\"\n          onChange={handleInputChange}\n        />\n        {/* Drag state setter lives here so any child drag interaction is captured */}\n        <div\n          onDragEnter={() => {\n            if (!disabled) setIsDragging(true);\n          }}\n          onDragLeave={(e) => {\n            // Only clear dragging when leaving the root container\n            if (!e.currentTarget.contains(e.relatedTarget as Node | null)) {\n              setIsDragging(false);\n            }\n          }}\n          onDragOver={(e: DragEvent) => {\n            e.preventDefault();\n          }}\n          onDrop={(e: DragEvent) => {\n            e.preventDefault();\n            setIsDragging(false);\n            if (!disabled && e.dataTransfer.files.length > 0) {\n              addFiles(Array.from(e.dataTransfer.files));\n            }\n          }}\n          className=\"contents\"\n        >\n          {children}\n        </div>\n      </div>\n    </FileUploadContext>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// FileUploadDropzone\n// ---------------------------------------------------------------------------\n\nexport interface FileUploadDropzoneProps extends HTMLAttributes<HTMLDivElement> {\n  /** Label for the default \"Browse files\" button. */\n  browseLabel?: string;\n}\n\n/**\n * FileUploadDropzone — the drag-and-drop target.\n *\n * A plain `<div>` drop surface with exactly ONE keyboard-reachable control:\n *\n * - Default content: a real `<button>` (\"Browse files\") is the tab stop; the\n *   zone itself carries no role and no tab stop, so nothing interactive is\n *   nested inside another interactive element.\n * - Custom `children`: there is no inner button, so the zone itself becomes\n *   the control (`role=\"button\"`, a tab stop, Enter/Space). Custom children\n *   must then be non-interactive content.\n *\n * A pointer click anywhere on the zone also opens the picker — a mouse\n * convenience on top of the keyboard path above, never the only path.\n */\nexport const FileUploadDropzone = forwardRef<HTMLDivElement, FileUploadDropzoneProps>(\n  function FileUploadDropzone(\n    { className, children, browseLabel, onClick, onKeyDown, ...props },\n    ref,\n  ) {\n    const { isDragging, disabled, openPicker } = useFileUpload();\n    const { t } = useLocale();\n    const resolvedBrowseLabel = browseLabel ?? t(\"ui.fileUpload.browseFiles\");\n    // With custom children there is no inner button, so the zone owns the\n    // one keyboard path itself.\n    const isSelfControl = children != null;\n\n    return (\n      <div\n        ref={ref}\n        role={isSelfControl ? \"button\" : undefined}\n        tabIndex={isSelfControl && !disabled ? 0 : undefined}\n        // Also on the default (role-less) zone: it marks the dimmed copy as\n        // inactive UI, which WCAG 1.4.3 exempts from contrast — the same\n        // exemption a `<label>` of a disabled control gets.\n        aria-disabled={disabled || undefined}\n        onClick={(e) => {\n          onClick?.(e);\n          if (disabled || e.defaultPrevented) return;\n          openPicker();\n        }}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!isSelfControl || disabled || e.defaultPrevented) return;\n          if (e.target !== e.currentTarget) return;\n          if (e.key === \"Enter\" || e.key === \" \") {\n            e.preventDefault();\n            openPicker();\n          }\n        }}\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={isDragging || undefined}\n        data-disabled={disabled || undefined}\n        className={cn(\n          \"flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-border-strong bg-surface-muted px-6 py-10\",\n          \"cursor-pointer transition-colors duration-fast\",\n          \"hover:border-ring hover:bg-accent/50\",\n          \"data-[dragging]:border-primary data-[dragging]:bg-primary/5\",\n          \"data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n          \"focus-ring-within focus-within:ring-offset-2 focus-within:ring-offset-background\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <>\n            <div className=\"flex h-12 w-12 items-center justify-center rounded-full bg-muted\">\n              <Upload className=\"size-5 text-muted-foreground\" aria-hidden=\"true\" />\n            </div>\n            <div className=\"flex flex-col items-center gap-1 text-center\">\n              <p className=\"text-body font-medium text-foreground\">\n                {t(\"ui.fileUpload.dragDropHere\")}\n              </p>\n              <p className=\"text-meta text-muted-foreground\">\n                or{\" \"}\n                <button\n                  type=\"button\"\n                  disabled={disabled}\n                  onClick={(e) => {\n                    // The zone's own click handler opens the picker; stop the\n                    // bubble so one activation opens it exactly once.\n                    e.stopPropagation();\n                    openPicker();\n                  }}\n                  className={cn(\n                    // #399 — inline text trigger inside a sentence → `-text` rung.\n                    \"text-primary-text underline-offset-2 hover:underline focus-ring rounded-sm\",\n                    // #322 — the dropzone's `focus-ring-within` (above) is the\n                    // one compound indicator for this composite control; this\n                    // button delegates rather than painting a second one.\n                    \"focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0\",\n                    \"disabled:pointer-events-none disabled:opacity-50\",\n                  )}\n                >\n                  {resolvedBrowseLabel}\n                </button>\n              </p>\n            </div>\n          </>\n        )}\n      </div>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// FileUploadList\n// ---------------------------------------------------------------------------\n\nexport type FileUploadListProps = HTMLAttributes<HTMLUListElement>;\n\n/**\n * FileUploadList — the `role=\"status\"` region that lists accepted files.\n * Reads from context; children are `<FileUploadItem>` elements.\n */\nexport const FileUploadList = forwardRef<HTMLUListElement, FileUploadListProps>(\n  function FileUploadList({ className, children, ...props }, ref) {\n    const { files } = useFileUpload();\n    const { t } = useLocale();\n    if (files.length === 0 && !children) return null;\n\n    return (\n      // `aria-live=\"polite\"` alone is enough to announce additions/removals —\n      // it does NOT require `role=\"status\"`. Adding that role here used to\n      // override the `<ul>`'s implicit `list` role, which strips the\n      // `listitem` role from every `<FileUploadItem>` (`<li>`) inside it and\n      // fails axe's `listitem` rule the moment the list is non-empty.\n      <ul\n        ref={ref}\n        aria-live=\"polite\"\n        aria-label={t(\"ui.fileUpload.selectedFiles\")}\n        data-slot=\"file-upload-list\"\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {children}\n      </ul>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// FileUploadItem\n// ---------------------------------------------------------------------------\n\nexport interface FileUploadItemProps extends HTMLAttributes<HTMLLIElement> {\n  /** The UploadFile entry to display. */\n  uploadFile: UploadFile;\n  /** Upload progress 0–100. Shown only during \"uploading\" status. */\n  progress?: number;\n  /** Current status of the upload. */\n  status?: FileUploadStatus;\n  /** Error message (displayed when status=\"error\"). */\n  errorMessage?: string;\n}\n\nconst statusIcon: Record<FileUploadStatus, ReactNode> = {\n  pending: <FileIcon className=\"size-4 text-muted-foreground\" aria-hidden=\"true\" />,\n  uploading: <FileIcon className=\"size-4 text-primary\" aria-hidden=\"true\" />,\n  success: <CheckCircle2 className=\"size-4 text-success\" aria-hidden=\"true\" />,\n  error: <AlertCircle className=\"size-4 text-destructive\" aria-hidden=\"true\" />,\n};\n\n/**\n * FileUploadItem — a single row in the file list.\n *\n * The app controls `progress` and `status` to drive the upload lifecycle.\n * Per-file errors use `role=\"alert\"`.\n */\nexport const FileUploadItem = forwardRef<HTMLLIElement, FileUploadItemProps>(\n  function FileUploadItem(\n    { uploadFile, progress, status = \"pending\", errorMessage, className, ...props },\n    ref,\n  ) {\n    const { removeFile, disabled } = useFileUpload();\n    const resolvedProgress = progress ?? uploadFile.progress;\n    const resolvedStatus = status ?? uploadFile.status ?? \"pending\";\n    const resolvedError = errorMessage ?? uploadFile.errorMessage;\n\n    const isUploading = resolvedStatus === \"uploading\";\n    const isError = resolvedStatus === \"error\";\n\n    return (\n      <li\n        ref={ref}\n        data-slot=\"file-upload-item\"\n        data-status={resolvedStatus}\n        className={cn(\n          \"flex flex-col gap-1 rounded-md border border-border bg-card px-3 py-2\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"flex items-center gap-2\">\n          {statusIcon[resolvedStatus]}\n          <span className=\"flex-1 min-w-0 truncate text-body text-foreground\">\n            {uploadFile.file.name}\n          </span>\n          <span className=\"shrink-0 text-meta tabular-nums text-muted-foreground\">\n            {formatFileSize(uploadFile.file.size)}\n          </span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label={`Remove ${uploadFile.file.name}`}\n            disabled={disabled}\n            onClick={() => removeFile(uploadFile.id)}\n            className=\"shrink-0\"\n          >\n            <X className=\"size-4\" aria-hidden=\"true\" />\n          </Button>\n        </div>\n        {isUploading && resolvedProgress !== undefined && (\n          <Progress value={resolvedProgress} className=\"h-1\" />\n        )}\n        {isError && resolvedError && (\n          // #124: this is running text (the rejection reason), so it takes the\n          // >=4.5:1 ink rung `text-destructive-text` — not the 3:1 mark rung the\n          // `statusIcon.error` glyph above correctly keeps.\n          <p role=\"alert\" className=\"text-meta text-destructive-text\">\n            {resolvedError}\n          </p>\n        )}\n      </li>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes < 1024) return `${bytes}\\u00A0B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}\\u00A0KB`;\n  return `${(bytes / (1024 * 1024)).toFixed(1)}\\u00A0MB`;\n}\n\n// ---------------------------------------------------------------------------\n// useFileUpload export (for advanced consumers outside a subpart)\n// ---------------------------------------------------------------------------\nexport { useFileUpload };\n"],"mappings":"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","names":["FileUpload","FileUploadDropzone","FileUploadList","FileUploadItem"]}

package/dist/chunk-SCCBEFVK.js

@@ -0,0 +1,187 @@
+"use client";
+import {
+  hasRenderableContent
+} from "./chunk-TAQI4JTE.js";
+import {
+  FieldContext,
+  useFieldContext
+} from "./chunk-22Z735L6.js";
+import {
+  Label
+} from "./chunk-U756JCDK.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/field/field.tsx
+import {
+  cloneElement,
+  forwardRef,
+  useCallback,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useState
+} from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+var FieldRoot = forwardRef(function FieldRoot2({ invalid = false, required = false, className, children, ...props }, ref) {
+  const [descriptionIds, setDescriptionIds] = useState([]);
+  const registerDescription = useCallback((descId) => {
+    setDescriptionIds((prev) => prev.includes(descId) ? prev : [...prev, descId]);
+  }, []);
+  const unregisterDescription = useCallback((descId) => {
+    setDescriptionIds((prev) => prev.includes(descId) ? prev.filter((x) => x !== descId) : prev);
+  }, []);
+  const [errorIds, setErrorIds] = useState([]);
+  const registerError = useCallback((errId) => {
+    setErrorIds((prev) => prev.includes(errId) ? prev : [...prev, errId]);
+  }, []);
+  const unregisterError = useCallback((errId) => {
+    setErrorIds((prev) => prev.includes(errId) ? prev.filter((x) => x !== errId) : prev);
+  }, []);
+  const describedBy = useMemo(() => {
+    const ids = [...descriptionIds, ...errorIds];
+    return ids.length > 0 ? ids.join(" ") : void 0;
+  }, [descriptionIds, errorIds]);
+  const [controlOrder, setControlOrder] = useState([]);
+  const registerControl = useCallback((controlId) => {
+    setControlOrder((prev) => prev.includes(controlId) ? prev : [...prev, controlId]);
+  }, []);
+  const unregisterControl = useCallback((controlId) => {
+    setControlOrder(
+      (prev) => prev.includes(controlId) ? prev.filter((x) => x !== controlId) : prev
+    );
+  }, []);
+  const labelFor = controlOrder[0];
+  const value = useMemo(
+    () => ({
+      labelFor,
+      registerControl,
+      unregisterControl,
+      invalid,
+      required,
+      describedBy,
+      registerDescription,
+      unregisterDescription,
+      registerError,
+      unregisterError
+    }),
+    [
+      labelFor,
+      registerControl,
+      unregisterControl,
+      invalid,
+      required,
+      describedBy,
+      registerDescription,
+      unregisterDescription,
+      registerError,
+      unregisterError
+    ]
+  );
+  return /* @__PURE__ */ jsx(FieldContext.Provider, { value, children: /* @__PURE__ */ jsx("div", { ref, "data-slot": "field", className: cn("space-y-2", className), ...props, children }) });
+});
+var FieldLabel = forwardRef(function FieldLabel2({ className, ...props }, ref) {
+  const { labelFor, invalid } = useFieldContext("FieldLabel");
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      htmlFor: labelFor,
+      "data-slot": "field-label",
+      className: cn(
+        "transition-colors duration-fast ease-standard",
+        invalid && "text-destructive-text",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var FieldControl = forwardRef(
+  function FieldControl2({ children }, ref) {
+    const { invalid, required, describedBy, registerControl, unregisterControl } = useFieldContext("FieldControl");
+    const generatedId = useId();
+    const control = children;
+    const childProps = control.props;
+    const id = childProps.id ?? generatedId;
+    const composedDescribedBy = [childProps["aria-describedby"] ?? null, describedBy ?? null].filter(Boolean).join(" ") || void 0;
+    useLayoutEffect(() => {
+      registerControl(id);
+      return () => unregisterControl(id);
+    }, [id, registerControl, unregisterControl]);
+    return /* @__PURE__ */ jsx(
+      Slot,
+      {
+        ref,
+        id,
+        "aria-describedby": composedDescribedBy,
+        "aria-invalid": invalid,
+        "aria-required": required || void 0,
+        "data-slot": "field-control",
+        children: cloneElement(control, { id, "aria-describedby": composedDescribedBy })
+      }
+    );
+  }
+);
+var FieldDescription = forwardRef(function FieldDescription2({ className, children, id, ...props }, ref) {
+  const { registerDescription, unregisterDescription } = useFieldContext("FieldDescription");
+  const instanceId = useId();
+  const generatedId = `${instanceId}-description`;
+  const descriptionId = id ?? generatedId;
+  const hasContent = hasRenderableContent(children);
+  useLayoutEffect(() => {
+    if (!hasContent) return void 0;
+    registerDescription(descriptionId);
+    return () => unregisterDescription(descriptionId);
+  }, [hasContent, descriptionId, registerDescription, unregisterDescription]);
+  if (!hasContent) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: descriptionId,
+      "data-slot": "field-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props,
+      children
+    }
+  );
+});
+var FieldError = forwardRef(
+  function FieldError2({ className, children, id, ...props }, ref) {
+    const { registerError, unregisterError } = useFieldContext("FieldError");
+    const instanceId = useId();
+    const generatedId = `${instanceId}-error`;
+    const errorId = id ?? generatedId;
+    const hasContent = hasRenderableContent(children);
+    useLayoutEffect(() => {
+      if (!hasContent) return void 0;
+      registerError(errorId);
+      return () => unregisterError(errorId);
+    }, [hasContent, errorId, registerError, unregisterError]);
+    if (!hasContent) return null;
+    return /* @__PURE__ */ jsx(
+      "p",
+      {
+        ref,
+        id: errorId,
+        role: "alert",
+        "data-slot": "field-error",
+        className: cn("text-body font-medium text-destructive-text", className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+
+export {
+  FieldRoot,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError
+};
+//# sourceMappingURL=chunk-SCCBEFVK.js.map