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

package/dist/components/forms/Checkbox/Checkbox.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React__default, { useId, useState, useRef, useEffect } from 'react';
+import { useReducedMotion, AnimatePresence, motion } from 'motion/react';
 import { checkboxTheme } from './Checkbox.theme.js';
 import { formLabelTheme } from '../FormLabel/FormLabel.theme.js';
-import { MinusIcon, CheckIcon } from '@heroicons/react/24/outline';
 import { cn } from '../../../utils/cn.js';
 import { useCheckboxGroupContext } from './CheckboxContext.js';
 import { CheckboxGroup } from './CheckboxGroup.js';
+import { reducedMotionVariants, indeterminateVariants, checkmarkVariants } from './Checkbox.animations.js';
 
 /**
  * Checkbox component for selecting one or more options
@@ -13,6 +14,7 @@ import { CheckboxGroup } from './CheckboxGroup.js';
 const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: nameProp, value, checked: controlledChecked, indeterminate = false, 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 = useCheckboxGroupContext();
     // Resolve props from group context or individual props
     const id = idProp !== null && idProp !== void 0 ? idProp : autoId;
@@ -57,7 +59,7 @@ const CheckboxComponent = React__default.forwardRef(({ id: idProp, name: namePro
                                 ref(node);
                             else if (ref)
                                 ref.current = node;
-                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), indeterminate && (jsx(MinusIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-neutral-600 transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 3 })), isChecked && !indeterminate && (jsx(CheckIcon, { className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center opacity-100 stroke-white transition-opacity duration-200", size === "sm" ? "size-3" : "size-4"), strokeWidth: 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: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
+                        }, type: "checkbox", id: id, name: name, value: value, checked: isChecked, onChange: handleChange, disabled: isDisabled, "aria-describedby": description ? `${id}-description` : undefined, "data-state": isDisabled ? "disabled" : "default", className: cn(checkboxTheme.inputStyle, checkboxTheme.sizes[size], indeterminate && "bg-neutral-200") }), jsxs(AnimatePresence, { mode: "wait", children: [indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-neutral-600", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8 L12.5 8", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", variants: shouldReduceMotion ? reducedMotionVariants : indeterminateVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "indeterminate")), isChecked && !indeterminate && (jsx(motion.svg, { viewBox: "0 0 16 16", fill: "none", className: cn("pointer-events-none col-start-1 row-start-1 self-center justify-self-center text-white", size === "sm" ? "size-3" : "size-4"), children: jsx(motion.path, { d: "M3.5 8.5 L6.5 11.5 L12.5 4.5", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", variants: shouldReduceMotion ? reducedMotionVariants : checkmarkVariants, initial: "unchecked", animate: "checked", exit: "unchecked" }) }, "checkmark"))] })] }), (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: checkboxTheme.descriptionStyle, children: description })) : (description))] }))] }));
 });
 CheckboxComponent.displayName = "Checkbox";
 const Checkbox = Object.assign(CheckboxComponent, {

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

@@ -10,7 +10,7 @@ const checkboxTheme = {
         // 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:bg-[var(--color-primary)] " +
         // Checked state - dark
@@ -27,7 +27,7 @@ const checkboxTheme = {
         "disabled:bg-[var(--color-background-disabled)] disabled:checked:outline-0 " +
         "data-[state=disabled]:border-[var(--color-border)] data-[state=disabled]:bg-[var(--color-background-disabled)] data-[state=disabled]:cursor-not-allowed " +
         // Disabled state - dark
-        "dark:disabled:bg-[var(--color-neutral-700)] dark:disabled:border-[var(--color-neutral-600)] " +
+        "dark:disabled:bg-[var(--color-neutral-800)] 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)]",
     // Description text - light and dark
     descriptionStyle: "text-base mt-0.5 " + "text-[var(--color-text-secondary)]/80 " + " ",
@@ -38,7 +38,7 @@ const checkboxTheme = {
     // Group styles
     groupStyle: "flex flex-col gap-1.5",
     groupHorizontalStyle: "flex-row flex-wrap gap-x-6 gap-y-3",
-    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)]/80 -mt-0.5 mb-1",
+    groupDescriptionStyle: "text-base text-[var(--color-text-secondary)] -mt-0.5 mb-1",
     groupErrorStyle: "text-base text-[var(--color-danger)] mt-1.5",
     groupItemsStyle: "flex flex-col gap-3",
 };

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

@@ -95,7 +95,7 @@ export interface ColorPickerContextValue {
     isOpen: boolean;
     setIsOpen: (open: boolean) => void;
     triggerRef: React.RefObject<HTMLElement>;
-    placement: string;
+    placement: import("../../../hooks/useSelectPortal").SelectPlacement;
     offset: number;
     showAlpha: boolean;
     showEyeDropper: boolean;

package/dist/components/forms/ColorPicker/ColorPickerBody.js

@@ -26,7 +26,7 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
     const { position, cssVariables } = useSelectPortal({
         triggerRef,
         isOpen: isOpen || false,
-        placement: placement,
+        placement,
         offset: offset || 4,
         autoWidth: false,
     });
@@ -52,8 +52,8 @@ const ColorPickerBody = ({ children, className, portal = true, animation = true,
         document.addEventListener('keydown', handleEscape);
         return () => document.removeEventListener('keydown', handleEscape);
     }, [isOpen, setIsOpen, triggerRef]);
-    // Extract DOM props to avoid type conflicts with Framer Motion
-    const { onAnimationStart, onAnimationEnd, onDrag, onDragStart, onDragEnd, ...domProps } = rest;
+    // Extract DOM event handler props that conflict with Framer Motion
+    const { onAnimationStart: _onAnimationStart, onAnimationEnd: _onAnimationEnd, onDrag: _onDrag, onDragStart: _onDragStart, onDragEnd: _onDragEnd, ...domProps } = rest;
     const content = (jsx(AnimatePresence, { children: isOpen && (jsx(motion.div, { ref: contentRef, role: "dialog", "aria-label": "Color picker", className: cn('fixed z-50', theme.contentStyle, className), style: {
                 ...cssVariables,
                 top: `${position.top}px`,

package/dist/components/forms/Combobox/Combobox.js

@@ -95,7 +95,8 @@ const ComboboxOptions = ({ isOpen, onClose, triggerRef, portal, placement, offse
         return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [isOpen, onClose, portal, contentRef, optionsRef, triggerRef]);
     // Theme can come from Select's theme (optionsContainerStyle) or Combobox's theme (dropdownStyle)
-    const dropdownStyle = theme.dropdownStyle ||
+    const comboboxThemeRef = theme;
+    const dropdownStyle = comboboxThemeRef.dropdownStyle ||
         theme.optionsContainerStyle ||
         comboboxTheme.dropdownStyle;
     const optionStyle = theme.optionStyle || comboboxTheme.optionStyle;
@@ -396,7 +397,8 @@ const ComboboxInner = ({ options, value, onChange, placeholder = "Search...", la
                                             ? `${comboboxId}-option-${customFilteredOptions[highlightedIndex].id}`
                                             : undefined, "aria-autocomplete": "list", "aria-invalid": isInvalid, autoComplete: "off", className: cn(inputClasses, sizeClasses, iconStartPadding, showClearButton && "pr-8", inputClassName), value: searchValue, onChange: handleInputChange, onFocus: handleInputFocus, onKeyDown: handleKeyDown, placeholder: placeholder, disabled: isDisabled, required: required }), hasLeftIcon && (jsx("div", { className: theme.iconStartStyle, children: iconStart })), showClearButton && (jsx("button", { type: "button", className: theme.clearButtonStyle, onClick: handleClear, "aria-label": "Clear selection", tabIndex: -1, children: jsx(XMarkIcon, { className: theme.clearIconStyle }) }))] }) }), jsx(ComboboxOptions, { isOpen: isOpen, onClose: () => setIsOpen(false), triggerRef: wrapperRef, portal: portal, placement: placement, offset: offset, emptyMessage: emptyMessage, className: dropdownClassName })] }), helperText && (jsx("p", { className: cn(helperTextClasses, helperTextStateClasses), children: helperText })), name && (jsx("input", { type: "hidden", name: name, value: value !== undefined ? String(value) : "" }))] }) }));
 };
-const Combobox = React__default.forwardRef(ComboboxInner);
-Combobox.displayName = "Combobox";
+const ComboboxForwarded = React__default.forwardRef(ComboboxInner);
+ComboboxForwarded.displayName = "Combobox";
+const Combobox = ComboboxForwarded;
 
 export { Combobox };

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

@@ -213,7 +213,7 @@ const DatePickerBody = ({ isOpen, className, onClose, portal = true, placement =
                                                     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)] dark:border-[var(--color-neutral-700)]", children: [jsx("div", { className: "text-base 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" })] })] })] })) : (
+                                                }, 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: "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);

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,37 @@
+import React from "react";
+import type { DateRangePickerProps, DateRangePickerState, DateRangePickerSize, DateRangePickerTheme, DateRange } from "./DateRangePicker.types";
+import { DateRangePickerTrigger } from "./DateRangePickerTrigger";
+import { DateRangePickerBody } from "./DateRangePickerBody";
+import { DateRangePickerPresets } from "./DateRangePickerPresets";
+interface DateRangePickerContextType {
+    isOpen: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    selectedRange: DateRange | undefined;
+    handleRangeSelect: (range: DateRange) => void;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    showToday?: boolean;
+    weekdays?: string[];
+    months?: string[];
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    size: DateRangePickerSize;
+    state: DateRangePickerState;
+    theme: DateRangePickerTheme;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DateRangePickerContext: React.Context<DateRangePickerContextType | undefined>;
+/**
+ * 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,110 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { createContext, 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';
+
+const DateRangePickerContext = createContext(undefined);
+/**
+ * Format date for display
+ */
+const formatDate = (date, formatString, options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+}) => {
+    if (formatString) {
+        return formatDateCustom(date, formatString);
+    }
+    return date.toLocaleDateString(undefined, 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, 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, ...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) => {
+        setSelectedRange(newRange);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+    }, [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;
+    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 && (jsx(FormLabel, { htmlFor: pickerId, required: required, children: label })), jsx(DateRangePickerTrigger, { id: pickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, 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 }), helperText && (jsx("p", { className: cn(theme.helperTextStyle, theme.helperTextStates[state]), children: helperText })), 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,52 @@
+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-white dark:bg-[var(--color-neutral-900)]",
+    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 bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-lg p-0 overflow-hidden z-[1000] fixed " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
+    presetsContainerStyle: "hidden sm:flex flex-col gap-1 p-3 sm:border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] sm:min-w-[180px] " +
+        "dark:bg-[var(--color-neutral-800)] ",
+    presetButtonStyle: "w-full text-left px-3 py-2 text-base 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-white hover:text-[var(--color-text-primary)] " +
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 " +
+        "data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium " +
+        "dark:hover:bg-[var(--color-neutral-700)] " +
+        "dark:data-[active=true]:bg-[var(--color-neutral-700)] dark:data-[active=true]:text-[var(--color-neutral-100)] " +
+        "dark:focus-visible:ring-offset-[var(--color-neutral-800)]",
+    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-sm font-medium rounded-full transition-colors cursor-pointer shrink-0 " +
+        "bg-[var(--color-background-secondary)] text-[var(--color-text-secondary)] " +
+        "hover:bg-[var(--color-background-tertiary)] hover:text-[var(--color-text-primary)] " +
+        "data-[active=true]:bg-[var(--color-primary-50)] data-[active=true]:text-[var(--color-primary)] " +
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-300)] " +
+        "dark:hover:bg-[var(--color-neutral-700)] " +
+        "dark:data-[active=true]:bg-[var(--color-primary-950)] dark:data-[active=true]:text-[var(--color-primary-300)]",
+    mobileRangeDisplayStyle: "sm:hidden text-sm text-center py-2 text-[var(--color-text-secondary)] dark:text-[var(--color-neutral-400)]",
+    helperTextStyle: formsBaseTheme.helperText,
+    helperTextStates: {
+        default: "text-[var(--color-text-muted)] dark:text-[var(--color-neutral-400)]",
+        disabled: "text-[var(--color-text-disabled)] dark:text-[var(--color-neutral-600)]",
+        invalid: "text-[var(--color-danger)] dark:text-[var(--color-danger-400)]",
+    },
+};
+
+export { dateRangePickerTheme };

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

