@tribepad/themis 1.0.0 → 1.0.1

package/dist/elements/FileField/index.mjs

@@ -1,9 +1,1509 @@
-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 } from '../../chunk-IEI5LD5C.mjs';
-import '../../chunk-BDXKKMBZ.mjs';
-import '../../chunk-FPKEAJRZ.mjs';
-import '../../chunk-Z4FRNOF6.mjs';
-import '../../chunk-HK46BT5U.mjs';
-import '../../chunk-E2KQFV3O.mjs';
-import '../../chunk-5SVLJN2C.mjs';
+"use client";
+import { createContext, memo, forwardRef, useId, useState, useRef, useCallback, useContext, useEffect } from 'react';
+import { Button as Button$1, FileTrigger, ProgressBar } from 'react-aria-components';
+import { cva } from 'class-variance-authority';
+import { Loader2, Zap, Upload, X, FileIcon, AudioLines, VideoIcon, ImageIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { z } from 'zod';
+
+// src/elements/FileField/FileField.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var PRESSED_STYLES = "data-[pressed]:scale-[0.97]";
+var HOVER_STYLES = "data-[hovered]:shadow-md";
+var HIGH_CONTRAST_HOVER = "hc:data-[hovered]:outline hc:data-[hovered]:outline-2 hc:data-[hovered]:outline-foreground";
+var HIGH_CONTRAST_PRESSED = "hc:data-[pressed]:outline hc:data-[pressed]:outline-2 hc:data-[pressed]:outline-offset-1 hc:data-[pressed]:outline-foreground";
+var ButtonGroupContext = createContext(null);
+ButtonGroupContext.displayName = "ButtonGroupContext";
+function useButtonGroupContext() {
+  return useContext(ButtonGroupContext);
+}
+var ButtonGroupItemContext = createContext(null);
+ButtonGroupItemContext.displayName = "ButtonGroupItemContext";
+function useButtonGroupItemContext() {
+  return useContext(ButtonGroupItemContext);
+}
+cva("inline-flex items-center gap-0", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col w-full"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonGroupItemVariants = cva("", {
+  variants: {
+    orientation: {
+      // min-w-[44px] ensures visual layer fills touch target width (for icon buttons)
+      horizontal: "min-w-[44px]",
+      // flex (overrides inline-flex) + min-h-[44px] makes visual layer fill touch target,
+      // eliminating gaps between stacked buttons in vertical orientation
+      vertical: "flex min-h-[44px]"
+    },
+    position: {
+      first: "",
+      middle: "",
+      last: "",
+      only: ""
+      // Single button - no modifications needed
+    }
+  },
+  compoundVariants: [
+    // ==========================================================================
+    // Horizontal Orientation
+    // ==========================================================================
+    {
+      orientation: "horizontal",
+      position: "first",
+      className: "rounded-r-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "middle",
+      className: "rounded-none border-r-0"
+    },
+    {
+      orientation: "horizontal",
+      position: "last",
+      className: "rounded-l-none"
+    },
+    // ==========================================================================
+    // Vertical Orientation
+    // Note: w-full is handled by Button's effectiveFullWidth for both layers
+    // ==========================================================================
+    {
+      orientation: "vertical",
+      position: "first",
+      className: "rounded-b-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "middle",
+      className: "rounded-none border-b-0"
+    },
+    {
+      orientation: "vertical",
+      position: "last",
+      className: "rounded-t-none"
+    }
+  ],
+  defaultVariants: {
+    orientation: "horizontal",
+    position: "only"
+  }
+});
+cva("bg-[var(--border)]", {
+  variants: {
+    orientation: {
+      horizontal: "w-px h-6 mx-1",
+      vertical: "h-px w-full my-1"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var buttonOuterVariants = cva(
+  "inline-flex justify-center min-h-[44px] min-w-[44px] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      inVerticalGroup: {
+        true: "items-stretch",
+        false: "items-center"
+      }
+    },
+    defaultVariants: {
+      fullWidth: false,
+      inVerticalGroup: false
+    }
+  }
+);
+var buttonVisualVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 relative cursor-pointer",
+  {
+    variants: {
+      variant: {
+        default: "bg-[var(--primary-action)] text-[var(--primary-action-foreground)] shadow-md hover:bg-[var(--primary-action-hover)] data-[pressed]:bg-[var(--primary-action)]/80",
+        destructive: "bg-[var(--destructive-background)] text-[var(--destructive-foreground)] shadow-md hover:bg-[var(--destructive-background)]/90 data-[pressed]:bg-[var(--destructive-background)]/80",
+        outline: "border border-[var(--input-border)] bg-[var(--page-background)] hover:bg-[var(--input-border)] data-[pressed]:bg-[var(--input-border)]",
+        secondary: "bg-[var(--secondary)] text-[var(--secondary-foreground)] shadow-md hover:bg-[var(--secondary)]/80 data-[pressed]:bg-[var(--secondary)]/70",
+        ghost: "hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)] data-[pressed]:bg-[var(--accent)]",
+        link: "text-[var(--text-link)] underline-offset-4 hover:underline data-[pressed]:text-[var(--text-link-hover)]"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
+      },
+      visualSize: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3 text-xs",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+        dot: "h-5 w-5 rounded-full p-0 min-h-0 min-w-0"
+      },
+      paywall: {
+        true: "!bg-[var(--paywall)] !text-[var(--paywall-foreground)] !shadow-md hover:!bg-[var(--paywall)]/90 !cursor-not-allowed !border-transparent",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      visualSize: "default",
+      paywall: false
+    }
+  }
+);
+var Button = memo(forwardRef(
+  ({
+    className,
+    buttonVisualClassName,
+    variant,
+    size,
+    visualSize,
+    fullWidth,
+    loading = false,
+    loadingText = "Loading...",
+    shortcut,
+    children,
+    isDisabled,
+    paywall = false,
+    paywallRedirect,
+    paywallDescription,
+    onPress,
+    ...props
+  }, ref) => {
+    const paywallDescriptionId = useId();
+    const groupContext = useButtonGroupContext();
+    const itemContext = useButtonGroupItemContext();
+    const effectiveVariant = variant ?? groupContext?.variant ?? "default";
+    const effectiveSize = size ?? groupContext?.size;
+    const effectiveIsDisabled = isDisabled ?? groupContext?.isDisabled ?? false;
+    const isInVerticalGroup = groupContext?.orientation === "vertical";
+    const effectiveFullWidth = fullWidth || isInVerticalGroup;
+    const positionClassName = itemContext ? buttonGroupItemVariants({
+      orientation: groupContext?.orientation ?? "horizontal",
+      position: itemContext.position
+    }) : "";
+    const effectiveVisualSize = visualSize ?? effectiveSize ?? "default";
+    if (process.env.NODE_ENV !== "production") {
+      if ((effectiveVisualSize === "dot" || effectiveVisualSize === "icon") && !props["aria-label"] && !children) {
+        console.warn(
+          '[Button] visualSize="dot" or "icon" requires aria-label when no visible text is provided (WCAG 1.1.1)'
+        );
+      }
+    }
+    const handlePress = (e) => {
+      if (paywall) {
+        if (paywallRedirect) {
+          window.open(paywallRedirect, "_blank", "noopener,noreferrer");
+        }
+        return;
+      }
+      onPress?.(e);
+    };
+    const computedIsDisabled = effectiveIsDisabled || loading || void 0;
+    return /* @__PURE__ */ jsx(
+      Button$1,
+      {
+        ref,
+        isDisabled: computedIsDisabled,
+        "aria-disabled": paywall ? true : void 0,
+        "aria-describedby": paywall ? paywallDescriptionId : void 0,
+        onPress: handlePress,
+        className: cn(buttonOuterVariants({ fullWidth: effectiveFullWidth, inVerticalGroup: isInVerticalGroup }), className),
+        ...props,
+        children: (renderProps) => (
+          /* Layer 2: Visual Button */
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              className: cn(
+                buttonVisualVariants({
+                  variant: effectiveVariant,
+                  visualSize: effectiveVisualSize,
+                  paywall,
+                  fullWidth: effectiveFullWidth
+                }),
+                // Position styling from ButtonGroup context (border-radius adjustments)
+                positionClassName,
+                buttonVisualClassName,
+                // Layer 2 interaction styles (no focus - focus ring is on Layer 1)
+                PRESSED_STYLES,
+                HOVER_STYLES,
+                HIGH_CONTRAST_HOVER,
+                HIGH_CONTRAST_PRESSED
+              ),
+              "data-pressed": renderProps.isPressed || void 0,
+              children: [
+                loading && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(Loader2, { className: "motion-safe:animate-spin", "aria-hidden": "true" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: loadingText })
+                ] }),
+                !loading && children,
+                paywall && /* @__PURE__ */ jsx(
+                  Zap,
+                  {
+                    "data-testid": "zap-icon",
+                    "aria-hidden": "true",
+                    className: "ml-1"
+                  }
+                ),
+                paywall && /* @__PURE__ */ jsxs("span", { id: paywallDescriptionId, className: "sr-only", children: [
+                  "Premium feature: ",
+                  paywallDescription || "Upgrade required to access this feature"
+                ] }),
+                renderProps.isFocusVisible && shortcut && /* @__PURE__ */ jsx("kbd", { className: "ml-auto hidden text-xs opacity-60 lg:inline", children: shortcut }),
+                renderProps.isPressed && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "absolute inset-0 rounded-[inherit] bg-current opacity-10 motion-safe:animate-in motion-safe:zoom-in-95",
+                    "aria-hidden": "true"
+                  }
+                )
+              ]
+            }
+          )
+        )
+      }
+    );
+  }
+));
+Button.displayName = "Button";
+
+// src/styles/shared-variants.ts
+var FOCUS_WITHIN_RING = [
+  "focus-within:outline-none",
+  "focus-within:ring-2",
+  "focus-within:ring-[var(--ring)]",
+  "focus-within:ring-offset-2"
+];
+var FOCUS_VISIBLE_RING = [
+  "focus-visible:outline-none",
+  "focus-visible:ring-2",
+  "focus-visible:ring-[var(--ring)]",
+  "focus-visible:ring-offset-2"
+];
+var DISABLED_STANDARD = [
+  "disabled:pointer-events-none",
+  "disabled:opacity-50"
+];
+var TEXT_SIZE_SMALL_SCALE = {
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base"
+};
+var TEXT_SIZE_MEDIUM_SCALE = {
+  sm: "text-sm",
+  default: "text-base",
+  lg: "text-lg"
+};
+var TOUCH_TARGET_MIN = [
+  "min-h-[44px]",
+  "min-w-[44px]"
+];
+var ERROR_MESSAGE_BASE = [
+  "flex",
+  "items-center",
+  "gap-1.5",
+  "text-[var(--destructive)]"
+];
+var SUCCESS_MESSAGE_BASE = [
+  "flex",
+  "items-center",
+  "gap-1.5",
+  "text-[var(--success)]"
+];
+var DESCRIPTION_BASE = [
+  "text-[var(--menu-muted)]"
+];
+var LABEL_BASE = [
+  "font-medium",
+  "text-[var(--content-foreground)]"
+];
+var TRANSITION_COLORS = [
+  "transition-colors",
+  "duration-200"
+];
+function combineStyles(...styles) {
+  return styles.flatMap((s) => Array.isArray(s) ? [...s] : [s]);
+}
+
+// src/elements/FileField/FileField.variants.ts
+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 BaseComponentPropsSchema = z.object({
+  // Styling
+  className: z.string().optional(),
+  // React
+  children: z.any().optional(),
+  // ReactNode not directly supported by Zod
+  id: z.string().optional(),
+  // Accessibility (WCAG 2.2 AA requirements)
+  "aria-label": z.string().optional(),
+  "aria-labelledby": z.string().optional(),
+  "aria-describedby": z.string().optional(),
+  "aria-live": z.enum(["off", "polite", "assertive"]).optional(),
+  "aria-hidden": z.boolean().optional(),
+  // Testing & Development
+  "data-testid": z.string().optional()
+});
+
+// src/elements/FileField/FileField.types.ts
+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=index.mjs.map
 //# sourceMappingURL=index.mjs.map