@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

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/FileUpload.js

@@ -198,10 +198,10 @@ const FileUpload = React__default.forwardRef(({ accept, multiple = false, maxSiz
                         e.preventDefault();
                         handleClick();
                     }
-                }, children: jsxs("div", { className: theme.contentStyle, children: [jsx("div", { className: "size-11 border border-border bg-white rounded-full flex items-center justify-center mb-4", children: jsx(CloudArrowUpIcon, { className: `size-6 text-[var(--color-text-secondary)]` }) }), jsxs("p", { className: "text-sm font-medium text-[var(--color-text-primary)]", children: [jsx("span", { className: "text-[var(--color-primary)] font-semibold", children: buttonText }), " ", helperText] }), description && (jsx("p", { className: "text-xs text-[var(--color-text-muted)] mt-1", children: description }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
+                }, 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 }))] }) }), showPreview && selectedFiles.length > 0 && (jsx("div", { className: theme.previewContainerStyle, children: selectedFiles.map((file, index) => {
                     const previewUrl = previewUrls.get(file);
                     const isImage = file.type.startsWith("image/");
-                    return (jsxs("div", { className: theme.previewItemStyle, children: [isImage && previewUrl ? (jsx("img", { src: previewUrl, alt: file.name, className: theme.previewImageStyle })) : (jsxs("div", { className: theme.previewFileStyle, children: [jsx(DocumentIcon, { className: "w-8 h-8 mx-auto mb-2 text-[var(--color-text-muted)]" }), jsx("span", { className: "text-xs", children: file.name }), jsx("span", { className: "text-xs text-[var(--color-text-placeholder)] mt-1", children: formatFileSize(file.size) })] })), jsx(Button, { variant: "filled", color: "danger", size: "sm", iconOnly: true, onClick: (e) => {
+                    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}`));

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

@@ -16,11 +16,11 @@ const fileUploadTheme = {
     // Upload icon
     iconStyle: "size-8 text-[var(--color-text-placeholder)]",
     // Main text
-    textStyle: "text-sm font-medium text-[var(--color-text-primary)]",
+    textStyle: "text-base font-medium text-[var(--color-text-primary)]",
     // Helper text
-    helperTextStyle: "text-sm text-[var(--color-text-muted)] mt-1",
+    helperTextStyle: "text-base text-[var(--color-text-muted)] mt-1",
     // Description below dropzone
-    descriptionStyle: "text-xs text-[var(--color-text-muted)] mt-1",
+    descriptionStyle: "text-sm 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
@@ -28,7 +28,7 @@ const fileUploadTheme = {
     // 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",
+    previewFileStyle: "flex items-center justify-center w-full h-32 p-3 text-base 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",
 };

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

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-base/6 font-medium mb-2",
     // State variants - using design tokens from global.scss
     stateStyles: {
         default: "text-[var(--color-text-primary)]",

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

@@ -4,12 +4,7 @@ import { FormLabel } from '../FormLabel/FormLabel.js';
 import { inputTheme } from './Input.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { LockClosedIcon, EyeSlashIcon, EyeIcon } from '@heroicons/react/24/solid';
-import { PlusIcon } from '../../../icons/core/PlusIcon.js';
-import { MinusIcon } from '../../../icons/core/MinusIcon.js';
-import { SearchIcon } from '../../../icons/core/SearchIcon.js';
-import '../../../icons/core/LockIcon.js';
-import '../../../icons/core/DollarIcon.js';
-import '../../../icons/core/TickIcon.js';
+import { MagnifyingGlassIcon, MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { validateMaskedInput, applyInputMask, getAdjustedCursorPosition } from './inputMasks.js';
 
 const PasswordToggleButton = ({ showPassword, onToggle, passwordToggleClasses, }) => {
@@ -31,10 +26,10 @@ const NumberButtons = ({ isDisabled, isAtMax, isAtMin, onIncrement, onDecrement,
     return (jsxs("div", { className: numberButtonsContainerClasses, children: [jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onDecrement();
-                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { size: "xs", className: decrementIconStyle, "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
+                }, disabled: isDisabled || isAtMin, "aria-label": "Decrease value", tabIndex: -1, children: jsx(MinusIcon, { className: cn("size-4", decrementIconStyle), "aria-hidden": "true" }) }), jsx("button", { type: "button", className: `${numberButtonClasses}`, onClick: (e) => {
                     e.stopPropagation();
                     onIncrement();
-                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { size: "xs", className: incrementIconStyle, "aria-hidden": "true" }) })] }));
+                }, disabled: isDisabled || isAtMax, "aria-label": "Increase value", tabIndex: -1, children: jsx(PlusIcon, { className: cn("size-4", incrementIconStyle), "aria-hidden": "true" }) })] }));
 };
 const getActiveDots = (strength) => {
     switch (strength) {
@@ -72,7 +67,7 @@ const PasswordStrengthIndicator = ({ inline = false, passwordStrengthIndicator,
 // ============================================================================
 // Main Input Component
 // ============================================================================
-const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, ...props }, ref) => {
+const Input = React__default.forwardRef(({ size = "md", state = "default", className = "", label, labelClassName = "", helperText, helperTextClassName = "", wrapperClassName = "", inputGroupClassName = "", iconStart, iconEnd, contentStart, contentEnd, keyboardShortcut, id, required, type = "text", passwordToggle = type === "password", passwordStrengthIndicator, showNumberControls = false, min, max, step = 1, onChange, onFocus, onBlur, value, currencyDecimalPlaces, darkMode = false, ...props }, ref) => {
     const [isFocused, setIsFocused] = useState(false);
     const [showPassword, setShowPassword] = useState(false);
     const generatedId = React__default.useId();
@@ -88,7 +83,7 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
     const cursorPositionRef = useRef(null);
     // Default icons based on input type
     const defaultPasswordIcon = type === "password" && !iconStart ? (jsx(LockClosedIcon, { className: "size-5 text-[var(--color-text-muted)]" })) : null;
-    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(SearchIcon, { size: "sm", className: inputTheme.typeStyles.search.iconStyle })) : null;
+    const defaultSearchIcon = type === "search" && !iconStart ? (jsx(MagnifyingGlassIcon, { className: cn("size-5", inputTheme.typeStyles.search.iconStyle) })) : null;
     // Use the provided iconStart or the default icon based on input type
     const finalLeftIcon = iconStart || defaultPasswordIcon || defaultSearchIcon;
     // Derived state flags for internal use
@@ -275,14 +270,14 @@ const Input = React__default.forwardRef(({ size = "md", state = "default", class
         numberValue !== undefined &&
         typeof min === "number" &&
         numberValue <= min;
-    return (jsxs("div", { className: cn(wrapperClasses, stateClass, wrapperClassName), children: [label && (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
-                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
+    return (jsxs("div", { className: cn(wrapperClasses, stateClass, darkMode && "dark", wrapperClassName), children: [label && (typeof label === 'string' ? (jsxs("div", { className: "flex justify-between items-center", children: [jsx(FormLabel, { htmlFor: inputId, className: labelClassName, state: state, required: required, children: label }), showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] })) : (jsxs("div", { className: "flex justify-between items-center", children: [label, showStrengthWithLabel && (jsx(PasswordStrengthIndicator, { inline: true, passwordStrengthIndicator: passwordStrengthIndicator }))] }))), jsx("div", { children: jsxs("div", { className: cn(inputGroupClasses, stateClasses, isFocused && (isInvalid ? inputTheme.inputGroupFocusInvalidStyle : inputTheme.inputGroupFocusStyle), inputGroupClassName), onClick: handleInputGroupClick, role: "presentation", children: [hasContentStart && (jsx("div", { "data-slot": "content-start", className: cn(contentStyleClasses, contentStartStyle), children: contentStart })), jsxs("div", { className: "relative flex-1", children: [jsx("input", { ref: setInputRef, id: inputId, type: actualInputType, className: cn(baseClasses, sizeClasses, hasLeftIcon && iconStartPadding, (hasRightIcon || isPasswordField || displayNumberControls) &&
+                                        iconEndPadding, className), disabled: isDisabled, "aria-invalid": isInvalid, "aria-describedby": helperText ? `${inputId}-helper` : undefined, required: required, min: min, max: max, step: step, value: value, onChange: handleInputChange, onFocus: (e) => {
                                         setIsFocused(true);
                                         onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
                                     }, onBlur: (e) => {
                                         setIsFocused(false);
                                         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
-                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText }))] }));
+                                    }, placeholder: props.placeholder, ...props }), hasLeftIcon && (jsx("div", { className: iconStartClasses, children: finalLeftIcon })), hasRightIcon && !isPasswordField && !displayNumberControls && (jsx("div", { className: iconEndClasses, children: iconEnd })), isPasswordField && (jsx(PasswordToggleButton, { showPassword: showPassword, onToggle: handleTogglePassword, passwordToggleClasses: passwordToggleClasses })), displayNumberControls && (jsx(NumberButtons, { isDisabled: isDisabled, isAtMax: isAtMax, isAtMin: isAtMin, onIncrement: handleIncrement, onDecrement: handleDecrement, numberButtonsContainerClasses: numberButtonsContainerClasses, numberButtonClasses: numberButtonClasses })), hasKeyboardShortcut && (jsx("div", { className: inputTheme.keyboardShortcutStyle, children: keyboardShortcut }))] }), hasContentEnd && (jsx("div", { "data-slot": "content-end", className: cn(contentStyleClasses, contentEndStyle), children: contentEnd }))] }) }), showStrengthBelow && jsx(PasswordStrengthIndicator, { inline: false, passwordStrengthIndicator: passwordStrengthIndicator }), helperText && (typeof helperText === 'string' ? (jsx("div", { id: `${inputId}-helper`, className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (helperText))] }));
 });
 Input.displayName = "Input";
 

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

@@ -88,7 +88,7 @@ const inputTheme = {
     // Password strength indicator with design tokens
     passwordStrengthIndicator: {
         containerStyle: "flex items-center gap-1",
-        labelStyle: "text-xs font-semibold mr-1",
+        labelStyle: "text-sm font-semibold mr-1",
         dotStyle: "size-1.5 rounded-full",
         dotActiveStyle: "bg-current",
         dotInactiveStyle: "bg-[var(--color-border)] dark:bg-[var(--color-neutral-700)]",

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

@@ -27,10 +27,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
      * supports masked input types: 'creditCard', 'expiryDate', 'phone', 'ssn', 'currency'
      */
     type?: InputType;
-    /** Optional label text for the input */
-    label?: string;
-    /** Optional helper text displayed below the input */
-    helperText?: string;
+    /** Optional label for the input — pass a string for default styling, or a ReactNode for full control */
+    label?: React.ReactNode;
+    /** Optional helper text below the input — pass a string for default styling, or a ReactNode for full control */
+    helperText?: React.ReactNode;
     /** Icon to display before the input (small decorative) */
     iconStart?: React.ReactNode;
     /** Icon to display after the input (small decorative) */
@@ -61,6 +61,12 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     passwordStrengthIndicator?: PasswordStrengthIndicator;
     /** Number of decimal places for currency inputs (default: 2). Only applies when type="currency" */
     currencyDecimalPlaces?: number;
+    /**
+     * Force dark mode styling for the component. Use when placing the component
+     * on a dark background while the page is in light mode.
+     * @default false
+     */
+    darkMode?: boolean;
 }
 export type InputSize = 'sm' | 'md' | 'lg';
 export type InputState = 'default' | 'disabled' | 'invalid';

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

@@ -23,7 +23,7 @@ const inputAddressTheme = {
     postalCodeInput: {
         ...inputTheme,
     },
-    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4',
+    chevronStyles: 'pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-[var(--color-text-muted)] sm:size-4',
 };
 /**
  * Styled theme matching the reference design

package/dist/components/forms/InputCounter/InputCounter.d.ts

@@ -26,4 +26,4 @@ import { InputCounterProps } from "./InputCounter.types";
  * );
  * ```
  */
-export declare const InputCounter: React.ForwardRefExoticComponent<Omit<InputCounterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const InputCounter: React.ForwardRefExoticComponent<InputCounterProps & React.RefAttributes<HTMLDivElement>>;