flikkui 0.1.0-beta.11

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

@@ -0,0 +1,121 @@
+/**
+ * Color utility functions for ColorPicker component
+ * Handles conversion between HEX, RGB, HSL, and HSV color formats
+ */
+export interface RGB {
+    r: number;
+    g: number;
+    b: number;
+}
+export interface RGBA extends RGB {
+    a: number;
+}
+export interface HSL {
+    h: number;
+    s: number;
+    l: number;
+}
+export interface HSLA extends HSL {
+    a: number;
+}
+export interface HSV {
+    h: number;
+    s: number;
+    v: number;
+}
+export interface HSVA extends HSV {
+    a: number;
+}
+/**
+ * Convert HEX color to RGB
+ * @param hex - Hex color string (e.g., "#FF5733" or "FF5733")
+ * @returns RGB object
+ */
+export declare const hexToRgb: (hex: string) => RGB | null;
+/**
+ * Convert RGB to HEX color
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns Hex color string with # prefix
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+/**
+ * Convert RGB to HSL
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns HSL object
+ */
+export declare const rgbToHsl: (r: number, g: number, b: number) => HSL;
+/**
+ * Convert HSL to RGB
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @returns RGB object
+ */
+export declare const hslToRgb: (h: number, s: number, l: number) => RGB;
+/**
+ * Convert RGB to HSV
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns HSV object
+ */
+export declare const rgbToHsv: (r: number, g: number, b: number) => HSV;
+/**
+ * Convert HSV to RGB
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param v - Value (0-100)
+ * @returns RGB object
+ */
+export declare const hsvToRgb: (h: number, s: number, v: number) => RGB;
+/**
+ * Validate hex color format
+ * @param hex - Hex color string
+ * @returns True if valid hex format
+ */
+export declare const validateHex: (hex: string) => boolean;
+/**
+ * Validate RGB color values
+ * @param r - Red (0-255)
+ * @param g - Green (0-255)
+ * @param b - Blue (0-255)
+ * @returns True if all values are valid
+ */
+export declare const validateRgb: (r: number, g: number, b: number) => boolean;
+/**
+ * Parse color string to HSLA
+ * Supports hex, rgb, rgba, hsl, hsla formats
+ * @param value - Color string in various formats
+ * @returns HSLA object or null if invalid
+ */
+export declare const parseColor: (value: string) => HSLA | null;
+/**
+ * Format HSLA to hex string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @returns Hex color string
+ */
+export declare const formatHex: (h: number, s: number, l: number) => string;
+/**
+ * Format HSLA to RGB string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @param a - Alpha (0-1)
+ * @returns RGB/RGBA string
+ */
+export declare const formatRgb: (h: number, s: number, l: number, a?: number) => string;
+/**
+ * Format HSLA to HSL string
+ * @param h - Hue (0-360)
+ * @param s - Saturation (0-100)
+ * @param l - Lightness (0-100)
+ * @param a - Alpha (0-1)
+ * @returns HSL/HSLA string
+ */
+export declare const formatHsl: (h: number, s: number, l: number, a?: number) => string;

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

@@ -0,0 +1,17 @@
+/**
+ * ColorPicker component exports
+ * Compound component following Flikkui patterns
+ */
+export { ColorPicker, useColorPicker, ColorPickerContext } from './ColorPicker';
+export { ColorPickerTrigger } from './ColorPickerTrigger';
+export { ColorPickerContent } from './ColorPickerContent';
+export { ColorPicker2DCanvas } from './ColorPicker2DCanvas';
+export { ColorPickerSwatch } from './ColorPickerSwatch';
+export { ColorPickerSliders } from './ColorPickerSliders';
+export { ColorPickerInput } from './ColorPickerInput';
+export { ColorPickerFormatSelector } from './ColorPickerFormatSelector';
+export { ColorPickerEyeDropper } from './ColorPickerEyeDropper';
+export { ColorPickerPresets } from './ColorPickerPresets';
+export type { ColorPickerProps, ColorPickerTriggerProps, ColorPickerContentProps, ColorPickerSwatchProps, ColorPickerSlidersProps, ColorPickerInputProps, ColorPickerFormatSelectorProps, ColorPickerEyeDropperProps, ColorPickerPresetsProps, ColorPickerContextValue, ColorPickerTheme, ColorPickerThemeOverrides, ColorFormat, ColorPickerSize, ColorPickerState, } from './ColorPicker.types';
+export type { RGB, RGBA, HSL, HSLA, HSV, HSVA } from './colorUtils';
+export { hexToRgb, rgbToHex, rgbToHsl, hslToRgb, rgbToHsv, hsvToRgb, validateHex, validateRgb, parseColor, formatHex, formatRgb, formatHsl, } from './colorUtils';

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

