@flikk/ui 1.0.0-beta.14 → 1.0.0-beta.15

package/dist/components/forms/DateRangePicker/DateRangePickerBody.js

@@ -0,0 +1,208 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+import { Calendar } from '../../core/Calendar/Calendar.js';
+import '../../core/Calendar/CalendarMini/CalendarMini.js';
+import { Button } from '../../core/Button/Button.js';
+import { cn } from '../../../utils/cn.js';
+import { DateRangePickerContext } from './DateRangePicker.js';
+import { DateRangePickerPresets } from './DateRangePickerPresets.js';
+import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { createDropdownAnimations } from '../DatePicker/DatePicker.animations.js';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
+
+/**
+ * Hook to detect dark mode state from document
+ */
+const useDarkMode = () => {
+    const [isDark, setIsDark] = useState(false);
+    useEffect(() => {
+        if (typeof document === "undefined")
+            return;
+        const checkDarkMode = () => {
+            const hasDarkClass = document.documentElement.classList.contains("dark") ||
+                document.body.classList.contains("dark") ||
+                document.querySelector(".dark") !== null;
+            setIsDark(hasDarkClass);
+        };
+        checkDarkMode();
+        const observer = new MutationObserver(checkDarkMode);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        return () => observer.disconnect();
+    }, []);
+    return isDark;
+};
+/**
+ * DateRangePicker Body Component — dual calendars + presets sidebar + footer
+ */
+const DateRangePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, showPresets = true, }) => {
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerBody must be used within a DateRangePicker");
+    }
+    const { theme, triggerRef, contentRef, selectedRange, minDate, maxDate, isDateDisabled, showToday, weekdays, months, handleRangeSelect, yearRange, } = context;
+    const hasPresets = showPresets && presets && presets.length > 0;
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    const isMobile = useMediaQuery("(max-width: 639px)");
+    // Temp range state — not committed until Apply is clicked
+    const [tempRange, setTempRange] = useState(selectedRange);
+    // Sync temp range when panel opens
+    useEffect(() => {
+        if (isOpen) {
+            setTempRange(selectedRange);
+        }
+    }, [isOpen, selectedRange]);
+    // Handle preset selection — update calendar view to show the range
+    const handlePresetSelect = useCallback((range) => {
+        if (range.start) {
+            setLeftCalendarDate(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+    }, []);
+    // Dual calendar state
+    const getInitialLeftDate = () => {
+        if (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) {
+            return new Date(tempRange.start.getFullYear(), tempRange.start.getMonth(), 1);
+        }
+        if (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.start) {
+            return new Date(selectedRange.start.getFullYear(), selectedRange.start.getMonth(), 1);
+        }
+        return new Date();
+    };
+    const [leftCalendarDate, setLeftCalendarDate] = useState(getInitialLeftDate);
+    const rightCalendarDate = useMemo(() => {
+        const nextMonth = new Date(leftCalendarDate);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    }, [leftCalendarDate]);
+    const handleNavigatePrev = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate;
+        });
+    }, []);
+    const handleNavigateNext = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate;
+        });
+    }, []);
+    // Footer handlers
+    const handleApply = useCallback(() => {
+        if (tempRange) {
+            handleRangeSelect(tempRange);
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [tempRange, handleRangeSelect, onClose]);
+    const handleCancel = useCallback(() => {
+        setTempRange(selectedRange);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [selectedRange, onClose]);
+    // Format range for footer display
+    const formatRangeDisplay = (range) => {
+        if (!(range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end))
+            return "Select start and end dates";
+        if (!range.end)
+            return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ...`;
+        return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ${formatDateCustom(range.end, "DD/MM/YYYY")}`;
+    };
+    // Portal positioning
+    const { position, cssVariables, contentRef: portalContentRef, isFlipped, isReady, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement,
+        offset,
+        autoWidth: true,
+    });
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs
+    const combinedRef = React__default.useCallback((el) => {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current =
+                el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [contentRef, portalContentRef]);
+    // Click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            var _a;
+            const target = event.target;
+            if ((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[role="listbox"]')) {
+                return;
+            }
+            const currentContentRef = portal
+                ? portalContentRef.current
+                : contentRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
+    // Escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(theme.bodyStyle, className), style: {
+                ...cssVariables,
+                ...(portal
+                    ? {
+                        top: `${position.top}px`,
+                        left: `${position.left}px`,
+                        minWidth: `${position.width}px`,
+                    }
+                    : {}),
+            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: [hasPresets && presets && (jsx(DateRangePickerPresets, { presets: presets, tempRange: tempRange, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsxs("div", { className: "flex flex-col flex-1", children: [jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-center sm:items-start gap-2 sm:gap-6 p-3 sm:p-4", children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                            setTempRange(value);
+                                        }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: isMobile ? handleNavigateNext : null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) }), jsx("div", { className: "hidden sm:block flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                            setTempRange(value);
+                                        }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                                            const adjustedLeft = new Date(newDate);
+                                            adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                                            setLeftCalendarDate(adjustedLeft);
+                                        }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, showOtherMonthDays: false, headerMode: "static", size: "md" }) })] }), jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-3 sm:px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-center sm:text-left text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex w-full sm:w-auto items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", className: "flex-1 sm:flex-initial", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })] })) }));
+    if (portal && isClient) {
+        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
+    }
+    return contentElement;
+};
+DateRangePickerBody.displayName = "DateRangePicker.Body";
+
+export { DateRangePickerBody };

