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

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

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 && (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, 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 && (typeof helperText === 'string' ? (jsx("div", { className: cn(helperTextClasses, helperTextClassName), children: helperText })) : (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.types.d.ts

@@ -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.js

@@ -33,7 +33,7 @@ import { MinusIcon, PlusIcon } from '@heroicons/react/24/outline';
  * );
  * ```
  */
-const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", ...props }, ref) => {
+const InputCounter = React__default.forwardRef(({ value, onChange, min, max, step = 1, disabled = false, decimalPlaces, formatNumber = (n) => n.toString(), className, buttonProps, theme, transition = { type: "spring", bounce: 0, stiffness: 300, damping: 30 }, "aria-label": ariaLabel = "Counter", onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...props }, ref) => {
     const shouldReduceMotion = useReducedMotion();
     const shouldDisableAnimations = !!shouldReduceMotion;
     // Auto-detect decimal places from step if not explicitly provided

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

@@ -26,7 +26,7 @@ const inputCreditCardTheme = {
     cvcInput: {
         ...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/InputOTP/InputOTP.theme.js

@@ -10,7 +10,7 @@ const inputOTPTheme = {
     // OTP input container
     containerStyle: 'flex items-center gap-3',
     // Individual input field styles with design tokens
-    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full',
+    inputStyle: 'text-center text-xl text-[var(--color-text-primary)] h-full !p-0',
     // Input group wrapper for grouped inputs (overrides default Input styling)
     inputGroupStyle: 'w-10 min-w-10 h-10 min-h-10 sm:w-12 sm:min-w-12 sm:h-12 sm:min-h-12',
     // Separator between input groups

package/dist/components/forms/Radio/Radio.animations.d.ts

@@ -0,0 +1,10 @@
+import { Variants } from "motion/react";
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+export declare const radioDotVariants: Variants;
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+export declare const reducedMotionDotVariants: Variants;

package/dist/components/forms/Radio/Radio.animations.js

@@ -0,0 +1,33 @@
+/**
+ * Radio dot spring animation
+ * Scales in with a subtle bounce on select, fades out smoothly on deselect
+ */
+const radioDotVariants = {
+    unchecked: {
+        scale: 0,
+        opacity: 0,
+        transition: {
+            duration: 0.15,
+            ease: "easeOut",
+        },
+    },
+    checked: {
+        scale: 1,
+        opacity: 1,
+        transition: {
+            type: "spring",
+            stiffness: 400,
+            damping: 15,
+            mass: 0.5,
+        },
+    },
+};
+/**
+ * Reduced motion variants — instant opacity toggle, no scale
+ */
+const reducedMotionDotVariants = {
+    unchecked: { opacity: 0 },
+    checked: { opacity: 1 },
+};
+
+export { radioDotVariants, reducedMotionDotVariants };

package/dist/components/forms/Radio/Radio.js

@@ -1,10 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useId } from 'react';
+import React__default, { useId, useState } from 'react';
+import { useReducedMotion, motion } from 'motion/react';
 import { radioTheme } from './Radio.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
 import { cn } from '../../../utils/cn.js';
 import { useRadioGroupContext } from './RadioContext.js';
 import { RadioGroup } from './RadioGroup.js';
+import { reducedMotionDotVariants, radioDotVariants } from './Radio.animations.js';
 
 /**
  * Radio component for selecting one option from a group
@@ -12,6 +14,7 @@ import { RadioGroup } from './RadioGroup.js';
 const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: checkedProp, defaultChecked, onChange, label, description, state: stateProp = "default", size: sizeProp = "md", className, ...restProps }, ref) => {
     var _a, _b, _c, _d;
     const autoId = useId();
+    const shouldReduceMotion = useReducedMotion();
     const groupContext = useRadioGroupContext();
     // Resolve props from group context or individual props
     const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
@@ -23,9 +26,15 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const isInGroup = groupContext !== undefined;
     const checked = isInGroup ? groupContext.value === value : checkedProp;
     const isControlled = checked !== undefined;
+    // Track internal state for uncontrolled radios (defaultChecked)
+    const [internalChecked, setInternalChecked] = useState(defaultChecked !== null && defaultChecked !== void 0 ? defaultChecked : false);
+    const isChecked = isControlled ? !!checked : internalChecked;
     const handleChange = (e) => {
         if (isDisabled)
             return;
+        if (!isControlled) {
+            setInternalChecked(e.target.checked);
+        }
         if (isInGroup) {
             groupContext.onChange(value);
         }
@@ -34,7 +43,7 @@ const RadioComponent = React__default.forwardRef(({ id: idProp, name: nameProp,
     const inputProps = isControlled
         ? { checked }
         : { defaultChecked };
-    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx("div", { className: cn(radioTheme.dotStyle, size === "sm" ? "size-2.5 top-0.25" : "size-3") })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
+    return (jsxs("div", { className: cn(radioTheme.baseStyle, className), ...restProps, children: [jsxs("div", { className: cn(radioTheme.inputContainerStyle, radioTheme.sizes[size]), children: [jsx("input", { ref: ref, type: "radio", id: id, name: name, value: value, ...inputProps, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn("peer", radioTheme.inputStyle, radioTheme.sizes[size]) }), jsx(motion.div, { className: cn(radioTheme.dotStyle, isDisabled && "saturate-0 opacity-80", size === "sm" ? "size-2.5" : "size-3"), initial: false, animate: isChecked ? "checked" : "unchecked", variants: shouldReduceMotion ? reducedMotionDotVariants : radioDotVariants })] }), (label || description) && (jsxs("label", { htmlFor: id, className: cn("cursor-pointer", isDisabled && "cursor-not-allowed"), children: [label && (typeof label === 'string' ? (jsx("span", { className: cn(formLabelTheme.baseStyle, formLabelTheme.stateStyles[state], "mb-0"), children: label })) : label), description && (typeof description === 'string' ? (jsx("div", { id: `${id}-description`, className: radioTheme.descriptionStyle, children: description })) : description)] }))] }));
 });
 RadioComponent.displayName = "Radio";
 const Radio = Object.assign(RadioComponent, { Group: RadioGroup });

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

@@ -9,11 +9,11 @@ const radioTheme = {
         // Default state - light
         "border-[var(--color-border)] bg-[var(--color-surface)] " +
         // Default state - dark
-        "dark:bg-[var(--color-background-secondary)] " +
+        "dark:bg-[var(--color-background-tertiary)] " +
         // Checked state - light
         "checked:border-[var(--color-primary)]  " +
         // Checked state - dark
-        " " +
+        "checked:bg-[var(--color-neutral-200)] " +
         // Checked outline - light
         "checked:outline-2 checked:outline-[var(--color-primary-100)] checked:outline-offset-1 " +
         // Checked outline - dark
@@ -28,7 +28,7 @@ const radioTheme = {
         // Disabled state - dark
         "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
         "dark:data-[state=disabled]:bg-[var(--color-neutral-700)] dark:data-[state=disabled]:border-[var(--color-neutral-600)]",
-    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)] opacity-0 transition-all duration-400 peer-checked:opacity-100 peer-data-[state=disabled]:saturate-0 peer-data-[state=disabled]:peer-checked:opacity-80",
+    dotStyle: "absolute inset-0 m-auto pointer-events-none rounded-full bg-[var(--color-primary)]",
     descriptionStyle: "text-base text-[var(--color-text-secondary)]/80 mt-0.5",
     sizes: {
         sm: "size-5 mt-0.25",