@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,136 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { createContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { datePickerTheme } from './DatePicker.theme.js';
+import { FormLabel } from '../FormLabel/FormLabel.js';
+import { DatePickerTrigger } from './DatePickerTrigger.js';
+import { DatePickerContent } from './DatePickerContent.js';
+import { DatePickerPresets } from './DatePickerPresets.js';
+import { cn } from '../../../utils/cn.js';
+import { formatDateCustom } from '../../../utils/dateUtils.js';
+
+const DatePickerContext = createContext(undefined);
+/**
+ * Format date for display
+ * Uses formatString if provided, otherwise falls back to dateFormat (Intl API)
+ */
+const formatDate = (date, formatString, options = {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+}) => {
+    // If formatString is provided, use the custom formatter
+    if (formatString) {
+        return formatDateCustom(date, formatString);
+    }
+    // Otherwise use the Intl API
+    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)}`;
+};
+/**
+ * Main DatePicker Component - follows Select pattern exactly
+ */
+const DatePickerComponent = React__default.forwardRef(({ id, name, mode = "single", size = "md", state = "default", value, defaultValue, placeholder = "Select date...", disabled = false, required = false, label, helperText, onChange, onFocus, onBlur, minDate, maxDate, isDateDisabled, showToday = true, selectTodayByDefault = false, weekdays, months, dateFormat, formatString, presets, className = "", wrapperClassName = "", portal = true, placement = "bottom-start", offset = 4, children, }, ref) => {
+    var _a, _b;
+    // Merge theme with defaults
+    const theme = { ...datePickerTheme };
+    // State
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedValue, setSelectedValue] = useState(value || defaultValue);
+    // Refs
+    const triggerRef = useRef(null);
+    const contentRef = useRef(null);
+    // Update internal state when prop value changes
+    useEffect(() => {
+        setSelectedValue(value);
+    }, [value]);
+    // Date selection handler (single mode)
+    const handleDateSelect = useCallback((newDate) => {
+        if (mode === "single") {
+            if (newDate !== selectedValue) {
+                setSelectedValue(newDate);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+            }
+            setIsOpen(false);
+        }
+    }, [mode, selectedValue, onChange]);
+    // Range selection handler (range mode)
+    const handleRangeSelect = useCallback((newRange) => {
+        setSelectedValue(newRange);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+        // Don't auto-close anymore - footer Apply button handles this
+    }, [onChange]);
+    // Button click handler
+    const handleButtonClick = useCallback(() => {
+        if (!disabled) {
+            setIsOpen((prev) => !prev);
+        }
+    }, [disabled]);
+    // Format selected date/range for display
+    // formatString takes precedence over dateFormat
+    const displayValue = selectedValue
+        ? mode === "single" && selectedValue instanceof Date
+            ? formatDate(selectedValue, formatString, dateFormat)
+            : mode === "range" &&
+                typeof selectedValue === "object" &&
+                "start" in selectedValue
+                ? formatDateRange(selectedValue, formatString, dateFormat)
+                : placeholder
+        : placeholder;
+    // Calendar icon is now built-in to the trigger component
+    // Generate a unique ID if not provided
+    const generatedId = React__default.useId();
+    const datePickerId = id || generatedId;
+    // Helper text state style
+    const helperTextStateStyle = theme.helperTextStates[state];
+    const helperTextStyle = theme.helperTextStyle;
+    // Container style
+    const containerStyle = theme.containerStyle;
+    return (jsx(DatePickerContext.Provider, { value: useMemo(() => ({
+            mode,
+            isOpen,
+            setIsOpen,
+            selectedValue,
+            setSelectedValue,
+            minDate,
+            maxDate,
+            isDateDisabled,
+            showToday,
+            selectTodayByDefault,
+            weekdays,
+            months,
+            handleDateSelect,
+            handleRangeSelect,
+            size,
+            state,
+            theme,
+            triggerRef,
+            contentRef,
+        }), [mode, isOpen, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, size, state, theme]), children: jsxs("div", { ref: ref, className: cn(containerStyle, wrapperClassName), children: [label && (jsx(FormLabel, { htmlFor: datePickerId, required: required, children: label })), jsx(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className, children: jsx("span", { className: cn("block truncate", selectedValue ? theme.valueTextStyle : theme.placeholderTextStyle), children: displayValue }) }), jsx(DatePickerContent, { isOpen: isOpen, onClose: () => setIsOpen(false), portal: portal, placement: placement, offset: offset, presets: presets, children: children }), helperText && (jsx("p", { className: cn(helperTextStyle, helperTextStateStyle), children: helperText })), name && mode === "single" && selectedValue instanceof Date && (jsx("input", { type: "hidden", name: name, value: selectedValue.toISOString() })), name &&
+                    mode === "range" &&
+                    selectedValue &&
+                    typeof selectedValue === "object" &&
+                    "start" in selectedValue && (jsxs(Fragment, { children: [jsx("input", { type: "hidden", name: `${name}[start]`, value: ((_a = selectedValue.start) === null || _a === void 0 ? void 0 : _a.toISOString()) || "" }), jsx("input", { type: "hidden", name: `${name}[end]`, value: ((_b = selectedValue.end) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" })] }))] }) }));
+});
+DatePickerComponent.displayName = "DatePicker";
+// Create a compound component with proper typing
+const DatePickerWithCompounds = DatePickerComponent;
+// Attach compound components
+DatePickerWithCompounds.Trigger = DatePickerTrigger;
+DatePickerWithCompounds.Content = DatePickerContent;
+DatePickerWithCompounds.Presets = DatePickerPresets;
+
+export { DatePickerWithCompounds as DatePicker, DatePickerContent, DatePickerContext, DatePickerPresets, DatePickerTrigger, DatePickerWithCompounds };

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

@@ -0,0 +1,9 @@
+import { DatePickerTheme } from "./DatePicker.types";
+/**
+ * DatePicker component theme following Select pattern exactly
+ * Uses common forms theme for consistency
+ *
+ * Note: Simple, one-time-use styles are inlined directly in components
+ * Only complex or reused styles are defined here
+ */
+export declare const datePickerTheme: DatePickerTheme;

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

@@ -0,0 +1,54 @@
+import { formsBaseTheme } from '../forms.theme.js';
+
+/**
+ * DatePicker component theme following Select pattern exactly
+ * Uses common forms theme for consistency
+ *
+ * Note: Simple, one-time-use styles are inlined directly in components
+ * Only complex or reused styles are defined here
+ */
+const datePickerTheme = {
+    containerStyle: formsBaseTheme.wrapperStyle,
+    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    // Trigger button style - bg-white for light mode; dark mode uses neutral-900
+    triggerButtonStyle: "w-full cursor-pointer bg-white dark:bg-[var(--color-neutral-900)]",
+    // Placeholder text style - matches Input placeholder styling
+    placeholderTextStyle: "text-[var(--color-text-placeholder)]",
+    // Selected value text style
+    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,
+    // Dropdown content - with dark mode support
+    contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-[var(--popover-radius)] shadow-real-xl p-0 overflow-hidden z-[1000] fixed " +
+        "dark:bg-[var(--color-neutral-900)] dark:border-[var(--color-neutral-700)]",
+    contentWithPresetsStyle: "flex w-fit 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)]",
+    // Presets sidebar - with dark mode support
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] min-w-[180px] " +
+        "dark:bg-[var(--color-neutral-800)] dark:border-[var(--color-neutral-700)]",
+    // Preset button - with dark mode support
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-[calc(var(--radius-base)*0.75)] transition-colors cursor-pointer " +
+        "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 mode
+        "dark:text-[var(--color-neutral-400)] dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] " +
+        "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)]",
+    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 { datePickerTheme };

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

@@ -0,0 +1,144 @@
+import React from "react";
+/**
+ * Size variants for DatePicker components
+ */
+export type DatePickerSize = "sm" | "md" | "lg";
+/**
+ * State variants for DatePicker components (aligned with forms theme)
+ */
+export type DatePickerState = "default" | "disabled" | "invalid";
+/**
+ * Placement options for DatePicker popover
+ */
+export type DatePickerPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";
+/**
+ * Selection mode for DatePicker
+ */
+export type DatePickerMode = "single" | "range";
+import type { DateRange } from "../../core/Calendar/Calendar.types";
+export type { DateRange };
+/**
+ * Preset for quick date range selection
+ */
+export interface DateRangePreset {
+    label: string;
+    getValue: () => DateRange;
+}
+/**
+ * Main DatePicker component props (follows Select pattern)
+ */
+export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onFocus" | "onBlur"> {
+    /** Unique identifier */
+    id?: string;
+    /** Form field name */
+    name?: string;
+    /** Size variant */
+    size?: DatePickerSize;
+    /** State variant */
+    state?: DatePickerState;
+    /** Selection mode - single date or date range */
+    mode?: DatePickerMode;
+    /** The selected date (controlled mode - for single mode) */
+    value?: Date | DateRange;
+    /** Default selected date (uncontrolled mode - for single mode) */
+    defaultValue?: Date | DateRange;
+    /** Placeholder text when no date 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 date is selected - type depends on mode */
+    onChange?: (value: Date | DateRange | null) => void;
+    /** Array of preset date ranges (only for range mode) */
+    presets?: DateRangePreset[];
+    /** 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 (default: ['M', 'T', 'W', 'T', 'F', 'S', 'S']) */
+    weekdays?: string[];
+    /** Custom month names */
+    months?: string[];
+    /** Format for displaying selected date (Intl API) */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Custom format string for date display (e.g., 'DD MMM YYYY', 'DD/MM/YYYY') - takes precedence over dateFormat */
+    formatString?: string;
+    /** Auto-select today's date when calendar opens without a value (default: false) */
+    selectTodayByDefault?: boolean;
+    /** 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?: DatePickerPlacement;
+    /** Offset from trigger element */
+    offset?: number;
+    /** Children (for compound component usage) */
+    children?: React.ReactNode;
+}
+/**
+ * DatePicker trigger button props
+ */
+export interface DatePickerTriggerProps {
+    id?: string;
+    disabled?: boolean;
+    isOpen?: boolean;
+    state?: DatePickerState;
+    size?: DatePickerSize;
+    className?: string;
+    onClick?: () => void;
+    onFocus?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;
+    children?: React.ReactNode;
+}
+/**
+ * DatePicker content props
+ */
+export interface DatePickerContentProps {
+    isOpen?: boolean;
+    className?: string;
+    onClose?: () => void;
+    portal?: boolean;
+    placement?: DatePickerPlacement;
+    offset?: number;
+    presets?: DateRangePreset[];
+    children?: React.ReactNode;
+}
+/**
+ * Theme interface for DatePicker (flat structure following library pattern)
+ * Note: Simple, one-time-use styles are inlined directly in components
+ */
+export interface DatePickerTheme {
+    containerStyle: string;
+    baseStyle: string;
+    triggerButtonStyle: string;
+    placeholderTextStyle: string;
+    valueTextStyle: string;
+    triggerSizes: Record<DatePickerSize, string>;
+    triggerStates: Record<DatePickerState, string>;
+    triggerHoverStates: Record<DatePickerState, string>;
+    triggerFocusStates: Record<DatePickerState, string>;
+    iconEndStyle: string;
+    iconEndPadding: string;
+    contentStyle: string;
+    contentWithPresetsStyle: string;
+    presetsContainerStyle: string;
+    presetButtonStyle: string;
+    helperTextStyle: string;
+    helperTextStates: Record<DatePickerState, string>;
+}

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

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

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

@@ -0,0 +1,229 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React__default, { useContext, useState, useCallback, useMemo, useEffect } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { createPortal } from 'react-dom';
+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 { 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';
+
+/**
+ * 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
+ * Uses portal positioning like Select component
+ */
+const DatePickerContent = ({ isOpen, className, onClose, portal = true, placement = "bottom-start", offset = 4, presets, children, }) => {
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error("DatePickerContent must be used within a DatePicker");
+    }
+    const { mode, theme, triggerRef, contentRef, selectedValue, minDate, maxDate, isDateDisabled, showToday, selectTodayByDefault, weekdays, months, handleDateSelect, handleRangeSelect, } = context;
+    // Determine if we should show presets
+    const showPresets = mode === "range" && presets && presets.length > 0;
+    // Detect dark mode for portal content
+    const isDarkMode = useDarkMode();
+    const isClient = useIsClient();
+    // Temp range state for range mode (not committed until Apply is clicked)
+    const [tempRange, setTempRange] = useState(mode === "range" &&
+        selectedValue &&
+        typeof selectedValue === "object" &&
+        "start" in selectedValue
+        ? selectedValue
+        : undefined);
+    // Handle preset selection - update calendar view to show the range
+    const handlePresetSelect = useCallback((range) => {
+        if (range.start) {
+            setLeftCalendarDate(new Date(range.start.getFullYear(), range.start.getMonth(), 1));
+        }
+    }, []);
+    // Dual calendar state for range mode
+    const getInitialLeftDate = () => {
+        if (mode === "range" && (tempRange === null || tempRange === void 0 ? void 0 : tempRange.start)) {
+            return tempRange.start;
+        }
+        if (mode === "range" &&
+            selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue) {
+            return selectedValue.start || new Date();
+        }
+        return new Date();
+    };
+    const [leftCalendarDate, setLeftCalendarDate] = useState(getInitialLeftDate);
+    // Right calendar always shows next month
+    const rightCalendarDate = useMemo(() => {
+        const nextMonth = new Date(leftCalendarDate);
+        nextMonth.setMonth(nextMonth.getMonth() + 1);
+        return nextMonth;
+    }, [leftCalendarDate]);
+    // Navigation handlers for dual calendar
+    const handleNavigatePrev = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() - 1);
+            return newDate;
+        });
+    }, []);
+    const handleNavigateNext = useCallback(() => {
+        setLeftCalendarDate((prev) => {
+            const newDate = new Date(prev);
+            newDate.setMonth(newDate.getMonth() + 1);
+            return newDate;
+        });
+    }, []);
+    // Footer handlers for range mode
+    const handleApply = useCallback(() => {
+        if (tempRange && mode === "range") {
+            handleRangeSelect === null || handleRangeSelect === void 0 ? void 0 : handleRangeSelect(tempRange); // Commit the temp range
+        }
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [tempRange, mode, handleRangeSelect, onClose]);
+    const handleCancel = useCallback(() => {
+        // Reset temp range to committed value
+        setTempRange(selectedValue &&
+            typeof selectedValue === "object" &&
+            "start" in selectedValue
+            ? selectedValue
+            : undefined);
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, [selectedValue, onClose]);
+    // Format range for footer display
+    const formatRangeDisplay = (range) => {
+        if (!(range === null || range === void 0 ? void 0 : range.start) && !(range === null || range === void 0 ? void 0 : range.end))
+            return "Select start and end dates";
+        if (!range.end)
+            return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ...`;
+        return `${formatDateCustom(range.start, "DD/MM/YYYY")} - ${formatDateCustom(range.end, "DD/MM/YYYY")}`;
+    };
+    // Use simplified dropdown positioning hook (same as Select)
+    const { position, cssVariables, contentRef: portalContentRef, isFlipped, isReady, } = useSelectPortal({
+        triggerRef,
+        isOpen: isOpen || false,
+        placement,
+        offset,
+        autoWidth: true, // Allow dropdown to size to its content
+    });
+    // Create direction-aware animations based on dropdown placement
+    const animations = createDropdownAnimations(isFlipped);
+    // Combine refs for portal and legacy usage
+    const combinedRef = React__default.useCallback((el) => {
+        if (contentRef &&
+            typeof contentRef === "object" &&
+            "current" in contentRef) {
+            contentRef.current =
+                el;
+        }
+        if (portalContentRef &&
+            typeof portalContentRef === "object" &&
+            "current" in portalContentRef) {
+            portalContentRef.current = el;
+        }
+    }, [contentRef, portalContentRef]);
+    // Handle click outside to close
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            var _a;
+            const target = event.target;
+            // Don't close if clicking inside a portal-rendered Select dropdown (e.g., month/year selects)
+            if ((_a = target.closest) === null || _a === void 0 ? void 0 : _a.call(target, '[role="listbox"]')) {
+                return;
+            }
+            const currentContentRef = portal
+                ? portalContentRef.current
+                : contentRef.current;
+            if (currentContentRef &&
+                !currentContentRef.contains(target) &&
+                triggerRef.current &&
+                !triggerRef.current.contains(target)) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isOpen, onClose, triggerRef, contentRef, portalContentRef, portal]);
+    // Handle escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => {
+            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: {
+                ...cssVariables,
+                ...(portal
+                    ? {
+                        top: `${position.top}px`,
+                        left: `${position.left}px`,
+                        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" })) })) })] })) }));
+    // 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 contentElement;
+};
+
+export { DatePickerContent };

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DateRangePreset, DateRange } from './DatePicker.types';
+/**
+ * DatePicker Presets Component - displays preset date range buttons
+ */
+export interface DatePickerPresetsProps {
+    presets: DateRangePreset[];
+    className?: string;
+    setTempRange?: React.Dispatch<React.SetStateAction<DateRange | undefined>>;
+    onPresetSelect?: (range: DateRange) => void;
+}
+export declare const DatePickerPresets: React.FC<DatePickerPresetsProps>;

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

@@ -0,0 +1,41 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext } from 'react';
+import { DatePickerContext } from './DatePicker.js';
+import { cn } from '../../../utils/cn.js';
+
+const DatePickerPresets = ({ presets, className, setTempRange, onPresetSelect, }) => {
+    const context = useContext(DatePickerContext);
+    if (!context) {
+        throw new Error('DatePickerPresets must be used within a DatePicker');
+    }
+    const { theme, selectedValue } = context;
+    // Check if a preset is currently active (compare against committed selectedValue)
+    const isPresetActive = (preset) => {
+        if (!selectedValue || typeof selectedValue !== 'object' || !('start' in selectedValue)) {
+            return false;
+        }
+        const presetRange = preset.getValue();
+        const currentRange = selectedValue;
+        // Compare dates (ignoring time)
+        const isSameDate = (d1, d2) => {
+            if (!d1 || !d2)
+                return d1 === d2;
+            return (d1.getFullYear() === d2.getFullYear() &&
+                d1.getMonth() === d2.getMonth() &&
+                d1.getDate() === d2.getDate());
+        };
+        return (isSameDate(currentRange.start, presetRange.start) &&
+            isSameDate(currentRange.end, presetRange.end));
+    };
+    const handlePresetClick = (preset) => {
+        const range = preset.getValue();
+        // Update tempRange to show visual selection on calendar
+        // The range is only committed when Apply button is clicked
+        setTempRange === null || setTempRange === void 0 ? void 0 : setTempRange(range);
+        // Notify parent to adjust calendar view
+        onPresetSelect === null || onPresetSelect === void 0 ? void 0 : onPresetSelect(range);
+    };
+    return (jsx("div", { className: cn(theme.presetsContainerStyle, className), children: presets.map((preset, index) => (jsx("button", { type: "button", onClick: () => handlePresetClick(preset), className: theme.presetButtonStyle, "data-active": isPresetActive(preset), children: preset.label }, index))) }));
+};
+
+export { DatePickerPresets };

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

@@ -0,0 +1,7 @@
+import React from "react";
+import { DatePickerTriggerProps } from "./DatePicker.types";
+/**
+ * DatePicker Trigger Component - styled like form input
+ * Displays selected date or placeholder text
+ */
+export declare const DatePickerTrigger: React.FC<DatePickerTriggerProps>;