package/dist/components/forms/DateRangePicker/DateRangePickerPresets.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerPresetsProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Presets Component — shows preset buttons with checkmarks
+ */
+export declare const DateRangePickerPresets: React.FC<DateRangePickerPresetsProps>;

package/dist/components/forms/DateRangePicker/DateRangePickerPresets.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { DateRangePickerContext } from './DateRangePicker.js';
+import { cn } from '../../../utils/cn.js';
+
+/**
+ * DateRangePicker Presets Component — shows preset buttons with checkmarks
+ */
+const DateRangePickerPresets = ({ presets, className, tempRange, setTempRange, onPresetSelect, }) => {
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerPresets must be used within a DateRangePicker");
+    }
+    const { theme } = context;
+    const isSameDate = (d1, d2) => {
+        if (!d1 || !d2)
+            return d1 === d2;
+        return (d1.getFullYear() === d2.getFullYear() &&
+            d1.getMonth() === d2.getMonth() &&
+            d1.getDate() === d2.getDate());
+    };
+    const isPresetActive = (preset) => {
+        if (!tempRange)
+            return false;
+        const presetRange = preset.getValue();
+        return (isSameDate(tempRange.start, presetRange.start) &&
+            isSameDate(tempRange.end, presetRange.end));
+    };
+    const handlePresetClick = (preset) => {
+        const range = preset.getValue();
+        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
+        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
+    };
+    return (jsx("div", { className: cn(theme.presetsContainerStyle, className), children: presets.map((preset, index) => {
+            const active = isPresetActive(preset);
+            return (jsxs("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": active, children: [jsx("span", { children: preset.label }), active && jsx(CheckIcon, { className: theme.presetCheckmarkStyle })] }, index));
+        }) }));
+};
+
+export { DateRangePickerPresets };

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerTriggerProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Trigger Component — styled like form input
+ */
+export declare const DateRangePickerTrigger: React.FC<DateRangePickerTriggerProps>;

