@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

package/dist/components/forms/FileUpload/FileUpload.js

@@ -1,87 +1,13 @@
+"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useRef, useState, useCallback } from 'react';
+import React__default, { useMemo, useId, useRef, useCallback, useState, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { fileUploadTheme } from './FileUpload.theme.js';
+import { PREVIEW_LAYOUT_SPRING, PREVIEW_ITEM } from './FileUpload.animations.js';
 import { cn } from '../../../utils/cn.js';
-import { CloudArrowUpIcon, DocumentIcon, XMarkIcon } from '@heroicons/react/24/outline';
-import '../../core/Accordion/Accordion.js';
-import '../../core/AlertDialog/AlertDialog.js';
-import '../../core/AspectRatio/AspectRatio.js';
-import '../../core/Avatar/Avatar.js';
-import '../../core/AvatarGroup/AvatarGroup.js';
-import '../../core/Badge/Badge.js';
-import '../../core/Breadcrumbs/Breadcrumbs.js';
-import '../../core/Breadcrumbs/Breadcrumbs.theme.js';
+import { CloudArrowUp, File, X } from '@phosphor-icons/react';
 import { Button } from '../../core/Button/Button.js';
-import '../../core/ButtonGroup/ButtonGroup.js';
-import '../../core/ButtonGroup/ButtonGroupSeparator.js';
-import '../../core/ButtonGroup/ButtonGroupText.js';
-import '../../core/Calendar/Calendar.js';
-import '../../core/Calendar/CalendarMini/CalendarMini.js';
-import '../../core/Card/Card.js';
-import '../../core/CardStack/CardStack.js';
-import '../../core/Carousel/Carousel.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Dropdown/Dropdown.js';
-import '../../core/Dropdown/DropdownTrigger.js';
-import '../../core/Dropdown/DropdownMenu.js';
-import '../../core/Dropdown/DropdownItem.js';
-import '../../core/Dropdown/DropdownSection.js';
-import '../../core/Dropdown/DropdownSeparator.js';
-import '../../core/Dropdown/Dropdown.theme.js';
-import '../../core/Kbd/Kbd.js';
-import '../../core/MenuItem/MenuItem.js';
-import '../../core/Link/Link.js';
-import '../../core/Loader/Loader.js';
-import '../../core/Modal/Modal.js';
-import '../../core/ModalStack/ModalStack.js';
-import '../../core/PageHeading/PageHeading.js';
-import '../../core/Pagination/Pagination.js';
-import '../../core/Popover/Popover.js';
-import '../../core/Popover/PopoverContext.js';
-import '../../core/Progress/Progress.js';
-import '../../core/Rating/Rating.js';
-import '../../core/ScrollArea/ScrollArea.js';
-import '../../core/ScrollArea/smooth/SmoothScrollEngine.js';
-import '../../core/Segmented/Segmented.js';
-import '../../core/Skeleton/Skeleton.js';
-import '../../core/SlidingNumber/SlidingNumber.js';
-import '../../core/Tabs/Tabs.js';
-import '../../core/Tabs/TabsList.js';
-import '../../core/Tabs/TabsTrigger.js';
-import '../../core/Tabs/TabsContent.js';
-import '../../core/Tabs/TabsContext.js';
-import '../../core/Tooltip/Tooltip.js';
-import '../../core/Tooltip/Tooltip.animations.js';
-import '../../core/Tree/Tree.js';
-import '../../core/Tag/Tag.js';
-import '../../core/Alert/Alert.js';
-import '../../core/Toast/Toast.js';
-import '../../core/Toast/ToastProvider.js';
-import '@heroicons/react/24/solid';
-import '../../core/Spinner/Spinner.js';
-import '../../core/Message/Message.js';
-import '../../core/Message/TypeWriter.js';
-import '../../core/Empty/Empty.js';
-import '../../core/Masonry/Masonry.js';
-import '../../core/DragDrop/DragDrop.js';
-import '../../core/Sortable/Sortable.js';
-import '../../core/NavItem/NavItem.js';
-import '../../core/Sidebar/Sidebar.js';
-import '../../core/Sidebar/SidebarHeader.js';
-import '../../core/Sidebar/SidebarContent.js';
-import '../../core/Sidebar/SidebarFooter.js';
-import '../../core/Sidebar/SidebarNav.js';
-import '../../core/Sidebar/SidebarNavGroup.js';
-import 'motion/react';
-import '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarContext.js';
-import '../../core/OfflineIndicator/OfflineIndicator.js';
-import '../../core/ContextMenu/ContextMenu.js';
-import '../../core/ContextMenu/ContextMenu.theme.js';
-import '../../core/Pill/Pill.js';
-import '../../core/SocialIcon/SocialIcon.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews
@@ -103,15 +29,47 @@ import '../../core/SocialIcon/SocialIcon.js';
  *   onUpload={(files) => console.log(files)}
  * />
  */
-const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, disabled = false, onUpload, onRemove, onError, showPreview = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
+const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, state = "default", disabled = false, label, errorMessage, value, defaultFiles, onChange, onUpload, onRemove, onError, showPreview = true, showIcon = true, buttonText = "Choose files", helperText = "or drag and drop", description, className, theme: customTheme, ...props }, ref) => {
     // Merge custom theme with default theme
     const theme = useMemo(() => customTheme
         ? { ...fileUploadTheme, ...customTheme }
         : fileUploadTheme, [customTheme]);
+    const generatedId = useId();
+    const isDisabled = state === "disabled" || disabled;
+    const isInvalid = state === "invalid";
+    // Wire helper/error text to the control for screen readers.
+    const describedBy = [
+        description ? `${generatedId}-description` : null,
+        errorMessage ? `${generatedId}-error` : null,
+    ]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const shouldReduceMotion = useReducedMotion();
+    // Stable key per File reference — index keys would break exit/reflow
+    // animations as the list reorders. WeakMap so removed files are GC'd.
+    const fileKeysRef = useRef(new WeakMap());
+    const keyCounterRef = useRef(0);
+    const getFileKey = useCallback((file) => {
+        let key = fileKeysRef.current.get(file);
+        if (!key) {
+            key = `file-${keyCounterRef.current++}`;
+            fileKeysRef.current.set(file, key);
+        }
+        return key;
+    }, []);
     const inputRef = useRef(null);
     const [isDragActive, setIsDragActive] = useState(false);
-    const [selectedFiles, setSelectedFiles] = useState([]);
+    // Controlled when `value` is provided; otherwise track the list internally.
+    const isControlled = value !== undefined;
+    const [internalFiles, setInternalFiles] = useState(defaultFiles !== null && defaultFiles !== void 0 ? defaultFiles : []);
+    const selectedFiles = isControlled ? value : internalFiles;
     const [previewUrls, setPreviewUrls] = useState(new Map());
+    // Commit a new list: update internal state when uncontrolled, always notify.
+    const commitFiles = useCallback((next) => {
+        if (!isControlled)
+            setInternalFiles(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    }, [isControlled, onChange]);
     // Convert accept prop to array
     const acceptTypes = Array.isArray(accept) ? accept : accept ? [accept] : [];
     const acceptString = acceptTypes.join(",");
@@ -139,25 +97,40 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
             return true;
         return file.size <= maxSize;
     }, [maxSize]);
