@tribepad/themis 1.0.0

package/dist/chunk-IEI5LD5C.mjs

@@ -0,0 +1,1161 @@
+import { Button } from './chunk-BDXKKMBZ.mjs';
+import { TEXT_SIZE_MEDIUM_SCALE, combineStyles, TRANSITION_COLORS, FOCUS_WITHIN_RING, TOUCH_TARGET_MIN, FOCUS_VISIBLE_RING, DISABLED_STANDARD, TEXT_SIZE_SMALL_SCALE, ERROR_MESSAGE_BASE, SUCCESS_MESSAGE_BASE, DESCRIPTION_BASE, LABEL_BASE } from './chunk-Z4FRNOF6.mjs';
+import { cn } from './chunk-E2KQFV3O.mjs';
+import { BaseComponentPropsSchema } from './chunk-5SVLJN2C.mjs';
+import { forwardRef, useId, useState, useRef, useCallback, useEffect } from 'react';
+import { FileTrigger, ProgressBar, Button as Button$1 } from 'react-aria-components';
+import { Upload, X, FileIcon, AudioLines, VideoIcon, ImageIcon, Loader2 } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+var fileFieldContainerVariants = cva(
+  "flex flex-col gap-1.5 w-full",
+  {
+    variants: {
+      size: TEXT_SIZE_MEDIUM_SCALE
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldDropZoneVariants = cva(
+  combineStyles(
+    "flex flex-col items-center justify-center rounded-md border-2 border-dashed",
+    "bg-[var(--content-background)] text-[var(--content-foreground)]",
+    TRANSITION_COLORS,
+    FOCUS_WITHIN_RING
+  ),
+  {
+    variants: {
+      size: {
+        sm: "min-h-[100px] p-4 gap-2",
+        default: "min-h-[140px] p-6 gap-3",
+        lg: "min-h-[180px] p-8 gap-4"
+      },
+      isDragOver: {
+        true: "border-[var(--primary)] bg-[var(--primary)]/5",
+        false: "border-[var(--input)] hover:border-[var(--primary)]/50"
+      },
+      isInvalid: {
+        true: "border-[var(--destructive)] bg-[var(--destructive)]/5",
+        false: ""
+      },
+      isDisabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: "cursor-pointer"
+      }
+    },
+    compoundVariants: [
+      {
+        isInvalid: true,
+        isDragOver: true,
+        className: "border-[var(--destructive)] bg-[var(--destructive)]/5"
+      }
+    ],
+    defaultVariants: {
+      size: "default",
+      isDragOver: false,
+      isInvalid: false,
+      isDisabled: false
+    }
+  }
+);
+var fileFieldTriggerVariants = cva(
+  combineStyles(
+    "inline-flex items-center justify-center gap-2 rounded-md font-medium",
+    TRANSITION_COLORS,
+    TOUCH_TARGET_MIN,
+    FOCUS_VISIBLE_RING,
+    DISABLED_STANDARD
+  ),
+  {
+    variants: {
+      size: {
+        sm: "px-3 py-2 text-xs",
+        default: "px-4 py-2 text-sm",
+        lg: "px-6 py-3 text-base"
+      },
+      variant: {
+        default: "bg-[var(--primary)] text-[var(--primary-foreground)] hover:bg-[var(--primary)]/90",
+        outline: "border border-[var(--input)] bg-transparent hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      variant: "default"
+    }
+  }
+);
+var fileFieldListVariants = cva(
+  "flex flex-col gap-2 mt-3",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        default: "gap-2",
+        lg: "gap-3"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldListHeaderVariants = cva(
+  "flex items-center justify-between mb-1",
+  {
+    variants: {
+      size: TEXT_SIZE_SMALL_SCALE
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldItemVariants = cva(
+  "flex items-center justify-between gap-3 bg-[var(--accent-background)] rounded-md border border-[var(--border)]",
+  {
+    variants: {
+      size: {
+        sm: "px-2 py-1.5 text-xs",
+        default: "px-3 py-2 text-sm",
+        lg: "px-4 py-3 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldRemoveButtonVariants = cva(
+  combineStyles(
+    "inline-flex items-center justify-center rounded-full",
+    TOUCH_TARGET_MIN,
+    "-mr-2 -my-1",
+    // Negative margin for visual sizing
+    "text-[var(--menu-muted)] hover:text-[var(--destructive)] hover:bg-[var(--destructive)]/10",
+    "transition-colors",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]"
+  ),
+  {
+    variants: {
+      size: {
+        sm: "",
+        default: "",
+        lg: ""
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldErrorVariants = cva(
+  combineStyles(ERROR_MESSAGE_BASE, "font-medium"),
+  {
+    variants: {
+      size: TEXT_SIZE_SMALL_SCALE
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldSuccessVariants = cva(
+  combineStyles(SUCCESS_MESSAGE_BASE, "font-medium"),
+  {
+    variants: {
+      size: TEXT_SIZE_SMALL_SCALE
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldDescriptionVariants = cva(
+  DESCRIPTION_BASE,
+  {
+    variants: {
+      size: TEXT_SIZE_SMALL_SCALE
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileFieldLabelVariants = cva(
+  LABEL_BASE,
+  {
+    variants: {
+      size: TEXT_SIZE_MEDIUM_SCALE,
+      isRequired: {
+        true: "after:content-['*'] after:ml-0.5 after:text-[var(--destructive)]",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      isRequired: false
+    }
+  }
+);
+
+// src/elements/FileField/utils.ts
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const size = parseFloat((bytes / Math.pow(k, i)).toFixed(1));
+  const formatted = size % 1 === 0 ? size.toFixed(0) : size.toFixed(1);
+  return `${formatted} ${sizes[i]}`;
+}
+function truncateFileName(name, maxLength = 30) {
+  if (name.length <= maxLength) return name;
+  const lastDotIndex = name.lastIndexOf(".");
+  if (lastDotIndex === -1) {
+    return `${name.slice(0, maxLength - 3)}...`;
+  }
+  const ext = name.slice(lastDotIndex);
+  const base = name.slice(0, lastDotIndex);
+  const availableLength = maxLength - ext.length - 3;
+  if (availableLength < 1) {
+    return `...${ext}`;
+  }
+  const truncatedBase = base.slice(0, availableLength);
+  return `${truncatedBase}...${ext}`;
+}
+function isFileTypeAccepted(file, acceptedTypes) {
+  if (!acceptedTypes || acceptedTypes.length === 0) return true;
+  return acceptedTypes.some((type) => {
+    if (type.endsWith("/*")) {
+      const category = type.slice(0, -2);
+      return file.type.startsWith(`${category}/`);
+    }
+    if (type.includes("/")) {
+      return file.type === type;
+    }
+    if (type.startsWith(".")) {
+      return file.name.toLowerCase().endsWith(type.toLowerCase());
+    }
+    return false;
+  });
+}
+function getFileIcon(file) {
+  if (file.type.startsWith("image/")) return "image";
+  if (file.type.startsWith("video/")) return "video";
+  if (file.type.startsWith("audio/")) return "audio";
+  return "file";
+}
+function deduplicateFiles(existing, incoming) {
+  const result = [...existing];
+  for (const file of incoming) {
+    const existingIndex = result.findIndex((f) => f.name === file.name);
+    if (existingIndex >= 0) {
+      result[existingIndex] = file;
+    } else {
+      result.push(file);
+    }
+  }
+  return result;
+}
+function formatAcceptedTypes(acceptedTypes) {
+  if (!acceptedTypes || acceptedTypes.length === 0) return "any file";
+  const formatted = acceptedTypes.map((type) => {
+    if (type === "image/*") return "images";
+    if (type === "video/*") return "videos";
+    if (type === "audio/*") return "audio";
+    if (type.startsWith(".")) {
+      return type.slice(1).toUpperCase();
+    }
+    if (type.includes("/")) {
+      const parts = type.split("/");
+      const subtype = parts[1] ?? type;
+      return subtype.toUpperCase();
+    }
+    return type;
+  });
+  return formatted.join(", ");
+}
+var RESIZE_THRESHOLD = 2 * 1024 * 1024;
+function isImageFile(file) {
+  if (file.type.startsWith("image/")) {
+    return true;
+  }
+  const imageExtensions = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico|avif|heic|heif|tiff|tif)$/i;
+  return imageExtensions.test(file.name);
+}
+async function createResizedPreview(file, maxDimension = 200) {
+  return new Promise((resolve, reject) => {
+    const img = new window.Image();
+    const objectUrl = URL.createObjectURL(file);
+    img.onload = () => {
+      URL.revokeObjectURL(objectUrl);
+      const scale = Math.min(
+        maxDimension / img.width,
+        maxDimension / img.height,
+        1
+        // Don't upscale
+      );
+      const width = Math.round(img.width * scale);
+      const height = Math.round(img.height * scale);
+      const canvas = document.createElement("canvas");
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        reject(new Error("Canvas context unavailable"));
+        return;
+      }
+      ctx.drawImage(img, 0, 0, width, height);
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            resolve(URL.createObjectURL(blob));
+          } else {
+            reject(new Error("Failed to create blob"));
+          }
+        },
+        "image/jpeg",
+        0.8
+        // Quality for JPEG compression
+      );
+    };
+    img.onerror = () => {
+      URL.revokeObjectURL(objectUrl);
+      reject(new Error("Failed to load image"));
+    };
+    img.src = objectUrl;
+  });
+}
+async function generatePreview(file, maxDimension = 200) {
+  if (file.size > RESIZE_THRESHOLD) {
+    return createResizedPreview(file, maxDimension);
+  }
+  return URL.createObjectURL(file);
+}
+function useFilePreview(file, options = {}) {
+  const { enabled = true, maxBytes = 10 * 1024 * 1024, maxDimension = 200 } = options;
+  const [preview, setPreview] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const isImage = isImageFile(file);
+  useEffect(() => {
+    if (!enabled || !isImage) {
+      setPreview(null);
+      setIsLoading(false);
+      setError(null);
+      return;
+    }
+    if (file.size > maxBytes) {
+      setPreview(null);
+      setIsLoading(false);
+      setError("File too large for preview");
+      return;
+    }
+    let isActive = true;
+    let objectUrl = null;
+    const generatePreviewAsync = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        objectUrl = await generatePreview(file, maxDimension);
+        if (isActive) {
+          setPreview(objectUrl);
+          setIsLoading(false);
+        } else {
+          URL.revokeObjectURL(objectUrl);
+        }
+      } catch (err) {
+        if (isActive) {
+          setError(err instanceof Error ? err.message : "Failed to generate preview");
+          setIsLoading(false);
+          setPreview(null);
+        }
+      }
+    };
+    generatePreviewAsync();
+    return () => {
+      isActive = false;
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+      }
+      setPreview((prev) => {
+        if (prev) {
+          URL.revokeObjectURL(prev);
+        }
+        return null;
+      });
+    };
+  }, [file, enabled, maxBytes, maxDimension, isImage]);
+  return { preview, isLoading, error, isImage };
+}
+function FilePreview({
+  file,
+  size = 64,
+  maxBytes = 10 * 1024 * 1024,
+  renderPreview,
+  className
+}) {
+  const { preview, isLoading, error, isImage } = useFilePreview(file, {
+    enabled: true,
+    maxBytes,
+    maxDimension: size * 2
+    // Generate at 2x for retina displays
+  });
+  const sizeStyles = {
+    width: size,
+    height: size,
+    minWidth: size,
+    minHeight: size
+  };
+  if (!isImage && renderPreview) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-md overflow-hidden",
+          "bg-[var(--accent-background)]",
+          className
+        ),
+        style: sizeStyles,
+        children: renderPreview(file)
+      }
+    );
+  }
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-md overflow-hidden",
+          "bg-[var(--accent-background)]",
+          className
+        ),
+        style: sizeStyles,
+        "aria-busy": "true",
+        "aria-label": `Loading preview for ${file.name}`,
+        children: /* @__PURE__ */ jsx(
+          Loader2,
+          {
+            className: "h-4 w-4 animate-spin text-[var(--menu-muted)]",
+            "aria-hidden": "true"
+          }
+        )
+      }
+    );
+  }
+  if (isImage && preview && !error) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-center rounded-md overflow-hidden",
+          "bg-[var(--accent-background)]",
+          className
+        ),
+        style: sizeStyles,
+        children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: preview,
+            alt: file.name,
+            className: "w-full h-full object-cover",
+            loading: "lazy"
+          }
+        )
+      }
+    );
+  }
+  const iconType = getFileIcon(file);
+  const IconComponent = getIconForType(iconType);
+  const iconSize = Math.max(16, Math.floor(size * 0.4));
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center justify-center rounded-md overflow-hidden",
+        "bg-[var(--accent-background)]",
+        className
+      ),
+      style: sizeStyles,
+      "aria-label": error ? `Preview unavailable for ${file.name}` : void 0,
+      children: /* @__PURE__ */ jsx(
+        IconComponent,
+        {
+          className: "text-[var(--menu-muted)]",
+          style: { width: iconSize, height: iconSize },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+function getIconForType(iconType) {
+  switch (iconType) {
+    case "image":
+      return ImageIcon;
+    case "video":
+      return VideoIcon;
+    case "audio":
+      return AudioLines;
+    default:
+      return FileIcon;
+  }
+}
+var fileProgressVariants = cva(
+  ["flex", "flex-col", "gap-1", "w-full"],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileProgressTrackVariants = cva(
+  ["rounded-full", "bg-[var(--accent-background)]", "overflow-hidden"],
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        default: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileProgressBarVariants = cva(
+  ["h-full", "rounded-full", "transition-all", "duration-300"],
+  {
+    variants: {
+      status: {
+        pending: [
+          "bg-gradient-to-r",
+          "from-[var(--menu-muted)]",
+          "via-[var(--accent-background)]",
+          "to-[var(--menu-muted)]",
+          "bg-[length:200%_100%]",
+          "animate-progress-shimmer"
+        ],
+        uploading: "bg-[var(--primary)]",
+        complete: "bg-[var(--success)]",
+        error: "bg-[var(--destructive)]"
+      }
+    },
+    defaultVariants: {
+      status: "pending"
+    }
+  }
+);
+var fileProgressHeaderVariants = cva(
+  ["flex", "items-center", "justify-between", "gap-2"],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileProgressErrorVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "gap-2",
+    "mt-1",
+    "text-[var(--destructive)]"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+var fileProgressRetryVariants = cva(
+  [
+    "underline",
+    "hover:no-underline",
+    "min-h-[44px]",
+    "min-w-[44px]",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    // Negative margin to visually appear smaller while maintaining touch target
+    "-mr-3",
+    "-my-2",
+    // Focus styling
+    "focus-visible:outline-none",
+    "focus-visible:ring-2",
+    "focus-visible:ring-[var(--ring)]",
+    "focus-visible:ring-offset-2",
+    "rounded"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        default: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function getStatusText(status, progress) {
+  switch (status) {
+    case "pending":
+      return "Waiting...";
+    case "uploading":
+      return `${progress}%`;
+    case "complete":
+      return "Complete";
+    case "error":
+      return "Failed";
+  }
+}
+function FileProgress({
+  file,
+  progress,
+  status,
+  error,
+  onRetry,
+  size = "default",
+  className
+}) {
+  const isIndeterminate = status === "pending";
+  const errorId = `progress-error-${file.name.replace(/[^a-zA-Z0-9]/g, "-")}`;
+  const statusText = getStatusText(status, progress);
+  return /* @__PURE__ */ jsxs("div", { className: cn(fileProgressVariants({ size }), className), children: [
+    /* @__PURE__ */ jsx(
+      ProgressBar,
+      {
+        "aria-label": file.name,
+        value: isIndeterminate ? void 0 : progress,
+        isIndeterminate,
+        "aria-describedby": status === "error" && error ? errorId : void 0,
+        children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: fileProgressHeaderVariants({ size }), children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", title: file.name, children: truncateFileName(file.name, 30) }),
+            /* @__PURE__ */ jsx("span", { className: "text-[var(--menu-muted)] flex-shrink-0", children: status === "error" ? "Failed" : valueText ?? statusText })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: fileProgressTrackVariants({ size }), children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: fileProgressBarVariants({ status }),
+              style: {
+                width: isIndeterminate ? "100%" : `${percentage ?? 0}%`
+              }
+            }
+          ) })
+        ] })
+      }
+    ),
+    status === "error" && error && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: errorId,
+        className: fileProgressErrorVariants({ size }),
+        children: [
+          /* @__PURE__ */ jsx("span", { children: error }),
+          onRetry && /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              onPress: onRetry,
+              className: fileProgressRetryVariants({ size }),
+              children: "Retry"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: "sr-only",
+        children: [
+          status === "complete" && `${file.name} upload complete`,
+          status === "error" && `${file.name} upload failed${error ? `: ${error}` : ""}`
+        ]
+      }
+    )
+  ] });
+}
+FileProgress.displayName = "FileProgress";
+var FileField = forwardRef(
+  function FileField2({
+    // Required
+    label,
+    // File selection
+    acceptedFileTypes,
+    allowsMultiple = false,
+    // Constraints
+    maxFileSize,
+    maxFiles,
+    // Display
+    description,
+    errorMessage,
+    successMessage,
+    triggerText,
+    // States
+    isRequired,
+    isDisabled,
+    isInvalid,
+    isValid,
+    // Variants
+    size = "default",
+    // Form integration
+    name,
+    id,
+    className,
+    // Value (controlled)
+    value = [],
+    // Events
+    onChange,
+    validate,
+    // Phase 1: Image Previews
+    showPreviews = false,
+    previewSize = 64,
+    maxPreviewBytes = 10 * 1024 * 1024,
+    renderPreview,
+    // Phase 1: Upload Progress (will be used later)
+    showProgress = false,
+    uploadProgress,
+    uploadStatus,
+    uploadErrors,
+    onRetry,
+    // Standard
+    "data-testid": dataTestId,
+    "aria-label": _ariaLabel,
+    "aria-labelledby": _ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) {
+    const generatedId = useId();
+    const fieldId = id ?? generatedId;
+    const labelId = `${fieldId}-label`;
+    const descriptionId = `${fieldId}-description`;
+    const errorId = `${fieldId}-error`;
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [internalError, setInternalError] = useState(null);
+    const dragCounterRef = useRef(0);
+    const displayError = errorMessage ?? internalError;
+    const hasError = isInvalid || !!displayError;
+    const describedByParts = [];
+    if (ariaDescribedBy) describedByParts.push(ariaDescribedBy);
+    if (description) describedByParts.push(descriptionId);
+    if (displayError) describedByParts.push(errorId);
+    const describedBy = describedByParts.length > 0 ? describedByParts.join(" ") : void 0;
+    const validateFiles = useCallback(
+      (files, existingFiles = []) => {
+        const validFiles = [];
+        const errors = [];
+        for (const file of files) {
+          if (acceptedFileTypes && !isFileTypeAccepted(file, acceptedFileTypes)) {
+            errors.push(`"${file.name}" has an invalid file type`);
+            continue;
+          }
+          if (maxFileSize && file.size > maxFileSize) {
+            errors.push(
+              `"${file.name}" exceeds the maximum size of ${formatFileSize(maxFileSize)}`
+            );
+            continue;
+          }
+          validFiles.push(file);
+        }
+        if (maxFiles && allowsMultiple) {
+          const combined = deduplicateFiles(existingFiles, validFiles);
+          if (combined.length > maxFiles) {
+            errors.push(`Maximum ${maxFiles} files allowed`);
+            return { valid: [], errors };
+          }
+        }
+        return { valid: validFiles, errors };
+      },
+      [acceptedFileTypes, maxFileSize, maxFiles, allowsMultiple]
+    );
+    const processFiles = useCallback(
+      (fileList) => {
+        if (!fileList || fileList.length === 0) return;
+        setInternalError(null);
+        const newFiles = Array.from(fileList);
+        const existingFiles = allowsMultiple ? value : [];
+        const { valid, errors } = validateFiles(newFiles, existingFiles);
+        if (errors.length > 0) {
+          setInternalError(errors[0] ?? "Invalid file");
+          return;
+        }
+        if (validate && valid.length > 0) {
+          const customError = validate(
+            allowsMultiple ? deduplicateFiles(existingFiles, valid) : valid
+          );
+          if (customError) {
+            setInternalError(customError);
+            return;
+          }
+        }
+        let finalFiles;
+        if (allowsMultiple) {
+          finalFiles = deduplicateFiles(existingFiles, valid);
+        } else {
+          finalFiles = valid.slice(0, 1);
+        }
+        onChange?.(finalFiles);
+      },
+      [allowsMultiple, value, validateFiles, validate, onChange]
+    );
+    const handleSelect = useCallback(
+      (fileList) => {
+        processFiles(fileList);
+      },
+      [processFiles]
+    );
+    const handleRemove = useCallback(
+      (fileToRemove) => {
+        const newFiles = value.filter((f) => f !== fileToRemove);
+        onChange?.(newFiles);
+      },
+      [value, onChange]
+    );
+    const handleClearAll = useCallback(() => {
+      onChange?.([]);
+    }, [onChange]);
+    const handleDragEnter = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (isDisabled) return;
+        dragCounterRef.current++;
+        setIsDragOver(true);
+      },
+      [isDisabled]
+    );
+    const handleDragOver = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      []
+    );
+    const handleDragLeave = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current--;
+        if (dragCounterRef.current === 0) {
+          setIsDragOver(false);
+        }
+      },
+      []
+    );
+    const handleDrop = useCallback(
+      (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        dragCounterRef.current = 0;
+        setIsDragOver(false);
+        if (isDisabled) return;
+        const files = e.dataTransfer?.files;
+        processFiles(files ?? null);
+      },
+      [isDisabled, processFiles]
+    );
+    const getIconComponent = (file) => {
+      const iconType = getFileIcon(file);
+      switch (iconType) {
+        case "image":
+          return ImageIcon;
+        case "video":
+          return VideoIcon;
+        case "audio":
+          return AudioLines;
+        default:
+          return FileIcon;
+      }
+    };
+    const acceptString = acceptedFileTypes?.join(",");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        id: fieldId,
+        className: cn(fileFieldContainerVariants({ size }), className),
+        "data-testid": dataTestId ?? "file-field",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "label",
+            {
+              id: labelId,
+              className: fileFieldLabelVariants({ size, isRequired }),
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "group",
+              "data-testid": `${dataTestId ?? "file-field"}-dropzone`,
+              className: cn(
+                "drop-zone",
+                // Added for test selectors
+                fileFieldDropZoneVariants({
+                  size,
+                  isDragOver,
+                  isInvalid: hasError,
+                  isDisabled
+                })
+              ),
+              onDragEnter: handleDragEnter,
+              onDragOver: handleDragOver,
+              onDragLeave: handleDragLeave,
+              onDrop: handleDrop,
+              "aria-labelledby": labelId,
+              "aria-describedby": describedBy,
+              "aria-disabled": isDisabled || void 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  FileTrigger,
+                  {
+                    acceptedFileTypes,
+                    allowsMultiple,
+                    onSelect: handleSelect,
+                    children: /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        isDisabled,
+                        buttonVisualClassName: fileFieldTriggerVariants({ size }),
+                        children: [
+                          /* @__PURE__ */ jsx(Upload, { className: "h-4 w-4", "aria-hidden": "true" }),
+                          isDragOver ? "Drop files here" : triggerText ?? (allowsMultiple ? "Choose files" : "Choose file")
+                        ]
+                      }
+                    )
+                  }
+                ),
+                name && /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "file",
+                    name,
+                    accept: acceptString,
+                    multiple: allowsMultiple,
+                    disabled: isDisabled,
+                    className: "sr-only",
+                    tabIndex: -1,
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: descriptionId,
+              className: fileFieldDescriptionVariants({ size }),
+              children: description
+            }
+          ),
+          value.length > 0 && /* @__PURE__ */ jsxs("div", { className: fileFieldListVariants({ size }), children: [
+            value.length >= 2 && /* @__PURE__ */ jsxs("div", { className: fileFieldListHeaderVariants({ size }), children: [
+              /* @__PURE__ */ jsxs("span", { className: "text-[var(--menu-muted)]", children: [
+                value.length,
+                " files selected"
+              ] }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "link",
+                  visualSize: "sm",
+                  onPress: handleClearAll,
+                  buttonVisualClassName: cn(
+                    "text-[var(--menu-muted)] hover:text-[var(--destructive)]",
+                    "underline-offset-4 hover:underline"
+                  ),
+                  "aria-label": "Clear all files",
+                  children: "Clear all"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: value.map((file, index) => {
+              const IconComponent = getIconComponent(file);
+              const effectivePreviewSize = size === "sm" ? Math.min(previewSize, 40) : size === "lg" ? Math.min(previewSize, 80) : Math.min(previewSize, 48);
+              const fileStatus = uploadStatus?.[index];
+              const fileProgress = uploadProgress?.[index] ?? 0;
+              const fileError = uploadErrors?.get(index);
+              const showProgressForFile = showProgress && fileStatus !== void 0;
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: showProgressForFile ? "p-3" : fileFieldItemVariants({ size }),
+                  children: showProgressForFile ? /* @__PURE__ */ jsx(
+                    FileProgress,
+                    {
+                      file,
+                      progress: fileProgress,
+                      status: fileStatus,
+                      error: fileError,
+                      onRetry: onRetry ? () => onRetry(index) : void 0,
+                      size
+                    }
+                  ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
+                      showPreviews ? /* @__PURE__ */ jsx(
+                        FilePreview,
+                        {
+                          file,
+                          size: effectivePreviewSize,
+                          maxBytes: maxPreviewBytes,
+                          renderPreview,
+                          className: "flex-shrink-0"
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        IconComponent,
+                        {
+                          className: "h-4 w-4 flex-shrink-0 text-[var(--menu-muted)]",
+                          "aria-hidden": "true"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("span", { className: "truncate", title: file.name, children: truncateFileName(file.name, 30) }),
+                      /* @__PURE__ */ jsx("span", { className: "text-[var(--menu-muted)] flex-shrink-0", children: formatFileSize(file.size) })
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        visualSize: "icon",
+                        onPress: () => handleRemove(file),
+                        buttonVisualClassName: fileFieldRemoveButtonVariants({ size }),
+                        "aria-label": `Remove ${file.name}`,
+                        isDisabled,
+                        children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": "true" })
+                      }
+                    )
+                  ] })
+                },
+                `${file.name}-${index}`
+              );
+            }) })
+          ] }),
+          displayError && /* @__PURE__ */ jsx(
+            "p",
+            {
+              id: errorId,
+              role: "alert",
+              className: fileFieldErrorVariants({ size }),
+              children: displayError
+            }
+          ),
+          !displayError && isValid && successMessage && /* @__PURE__ */ jsx("p", { className: fileFieldSuccessVariants({ size }), children: successMessage })
+        ]
+      }
+    );
+  }
+);
+FileField.displayName = "FileField";
+var FileFieldPropsSchema = BaseComponentPropsSchema.extend({
+  // Required
+  /** Label text for the file field (required for accessibility) */
+  label: z.string(),
+  // File selection
+  /**
+   * Array of accepted file types (MIME types or extensions)
+   * @example ['application/pdf', 'image/*', '.docx']
+   */
+  acceptedFileTypes: z.array(z.string()).optional(),
+  /** Allow selecting multiple files */
+  allowsMultiple: z.boolean().default(false),
+  // Constraints
+  /** Maximum file size in bytes */
+  maxFileSize: z.number().optional(),
+  /** Maximum number of files (only applies when allowsMultiple is true) */
+  maxFiles: z.number().optional(),
+  // Display
+  /** Description text shown below the drop zone */
+  description: z.string().optional(),
+  /** Error message from external validation */
+  errorMessage: z.string().optional(),
+  /** Success message when files are valid */
+  successMessage: z.string().optional(),
+  /** Custom text for the trigger button */
+  triggerText: z.string().optional(),
+  // States
+  /** Mark field as required */
+  isRequired: z.boolean().optional(),
+  /** Disable the field */
+  isDisabled: z.boolean().optional(),
+  /** Show invalid state styling */
+  isInvalid: z.boolean().optional(),
+  /** Show valid state styling */
+  isValid: z.boolean().optional(),
+  // Variants
+  /** Size variant */
+  size: z.enum(["sm", "default", "lg"]).default("default"),
+  // Form integration
+  /** Name attribute for form association */
+  name: z.string().optional(),
+  // === Phase 1: Image Previews ===
+  /** Enable image thumbnail previews (default: false) */
+  showPreviews: z.boolean().default(false),
+  /** Maximum preview dimension in pixels (default: 64) */
+  previewSize: z.number().min(16).max(256).default(64),
+  /** Maximum file size for preview generation in bytes (default: 10MB) */
+  maxPreviewBytes: z.number().default(10 * 1024 * 1024),
+  // === Phase 1: Upload Progress ===
+  /** Enable upload progress display (default: false) */
+  showProgress: z.boolean().default(false),
+  /** Progress values per file (0-100), indexed parallel to files array */
+  uploadProgress: z.array(z.number().min(0).max(100)).optional(),
+  /** Upload status per file, indexed parallel to files array */
+  uploadStatus: z.array(z.enum(["pending", "uploading", "complete", "error"])).optional()
+}).refine(
+  (data) => !(data.successMessage && data.errorMessage),
+  {
+    message: "Cannot provide both successMessage and errorMessage. Use one based on validation state.",
+    path: ["successMessage"]
+  }
+).refine(
+  (data) => {
+    if (typeof process !== "undefined" && process.env.NODE_ENV === "development") {
+      if (data.isValid && data.isInvalid) {
+        console.error(
+          "[FileField] Both isValid and isInvalid are true. isInvalid takes precedence."
+        );
+      }
+    }
+    return true;
+  }
+);
+
+export { FileField, FileFieldPropsSchema, FilePreview, FileProgress, RESIZE_THRESHOLD, createResizedPreview, deduplicateFiles, fileFieldContainerVariants, fileFieldDescriptionVariants, fileFieldDropZoneVariants, fileFieldErrorVariants, fileFieldItemVariants, fileFieldLabelVariants, fileFieldListVariants, fileFieldRemoveButtonVariants, fileFieldSuccessVariants, fileFieldTriggerVariants, fileProgressBarVariants, fileProgressErrorVariants, fileProgressHeaderVariants, fileProgressRetryVariants, fileProgressTrackVariants, fileProgressVariants, formatAcceptedTypes, formatFileSize, generatePreview, getFileIcon, isFileTypeAccepted, isImageFile, truncateFileName, useFilePreview };
+//# sourceMappingURL=chunk-IEI5LD5C.mjs.map
+//# sourceMappingURL=chunk-IEI5LD5C.mjs.map