package/dist/components/forms/DateRangePicker/DateRangePickerTrigger.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { CalendarIcon } from '@heroicons/react/24/outline';
+import { cn } from '../../../utils/cn.js';
+import { DateRangePickerContext } from './DateRangePicker.js';
+
+/**
+ * DateRangePicker Trigger Component — styled like form input
+ */
+const DateRangePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+    var _a, _b, _c, _d;
+    const context = useContext(DateRangePickerContext);
+    if (!context) {
+        throw new Error("DateRangePickerTrigger must be used within a DateRangePicker");
+    }
+    const { theme, triggerRef } = context;
+    const baseStyle = theme.baseStyle || "";
+    const sizeStyle = ((_a = theme.triggerSizes) === null || _a === void 0 ? void 0 : _a[size]) || "";
+    const stateStyle = ((_b = theme.triggerStates) === null || _b === void 0 ? void 0 : _b[state]) || "";
+    const hoverStateStyle = ((_c = theme.triggerHoverStates) === null || _c === void 0 ? void 0 : _c[state]) || "";
+    const focusStateStyle = ((_d = theme.triggerFocusStates) === null || _d === void 0 ? void 0 : _d[state]) || "";
+    const iconEndStyle = theme.iconEndStyle || "";
+    const iconEndPadding = theme.iconEndPadding || "";
+    const triggerButtonStyle = theme.triggerButtonStyle || "";
+    const activeFocusState = isOpen
+        ? focusStateStyle ||
+            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+        : "";
+    return (jsx("div", { className: "relative w-full", children: jsxs("button", { ref: triggerRef, id: id, type: "button", className: cn(baseStyle, sizeStyle, stateStyle, hoverStateStyle, activeFocusState, iconEndPadding, triggerButtonStyle, "text-left", className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, disabled: disabled, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": "Open date range picker", children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
+};
+
+export { DateRangePickerTrigger };

package/dist/components/forms/DateRangePicker/dateRangePresets.d.ts

@@ -0,0 +1,5 @@
+import type { DateRangePreset } from "./DateRangePicker.types";
+/**
+ * Default date range presets matching the reference design
+ */
+export declare const DEFAULT_DATE_RANGE_PRESETS: DateRangePreset[];

package/dist/components/forms/DateRangePicker/dateRangePresets.js

@@ -0,0 +1,59 @@
+import { toDate, addDays, getThisWeek, getLastWeek, getThisMonth, getLastMonth } from '../../../utils/dateUtils.js';
+
+/**
+ * Default date range presets matching the reference design
+ */
+const DEFAULT_DATE_RANGE_PRESETS = [
+    {
+        label: "Today",
+        getValue: () => {
+            const today = toDate(new Date());
+            return { start: today, end: today };
+        },
+    },
+    {
+        label: "Yesterday",
+        getValue: () => {
+            const yesterday = addDays(new Date(), -1);
+            return { start: yesterday, end: yesterday };
+        },
+    },
+    {
+        label: "This week",
+        getValue: () => getThisWeek(),
+    },
+    {
+        label: "Last week",
+        getValue: () => getLastWeek(),
+    },
+    {
+        label: "This month",
+        getValue: () => getThisMonth(),
+    },
+    {
+        label: "Last month",
+        getValue: () => getLastMonth(),
+    },
+    {
+        label: "Last 3 months",
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const start = new Date(today.getFullYear(), today.getMonth() - 3, today.getDate());
+            start.setHours(0, 0, 0, 0);
+            return { start, end: today };
+        },
+    },
+    {
+        label: "Year to date",
+        getValue: () => {
+            const today = new Date();
+            today.setHours(23, 59, 59, 999);
+            const start = new Date(today.getFullYear(), 0, 1);
+            start.setHours(0, 0, 0, 0);
+            return { start, end: today };
+        },
+    },
+];
+
+export { DEFAULT_DATE_RANGE_PRESETS };

package/dist/components/forms/DateRangePicker/index.d.ts

@@ -0,0 +1,4 @@
+export { DateRangePicker, DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, } from "./DateRangePicker";
+export type { DateRangePickerProps, DateRangePickerTriggerProps, DateRangePickerBodyProps, DateRangePickerPresetsProps, DateRangePickerSize, DateRangePickerState, DateRangePickerPlacement, DateRangePickerTheme, DateRangePreset, } from "./DateRangePicker.types";
+export { dateRangePickerTheme } from "./DateRangePicker.theme";
+export { DEFAULT_DATE_RANGE_PRESETS } from "./dateRangePresets";

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>>;

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

@@ -0,0 +1,111 @@
+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 { FileTypeIcon } from '../../core/FileTypeIcon/FileTypeIcon.js';
+import { fileTypes } from '../../core/FileTypeIcon/fileTypes.js';
+import { cn } from '../../../utils/cn.js';
+import { getFileExtension, formatFileSize } from '../../../utils/formatUtils.js';
+import { Popover } from '../../core/Popover/Popover.js';
+import '../../core/Popover/PopoverContext.js';
+import '../../core/Popover/PopoverBody.js';
+import { Button } from '../../core/Button/Button.js';
+import { fileUploadProgressTheme } from './FileUploadProgress.theme.js';
+import { REMOVE_BUTTON_ENTER, PROGRESS_SPRING, CROSSFADE } from './FileUploadProgress.animations.js';
+
+const isKnownFileType = (ext) => {
+    return ext in fileTypes;
+};
+// SVG viewBox is 36×36 — small enough for crisp rendering, large enough for smooth arcs
+const VIEWBOX = 36;
+const CENTER = VIEWBOX / 2;
+const RadialProgress = ({ progress, status, strokeWidth, trackColor, progressColor, centerTextStyle, statusIconColor, sizeClass, shouldReduceMotion, confirmRemove, completionDelay, onRemove, onRetry, }) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    const [showRemove, setShowRemove] = useState(false);
+    const radius = (VIEWBOX - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - progress / 100);
+    const isUploading = status === "uploading";
+    const isComplete = status === "complete";
+    const isError = status === "error";
+    // After completing, show tick briefly then transition to remove button
+    useEffect(() => {
+        if (isComplete) {
+            setShowRemove(false);
+            const timer = setTimeout(() => setShowRemove(true), completionDelay);
+            return () => clearTimeout(timer);
+        }
+        setShowRemove(false);
+    }, [isComplete, completionDelay]);
+    const handleClick = () => {
+        if (isError && onRetry) {
+            onRetry();
+            return;
+        }
+        if (onRemove) {
+            if (confirmRemove) {
+                setConfirmOpen(true);
+            }
+            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;
+    // 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"));
+    const radialElement = (jsxs("div", { className: cn("relative shrink-0", sizeClass, isClickable && "cursor-pointer"), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => {
+            if (!confirmOpen)
+                setIsHovered(false);
+        }, onClick: isClickable ? handleClick : undefined, role: isClickable ? "button" : undefined, tabIndex: isClickable ? 0 : undefined, "aria-label": ariaLabel, onKeyDown: isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    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"))] }) })] }));
+    // 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
+    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" })] })] }));
+};
+// --- Main Component ---
+const FileUploadProgress = React__default.forwardRef(({ items, onRemove, onRetry, showFileSize = true, confirmRemove = true, completionDelay = 1500, className, theme: themeOverrides, ...rest }, ref) => {
+    var _a;
+    const shouldReduceMotion = useReducedMotion();
+    const t = fileUploadProgressTheme;
+    if (items.length === 0)
+        return null;
+    const radialProgressColors = {
+        ...t.radialProgressColors,
+        ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.radialProgressColors,
+    };
+    const statusIconColors = {
+        ...t.statusIconColors,
+        ...themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.statusIconColors,
+    };
+    return (jsx("div", { ref: ref, className: cn((_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.containerStyle) !== null && _a !== void 0 ? _a : t.containerStyle, className), ...rest, children: items.map((item) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            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(FileTypeIcon, { type: 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));
+        }) }));
+});
+FileUploadProgress.displayName = "FileUploadProgress";
+
+export { FileUploadProgress };

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

@@ -0,0 +1,19 @@
+import type { FileUploadProgressStatus } from "./FileUploadProgress.types";
+export interface FileUploadProgressTheme {
+    containerStyle: string;
+    itemStyle: string;
+    iconContainerStyle: string;
+    iconStyle: string;
+    fileInfoStyle: string;
+    fileNameStyle: string;
+    fileSizeStyle: string;
+    radialTrackColor: string;
+    radialProgressColors: Record<FileUploadProgressStatus, string>;
+    radialCenterTextStyle: string;
+    statusIconColors: Record<FileUploadProgressStatus, string>;
+    errorTextStyle: string;
+    radialSize: string;
+    radialStroke: number;
+    iconSize: string;
+}
+export declare const fileUploadProgressTheme: FileUploadProgressTheme;

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

@@ -0,0 +1,27 @@
+const fileUploadProgressTheme = {
+    containerStyle: "flex flex-col gap-3",
+    itemStyle: "w-full flex items-center gap-x-3",
+    iconContainerStyle: "flex items-center justify-center rounded-lg shrink-0 border border-[var(--color-border)] bg-[var(--color-background-secondary)]",
+    iconStyle: "shrink-0 size-5 text-[var(--color-text-muted)]",
+    fileInfoStyle: "flex-1 min-w-0",
+    fileNameStyle: "text-base font-medium text-[var(--color-text-primary)] truncate",
+    fileSizeStyle: "text-sm text-[var(--color-text-muted)]",
+    radialTrackColor: "var(--color-background-tertiary)",
+    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)]",
+    statusIconColors: {
+        uploading: "",
+        complete: "text-[var(--color-success)]",
+        error: "text-[var(--color-danger)]",
+    },
+    errorTextStyle: "text-xs text-[var(--color-danger)]",
+    iconSize: "size-10",
+    radialSize: "size-8",
+    radialStroke: 3,
+};
+
+export { fileUploadProgressTheme };

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

@@ -0,0 +1,33 @@
+export type FileUploadProgressStatus = 'uploading' | 'complete' | 'error';
+export interface FileUploadProgressItem {
+    id: string;
+    file: File;
+    progress: number;
+    status: FileUploadProgressStatus;
+    error?: string;
+}
+export interface FileUploadProgressThemeOverrides {
+    containerStyle?: string;
+    itemStyle?: string;
+    iconContainerStyle?: string;
+    iconStyle?: string;
+    fileInfoStyle?: string;
+    fileNameStyle?: string;
+    fileSizeStyle?: string;
+    radialTrackColor?: string;
+    radialProgressColors?: Partial<Record<FileUploadProgressStatus, string>>;
+    radialCenterTextStyle?: string;
+    statusIconColors?: Partial<Record<FileUploadProgressStatus, string>>;
+    errorTextStyle?: string;
+}
+export interface FileUploadProgressProps extends React.HTMLAttributes<HTMLDivElement> {
+    items: FileUploadProgressItem[];
+    onRemove?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    showFileSize?: boolean;
+    confirmRemove?: boolean;
+    /** Delay in ms before the completion tick transitions to the remove button. Default: 1500 */
+    completionDelay?: number;
+    className?: string;
+    theme?: FileUploadProgressThemeOverrides;
+}

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

@@ -1,3 +1,6 @@
 export { FileUpload } from './FileUpload';
 export { fileUploadTheme } from './FileUpload.theme';
 export type { FileUploadProps, FileUploadError, FileUploadThemeOverrides, UploadedFile } from './FileUpload.types';
+export { FileUploadProgress } from './FileUploadProgress';
+export { fileUploadProgressTheme } from './FileUploadProgress.theme';
+export type { FileUploadProgressProps, FileUploadProgressItem, FileUploadProgressStatus, FileUploadProgressThemeOverrides, } from './FileUploadProgress.types';