-    // Create preview URL for images
-    const createPreview = useCallback((file) => {
-        if (file.type.startsWith("image/")) {
-            const url = URL.createObjectURL(file);
-            setPreviewUrls((prev) => new Map(prev).set(file, url));
-        }
+    // Keep image preview URLs in sync with the current list. Runs for files added
+    // via the dropzone as well as files injected through `value`/`defaultFiles`.
+    useEffect(() => {
+        setPreviewUrls((prev) => {
+            const next = new Map();
+            let changed = false;
+            for (const file of selectedFiles) {
+                if (!file.type.startsWith("image/"))
+                    continue;
+                const existing = prev.get(file);
+                if (existing) {
+                    next.set(file, existing);
+                }
+                else {
+                    next.set(file, URL.createObjectURL(file));
+                    changed = true;
+                }
+            }
+            // Revoke URLs for files no longer present.
+            for (const [file, url] of prev) {
+                if (!next.has(file)) {
+                    URL.revokeObjectURL(url);
+                    changed = true;
+                }
+            }
+            return changed ? next : prev;
+        });
+    }, [selectedFiles]);
+    // Revoke any outstanding object URLs on unmount.
+    const previewUrlsRef = useRef(previewUrls);
+    previewUrlsRef.current = previewUrls;
+    useEffect(() => () => {
+        previewUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
     }, []);
-    // Clean up preview URLs
-    const revokePreview = useCallback((file) => {
-        const url = previewUrls.get(file);
-        if (url) {
-            URL.revokeObjectURL(url);
-            setPreviewUrls((prev) => {
-                const newMap = new Map(prev);
-                newMap.delete(file);
-                return newMap;
-            });
-        }
-    }, [previewUrls]);
     // Handle file selection/drop
     const handleFiles = useCallback((files) => {
         if (!files || files.length === 0)
@@ -198,14 +171,13 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
             onError === null || onError === void 0 ? void 0 : onError(error);
             return;
         }
-        // Update selected files
+        // Append when multiple, otherwise replace. Previews are handled by the
+        // sync effect above.
         const newFiles = multiple
             ? [...selectedFiles, ...validFiles]
             : validFiles;
-        setSelectedFiles(newFiles);
-        // Create previews
-        validFiles.forEach(createPreview);
-        // Call onUpload callback
+        commitFiles(newFiles);
+        // Call onUpload callback with only the newly added files
         onUpload === null || onUpload === void 0 ? void 0 : onUpload(validFiles);
     }, [
         isValidFileType,
@@ -216,15 +188,15 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         multiple,
         onUpload,
         onError,
-        createPreview,
+        commitFiles,
     ]);
     // Handle drag events
     const handleDragEnter = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
-        if (!disabled)
+        if (!isDisabled)
             setIsDragActive(true);
-    }, [disabled]);
+    }, [isDisabled]);
     const handleDragLeave = useCallback((e) => {
         e.preventDefault();
         e.stopPropagation();
@@ -238,18 +210,18 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         e.preventDefault();
         e.stopPropagation();
         setIsDragActive(false);
-        if (disabled)
+        if (isDisabled)
             return;
         const files = e.dataTransfer.files;
         handleFiles(files);
-    }, [disabled, handleFiles]);
+    }, [isDisabled, handleFiles]);
     // Handle click to select files
     const handleClick = useCallback(() => {
         var _a;
-        if (!disabled) {
+        if (!isDisabled) {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.click();
         }
-    }, [disabled]);
+    }, [isDisabled]);
     // Handle input change
     const handleInputChange = useCallback((e) => {
         handleFiles(e.target.files);
@@ -258,32 +230,23 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
     }, [handleFiles]);
     // Handle file removal
     const handleRemoveFile = useCallback((file) => {
-        setSelectedFiles((prev) => prev.filter((f) => f !== file));
-        revokePreview(file);
+        // Preview cleanup is handled by the sync effect.
+        commitFiles(selectedFiles.filter((f) => f !== file));
         onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
-    }, [onRemove, revokePreview]);
-    // Format file size
-    const formatFileSize = (bytes) => {
-        if (bytes === 0)
-            return "0 Bytes";
-        const k = 1024;
-        const sizes = ["Bytes", "KB", "MB", "GB"];
-        const i = Math.floor(Math.log(bytes) / Math.log(k));
-        return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + " " + sizes[i];
-    };
-    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [jsx("input", { ref: inputRef, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: disabled, className: "sr-only", "aria-label": "File upload" }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, disabled && theme.dropzoneDisabledStyle), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onKeyDown: (e) => {
+    }, [commitFiles, selectedFiles, onRemove]);
+    return (jsxs("div", { ref: ref, className: cn(theme.containerStyle, className), ...props, children: [label && (typeof label === "string" ? (jsx(FormLabel, { htmlFor: `${generatedId}-input`, state: isDisabled ? "disabled" : isInvalid ? "invalid" : "default", children: label })) : (label)), jsx("input", { ref: inputRef, id: `${generatedId}-input`, type: "file", accept: acceptString, multiple: multiple, onChange: handleInputChange, disabled: isDisabled, className: "sr-only", "aria-label": "File upload", "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy }), jsx("div", { className: cn(theme.dropzoneStyle, isDragActive && theme.dropzoneActiveStyle, isDisabled && theme.dropzoneDisabledStyle, isInvalid && "border-[var(--color-danger)]"), onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleClick, role: "button", tabIndex: isDisabled ? -1 : 0, "aria-disabled": isDisabled, "aria-invalid": isInvalid || undefined, "aria-describedby": describedBy, onKeyDown: (e) => {
                     if (e.key === "Enter" || e.key === " ") {
                         e.preventDefault();
                         handleClick();
                     }
-                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
-                    const previewUrl = previewUrls.get(file);
-                    const isImage = file.type.startsWith("image/");
-                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-xs", children: file.name }), jsx("span", { className: "text-xs text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
-                                    e.stopPropagation();
-                                    handleRemoveFile(file);
-                                }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6"), children: jsx(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, `${file.name}-${index}`));
-                }) }))] }));
+                }, children: jsxs("div", { className: "flex flex-col items-center text-center pointer-events-none", children: [showIcon && (jsx("div", { className: "size-10 border border-[var(--color-border)] bg-[var(--color-surface-raised)] rounded-full flex items-center justify-center mb-3", children: jsx(CloudArrowUp, { className: "size-6 text-[var(--color-text-secondary)]" }) })), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]/80", children: [jsx("span", { className: "text-[var(--color-primary)]", children: buttonText }), " ", helperText] }), description && (jsx("p", { id: `${generatedId}-description`, className: "text-xs text-[var(--color-text-muted)] mt-0.5", children: description }))] }) }), errorMessage && (jsx("div", { id: `${generatedId}-error`, className: "text-sm mt-1 text-[var(--color-danger)]", children: errorMessage })), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: jsx(AnimatePresence, { initial: false, children: selectedFiles.map((file) => {
+                        const previewUrl = previewUrls.get(file);
+                        const isImage = file.type.startsWith("image/");
+                        return (jsxs(motion.div, { layout: !shouldReduceMotion, initial: shouldReduceMotion ? false : PREVIEW_ITEM.initial, animate: PREVIEW_ITEM.animate, exit: shouldReduceMotion ? { opacity: 0 } : PREVIEW_ITEM.exit, transition: PREVIEW_LAYOUT_SPRING, className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsx("div", { className: theme.previewFileStyle, title: file.name, children: jsx(File, { className: "size-6" }) })), jsx(Button, { variant: "soft", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
+                                        e.stopPropagation();
+                                        handleRemoveFile(file);
+                                    }, "aria-label": `Remove ${file.name}`, className: cn(theme.removeButtonStyle, "rounded-full !p-0 size-6"), children: jsx(X, { className: "size-4", weight: "bold" }) })] }, getFileKey(file)));
+                    }) }) }))] }));
 });
 FileUpload.displayName = "FileUpload";
 

