@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { SurfaceElevation } from "../../../theme/SurfaceContext";
 /**
  * Size variants for DatePicker components
  */
@@ -49,9 +50,9 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** Whether the field is required */
     required?: boolean;
     /** Label for the field */
-    label?: string;
+    label?: React.ReactNode;
     /** Helper text below the field */
-    helperText?: string;
+    helperText?: React.ReactNode;
     /** Callback fired when a date is selected - type depends on mode */
     onChange?: (value: Date | DateRange | null) => void;
     /** Array of preset date ranges (only for range mode) */
@@ -76,6 +77,11 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     dateFormat?: Intl.DateTimeFormatOptions;
     /** Custom format string for date display (e.g., 'DD MMM YYYY', 'DD/MM/YYYY') - takes precedence over dateFormat */
     formatString?: string;
+    /** Year range for the year dropdown (default: current year back to 100 years) */
+    yearRange?: {
+        start: number;
+        end: number;
+    };
     /** Auto-select today's date when calendar opens without a value (default: false) */
     selectTodayByDefault?: boolean;
     /** Additional class name for trigger button */
@@ -88,6 +94,13 @@ export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     placement?: DatePickerPlacement;
     /** Offset from trigger element */
     offset?: number;
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
     /** Children (for compound component usage) */
     children?: React.ReactNode;
 }
@@ -105,11 +118,13 @@ export interface DatePickerTriggerProps {
     onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
     children?: React.ReactNode;
+    "aria-invalid"?: boolean;
+    "aria-describedby"?: string;
 }
 /**
- * DatePicker content props
+ * DatePicker body props (calendar dropdown content)
  */
-export interface DatePickerContentProps {
+export interface DatePickerBodyProps {
     isOpen?: boolean;
     className?: string;
     onClose?: () => void;
@@ -117,6 +132,13 @@ export interface DatePickerContentProps {
     placement?: DatePickerPlacement;
     offset?: number;
     presets?: DateRangePreset[];
+    /**
+     * Pin the popover surface elevation rung (overrides the automatic relative lift).
+     * A rung number (1–8) or a semantic alias ("surface"/"raised"/"overlay"…).
+     */
+    elevation?: SurfaceElevation;
+    /** `false` opts out of the relative lift — paints at the popover's base rung. */
+    lift?: boolean;
     children?: React.ReactNode;
 }
 /**
@@ -135,8 +157,8 @@ export interface DatePickerTheme {
     triggerFocusStates: Record<DatePickerState, string>;
     iconEndStyle: string;
     iconEndPadding: string;
-    contentStyle: string;
-    contentWithPresetsStyle: string;
+    bodyStyle: string;
+    bodyWithPresetsStyle: string;
     presetsContainerStyle: string;
     presetButtonStyle: string;
     helperTextStyle: string;

package/dist/components/forms/DatePicker/DatePickerBody.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { DatePickerBodyProps } from "./DatePicker.types";
+/**
+ * DatePicker Body Component - contains the Calendar and optional Presets
+ * Uses portal positioning like Select component
+ */
+export declare const DatePickerBody: React.FC<DatePickerBodyProps>;

package/dist/components/forms/DatePicker/{DatePickerContent.js → DatePickerBody.js}

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React__default, { useContext, useState, useCallback, useMemo, useEffect } from 'react';
 import { AnimatePresence, motion } from 'motion/react';
@@ -6,52 +7,28 @@ import { Calendar } from '../../core/Calendar/Calendar.js';
 import '../../core/Calendar/CalendarMini/CalendarMini.js';
 import { Button } from '../../core/Button/Button.js';
 import { cn } from '../../../utils/cn.js';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 import { DatePickerPresets } from './DatePickerPresets.js';
 import { useSelectPortal } from '../../../hooks/useSelectPortal.js';
 import { formatDateCustom } from '../../../utils/dateUtils.js';
 import { createDropdownAnimations } from './DatePicker.animations.js';
 import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { useSurfaceElevation, SurfaceProvider, surfaceClasses } from '../../../theme/SurfaceContext.js';
 
 /**
- * Hook to detect dark mode state from document
- */
-const useDarkMode = () => {
-    const [isDark, setIsDark] = useState(false);
-    useEffect(() => {
-        if (typeof document === "undefined")
-            return;
-        const checkDarkMode = () => {
-            const hasDarkClass = document.documentElement.classList.contains("dark") ||
-                document.body.classList.contains("dark") ||
-                document.querySelector(".dark") !== null;
-            setIsDark(hasDarkClass);
-        };
-        checkDarkMode();
-        // Observe class changes on html and body
-        const observer = new MutationObserver(checkDarkMode);
-        observer.observe(document.documentElement, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        observer.observe(document.body, {
-            attributes: true,
-            attributeFilter: ["class"],
-        });
-        return () => observer.disconnect();
-    }, []);
-    return isDark;
-};
-/**
- * DatePicker Content Component - contains the Calendar and optional Presets
+ * DatePicker Body Component - contains the Calendar and optional Presets
  * Uses portal positioning like Select component
  */
-const DatePickerContent = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
+const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, elevation, lift, children, }) => {
+    // Relative elevation: the popover lifts above its host surface (overlay base = 5)
+    // so a DatePicker inside a Popover/Modal still reads as a higher plane.
+    const surfaceLevel = useSurfaceElevation({ baseRung: 5, offset: 2, elevation, lift });
     const context = useContext(DatePickerContext);
     if (!context) {
-        throw new Error("DatePickerContent must be used within a DatePicker");
+        throw new Error("DatePickerBody must be used within a DatePicker");
     }
-    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, } = context;
+    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, yearRange, } = context;
     // Determine if we should show presets
     const showPresets = mode === "range" && presets && presets.length > 0;
     // Detect dark mode for portal content