@@ -0,0 +1,13 @@
+import { Variants } from 'motion/react';
+/**
+ * Creates direction-aware dropdown animation variants for the DatePicker component
+ * Matches Select component animation pattern for consistency
+ * @param isFlipped - Whether the dropdown is positioned above (flipped) or below the trigger
+ * @returns Animation variants that match the positioning direction
+ */
+export declare const createDropdownAnimations: (isFlipped: boolean) => Variants;
+/**
+ * Default dropdown animation variants for backward compatibility
+ * @deprecated Use createDropdownAnimations() for better UX with direction awareness
+ */
+export declare const dropdownAnimations: Variants;

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

@@ -0,0 +1,33 @@
+/**
+ * Creates direction-aware dropdown animation variants for the DatePicker component
+ * Matches Select component animation pattern for consistency
+ * @param isFlipped - Whether the dropdown is positioned above (flipped) or below the trigger
+ * @returns Animation variants that match the positioning direction
+ */
+var createDropdownAnimations = function (isFlipped) { return ({
+    initial: {
+        opacity: 0,
+        y: isFlipped ? 10 : -10, // Animate from opposite direction when flipped
+        scale: 0.95,
+    },
+    visible: {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        transition: {
+            duration: 0.2,
+            ease: 'easeOut'
+        }
+    },
+    exit: {
+        opacity: 0,
+        y: isFlipped ? 10 : -10, // Exit in same direction as entry
+        scale: 0.95,
+        transition: {
+            duration: 0.15,
+            ease: 'easeIn'
+        }
+    }
+}); };
+
+export { createDropdownAnimations };

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

@@ -0,0 +1,38 @@
+import React from "react";
+import type { DatePickerProps, DatePickerState, DatePickerSize, DateRange, DatePickerMode } from "./DatePicker.types";
+import { DatePickerTrigger } from "./DatePickerTrigger";
+import { DatePickerContent } from "./DatePickerContent";
+import { DatePickerPresets } from './DatePickerPresets';
+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[];
+    handleDateSelect: (date: Date) => void;
+    handleRangeSelect?: (range: DateRange) => void;
+    size: DatePickerSize;
+    state: DatePickerState;
+    theme: any;
+    triggerRef: React.RefObject<HTMLButtonElement | null>;
+    contentRef: React.RefObject<HTMLDivElement | null>;
+}
+export declare const DatePickerContext: React.Context<DatePickerContextType | undefined>;
+/**
+ * Main DatePicker Component - follows Select pattern exactly
+ */
+declare const DatePickerComponent: React.FC<DatePickerProps>;
+declare const DatePickerWithCompounds: typeof DatePickerComponent & {
+    Trigger: typeof DatePickerTrigger;
+    Content: typeof DatePickerContent;
+    Presets: typeof DatePickerPresets;
+};
+export { DatePickerTrigger, DatePickerContent, DatePickerPresets, DatePickerWithCompounds as DatePicker };
+export { DatePickerWithCompounds };

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

