@flikk/ui 1.0.0-beta.26 → 1.0.0-beta.29

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

@@ -1,95 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useMemo, useId, 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 { 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/Carousel/CarouselBody.js';
-import '../../core/CommandPalette/CommandPalette.js';
-import '../../core/Separator/Separator.js';
-import '../../core/Drawer/Drawer.js';
-import '../../core/Drawer/DrawerBody.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/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/Popover/PopoverBody.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/TabsBody.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/Message/MessageBody.js';
-import '@heroicons/react/16/solid';
-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 '../../core/Sidebar/SidebarToggle.js';
-import '../../core/Sidebar/SidebarMobileTrigger.js';
-import '../../core/Sidebar/SidebarUserProfile.js';
-import '../../core/Sidebar/SidebarLogo.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/Icon/Icon.js';
-import '../../core/ImagePlaceholder/ImagePlaceholder.js';
 import { FormLabel } from '../FormLabel/FormLabel.js';
+import { Button } from '../../core/Button/Button.js';
 
 /**
  * FileUpload component - Drag-and-drop file uploader with previews
@@ -111,7 +28,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
  *   onUpload={(files) => console.log(files)}
  * />
  */
-const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSize, maxFiles, state = "default", disabled = false, label, errorMessage, 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 }
@@ -119,10 +36,39 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
     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(",");
@@ -150,25 +96,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)
@@ -209,14 +170,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,
@@ -227,7 +187,7 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         multiple,
         onUpload,
         onError,
-        createPreview,
+        commitFiles,
     ]);
     // Handle drag events
     const handleDragEnter = useCallback((e) => {
@@ -269,32 +229,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: [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" }), 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, 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-base 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-sm text-[var(--color-text-muted)] mt-1", children: description }))] }) }), errorMessage && (jsx("div", { className: "text-sm mt-1 text-[var(--color-danger)]", children: errorMessage })), 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-sm", children: file.name }), jsx("span", { className: "text-sm 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(CloudArrowUpIcon, { 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(DocumentIcon, { 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(XMarkIcon, { className: "size-4", strokeWidth: 2 }) })] }, 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,22 @@
-/**
- * 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
+    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

@@ -4,7 +4,7 @@ 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"]
@@ -43,7 +43,22 @@ export interface FileUploadProps extends Omit<React.HTMLAttributes<HTMLDivElemen
      */
     errorMessage?: React.ReactNode;
     /**
-     * Callback when files are selected/dropped
+     * 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;
     /**
@@ -59,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
      */
@@ -96,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/FormLabel/FormLabel.theme.js

@@ -3,7 +3,7 @@
  */
 const formLabelTheme = {
     // Base styles for the label element
-    baseStyle: "block text-sm/6 font-medium mb-2",
+    baseStyle: "block text-sm/6 font-medium mb-1",
     // State variants - using design tokens from global.scss
     stateStyles: {
         default: "text-[var(--color-text-primary)]",

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

@@ -9,14 +9,16 @@ const inputTheme = {
     wrapperStyle: formsBaseTheme.wrapperStyle,
     // Input group styles - no focus-within (focus is managed via JS for contentStart/contentEnd compatibility)
     inputGroupStyle: "relative flex rounded-[var(--form-radius)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
-        "bg-white transition-all " +
-        "dark:shadow-[inset_0_0_0_1px_var(--color-neutral-700)] dark:bg-[var(--color-neutral-900)]",
+        "bg-[var(--color-surface)] transition-all " +
+        // Hover edge: strengthen the border to --color-border-secondary on hover. Scoped with
+        // not-focus-within so the JS-driven focus border (primary) always wins.
+        "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-border-secondary)]",
     // JS-driven focus ring (applied when isFocused is true)
-    inputGroupFocusStyle: "shadow-[inset_0_0_0_2px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:shadow-[inset_0_0_0_2px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
+    inputGroupFocusStyle: "shadow-[inset_0_0_0_1px_var(--color-primary-600)] ring-4 ring-[var(--color-primary)]/10 " +
+        "dark:shadow-[inset_0_0_0_1px_var(--color-primary-500)] dark:ring-[var(--color-primary-500)]/20",
     // JS-driven focus ring for invalid state
-    inputGroupFocusInvalidStyle: "shadow-[inset_0_0_0_2px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
-        "dark:shadow-[inset_0_0_0_2px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
+    inputGroupFocusInvalidStyle: "shadow-[inset_0_0_0_1px_var(--color-danger)] ring-4 ring-[var(--color-danger)]/10 " +
+        "dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] dark:ring-[var(--color-danger-500)]/20",
     // Base input styles - extends common form control with design tokens
     baseStyle: `${formsBaseTheme.controlBaseStyle} py-2 px-3`,
     // Size variants - composed from atomic tokens
@@ -30,7 +32,10 @@ const inputTheme = {
         default: formsBaseTheme.states.default,
         disabled: formsBaseTheme.states.disabled,
         invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
-            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
+            // Keep the danger border on hover (don't let the hover edge override it)
+            "not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger)] " +
+            "dark:bg-[var(--color-danger-950)]/30 dark:shadow-[inset_0_0_0_1px_var(--color-danger-500)] " +
+            "dark:not-focus-within:hover:shadow-[inset_0_0_0_1px_var(--color-danger-500)]",
     },
     // Helper text styles with state handling
     helperText: formsBaseTheme.helperText,
@@ -66,9 +71,7 @@ const inputTheme = {
     numberButtonsContainerStyle: "absolute inset-y-0 right-0 flex flex-row items-center pr-2 z-10 gap-1",
     numberButtonStyle: "bg-[var(--color-background-secondary)] flex items-center justify-center " +
         "text-[var(--color-text-muted)] hover:bg-[var(--color-surface-hover)] " +
-        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors " +
-        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-500)] " +
-        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)]",
+        "hover:text-[var(--color-text-primary)] cursor-pointer size-6 rounded-sm transition-colors",
     // Type-specific styles organized by input type
     typeStyles: {
         password: {

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

@@ -3,7 +3,7 @@
  * Follows Flikkui design system with CSS variables
  */
 const inputCounterTheme = {
-    baseStyle: "flex items-center gap-3 transition-all p-1 border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
+    baseStyle: "flex items-center gap-3 transition-all p-1 bg-[var(--color-surface)] border border-[var(--color-border)] rounded-[var(--form-radius)] w-fit",
     buttonWrapperStyle: "flex-shrink-0",
     numberStyle: "min-w-fit text-center text-sm font-medium text-[var(--color-text-primary)] tabular-nums select-none",
 };