infinity-ui-elements 1.9.3 → 1.9.4

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Calendar, X, Loader2, Search, ChevronDown } from 'lucide-react';
+import { ExternalLink, Calendar, X, ChevronLeft, ChevronRight, Loader2, Search, ChevronDown } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Calendar$1 from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
@@ -2070,7 +2070,7 @@ const datePickerVariants = cva("relative flex items-center gap-2 border rounded-
     },
 });
 // Helper functions
-const parseDate = (date) => {
+const parseDate$1 = (date) => {
     if (!date)
         return null;
     if (date instanceof Date)
@@ -2081,7 +2081,7 @@ const parseDate = (date) => {
     }
     return null;
 };
-const formatDateDefault = (date) => {
+const formatDateDefault$1 = (date) => {
     return date.toLocaleDateString("en-US", {
         year: "numeric",
         month: "short",
@@ -2152,8 +2152,8 @@ const formatDateByPattern = (date, format) => {
     formatted = formatted.replace(/D/g, day.toString());
     return formatted;
 };
-const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, format, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate(defaultValue));
+const DatePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select a date", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", showClearButton = true, onClear, containerClassName, labelClassName, triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault$1, format, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(parseDate$1(defaultValue));
     const [isOpen, setIsOpen] = React.useState(false);
     const datePickerRef = React.useRef(null);
     const calendarRef = React.useRef(null);
@@ -2167,7 +2167,7 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
     });
     const [calendarHeight, setCalendarHeight] = React.useState(300); // Default height estimate
     const value = controlledValue !== undefined
-        ? parseDate(controlledValue)
+        ? parseDate$1(controlledValue)
         : uncontrolledValue;
     const hasValue = value !== null;
     // Create a formatter function that uses format prop if provided, otherwise formatDate
@@ -2388,8 +2388,8 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
             };
         }
     }, [isOpen]);