@@ -193,7 +170,7 @@ const DatePickerContent = ({ isOpen, className, onClose, portal = true, placemen
             document.removeEventListener("keydown", handleKeyDown);
         };
     }, [isOpen, onClose]);
-    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsxs(motion.div, { ref: combinedRef, className: cn(showPresets ? theme.contentWithPresetsStyle : theme.contentStyle, className), style: {
+    const contentElement = (jsx(AnimatePresence, { mode: "wait", children: isOpen && (jsx(motion.div, { ref: combinedRef, className: cn(surfaceClasses(surfaceLevel, { translucent: true, shadow: !showPresets }), showPresets ? theme.bodyWithPresetsStyle : theme.bodyStyle, className), style: {
                 ...cssVariables,
                 ...(portal
                     ? {
@@ -202,28 +179,29 @@ const DatePickerContent = ({ isOpen, className, onClose, portal = true, placemen
                         minWidth: `${position.width}px`,
                     }
                     : {}),
-            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: [showPresets && presets && (jsx(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsx("div", { className: "flex flex-col flex-1", children: mode === "range" ? (
-                    // Dual calendar for range mode
-                    jsxs(Fragment, { children: [jsx("div", { className: "flex justify-between items-start gap-6 p-4", children: children || (jsxs(Fragment, { children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                                    setTempRange(value); // Update temp state only
-                                                }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
-                                                    setTempRange(value); // Update temp state only
-                                                }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
-                                                    // Adjust left calendar when right calendar changes
-                                                    const adjustedLeft = new Date(newDate);
-                                                    adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
-                                                    setLeftCalendarDate(adjustedLeft);
-                                                }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)] dark:border-[var(--color-neutral-700)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "neutral", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
-                    // Single calendar for single mode
-                    jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
-                                handleDateSelect(value);
-                                onClose === null || onClose === void 0 ? void 0 : onClose();
-                            }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, size: "md" })) })) })] })) }));
+            }, variants: animations, initial: "initial", animate: isReady ? "visible" : "initial", exit: "exit", children: jsxs(SurfaceProvider, { level: surfaceLevel, children: [showPresets && presets && (jsx(DatePickerPresets, { presets: presets, setTempRange: setTempRange, onPresetSelect: handlePresetSelect })), jsx("div", { className: "flex flex-col flex-1", children: mode === "range" ? (
+                        // Dual calendar for range mode
+                        jsxs(Fragment, { children: [jsx("div", { className: "flex justify-between items-start gap-6 p-4", children: children || (jsxs(Fragment, { children: [jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                        setTempRange(value); // Update temp state only
+                                                    }, viewDate: leftCalendarDate, onViewDateChange: setLeftCalendarDate, onNavigatePrev: handleNavigatePrev, onNavigateNext: null, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) }), jsx("div", { className: "flex-1 min-w-fit", children: jsx(Calendar, { mode: "range", value: tempRange, onChange: (value) => {
+                                                        setTempRange(value); // Update temp state only
+                                                    }, viewDate: rightCalendarDate, onViewDateChange: (newDate) => {
+                                                        // Adjust left calendar when right calendar changes
+                                                        const adjustedLeft = new Date(newDate);
+                                                        adjustedLeft.setMonth(adjustedLeft.getMonth() - 1);
+                                                        setLeftCalendarDate(adjustedLeft);
+                                                    }, onNavigatePrev: null, onNavigateNext: handleNavigateNext, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: false, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" }) })] })) }), jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-[var(--color-border)]", children: [jsx("div", { className: "text-sm text-[var(--color-text-muted)]", children: formatRangeDisplay(tempRange) }), jsxs("div", { className: "flex items-center gap-2", children: [jsx(Button, { variant: "outline", color: "mono", size: "sm", onClick: handleCancel, children: "Cancel" }), jsx(Button, { variant: "filled", size: "sm", onClick: handleApply, disabled: !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.start) || !(tempRange === null || tempRange === void 0 ? void 0 : tempRange.end), children: "Apply" })] })] })] })) : (
+                        // Single calendar for single mode
+                        jsx("div", { className: "flex-1 p-4", children: children || (jsx(Calendar, { mode: "single", value: selectedValue, onChange: (value) => {
+                                    handleDateSelect(value);
+                                    onClose === null || onClose === void 0 ? void 0 : onClose();
+                                }, minDate: minDate, maxDate: maxDate, isDateDisabled: isDateDisabled, showToday: showToday, selectTodayByDefault: selectTodayByDefault, weekdays: weekdays, months: months, yearRange: yearRange, size: "md" })) })) })] }) })) }));
     // Use portal if enabled and client-side - wrap with dark class for dark mode support
     if (portal && isClient) {
-        return createPortal(jsx("div", { className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
+        return createPortal(jsx("div", { "data-flikkui-portal": "", className: isDarkMode ? "dark" : undefined, children: contentElement }), document.body);
     }
     return contentElement;
 };
+DatePickerBody.displayName = "DatePicker.Body";
 
-export { DatePickerContent };
+export { DatePickerBody };

package/dist/components/forms/DatePicker/DatePickerContext.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import type { DatePickerState, DatePickerSize, DateRange, DatePickerMode, DatePickerTheme } from "./DatePicker.types";
+export interface DatePickerContextType {
+    mode: DatePickerMode;
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedValue: Date | DateRange | undefined;
+    setSelectedValue: React.Dispatch<React.SetStateAction<Date | DateRange | undefined>>;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    selectTodayByDefault?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    handleDateSelect: (date: Date) => void;
+    handleRangeSelect?: (range: DateRange) => void;
+    size: DatePickerSize;
+    state: DatePickerState;
+    theme: DatePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DatePickerContext: React.Context<DatePickerContextType | undefined>;
+export declare const useDatePickerContext: () => DatePickerContextType;

package/dist/components/forms/DatePicker/DatePickerContext.js

@@ -0,0 +1,6 @@
+"use client";
+import { createContext } from 'react';
+
+const DatePickerContext = createContext(undefined);
+
+export { DatePickerContext };

package/dist/components/forms/DatePicker/DatePickerPresets.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 import { cn } from '../../../utils/cn.js';
 
 const DatePickerPresets = ({ presets, className, setTempRange, onPresetSelect, }) => {

package/dist/components/forms/DatePicker/DatePickerTrigger.js

@@ -1,14 +1,15 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useContext } from 'react';
-import { CalendarIcon } from '@heroicons/react/24/outline';
+import { Calendar } from '@phosphor-icons/react';
 import { cn } from '../../../utils/cn.js';
-import { DatePickerContext } from './DatePicker.js';
+import { DatePickerContext } from './DatePickerContext.js';
 
 /**
  * DatePicker Trigger Component - styled like form input
  * Displays selected date or placeholder text
  */
-const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, }) => {
+const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md", className, onClick, onFocus, onBlur, children, 'aria-invalid': ariaInvalid, 'aria-describedby': ariaDescribedby, }) => {
     var _a, _b, _c, _d;
     const context = useContext(DatePickerContext);
     if (!context) {
@@ -26,9 +27,9 @@ const DatePickerTrigger = ({ id, disabled, isOpen, state = "default", size = "md
     // Apply focused styles when open - same pattern as SelectButton
     const activeFocusState = isOpen
         ? focusStateStyle ||
-            "outline-2 outline-primary-600 -outline-offset-1 ring-4 ring-[var(--color-primary)]/10"
+            "shadow-[inset_0_0_0_1px_var(--color-primary-600)] 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 calendar", children: [children, jsx("span", { className: iconEndStyle, children: jsx(CalendarIcon, { className: "h-4 w-4" }) })] }) }));
+    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 calendar", "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, children: [children, jsx("span", { className: iconEndStyle, children: jsx(Calendar, { className: "h-4 w-4" }) })] }) }));
 };
 
 export { DatePickerTrigger };

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