@@ -0,0 +1,154 @@
+import React from "react";
+import type { DateRange } from "../../core/Calendar/Calendar.types";
+export type { DateRange };
+/**
+ * Size variants for DateRangePicker
+ */
+export type DateRangePickerSize = "sm" | "md" | "lg";
+/**
+ * State variants for DateRangePicker
+ */
+export type DateRangePickerState = "default" | "disabled" | "invalid";
+/**
+ * Placement options for DateRangePicker popover
+ */
+export type DateRangePickerPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+/**
+ * Preset for quick date range selection
+ */
+export interface DateRangePreset {
+    label: string;
+    getValue: () => DateRange;
+}
+/**
+ * Main DateRangePicker component props
+ * Always operates on DateRange — no single date mode
+ */
+export interface DateRangePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onFocus" | "onBlur"> {
+    /** Unique identifier */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Size variant */
+    size?: DateRangePickerSize;
+    /** State variant */
+    state?: DateRangePickerState;
+    /** The selected date range (controlled mode) */
+    value?: DateRange;
+    /** Default selected date range (uncontrolled mode) */
+    defaultValue?: DateRange;
+    /** Placeholder text when no range selected */
+    placeholder?: string;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Label for the field */
+    label?: string;
+    /** Helper text below the field */
+    helperText?: string;
+    /** Callback fired when a range is applied */
+    onChange?: (range: DateRange | null) => void;
+    /** Array of preset date ranges */
+    presets?: DateRangePreset[];
+    /** Whether to show presets sidebar (default: true) */
+    showPresets?: boolean;
+    /** Focus event handler */
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Blur event handler */
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Function to determine if a specific date should be disabled */
+    isDateDisabled?: (date: Date) => boolean;
+    /** Whether to highlight today's date (default: true) */
+    showToday?: boolean;
+    /** Custom weekday labels */
+    weekdays?: string[];
+    /** Custom month names */
+    months?: string[];
+    /** Format for displaying selected date (Intl API) */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Custom format string (e.g., 'DD MMM YYYY') - takes precedence over dateFormat */
+    formatString?: string;
+    /** Year range for the year dropdown */
+    yearRange?: {
+        start: number;
+        end: number;
+    };
+    /** Additional class name for trigger button */
+    className?: string;
+    /** Additional class name for wrapper */
+    wrapperClassName?: string;
+    /** Whether to use portal rendering (default: true) */
+    portal?: boolean;
+    /** Popover placement */
+    placement?: DateRangePickerPlacement;
+    /** Offset from trigger element */
+    offset?: number;
+}
+/**
+ * DateRangePicker trigger button props
+ */
+export interface DateRangePickerTriggerProps {
+    id?: string;
+    disabled?: boolean;
+    isOpen?: boolean;
+    state?: DateRangePickerState;
+    size?: DateRangePickerSize;
+    className?: string;
+    onClick?: () => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+}
+/**
+ * DateRangePicker body props
+ */
+export interface DateRangePickerBodyProps {
+    isOpen?: boolean;
+    className?: string;
+    onClose?: () => void;
+    portal?: boolean;
+    placement?: DateRangePickerPlacement;
+    offset?: number;
+    presets?: DateRangePreset[];
+    showPresets?: boolean;
+}
+/**
+ * DateRangePicker presets props
+ */
+export interface DateRangePickerPresetsProps {
+    presets: DateRangePreset[];
+    className?: string;
+    tempRange?: DateRange;
+    setTempRange?: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+    onPresetSelect?: (range: DateRange) => void;
+}
+/**
+ * Theme interface for DateRangePicker (flat structure following library pattern)
+ */
+export interface DateRangePickerTheme {
+    containerStyle: string;
+    baseStyle: string;
+    triggerButtonStyle: string;
+    placeholderTextStyle: string;
+    valueTextStyle: string;
+    triggerSizes: Record<DateRangePickerSize, string>;
+    triggerStates: Record<DateRangePickerState, string>;
+    triggerHoverStates: Record<DateRangePickerState, string>;
+    triggerFocusStates: Record<DateRangePickerState, string>;
+    iconEndStyle: string;
+    iconEndPadding: string;
+    bodyStyle: string;
+    presetsContainerStyle: string;
+    presetButtonStyle: string;
+    presetCheckmarkStyle: string;
+    mobilePresetsContainerStyle: string;
+    mobilePresetButtonStyle: string;
+    mobileRangeDisplayStyle: string;
+    helperTextStyle: string;
+    helperTextStates: Record<DateRangePickerState, string>;
+}

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

@@ -0,0 +1,6 @@
+import React from "react";
+import { DateRangePickerBodyProps } from "./DateRangePicker.types";
+/**
+ * DateRangePicker Body Component — dual calendars + presets sidebar + footer
+ */
+export declare const DateRangePickerBody: React.FC<DateRangePickerBodyProps>;