package/dist/components/forms/FileUpload/FileUpload.theme.d.ts

@@ -1,25 +1,17 @@
 /**
- * Internal theme structure for the FileUpload component
+ * Theme for the FileUpload component.
+ * Uses production-ready CSS variables from theme.css.
  */
 interface FileUploadTheme {
     containerStyle: string;
     dropzoneStyle: string;
     dropzoneActiveStyle: string;
     dropzoneDisabledStyle: string;
-    contentStyle: string;
-    iconStyle: string;
-    textStyle: string;
-    helperTextStyle: string;
-    descriptionStyle: string;
     previewContainerStyle: string;
     previewItemStyle: string;
     previewImageStyle: string;
     previewFileStyle: string;
     removeButtonStyle: string;
 }
-/**
- * Default theme for the FileUpload component
- * Uses production-ready CSS variables from global.scss
- */
 export declare const fileUploadTheme: FileUploadTheme;
 export {};

package/dist/components/forms/FileUpload/FileUpload.theme.js

@@ -1,36 +1,26 @@
-/**
- * Default theme for the FileUpload component
- * Uses production-ready CSS variables from global.scss
- */
 const fileUploadTheme = {
-    // Container wrapper
+    // Root container
     containerStyle: "w-full",
     // Dropzone area (default state)
-    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-background-secondary)] hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-primary)] transition-colors duration-400 cursor-pointer",
-    // Dropzone when dragging over
-    dropzoneActiveStyle: "border-[var(--color-primary)] bg-[var(--color-primary-50)] scale-[1.01]",
-    // Dropzone when disabled
-    dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-background-secondary)] hover:border-[var(--color-border)]",
-    // Content wrapper inside dropzone
-    contentStyle: "flex flex-col items-center text-center pointer-events-none",
-    // Upload icon
-    iconStyle: "size-8 text-[var(--color-text-placeholder)]",
-    // Main text
-    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
-    // Helper text
-    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
-    // Description below dropzone
-    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
-    // Preview container
-    previewContainerStyle: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4 mt-4",
-    // Individual preview item
-    previewItemStyle: "relative group rounded-[var(--radius-base)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-background-secondary)]",
-    // Preview image
-    previewImageStyle: "w-full h-32 object-cover",
-    // Preview file (non-image)
-    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-sm text-[var(--color-text-secondary)] text-center break-all",
-    // Remove button
-    removeButtonStyle: "absolute top-1 right-1  -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
+    dropzoneStyle: "relative flex flex-col items-center justify-center w-full min-h-[160px] p-6 border border-dashed border-[var(--color-border)] rounded-[var(--form-radius)] bg-[var(--color-surface)] hover:border-[var(--color-border-hover)] transition-colors duration-400 cursor-pointer",
+    // Dragging over — translucent primary tint composites over the surface in both modes
+    dropzoneActiveStyle: "border-solid border-[var(--color-primary)] bg-[var(--color-primary)]/5",
+    // Disabled
+    dropzoneDisabledStyle: "cursor-not-allowed opacity-60 hover:bg-[var(--color-surface)] hover:border-[var(--color-border)]",
+    // Wrapping row of fixed-width thumbnails (not a stretch grid)
+    previewContainerStyle: "flex flex-wrap gap-1 mt-2",
+    // Fixed responsive thumbnail — stays small on large containers, wraps to more-per-row.
+    // Intentionally uncapped (unlike the surface-radius-cap system in theme.css): the image
+    // fills the box edge-to-edge with no padding for a curve to eat into, so this behaves like
+    // a control (Avatar/Badge), not a content-bearing container — safe to go fully circular at
+    // an extreme --radius-base, same as Checkbox/Avatar.
+    previewItemStyle: "relative group shrink-0 size-10 sm:size-12 md:size-16 rounded-[var(--radius-base)] border border-[var(--color-border)] overflow-hidden bg-[var(--color-surface)]",
+    // Image fills the thumbnail box
+    previewImageStyle: "size-full object-cover",
+    // Non-image tile — centered document icon (filename surfaced via title tooltip)
+    previewFileStyle: "flex items-center justify-center size-full text-[var(--color-text-muted)]",
+    // Remove button (revealed on item hover)
+    removeButtonStyle: "absolute top-1 right-1 -translate-y-1 opacity-0 group-hover:opacity-100 transition-all duration-400 group-hover:-translate-y-0",
 };
 
 export { fileUploadTheme };