@@ -1,3 +1,3 @@
-export { DatePicker, DatePickerTrigger, DatePickerContent, DatePickerPresets } from './DatePicker';
-export type { DatePickerProps, DatePickerTriggerProps, DatePickerContentProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
+export { DatePicker, DatePickerTrigger, DatePickerBody, DatePickerPresets } from './DatePicker';
+export type { DatePickerProps, DatePickerTriggerProps, DatePickerBodyProps, DatePickerSize, DatePickerState, DatePickerPlacement, DatePickerMode, DatePickerTheme, DateRange, DateRangePreset, } from './DatePicker.types';
 export { datePickerTheme } from './DatePicker.theme';

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

@@ -0,0 +1 @@
+export { createDropdownAnimations } from "../DatePicker/DatePicker.animations";

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

@@ -0,0 +1,17 @@
+import React from "react";
+import type { DateRangePickerProps } from "./DateRangePicker.types";
+import { DateRangePickerTrigger } from "./DateRangePickerTrigger";
+import { DateRangePickerBody } from "./DateRangePickerBody";
+import { DateRangePickerPresets } from "./DateRangePickerPresets";
+import { DateRangePickerContext } from "./DateRangePickerContext";
+export { DateRangePickerContext };
+/**
+ * DateRangePicker Component — dedicated range picker with presets and dual calendars
+ */
+declare const DateRangePickerComponent: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
+declare const DateRangePickerWithCompounds: typeof DateRangePickerComponent & {
+    Trigger: typeof DateRangePickerTrigger;
+    Body: typeof DateRangePickerBody;
+    Presets: typeof DateRangePickerPresets;
+};
+export { DateRangePickerTrigger, DateRangePickerBody, DateRangePickerPresets, DateRangePickerWithCompounds as DateRangePicker, };

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

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { dateRangePickerTheme } from './DateRangePicker.theme.js';
+import { DEFAULT_DATE_RANGE_PRESETS } from './dateRangePresets.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { DateRangePickerTrigger } from './DateRangePickerTrigger.js';
+import { DateRangePickerBody } from './DateRangePickerBody.js';
+import { DateRangePickerPresets } from './DateRangePickerPresets.js';
+import { cn } from '../../../utils/cn.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+import { DateRangePickerContext } from './DateRangePickerContext.js';
+
+/**
+ * Format date for display
+ */
+const formatDate = (date, formatString, options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+}) => {
+    if (formatString) {
+        return formatDateCustom(date, formatString);
+    }
+    return date.toLocaleDateString('en-US', options);
+};
+/**
+ * Format date range for display
+ */
+const formatDateRange = (range, formatString, options) => {
+    if (!range.start && !range.end)
+        return "";
+    if (range.start && !range.end)
+        return formatDate(range.start, formatString, options);
+    if (!range.start && range.end)
+        return formatDate(range.end, formatString, options);
+    return `${formatDate(range.start, formatString, options)} - ${formatDate(range.end, formatString, options)}`;
+};
+/**
+ * DateRangePicker Component — dedicated range picker with presets and dual calendars
+ */
+const DateRangePickerComponent = React__default.forwardRef(({ id, name, size = "md", state = "default", value, defaultValue, placeholder = "Select date range...", disabled = false, required = false, label, helperText, errorMessage, onChange, onFocus, onBlur, presets = DEFAULT_DATE_RANGE_PRESETS, showPresets = true, minDate, maxDate, isDateDisabled, showToday = true, weekdays, months, dateFormat, formatString, yearRange, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, elevation, lift, ...rest }, ref) => {
+    var _a, _b;
+    const theme = { ...dateRangePickerTheme };
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedRange, setSelectedRange] = useState(value || defaultValue);
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    // Sync controlled value
+    useEffect(() => {
+        if (value !== undefined) {
+            setSelectedRange(value);
+        }
+    }, [value]);
+    const handleRangeSelect = useCallback((newRange) => {
+        // Only update internal state in uncontrolled mode — in controlled mode
+        // (`value` provided), the displayed range must come from the `value`
+        // prop alone, so it doesn't drift ahead of the parent if it rejects
+        // or otherwise doesn't echo the change back. `onChange` still always
+        // fires so the parent can decide.
+        if (value === undefined) {
+            setSelectedRange(newRange);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+    }, [value, onChange]);
+    const handleButtonClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen((prev) => !prev);
+        }
+    }, [disabled]);
+    const displayValue = selectedRange
+        ? formatDateRange(selectedRange, formatString, dateFormat)
+        : placeholder;
+    const generatedId = React__default.useId();
+    const pickerId = id || generatedId;
+    // errorMessage takes precedence over helperText while invalid; helperText
+    // behavior is unchanged otherwise.
+    const displayedMessage = state === "invalid" && errorMessage ? errorMessage : helperText;
+    return (jsx(DateRangePickerContext.Provider, { value: useMemo(() => ({
+            isOpen,
+            setIsOpen,
+            selectedRange,
+            handleRangeSelect,
+            minDate,
+            maxDate,
+            isDateDisabled,
+            showToday,
+            weekdays,
+            months,
+            yearRange,
+            size,
+            state,
+            theme,
+            triggerRef,
+            contentRef,
+        }), [
+            isOpen,
+            selectedRange,
+            handleRangeSelect,
+            minDate,
+            maxDate,
+            isDateDisabled,
+            showToday,
+            weekdays,
+            months,
+            yearRange,
+            size,
+            state,
+            theme,
+        ]), children: jsxs("div", { ref: ref, className: cn(theme.containerStyle, wrapperClassName), ...rest, children: [label && (typeof label === 'string' ? (jsx(FormLabel, { htmlFor: pickerId, state: state, required: required, children: label })) : (label)), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, "aria-invalid": state === 'invalid' || undefined, "aria-describedby": displayedMessage ? `${pickerId}-helper` : undefined, children: jsx("span", { className: cn("block truncate", selectedRange && (selectedRange.start || selectedRange.end)
+                            ? theme.valueTextStyle
+                            : theme.placeholderTextStyle), children: displayValue }) }), jsx(DateRangePickerBody, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, showPresets: showPresets, elevation: elevation, lift: lift }), displayedMessage && (typeof displayedMessage === 'string' ? (jsx("p", { id: `${pickerId}-helper`, role: state === 'invalid' ? 'alert' : undefined, className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: displayedMessage })) : (displayedMessage)), name && selectedRange && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedRange.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedRange.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
+});
+DateRangePickerComponent.displayName = "DateRangePicker";
+// Compound component
+const DateRangePickerWithCompounds = DateRangePickerComponent;
+DateRangePickerWithCompounds.Trigger = DateRangePickerTrigger;
+DateRangePickerWithCompounds.Body = DateRangePickerBody;
+DateRangePickerWithCompounds.Presets = DateRangePickerPresets;
+
+export { DateRangePickerWithCompounds as DateRangePicker, DateRangePickerBody, DateRangePickerContext, DateRangePickerPresets, DateRangePickerTrigger };

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

@@ -0,0 +1,5 @@
+import { DateRangePickerTheme } from "./DateRangePicker.types";
+/**
+ * DateRangePicker theme — mirrors DatePicker theme with added checkmark style
+ */
+export declare const dateRangePickerTheme: DateRangePickerTheme;

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

@@ -0,0 +1,45 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * DateRangePicker theme — mirrors DatePicker theme with added checkmark style
+ */
+const dateRangePickerTheme = {
+    containerStyle: formsBaseTheme.wrapperStyle,
+    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    triggerButtonStyle: "w-full cursor-pointer bg-[var(--field-fill)]",
+    placeholderTextStyle: "text-[var(--color-text-placeholder)]",
+    valueTextStyle: "text-[var(--color-text-primary)]",
+    triggerSizes: {
+        sm: `${formsBaseTheme.sizes.sm.text} ${formsBaseTheme.sizes.sm.padding} ${formsBaseTheme.sizes.sm.height}`,
+        md: `${formsBaseTheme.sizes.md.text} ${formsBaseTheme.sizes.md.padding} ${formsBaseTheme.sizes.md.height}`,
+        lg: `${formsBaseTheme.sizes.lg.text} ${formsBaseTheme.sizes.lg.padding} ${formsBaseTheme.sizes.lg.height}`,
+    },
+    triggerStates: formsBaseTheme.states,
+    triggerHoverStates: formsBaseTheme.hoverStates,
+    triggerFocusStates: formsBaseTheme.focusStates,
+    iconEndStyle: formsBaseTheme.iconStyles.right,
+    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    bodyStyle: "flex flex-col sm:flex-row w-fit max-w-[calc(100vw-2rem)] sm:max-w-none backdrop-blur-md border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed",
+    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-surface-sunken)] sm:min-w-[180px]",
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm font-medium rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
+        "flex items-center justify-between gap-2 " +
+        "text-[var(--color-text-secondary)] hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-sunken)] " +
+        "data-[active=true]:bg-[var(--color-surface)] data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
+    presetCheckmarkStyle: "size-4 text-[var(--color-primary)] shrink-0",
+    mobilePresetsContainerStyle: "sm:hidden px-3 pt-3 pb-1",
+    mobilePresetButtonStyle: "whitespace-nowrap px-3 py-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
+        "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+        "hover:bg-[var(--color-surface-hover)] hover:text-[var(--color-text-primary)] " +
+        "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
+        "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
+    mobileRangeDisplayStyle: "sm:hidden text-xs text-center py-2 text-[var(--color-text-secondary)]",
+    helperTextStyle: formsBaseTheme.helperText,
+    helperTextStates: {
+        default: "text-[var(--color-text-muted)]",
+        disabled: "text-[var(--color-text-disabled)]",
+        invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+    },
+};
+
+export { dateRangePickerTheme };