@flikk/ui 1.0.0-beta.25 → 1.0.0-beta.27

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

@@ -1,6 +1,8 @@
 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';
@@ -32,6 +34,7 @@ import '../../core/Dropdown/DropdownItem.js';
 import '../../core/Dropdown/DropdownSection.js';
 import '../../core/Dropdown/DropdownSeparator.js';
 import '../../core/Dropdown/Dropdown.theme.js';
+import '../../core/DotSeparator/DotSeparator.js';
 import '../../core/Kbd/Kbd.js';
 import '../../core/MenuItem/MenuItem.js';
 import '../../core/Link/Link.js';
@@ -78,17 +81,19 @@ 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/SidebarMobileTrigger.js';
 import '../../core/Sidebar/SidebarUserProfile.js';
 import '../../core/Sidebar/SidebarLogo.js';
+import '../../core/Sidebar/SidebarSearch.js';
+import '../../core/Sidebar/SidebarCard.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';
 
 /**
@@ -111,7 +116,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 +124,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 +184,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 +258,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 +275,7 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
         multiple,
         onUpload,
         onError,
-        createPreview,
+        commitFiles,
     ]);
     // Handle drag events
     const handleDragEnter = useCallback((e) => {
@@ -269,32 +317,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/FileUpload/FileUploadProgress.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useState, useEffect } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
-import { DocumentIcon, TrashIcon, XMarkIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import { DocumentIcon, TrashIcon, ArrowPathIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { Icon } from '../../core/Icon/Icon.js';
 import { fileTypes } from '../../core/Icon/data/fileTypes.js';
 import { cn } from '../../../utils/cn.js';
@@ -39,27 +39,38 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
         setShowRemove(false);
     }, [isComplete, completionDelay]);
     const handleClick = () => {
-        if (isError && onRetry) {
-            onRetry();
+        if (!onRemove)
             return;
+        if (confirmRemove) {
+            setConfirmOpen(true);
         }
-        if (onRemove) {
-            if (confirmRemove) {
-                setConfirmOpen(true);
-            }
-            else {
-                onRemove();
-            }
+        else {
+            onRemove();
         }
     };
     const handleConfirm = () => {
         setConfirmOpen(false);
         onRemove === null || onRemove === void 0 ? void 0 : onRemove();
     };
-    const isClickable = (isError && onRetry) || onRemove;
-    const ariaLabel = isError && onRetry ? "Retry upload" : onRemove ? "Remove file" : undefined;
+    // Uploading/complete: the radial doubles as the cancel/remove target.
+    const isClickable = !!onRemove;
+    const ariaLabel = onRemove ? "Remove file" : undefined;
+    // Confirm popover shared by the radial (cancel/remove) and the error-state delete button.
+    const confirmPopover = (trigger, label, offsetValue) => (jsxs(Popover, { isOpen: confirmOpen, onOpenChange: (open) => {
+            setConfirmOpen(open);
+            if (!open)
+                setIsHovered(false);
+        }, placement: "bottom-end", offset: offsetValue, triggerType: "click", children: [jsx(Popover.Trigger, { children: trigger }), jsxs(Popover.Body, { className: "flex items-center p-1 border-[0.5px] rounded-xl gap-0.5 bg-opacity-50 backdrop-blur-md", children: [jsx("span", { className: "text-sm font-semibold text-[var(--color-text-secondary)] px-3", children: label }), jsxs("div", { className: "flex gap-1", children: [jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yes" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] })] }));
     // Shared remove button used after completion tick
     const removeButton = (jsx(motion.div, { initial: shouldReduceMotion ? false : REMOVE_BUTTON_ENTER.initial, animate: REMOVE_BUTTON_ENTER.animate, transition: REMOVE_BUTTON_ENTER.transition, className: "shrink-0", children: jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) }) }, "remove-btn"));
+    // Error state: retry + delete buttons (no progress arc/percentage).
+    if (isError) {
+        const deleteButton = onRemove ? (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Remove file", iconOnly: true, className: "rounded-full size-8", onClick: confirmRemove ? undefined : () => onRemove(), children: jsx(TrashIcon, { className: "size-3.5", strokeWidth: 2 }) })) : null;
+        return (jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [onRetry && (jsx(Button, { size: "sm", variant: "soft", color: "neutral", "aria-label": "Retry upload", iconOnly: true, className: "rounded-full size-8", onClick: () => onRetry(), children: jsx(ArrowPathIcon, { className: "size-3.5", strokeWidth: 2 }) })), deleteButton &&
+                    (confirmRemove
+                        ? confirmPopover(deleteButton, "Remove file?", 6)
+                        : deleteButton)] }));
+    }
     const radialElement = (jsxs("div", { className: cn("relative shrink-0", sizeClass, isClickable && "cursor-pointer"), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
             if (!confirmOpen)
                 setIsHovered(false);
@@ -70,18 +81,14 @@ const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressCol
                     handleClick();
                 }
             }
-            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: cn("size-4", statusIconColor), children: jsx("path", { d: "M5 13l4.5 4.5L19 7", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, "check")), isError && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(ArrowPathIcon, { className: cn("size-3.5", statusIconColor), strokeWidth: 2.5 }) }, "retry"))] }) })] }));
+            : undefined, children: [jsxs("svg", { viewBox: `0 0 ${VIEWBOX} ${VIEWBOX}`, className: "w-full h-full -rotate-90", children: [jsx("circle", { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth }), jsx(motion.circle, { cx: CENTER, cy: CENTER, r: radius, fill: "none", stroke: progressColor, strokeWidth: strokeWidth, strokeLinecap: "round", strokeDasharray: circumference, initial: { strokeDashoffset: circumference }, animate: { strokeDashoffset: isComplete ? 0 : offset }, transition: shouldReduceMotion ? { duration: 0 } : PROGRESS_SPRING })] }), jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: jsxs(AnimatePresence, { mode: "wait", initial: false, children: [isUploading && !isHovered && (jsx(motion.span, { className: centerTextStyle, ...(shouldReduceMotion ? {} : CROSSFADE), children: progress }, "percent")), isUploading && isHovered && onRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx(XMarkIcon, { className: "size-4 text-[var(--color-text-muted)]", strokeWidth: 2.5 }) }, "close")), isComplete && !showRemove && (jsx(motion.span, { ...(shouldReduceMotion ? {} : CROSSFADE), children: jsx("svg", { viewBox: "0 0 24 24", fill: "none", className: cn("size-4", statusIconColor), children: jsx("path", { d: "M5 13l4.5 4.5L19 7", stroke: "currentColor", strokeWidth: 3.5, strokeLinecap: "round", strokeLinejoin: "round" }) }) }, "check"))] }) })] }));
     // Determine what to render: radial indicator or remove button
     const showRemoveButton = isComplete && showRemove && onRemove;
     const triggerElement = showRemoveButton ? removeButton : radialElement;
-    // No confirm popover needed — return the element directly
+    // No confirm popover needed — return the element directly.
     if (!confirmRemove || !onRemove)
         return triggerElement;
-    return (jsxs(Popover, { isOpen: confirmOpen, onOpenChange: (open) => {
-            setConfirmOpen(open);
-            if (!open)
-                setIsHovered(false);
-        }, placement: "bottom-end", offset: isComplete ? 2 : 6, triggerType: "click", children: [jsx(Popover.Trigger, { children: triggerElement }), jsxs(Popover.Body, { portal: false, className: "flex items-center p-0.5 border-[0.5px] rounded-xl gap-0.5", children: [jsx("span", { className: "text-base font-medium text-[var(--color-text-secondary)] px-3", children: isComplete ? "Remove file?" : "Cancel upload?" }), jsx(Button, { size: "sm", color: "danger", variant: "filled", onClick: handleConfirm, children: "Yes" }), jsx(Button, { size: "sm", variant: "soft", color: "neutral", onClick: () => setConfirmOpen(false), children: "No" })] })] }));
+    return confirmPopover(triggerElement, isComplete ? "Remove file?" : "Cancel upload?", isComplete ? 2 : 6);
 };
 // --- Main Component ---
 const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry, showFileSize = true, confirmRemove = true, completionDelay = 1500, className, theme: themeOverrides, ...rest }, ref) => {
@@ -103,7 +110,7 @@ const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry
             const clampedProgress = Math.min(100, Math.max(0, item.progress));
             const ext = getFileExtension(item.file.name);
             const hasFileTypeIcon = ext !== null && isKnownFileType(ext);
-            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), showFileSize && (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _f !== void 0 ? _f : t.fileSizeStyle, children: formatFileSize(item.file.size) })), item.status === "error" && item.error && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _g !== void 0 ? _g : t.errorTextStyle, children: item.error }))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
+            return (jsxs("div", { className: (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.itemStyle) !== null && _a !== void 0 ? _a : t.itemStyle, children: [hasFileTypeIcon ? (jsx("span", { className: "shrink-0", children: jsx(Icon, { icon: ext, size: "lg" }) })) : (jsx("span", { className: cn((_b = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconContainerStyle) !== null && _b !== void 0 ? _b : t.iconContainerStyle, t.iconSize), children: jsx(DocumentIcon, { className: (_c = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.iconStyle) !== null && _c !== void 0 ? _c : t.iconStyle }) })), jsxs("div", { className: (_d = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileInfoStyle) !== null && _d !== void 0 ? _d : t.fileInfoStyle, children: [jsx("p", { className: (_e = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileNameStyle) !== null && _e !== void 0 ? _e : t.fileNameStyle, children: item.file.name }), item.status === "error" && item.error ? (jsx("p", { className: (_f = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.errorTextStyle) !== null && _f !== void 0 ? _f : t.errorTextStyle, children: item.error })) : (showFileSize && (jsx("p", { className: (_g = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.fileSizeStyle) !== null && _g !== void 0 ? _g : t.fileSizeStyle, children: formatFileSize(item.file.size) })))] }), jsx(RadialProgress, { progress: clampedProgress, status: item.status, strokeWidth: t.radialStroke, trackColor: (_h = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialTrackColor) !== null && _h !== void 0 ? _h : t.radialTrackColor, progressColor: radialProgressColors[item.status], centerTextStyle: (_j = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialCenterTextStyle) !== null && _j !== void 0 ? _j : t.radialCenterTextStyle, statusIconColor: statusIconColors[item.status], sizeClass: t.radialSize, shouldReduceMotion: shouldReduceMotion, confirmRemove: confirmRemove, completionDelay: completionDelay, onRemove: onRemove ? () => onRemove(item.id) : undefined, onRetry: onRetry ? () => onRetry(item.id) : undefined })] }, item.id));
         }) }));
 });
 FileUploadProgress.displayName = "FileUploadProgress";

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

@@ -6,13 +6,13 @@ const fileUploadProgressTheme = {
     fileInfoStyle: "flex-1 min-w-0",
     fileNameStyle: "text-sm font-medium text-[var(--color-text-primary)] truncate",
     fileSizeStyle: "text-xs text-[var(--color-text-muted)]",
-    radialTrackColor: "var(--color-background-tertiary)",
+    radialTrackColor: "var(--color-surface-sunken)",
     radialProgressColors: {
         uploading: "var(--color-primary)",
         complete: "var(--color-success)",
         error: "var(--color-danger)",
     },
-    radialCenterTextStyle: "text-[10px] font-semibold tabular-nums text-[var(--color-text-secondary)]",
+    radialCenterTextStyle: "text-xs tracking-tight font-semibold tabular-nums text-[var(--color-text-secondary)]",
     statusIconColors: {
         uploading: "",
         complete: "text-[var(--color-success)]",

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

@@ -8,17 +8,17 @@ const inputTheme = {
     // Base container styles
     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)] outline outline-1 outline-[var(--color-border)] " +
-        "bg-white transition-all " +
-        "dark:bg-[var(--color-neutral-900)] dark:outline-[var(--color-neutral-700)]",
+    inputGroupStyle: "relative flex rounded-[var(--form-radius)] shadow-[inset_0_0_0_1px_var(--color-border)] " +
+        "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: "outline-2 outline-[var(--color-primary-600)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-primary)]/10 " +
-        "dark:outline-[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: "outline-2 outline-[var(--color-danger)] -outline-offset-1 " +
-        "ring-4 ring-[var(--color-danger)]/10 " +
-        "dark:outline-[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
@@ -31,8 +31,11 @@ const inputTheme = {
     states: {
         default: formsBaseTheme.states.default,
         disabled: formsBaseTheme.states.disabled,
-        invalid: "outline-[var(--color-danger)] bg-[var(--color-danger-50)] " +
-            "dark:bg-[var(--color-danger-950)]/30 dark:outline-[var(--color-danger-500)]",
+        invalid: "shadow-[inset_0_0_0_1px_var(--color-danger)] bg-[var(--color-danger-50)] " +
+            // 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,
@@ -67,10 +70,8 @@ const inputTheme = {
     // Number input controls
     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-background-tertiary)] " +
-        "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)]",
+        "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",
     // 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",
 };