package/dist/components/forms/FileUpload/FileUpload.types.d.ts

@@ -1,8 +1,10 @@
+import React from "react";
+export type FileUploadState = "default" | "disabled" | "invalid";
 /**
  * FileUpload component props
  * Supports both click-to-upload and drag-and-drop
  */
-export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {
+export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError' | 'onChange'> {
     /**
      * Accepted file types (MIME types or file extensions)
      * @example ["image/*", ".pdf", ".doc"]
@@ -22,13 +24,41 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * Maximum number of files (when multiple is true)
      */
     maxFiles?: number;
+    /**
+     * Validation/interaction state
+     * @default "default"
+     */
+    state?: FileUploadState;
     /**
      * Whether the upload area is disabled
      * @default false
      */
     disabled?: boolean;
     /**
-     * Callback when files are selected/dropped
+     * Field label rendered above the dropzone
+     */
+    label?: React.ReactNode;
+    /**
+     * Validation error message rendered below the dropzone (styled in danger color)
+     */
+    errorMessage?: React.ReactNode;
+    /**
+     * Controlled file list. When provided, the component is controlled and the
+     * parent owns the list — pair with `onChange`. Leave undefined for the
+     * uncontrolled behavior (the component tracks its own list internally).
+     */
+    value?: File[];
+    /**
+     * Initial file list for the uncontrolled case. Ignored when `value` is set.
+     */
+    defaultFiles?: File[];
+    /**
+     * Callback fired whenever the full file list changes (add or remove),
+     * with the complete next list. Required to read state in controlled mode.
+     */
+    onChange?: (files: File[]) => void;
+    /**
+     * Callback when files are selected/dropped, with only the newly added files.
      */
     onUpload?: (files: File[]) => void;
     /**
@@ -44,20 +74,26 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      * @default true
      */
     showPreview?: boolean;
+    /**
+     * Show the upload icon inside the dropzone. Set `false` for slim/compact
+     * containers where the icon would crowd the text.
+     * @default true
+     */
+    showIcon?: boolean;
     /**
      * Custom upload button text
      * @default "Choose files"
      */
-    buttonText?: string;
+    buttonText?: React.ReactNode;
     /**
      * Custom dropzone helper text
      * @default "or drag and drop"
      */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /**
      * Helper text displayed below the upload area
      */
-    description?: string;
+    description?: React.ReactNode;
     /**
      * Custom CSS class for the container
      */
@@ -81,11 +117,6 @@ export interface FileUploadThemeOverrides {
     dropzoneStyle?: string;
     dropzoneActiveStyle?: string;
     dropzoneDisabledStyle?: string;
-    contentStyle?: string;
-    iconStyle?: string;
-    textStyle?: string;
-    helperTextStyle?: string;
-    descriptionStyle?: string;
     previewContainerStyle?: string;
     previewItemStyle?: string;
     previewImageStyle?: string;

package/dist/components/forms/FileUpload/FileUploadProgress.animations.d.ts

@@ -0,0 +1,36 @@
+/** Spring config for the progress arc animation. */
+export declare const PROGRESS_SPRING: {
+    type: "spring";
+    stiffness: number;
+    damping: number;
+    mass: number;
+};
+/** Crossfade transition for center content swaps. */
+export declare const CROSSFADE: {
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+    transition: {
+        duration: number;
+    };
+};
+/** Entrance animation for the remove button after completion. */
+export declare const REMOVE_BUTTON_ENTER: {
+    initial: {
+        opacity: number;
+        scale: number;
+    };
+    animate: {
+        opacity: number;
+        scale: number;
+    };
+    transition: {
+        duration: number;
+    };
+};

package/dist/components/forms/FileUpload/FileUploadProgress.animations.js

@@ -0,0 +1,22 @@
+/** Spring config for the progress arc animation. */
+const PROGRESS_SPRING = {
+    type: "spring",
+    stiffness: 100,
+    damping: 20,
+    mass: 0.5,
+};
+/** Crossfade transition for center content swaps. */
+const CROSSFADE = {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.15 },
+};
+/** Entrance animation for the remove button after completion. */
+const REMOVE_BUTTON_ENTER = {
+    initial: { opacity: 0, scale: 0.8 },
+    animate: { opacity: 1, scale: 1 },
+    transition: { duration: 0.2 },
+};
+
+export { CROSSFADE, PROGRESS_SPRING, REMOVE_BUTTON_ENTER };

package/dist/components/forms/FileUpload/FileUploadProgress.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { FileUploadProgressProps } from "./FileUploadProgress.types";
+export declare const FileUploadProgress: React.ForwardRefExoticComponent<FileUploadProgressProps & React.RefAttributes<HTMLDivElement>>;