@@ -0,0 +1,140 @@
+import { __assign } from '../../../node_modules/tslib/tslib.es6.js';
+import React__default, { createContext, useState, useRef, useEffect } 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';
+
+var DatePickerContext = createContext(undefined);
+/**
+ * Format date for display
+ * Uses formatString if provided, otherwise falls back to dateFormat (Intl API)
+ */
+var formatDate = function (date, formatString, options) {
+    if (options === void 0) { 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
+ */
+var formatDateRange = function (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 "".concat(formatDate(range.start, formatString, options), " - ").concat(formatDate(range.end, formatString, options));
+};
+/**
+ * Main DatePicker Component - follows Select pattern exactly
+ */
+var DatePickerComponent = function (_a) {
+    var _b, _c;
+    var id = _a.id, name = _a.name, _d = _a.mode, mode = _d === void 0 ? 'single' : _d, _e = _a.size, size = _e === void 0 ? "md" : _e, _f = _a.state, state = _f === void 0 ? "default" : _f, value = _a.value, defaultValue = _a.defaultValue, _g = _a.placeholder, placeholder = _g === void 0 ? "Select date..." : _g, _h = _a.disabled, disabled = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? false : _j, label = _a.label, helperText = _a.helperText, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, minDate = _a.minDate, maxDate = _a.maxDate, isDateDisabled = _a.isDateDisabled, _k = _a.showToday, showToday = _k === void 0 ? true : _k, _l = _a.selectTodayByDefault, selectTodayByDefault = _l === void 0 ? false : _l, weekdays = _a.weekdays, months = _a.months, dateFormat = _a.dateFormat, formatString = _a.formatString, presets = _a.presets, _m = _a.className, className = _m === void 0 ? "" : _m, _o = _a.wrapperClassName, wrapperClassName = _o === void 0 ? "" : _o, _p = _a.portal, portal = _p === void 0 ? true : _p, _q = _a.placement, placement = _q === void 0 ? "bottom-start" : _q, _r = _a.offset, offset = _r === void 0 ? 4 : _r, children = _a.children;
+    // Merge theme with defaults
+    var theme = __assign({}, datePickerTheme);
+    // State
+    var _s = useState(false), isOpen = _s[0], setIsOpen = _s[1];
+    var _t = useState(value || defaultValue), selectedValue = _t[0], setSelectedValue = _t[1];
+    // Refs
+    var triggerRef = useRef(null);
+    var contentRef = useRef(null);
+    // Update internal state when prop value changes
+    useEffect(function () {
+        setSelectedValue(value);
+    }, [value]);
+    // Date selection handler (single mode)
+    var handleDateSelect = function (newDate) {
+        if (mode === 'single') {
+            if (newDate !== selectedValue) {
+                setSelectedValue(newDate);
+                onChange === null || onChange === void 0 ? void 0 : onChange(newDate);
+            }
+            setIsOpen(false);
+        }
+    };
+    // Range selection handler (range mode)
+    var handleRangeSelect = function (newRange) {
+        setSelectedValue(newRange);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newRange);
+        // Don't auto-close anymore - footer Apply button handles this
+    };
+    // Button click handler
+    var handleButtonClick = function () {
+        if (!disabled) {
+            setIsOpen(function (prev) { return !prev; });
+        }
+    };
+    // Format selected date/range for display
+    // formatString takes precedence over dateFormat
+    var 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
+    var datePickerId = id || "datepicker-".concat(Math.random().toString(36).substring(2, 9));
+    // Helper text state style
+    var helperTextStateStyle = theme.helperTextStates[state];
+    var helperTextStyle = theme.helperTextStyle;
+    // Container style
+    var containerStyle = theme.containerStyle;
+    return (React__default.createElement(DatePickerContext.Provider, { value: {
+            mode: mode,
+            isOpen: isOpen,
+            setIsOpen: setIsOpen,
+            selectedValue: selectedValue,
+            setSelectedValue: setSelectedValue,
+            minDate: minDate,
+            maxDate: maxDate,
+            isDateDisabled: isDateDisabled,
+            showToday: showToday,
+            selectTodayByDefault: selectTodayByDefault,
+            weekdays: weekdays,
+            months: months,
+            handleDateSelect: handleDateSelect,
+            handleRangeSelect: handleRangeSelect,
+            size: size,
+            state: state,
+            theme: theme,
+            triggerRef: triggerRef,
+            contentRef: contentRef,
+        } },
+        React__default.createElement("div", { className: cn(containerStyle, wrapperClassName) },
+            label && (React__default.createElement(FormLabel, { htmlFor: datePickerId, required: required }, label)),
+            React__default.createElement(DatePickerTrigger, { id: datePickerId, disabled: disabled, isOpen: isOpen, state: state, size: size, onClick: handleButtonClick, onFocus: onFocus, onBlur: onBlur, className: className },
+                React__default.createElement("span", { className: cn("block truncate", !selectedValue && "text-[var(--color-text-placeholder)]") }, displayValue)),
+            React__default.createElement(DatePickerContent, { isOpen: isOpen, onClose: function () { return setIsOpen(false); }, portal: portal, placement: placement, offset: offset, presets: presets }, children),
+            helperText && (React__default.createElement("p", { className: cn(helperTextStyle, helperTextStateStyle) }, helperText)),
+            name && mode === 'single' && selectedValue instanceof Date && (React__default.createElement("input", { type: "hidden", name: name, value: selectedValue.toISOString() })),
+            name && mode === 'range' && selectedValue && typeof selectedValue === 'object' && 'start' in selectedValue && (React__default.createElement(React__default.Fragment, null,
+                React__default.createElement("input", { type: "hidden", name: "".concat(name, "[start]"), value: ((_b = selectedValue.start) === null || _b === void 0 ? void 0 : _b.toISOString()) || "" }),
+                React__default.createElement("input", { type: "hidden", name: "".concat(name, "[end]"), value: ((_c = selectedValue.end) === null || _c === void 0 ? void 0 : _c.toISOString()) || "" }))))));
+};
+// Create a compound component with proper typing
+var 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,35 @@
+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
+ */
+var datePickerTheme = {
+    containerStyle: formsBaseTheme.wrapperStyle,
+    baseStyle: formsBaseTheme.inputGroupBaseStyle + " justify-between cursor-pointer",
+    triggerSizes: {
+        sm: "".concat(formsBaseTheme.sizes.sm.text, " ").concat(formsBaseTheme.sizes.sm.padding, " ").concat(formsBaseTheme.sizes.sm.height),
+        md: "".concat(formsBaseTheme.sizes.md.text, " ").concat(formsBaseTheme.sizes.md.padding, " ").concat(formsBaseTheme.sizes.md.height),
+        lg: "".concat(formsBaseTheme.sizes.lg.text, " ").concat(formsBaseTheme.sizes.lg.padding, " ").concat(formsBaseTheme.sizes.lg.height),
+    },
+    triggerStates: formsBaseTheme.states,
+    triggerHoverStates: formsBaseTheme.hoverStates,
+    triggerFocusStates: formsBaseTheme.focusStates,
+    iconEndStyle: formsBaseTheme.iconStyles.right,
+    iconEndPadding: formsBaseTheme.iconStyles.padding.right,
+    contentStyle: "min-w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-real-xl p-0 overflow-hidden z-[9999] fixed",
+    contentWithPresetsStyle: "flex w-fit max-w-none bg-white border border-[var(--color-border)] rounded-lg shadow-lg p-0 overflow-hidden z-[9999] fixed",
+    presetsContainerStyle: "flex flex-col gap-1 p-3 border-r border-[var(--color-border)] bg-[var(--color-neutral-50)] min-w-[180px]",
+    presetButtonStyle: "w-full text-left px-3 py-2 text-sm rounded-md transition-colors hover:bg-white hover:text-[var(--color-text-primary)] cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 text-[var(--color-text-secondary)] data-[active=true]:bg-white data-[active=true]:text-[var(--color-text-primary)] data-[active=true]:font-medium",
+    helperTextStyle: formsBaseTheme.helperText,
+    helperTextStates: {
+        default: "text-[var(--color-text-primary)]",
+        disabled: "text-[var(--color-text-muted)]",
+        invalid: "text-[var(--color-danger)]",
+    },
+};
+
+export { datePickerTheme };

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

@@ -0,0 +1,146 @@
+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';
+/**
+ * Date range type for range selection mode
+ */
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * 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;
+    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>;