-    const minDateParsed = parseDate(minDate);
-    const maxDateParsed = parseDate(maxDate);
+    const minDateParsed = parseDate$1(minDate);
+    const maxDateParsed = parseDate$1(maxDate);
     const sizeConfig = {
         small: {
             gap: "gap-2",
@@ -2427,7 +2427,7 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
                             top: `${calendarTop}px`,
                             left: `${position.left}px`,
                             zIndex: isInsideModal ? 10001 : 9999,
-                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg p-4 w-fit", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", formatShortWeekday: (locale, date) => {
+                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg p-4 w-fit", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsx("div", { className: "react-calendar-wrapper w-fit", children: jsx(Calendar$1, { onChange: handleCalendarChange, value: value ?? null, minDate: minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, locale: "en-US", showNeighboringMonth: true, showFixedNumberOfWeeks: true, formatShortWeekday: (locale, date) => {
                                     const weekdayNames = [
                                         "Su",
                                         "Mo",
@@ -2444,6 +2444,502 @@ const DatePicker = React.forwardRef(({ className, value: controlledValue, defaul
 });
 DatePicker.displayName = "DatePicker";
 
+const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
+    variants: {
+        variant: {
+            default: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded
+          focus:ring-2
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
+            primary: `hover:bg-action-fill-neutral-faded
+          focus:bg-action-fill-neutral-faded 
+          focus:ring-2 
+          ring-action-outline-primary-faded-hover
+          border border-transparent
+          `,
+            negative: `hover:bg-action-fill-negative-faded 
+          focus:bg-action-fill-negative-faded 
+          focus:ring-2 ring-action-outline-negative-faded-hover
+          border border-transparent
+          `,
+        },
+        isDisabled: {
+            true: "cursor-not-allowed opacity-60",
+            false: "",
+        },
+        isSelected: {
+            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        isDisabled: false,
+        isSelected: false,
+    },
+});
+const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
+    const [internalSelected, setInternalSelected] = React.useState(isSelected);
+    // Sync internal state with prop
+    React.useEffect(() => {
+        setInternalSelected(isSelected);
+    }, [isSelected]);
+    const handleClick = (e) => {
+        if (isDisabled)
+            return;
+        if (type === "multiple") {
+            const newSelected = !internalSelected;
+            setInternalSelected(newSelected);
+            onSelectionChange?.(newSelected);
+        }
+        onClick?.(e);
+    };
+    const handleCheckboxChange = (e) => {
+        e.stopPropagation();
+        if (isDisabled)
+            return;
+        const newSelected = e.target.checked;
+        setInternalSelected(newSelected);
+        onSelectionChange?.(newSelected);
+    };
+    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
+            variant,
+            isDisabled,
+            isSelected: type === "multiple" ? internalSelected : false,
+        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
+                    ? "text-action-ink-primary-normal"
+                    : variant === "negative"
+                        ? "text-action-ink-negative-normal"
+                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
+                            ? "text-action-ink-primary-normal"
+                            : variant === "negative"
+                                ? "text-action-ink-negative-normal"
+                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
+});
+ListItem.displayName = "ListItem";
+
+const dateRangePickerVariants = cva("relative flex items-center gap-2 border rounded-large transition-all font-functional font-size-100 leading-100 bg-surface-fill-neutral-intense", {
+    variants: {
+        size: {
+            small: "h-[28px] px-3 text-xs gap-2",
+            medium: "h-[36px] px-4 text-sm gap-2",
+            large: "h-[44px] px-5 text-base gap-3",
+        },
+        isDisabled: {
+            true: `
+        border-[var(--border-width-thinner)]
+        hover:border-action-outline-neutral-disabled
+        border-action-outline-neutral-disabled
+        bg-surface-fill-neutral-intense cursor-not-allowed opacity-60`,
+            false: `
+        border-action-outline-neutral-faded 
+        hover:border-action-outline-primary-hover 
+        focus-within:border-action-outline-primary-hover 
+        focus-within:ring-2 
+        ring-action-outline-primary-faded-hover`,
+        },
+    },
+    defaultVariants: {
+        size: "medium",
+        isDisabled: false,
+    },
+});
+// Default preset options
+const defaultPresets = [
+    {
+        label: "Today",
+        value: "today",
+        getDateRange: () => {
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            return { startDate: today, endDate: today };
+        },
+    },
+    {
+        label: "Yesterday",
+        value: "yesterday",
+        getDateRange: () => {
+            const yesterday = new Date();
+            yesterday.setDate(yesterday.getDate() - 1);
+            yesterday.setHours(0, 0, 0, 0);
+            return { startDate: yesterday, endDate: yesterday };
+        },
+    },
+    {
+        label: "Last 7 days",
+        value: "last7days",
+        getDateRange: () => {
+            const endDate = new Date();
+            endDate.setHours(0, 0, 0, 0);
+            const startDate = new Date();
+            startDate.setDate(startDate.getDate() - 6);
+            startDate.setHours(0, 0, 0, 0);
+            return { startDate, endDate };
+        },
+    },
+    {
+        label: "Last 30 days",
+        value: "last30days",
+        getDateRange: () => {
+            const endDate = new Date();
+            endDate.setHours(0, 0, 0, 0);
+            const startDate = new Date();
+            startDate.setDate(startDate.getDate() - 29);
+            startDate.setHours(0, 0, 0, 0);
+            return { startDate, endDate };
+        },
+    },
+    {
+        label: "Last 6 months",
+        value: "last6months",
+        getDateRange: () => {
+            const endDate = new Date();
+            endDate.setHours(0, 0, 0, 0);
+            const startDate = new Date();
+            startDate.setMonth(startDate.getMonth() - 6);
+            startDate.setHours(0, 0, 0, 0);
+            return { startDate, endDate };
+        },
+    },
+    {
+        label: "All time",
+        value: "alltime",
+        getDateRange: () => {
+            return { startDate: null, endDate: null };
+        },
+    },
+];
+// Helper functions
+const parseDate = (date) => {
+    if (!date)
+        return null;
+    if (date instanceof Date)
+        return date;
+    if (typeof date === "string") {
+        const parsed = new Date(date);
+        return isNaN(parsed.getTime()) ? null : parsed;
+    }
+    return null;
+};
+const formatDateDefault = (date) => {
+    return date.toLocaleDateString("en-US", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+    });
+};
+const isSameDay = (date1, date2) => {
+    if (!date1 || !date2)
+        return false;
+    return (date1.getFullYear() === date2.getFullYear() &&
+        date1.getMonth() === date2.getMonth() &&
+        date1.getDate() === date2.getDate());
+};
+const formatMonthYear = (date) => {
+    return date.toLocaleDateString("en-US", {
+        month: "long",
+        year: "numeric",
+    });
+};
+const DateRangePicker = React.forwardRef(({ className, value: controlledValue, defaultValue, onChange, placeholder = "Select date range", isDisabled = false, size = "medium", triggerClassName, calendarClassName, minDate, maxDate, formatDate = formatDateDefault, presets = defaultPresets, showPresets = true, selectedPresetLabel, ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue || { startDate: null, endDate: null });
+    const [tempValue, setTempValue] = React.useState(defaultValue || { startDate: null, endDate: null });
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedPreset, setSelectedPreset] = React.useState(null);
+    const [startMonth, setStartMonth] = React.useState(new Date());
+    const [endMonth, setEndMonth] = React.useState(() => {
+        const nextMonth = new Date();
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    });
+    const datePickerRef = React.useRef(null);
+    const calendarRef = React.useRef(null);
+    const [position, setPosition] = React.useState({
+        top: 0,
+        left: 0,
+        width: 0,
+        bottom: 0,
+    });
+    const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
+    const [isInsideModal, setIsInsideModal] = React.useState(false);
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    const hasValue = value.startDate !== null || value.endDate !== null;
+    const handleOpenChange = (newOpen) => {
+        if (!isDisabled) {
+            setIsOpen(newOpen);
+            if (newOpen) {
+                // Set temp value to current value when opening
+                setTempValue(value);
+            }
+        }
+    };
+    const toggleOpen = () => {
+        handleOpenChange(!isOpen);
+    };
+    const handlePresetClick = (preset) => {
+        const dateRange = preset.getDateRange();
+        setTempValue(dateRange);
+        setSelectedPreset(preset.value);
+    };
+    const handleStartDateChange = (value, event) => {
+        const selectedDate = Array.isArray(value) ? value[0] : value;
+        if (!selectedDate)
+            return;
+        const newStartDate = new Date(selectedDate);
+        newStartDate.setHours(0, 0, 0, 0);
+        setTempValue((prev) => ({
+            startDate: newStartDate,
+            endDate: prev.endDate,
+        }));
+        setSelectedPreset(null);
+    };
+    const handleEndDateChange = (value, event) => {
+        const selectedDate = Array.isArray(value) ? value[0] : value;
+        if (!selectedDate)
+            return;
+        const newEndDate = new Date(selectedDate);
+        newEndDate.setHours(0, 0, 0, 0);
+        setTempValue((prev) => ({
+            startDate: prev.startDate,
+            endDate: newEndDate,
+        }));
+        setSelectedPreset(null);
+    };
+    const handleApply = () => {
+        if (controlledValue === undefined) {
+            setUncontrolledValue(tempValue);
+        }
+        onChange?.(tempValue);
+        setIsOpen(false);
+    };
+    const handleCancel = () => {
+        setTempValue(value);
+        setIsOpen(false);
+    };
+    const handlePrevStartMonth = () => {
+        const newMonth = new Date(startMonth);
+        newMonth.setMonth(newMonth.getMonth() - 1);
+        setStartMonth(newMonth);
+    };
+    const handleNextStartMonth = () => {
+        const newMonth = new Date(startMonth);
+        newMonth.setMonth(newMonth.getMonth() + 1);
+        setStartMonth(newMonth);
+    };
+    const handlePrevEndMonth = () => {
+        const newMonth = new Date(endMonth);
+        newMonth.setMonth(newMonth.getMonth() - 1);
+        setEndMonth(newMonth);
+    };
+    const handleNextEndMonth = () => {
+        const newMonth = new Date(endMonth);
+        newMonth.setMonth(newMonth.getMonth() + 1);
+        setEndMonth(newMonth);
+    };
+    // Check if date picker is inside a modal
+    React.useEffect(() => {
+        if (isOpen && datePickerRef.current) {
+            let element = datePickerRef.current;
+            let foundModal = false;
+            while (element && !foundModal) {
+                const styles = window.getComputedStyle(element);
+                const zIndex = parseInt(styles.zIndex, 10);
+                if (zIndex === 10000 || element.getAttribute("role") === "dialog") {
+                    foundModal = true;
+                    setIsInsideModal(true);
+                    break;
+                }
+                element = element.parentElement;
+            }
+            if (!foundModal) {
+                setIsInsideModal(false);
+            }
+        }
+    }, [isOpen]);
+    // Update position and placement when calendar opens or window resizes
+    React.useEffect(() => {
+        if (isOpen && datePickerRef.current) {
+            const updatePosition = () => {
+                const rect = datePickerRef.current?.getBoundingClientRect();
+                const calendarHeight = calendarRef.current?.offsetHeight || 600; // Estimated height
+                if (rect) {
+                    const viewportHeight = window.innerHeight;
+                    const viewportWidth = window.innerWidth;
+                    const gap = 4;
+                    // Calculate available space
+                    const spaceBelow = viewportHeight - rect.bottom - gap;
+                    const spaceAbove = rect.top - gap;
+                    // Determine vertical placement
+                    const placement = spaceBelow >= calendarHeight || spaceBelow >= spaceAbove
+                        ? "bottom"
+                        : "top";
+                    setDropdownPlacement(placement);
+                    // Calculate horizontal position
+                    let leftPosition = rect.left;
+                    const calendarWidth = calendarRef.current?.offsetWidth || 900; // Estimated width
+                    // Adjust if dropdown would overflow right edge
+                    if (leftPosition + calendarWidth > viewportWidth) {
+                        leftPosition = viewportWidth - calendarWidth - 10; // 10px margin from edge
+                    }
+                    // Ensure it doesn't overflow left edge
+                    if (leftPosition < 10) {
+                        leftPosition = 10;
+                    }
+                    setPosition({
+                        top: rect.top,
+                        left: leftPosition,
+                        width: rect.width,
+                        bottom: rect.bottom,
+                    });
+                }
+            };
+            updatePosition();
+            // Small delay to ensure calendar is rendered for accurate measurements
+            const timeoutId = setTimeout(updatePosition, 10);
+            window.addEventListener("resize", updatePosition);
+            window.addEventListener("scroll", updatePosition, true);
+            return () => {
+                clearTimeout(timeoutId);
+                window.removeEventListener("resize", updatePosition);
+                window.removeEventListener("scroll", updatePosition, true);
+            };
+        }
+    }, [isOpen]);
+    // Close calendar when clicking outside
+    React.useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (datePickerRef.current &&
+                !datePickerRef.current.contains(event.target) &&
+                calendarRef.current &&
+                !calendarRef.current.contains(event.target)) {
+                handleCancel();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("mousedown", handleClickOutside);
+            return () => {
+                document.removeEventListener("mousedown", handleClickOutside);
+            };
+        }
+    }, [isOpen, value]);
+    // Close on escape key
+    React.useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                handleCancel();
+            }
+        };
+        if (isOpen) {
+            document.addEventListener("keydown", handleEscape);
+            return () => {
+                document.removeEventListener("keydown", handleEscape);
+            };
+        }
+    }, [isOpen, value]);
+    const minDateParsed = parseDate(minDate);
+    const maxDateParsed = parseDate(maxDate);
+    const getDisplayText = () => {
+        if (selectedPresetLabel) {
+            return selectedPresetLabel;
+        }
+        if (selectedPreset) {
+            const preset = presets.find((p) => p.value === selectedPreset);
+            if (preset)
+                return preset.label;
+        }
+        if (!hasValue) {
+            return placeholder;
+        }
+        if (value.startDate && value.endDate) {
+            if (isSameDay(value.startDate, value.endDate)) {
+                return formatDate(value.startDate);
+            }
+            return `${formatDate(value.startDate)} - ${formatDate(value.endDate)}`;
+        }
+        if (value.startDate) {
+            return `From ${formatDate(value.startDate)}`;
+        }
+        if (value.endDate) {
+            return `Until ${formatDate(value.endDate)}`;
+        }
+        return placeholder;
+    };
+    return (jsxs("div", { ref: datePickerRef, className: cn("relative w-fit", className), children: [jsxs("div", { className: cn(dateRangePickerVariants({
+                    size,
+                    isDisabled,
+                }), "cursor-pointer", triggerClassName), onClick: !isDisabled ? toggleOpen : undefined, role: "button", "aria-haspopup": "dialog", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [jsx(Calendar, { className: cn("shrink-0 w-4 h-4", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-muted") }), jsx("span", { className: cn("flex-1 text-left truncate", !hasValue && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: getDisplayText() }), jsx(Icon, { name: "chevronDown", size: 16, className: cn("shrink-0 transition-transform", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : "text-surface-ink-neutral-muted", isOpen && "rotate-180") })] }), typeof document !== "undefined" &&
+                isOpen &&
+                !isDisabled &&
+                (() => {
+                    const gap = 4;
+                    const calendarHeight = calendarRef.current?.offsetHeight || 0;
+                    // Calculate top position based on placement
+                    const calendarTop = dropdownPlacement === "bottom"
+                        ? position.bottom + gap
+                        : position.top - calendarHeight - gap;
+                    const calendarPopup = (jsx("div", { ref: calendarRef, style: {
+                            position: "fixed",
+                            top: `${calendarTop}px`,
+                            left: `${position.left}px`,
+                            zIndex: isInsideModal ? 10001 : 9999,
+                            maxHeight: dropdownPlacement === "bottom"
+                                ? `${window.innerHeight - position.bottom - gap - 10}px`
+                                : `${position.top - gap - 10}px`,
+                            overflowY: "auto",
+                        }, className: cn("bg-surface-fill-neutral-intense rounded-large shadow-lg border border-surface-outline-neutral-subtle", calendarClassName), onClick: (e) => e.stopPropagation(), children: jsxs("div", { className: "flex", children: [showPresets && presets.length > 0 && (jsx("div", { className: "w-48 border-r border-surface-outline-neutral-subtle p-4 flex flex-col", children: presets.map((preset) => (jsx(ListItem, { title: preset.label, type: "single", showChevron: false, isSelected: selectedPreset === preset.value, onClick: () => handlePresetClick(preset), containerClassName: "mb-1 last:mb-0" }, preset.value))) })), jsxs("div", { className: "p-4", children: [jsxs("div", { className: "flex gap-6", children: [jsxs("div", { className: "flex flex-col gap-3", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "Start Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(startMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextStartMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { onChange: handleStartDateChange, value: tempValue.startDate, minDate: minDateParsed ?? undefined, maxDate: tempValue.endDate
+                                                                            ? tempValue.endDate
+                                                                            : maxDateParsed ?? undefined, activeStartDate: startMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
+                                                                            if (activeStartDate)
+                                                                                setStartMonth(activeStartDate);
+                                                                        }, locale: "en-US", showNavigation: false, showNeighboringMonth: true, showFixedNumberOfWeeks: true, formatShortWeekday: (locale, date) => {
+                                                                            const weekdayNames = [
+                                                                                "SUN",
+                                                                                "MON",
+                                                                                "TUE",
+                                                                                "WED",
+                                                                                "THU",
+                                                                                "FRI",
+                                                                                "SAT",
+                                                                            ];
+                                                                            return weekdayNames[date.getDay()];
+                                                                        } }) })] })] }), jsxs("div", { className: "flex flex-col gap-3 ", children: [jsx("div", { className: "flex flex-col px-3", children: jsx("p", { className: "text-body-small-medium", children: "End Date" }) }), jsxs("div", { className: "flex flex-col p-5 rounded-[8px] bg-surface-fill-neutral-moderate", children: [jsxs("div", { className: "flex items-center justify-between mb-3 px-3", children: [jsx("h3", { className: "text-body-small-medium font-medium text-surface-ink-neutral-normal", children: formatMonthYear(endMonth) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx("button", { onClick: handlePrevEndMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Previous month", children: jsx(ChevronLeft, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) }), jsx("button", { onClick: handleNextEndMonth, className: "p-1 hover:bg-surface-fill-neutral-faded rounded transition-colors", "aria-label": "Next month", children: jsx(ChevronRight, { className: "w-4 h-4 text-surface-ink-neutral-normal" }) })] })] }), jsx("div", { className: "date-range-calendar-wrapper", children: jsx(Calendar$1, { onChange: handleEndDateChange, value: tempValue.endDate, minDate: tempValue.startDate
+                                                                            ? tempValue.startDate
+                                                                            : minDateParsed ?? undefined, maxDate: maxDateParsed ?? undefined, activeStartDate: endMonth, onActiveStartDateChange: ({ activeStartDate, }) => {
+                                                                            if (activeStartDate)
+                                                                                setEndMonth(activeStartDate);
+                                                                        }, locale: "en-US", showNavigation: false, showNeighboringMonth: true, showFixedNumberOfWeeks: true, formatShortWeekday: (locale, date) => {
+                                                                            const weekdayNames = [
+                                                                                "SUN",
+                                                                                "MON",
+                                                                                "TUE",
+                                                                                "WED",
+                                                                                "THU",
+                                                                                "FRI",
+                                                                                "SAT",
+                                                                            ];
+                                                                            return weekdayNames[date.getDay()];
+                                                                        } }) })] })] })] }), jsxs("div", { className: "mt-4 pt-4 border-t border-surface-outline-neutral-subtle flex items-center justify-between", children: [jsxs("div", { className: "flex items-center gap-2", children: [jsx("div", { className: "w-2 h-2 rounded-full bg-action-fill-primary-default" }), jsx("span", { className: "text-sm text-surface-ink-neutral-normal", children: tempValue.startDate && tempValue.endDate
+                                                                ? isSameDay(tempValue.startDate, tempValue.endDate)
+                                                                    ? "Today"
+                                                                    : `${formatDate(tempValue.startDate)} - ${formatDate(tempValue.endDate)}`
+                                                                : tempValue.startDate
+                                                                    ? `From ${formatDate(tempValue.startDate)}`
+                                                                    : tempValue.endDate
+                                                                        ? `Until ${formatDate(tempValue.endDate)}`
+                                                                        : "No selection" })] }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "secondary", color: "neutral", size: "small", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "primary", color: "primary", size: "small", onClick: handleApply, children: "Apply date range" })] })] })] })] }) }));
+                    return createPortal(calendarPopup, document.body);
+                })()] }));
+});
+DateRangePicker.displayName = "DateRangePicker";
+
 const dividerVariants = cva("", {
     variants: {
         orientation: {
@@ -2537,84 +3033,6 @@ const Divider = React.forwardRef(({ className, orientation = "horizontal", thick
 });
 Divider.displayName = "Divider";
 
-const listItemVariants = cva("flex items-start gap-3 p-3 rounded-medium transition-colors cursor-pointer", {
-    variants: {
-        variant: {
-            default: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded
-          focus:ring-2
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            bordered: "border border-action-outline-primary-faded hover:bg-surface-fill-primary-subtle",
-            primary: `hover:bg-action-fill-neutral-faded
-          focus:bg-action-fill-neutral-faded 
-          focus:ring-2 
-          ring-action-outline-primary-faded-hover
-          border border-transparent
-          `,
-            negative: `hover:bg-action-fill-negative-faded 
-          focus:bg-action-fill-negative-faded 
-          focus:ring-2 ring-action-outline-negative-faded-hover
-          border border-transparent
-          `,
-        },
-        isDisabled: {
-            true: "cursor-not-allowed opacity-60",
-            false: "",
-        },
-        isSelected: {
-            true: "bg-action-fill-primary-faded border-action-outline-primary-faded",
-            false: "",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        isDisabled: false,
-        isSelected: false,
-    },
-});
-const ChevronRightIcon = ({ className }) => (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: jsx("path", { d: "M7.5 15L12.5 10L7.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-const ListItem = React.forwardRef(({ className, type = "single", leadingIcon, title, description, trailingIcon, showChevron = true, variant = "default", isDisabled = false, isSelected = false, onSelectionChange, checkboxSize = "small", containerClassName, contentClassName, onClick, ...props }, ref) => {
-    const [internalSelected, setInternalSelected] = React.useState(isSelected);
-    // Sync internal state with prop
-    React.useEffect(() => {
-        setInternalSelected(isSelected);
-    }, [isSelected]);
-    const handleClick = (e) => {
-        if (isDisabled)
-            return;
-        if (type === "multiple") {
-            const newSelected = !internalSelected;
-            setInternalSelected(newSelected);
-            onSelectionChange?.(newSelected);
-        }
-        onClick?.(e);
-    };
-    const handleCheckboxChange = (e) => {
-        e.stopPropagation();
-        if (isDisabled)
-            return;
-        const newSelected = e.target.checked;
-        setInternalSelected(newSelected);
-        onSelectionChange?.(newSelected);
-    };
-    return (jsxs("div", { ref: ref, className: cn(listItemVariants({
-            variant,
-            isDisabled,
-            isSelected: type === "multiple" ? internalSelected : false,
-        }), containerClassName), onClick: handleClick, role: type === "multiple" ? "checkbox" : "button", "aria-checked": type === "multiple" ? internalSelected : undefined, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : 0, ...props, children: [type === "multiple" && (jsx(Checkbox, { checked: internalSelected, onChange: handleCheckboxChange, isDisabled: isDisabled, size: checkboxSize, className: "shrink-0 mt-0.5" })), leadingIcon && (jsx("div", { className: cn(`shrink-0 flex items-center justify-center mt-0.5`, variant === "primary"
-                    ? "text-action-ink-primary-normal"
-                    : variant === "negative"
-                        ? "text-action-ink-negative-normal"
-                        : "text-action-ink-neutral-subtle", isDisabled && "text-surface-ink-neutral-disabled"), children: leadingIcon })), jsxs("div", { className: cn("flex-1 min-w-0 flex flex-col justify-center", contentClassName), children: [jsx("div", { className: cn("text-body-medium-regular truncate", variant === "primary"
-                            ? "text-action-ink-primary-normal"
-                            : variant === "negative"
-                                ? "text-action-ink-negative-normal"
-                                : "text-action-ink-neutral-normal", isDisabled && "text-surface-ink-neutral-disabled"), children: title }), description && (jsx("div", { className: cn("text-body-small-regular text-surface-ink-neutral-muted mt-0.5 line-clamp-2", isDisabled && "text-surface-ink-neutral-disabled"), children: description }))] }), (trailingIcon || showChevron) && (jsx("div", { className: "shrink-0 self-center text-action-ink-neutral-subtle", children: trailingIcon || jsx(ChevronRightIcon, {}) }))] }));
-});
-ListItem.displayName = "ListItem";
-
 const DropdownMenu = React.forwardRef(({ items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, showChevron = false, emptyIcon, disableFooter = false, showFooter, footerLayout = "horizontal", onClose, focusedIndex = -1, className, width = "auto", maxHeight = "400px", }, ref) => {
     const renderContent = () => {
         if (isLoading) {
@@ -5530,5 +5948,5 @@ const UploadBox = React.forwardRef(({ label, helperText, errorText, successText,
 });
 UploadBox.displayName = "UploadBox";
 
-export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
+export { Alert, Amount, Avatar, AvatarCell, Badge, Button, ButtonGroup, Checkbox, Counter, DatePicker, DateRangePicker, Divider, Dropdown, DropdownMenu, FormFooter, FormHeader, Icon, IconButton, IconCell, Link, ListItem, Modal, NumberCell, Pagination, Radio, RadioGroup, SearchableDropdown, Select, SelectTextField, SidePanel, Skeleton, SlotCell, SpacerCell, Switch, TabItem, Table, TableDetailPanel, Tabs, Text, TextArea, TextField, Toast, ToastProvider, Tooltip, UploadBox, alertVariants, avatarVariants, badgeVariants, buttonGroupVariants, buttonVariants, checkboxVariants, cn, counterVariants, datePickerVariants, dateRangePickerVariants, dropdownVariants, getAvailableIcons, hasIcon, iconButtonVariants, iconRegistry, linkVariants, listItemVariants, paginationVariants, radioVariants, selectTriggerVariants, switchVariants, tableCellVariants, tableHeaderVariants, tableVariants, textAreaVariants, textFieldVariants, tooltipVariants, uploadBoxVariants, useToast };
 //# sourceMappingURL=index.esm.js.map