@daxence/flexy-date-picker 1.0.1 → 1.0.2

package/dist/features/date-picker/components/calendar/calendar.d.ts

@@ -0,0 +1,7 @@
+interface CalendarProps {
+    /** For multi-month views, the offset index (0 = first month shown) */
+    panelIndex?: number;
+    totalPanels?: number;
+}
+export declare function Calendar({ panelIndex, totalPanels }: CalendarProps): import("react").JSX.Element;
+export {};

package/dist/features/date-picker/components/calendar/index.d.ts

@@ -0,0 +1 @@
+export { Calendar } from './calendar';

package/dist/features/date-picker/components/calendar-day/calendar-day.d.ts

@@ -0,0 +1,7 @@
+import { Dayjs } from 'dayjs';
+interface CalendarDayProps {
+    date: Dayjs;
+    isOutside: boolean;
+}
+export declare function CalendarDay({ date, isOutside }: CalendarDayProps): import("react").JSX.Element;
+export {};

package/dist/features/date-picker/components/calendar-day/index.d.ts

@@ -0,0 +1 @@
+export { CalendarDay } from './calendar-day';

package/dist/features/date-picker/components/calendar-header/calendar-header.d.ts

@@ -0,0 +1,7 @@
+interface CalendarHeaderProps {
+    /** When showing multiple months, which panel index this is */
+    panelIndex?: number;
+    totalPanels?: number;
+}
+export declare function CalendarHeader({ panelIndex, totalPanels }: CalendarHeaderProps): import("react").JSX.Element;
+export {};

package/dist/features/date-picker/components/calendar-header/index.d.ts

@@ -0,0 +1 @@
+export { CalendarHeader } from './calendar-header';

package/dist/features/date-picker/components/calendar-legend/calendar-legend.d.ts

@@ -0,0 +1,11 @@
+import { CSSProperties, ReactNode } from 'react';
+export interface LegendItem {
+    label: string | ReactNode;
+    className: string;
+}
+export interface CalendarLegendProps {
+    items?: LegendItem[];
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function CalendarLegend({ items, className, style, }: CalendarLegendProps): import("react").JSX.Element;

package/dist/features/date-picker/components/calendar-legend/calendar-legend.stories.d.ts

@@ -0,0 +1,17 @@
+import { StoryObj } from '@storybook/react';
+import { CalendarLegend } from './calendar-legend';
+declare const meta: {
+    title: string;
+    component: typeof CalendarLegend;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const CustomItems: Story;
+export declare const WithCustomStyling: Story;
+export declare const SingleItem: Story;
+export declare const WithReactNodeLabels: Story;

package/dist/features/date-picker/components/calendar-legend/index.d.ts

@@ -0,0 +1,2 @@
+export { CalendarLegend } from './calendar-legend';
+export type { CalendarLegendProps, LegendItem } from './calendar-legend';

package/dist/features/date-picker/components/date-input/date-input.d.ts

@@ -0,0 +1,20 @@
+import { DatePickerClassNames, DatePickerStyles, DateValue, DateRange, PickerMode, RenderInputProps } from '../../types';
+interface DateInputProps {
+    mode: PickerMode;
+    singleValue: DateValue;
+    rangeValue: DateRange;
+    format: string;
+    locale?: string;
+    placeholder: string | [string, string];
+    isOpen: boolean;
+    isDisabled: boolean;
+    readOnly: boolean;
+    clearable: boolean;
+    classNames: DatePickerClassNames;
+    styles: DatePickerStyles;
+    onOpen: () => void;
+    onClear: () => void;
+    renderInput?: (props: RenderInputProps) => React.ReactNode;
+}
+export declare function DateInput({ mode, singleValue, rangeValue, format, locale, placeholder, isOpen, isDisabled, readOnly, clearable, classNames, styles: slotStyles, onOpen, onClear, renderInput, }: DateInputProps): import("react").JSX.Element;
+export {};

package/dist/features/date-picker/components/date-input/index.d.ts

@@ -0,0 +1 @@
+export { DateInput } from './date-input';

package/dist/features/date-picker/components/date-picker/date-picker.d.ts

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '../../types';
+export declare function DatePicker({ mode, value, defaultValue, rangeValue, defaultRangeValue, format, locale, lang, weekStartsOn, enableTime, timeStep, timeFormat, minTime, maxTime, disabledTime, timeSchedule, defaultTimeSchedule, minDate, maxDate, placeholder, disabled, isDisabled, readOnly, clearable, highlightToday, showAdjacentMonthDays, showOutsideDays, tooltip, tooltipDelay, theme, classNames: classNamesProp, styles: stylesProp, className, style, numberOfMonths, showMonthYearSelectors, inline, placement, renderDay, renderNavButton, renderInput, onDateChange, onRangeChange, onTimeChange, onMonthChange, onYearChange, onDayHover, onOpen, onClose, onClear, onBeforeSelect, onAfterSelect, }: DatePickerProps): import("react").JSX.Element;

package/dist/features/date-picker/components/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,525 @@
+import { StoryObj } from '@storybook/react';
+import { DatePicker } from './date-picker';
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    argTypes: {
+        mode: {
+            control: "select";
+            options: string[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        value: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultValue: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        rangeValue: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        defaultRangeValue: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        format: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        locale: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        lang: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        weekStartsOn: {
+            control: "select";
+            options: number[];
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        numberOfMonths: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        showAdjacentMonthDays: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        highlightToday: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        inline: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        minDate: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        maxDate: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        disabled: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        isDisabled: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        readOnly: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        clearable: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        enableTime: {
+            control: "boolean";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        timeStep: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        timeFormat: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        minTime: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        maxTime: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        disabledTime: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        tooltip: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        tooltipDelay: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+            table: {
+                category: string;
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        theme: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        classNames: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        styles: {
+            control: "object";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        className: {
+            control: "text";
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        renderDay: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        renderNavButton: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        renderInput: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onDateChange: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onRangeChange: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onTimeChange: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onMonthChange: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onYearChange: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onDayHover: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onOpen: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onClose: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onClear: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onBeforeSelect: {
+            control: false;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+        onAfterSelect: {
+            action: string;
+            description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * The out-of-the-box experience with no props set.
+ * Click the input to open the calendar and pick a date.
+ */
+export declare const Default: Story;
+/**
+ * Full interactive playground — every prop is wired to a Storybook Control.
+ * Use the **Controls** panel below to toggle features in real time.
+ */
+export declare const Playground: Story;
+/**
+ * Renders the calendar inline — no input trigger or popover.
+ * Useful for embedding the picker directly in a form or page.
+ */
+export declare const Inline: Story;
+/**
+ * Range selection — click a start date then an end date.
+ * The `onRangeChange` action logs each selection step.
+ */
+export declare const RangeSelection: Story;
+/**
+ * Dual-panel range picker rendered inline — two months side by side.
+ */
+export declare const RangeInline: Story;
+/**
+ * Adds a time-slot panel next to the calendar.
+ * The step is 30 minutes and the selectable range is 08:00 – 20:00.
+ */
+export declare const WithTime: Story;
+/**
+ * Inline calendar with time selector.
+ */
+export declare const InlineWithTime: Story;
+/**
+ * Demonstrates the `disabled` prop with multiple strategies:
+ * - Entire weekends via `predicate`
+ * - A specific date list
+ * - Before / after bounds
+ */
+export declare const DisabledDates: Story;
+/**
+ * Constrain selection to a specific window using `minDate` + `maxDate`.
+ */
+export declare const MinMaxDates: Story;
+/**
+ * Picker with an initial date selected via `defaultValue`.
+ */
+export declare const PreSelectedDate: Story;
+/**
+ * Range picker with a default range via `defaultRangeValue`.
+ */
+export declare const PreSelectedRange: Story;
+/**
+ * With `showAdjacentMonthDays: true` the grid is filled with greyed-out
+ * days from the previous and next months.
+ */
+export declare const ShowAdjacentMonthDays: Story;
+/**
+ * `weekStartsOn: 1` shifts the week grid so Monday is the first column.
+ */
+export declare const WeekStartsMonday: Story;
+/**
+ * `numberOfMonths: 3` renders three consecutive calendar panels at once.
+ */
+export declare const MultiMonth: Story;
+/**
+ * `isDisabled: true` greys out the input and prevents all interaction.
+ */
+export declare const Disabled: Story;
+/**
+ * `readOnly: true` shows the value but prevents changes.
+ */
+export declare const ReadOnly: Story;
+/**
+ * `clearable: false` hides the × button — useful when the field is required.
+ */
+export declare const NoClear: Story;
+/**
+ * A static string tooltip shown on every day cell.
+ */
+export declare const WithTooltip: Story;
+/**
+ * Dynamic tooltip using a render function — shows rich contextual info.
+ */
+export declare const TooltipWithFunction: Story;
+/**
+ * Hotel-style range tooltip: labels check-in/check-out and shows a live
+ * "X nights" count while hovering the candidate end date or once both
+ * dates are selected. Uses the `nights`, `isRangeStart`, `isRangeEnd` and
+ * `isPreviewRangeEnd` render props.
+ */
+export declare const TooltipNights: Story;
+/**
+ * Override CSS tokens via the `theme` prop to apply a teal accent.
+ */
+export declare const ThemeTeal: Story;
+/**
+ * Violet / purple brand accent.
+ */
+export declare const ThemePurple: Story;
+/**
+ * Rose / red brand accent with a sharp square border radius.
+ */
+export declare const ThemeRose: Story;
+/**
+ * Dark surface + amber accent — simulates a dark mode.
+ */
+export declare const ThemeDark: Story;
+/**
+ * `renderDay` lets you inject any content into each day cell.
+ * This example adds a red dot indicator for the next 5 days.
+ */
+export declare const CustomDayRenderer: Story;
+/**
+ * `renderNavButton` replaces the default ‹ / › buttons with custom elements.
+ */
+export declare const CustomNavButtons: Story;
+/**
+ * The `locale` prop switches day/month labels to French.
+ *
+ * > **Note**: you must import the dayjs locale in your app:
+ * > `import 'dayjs/locale/fr'`
+ */
+export declare const LocaleFrench: Story;
+/**
+ * `classNames` lets you attach custom CSS classes to individual UI slots.
+ */
+export declare const SlotClassNames: Story;

package/dist/features/date-picker/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export { DatePicker } from './date-picker';

package/dist/features/date-picker/components/tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './tooltip';

package/dist/features/date-picker/components/tooltip/tooltip.d.ts

@@ -0,0 +1,15 @@
+import { default as React, ReactElement } from 'react';
+import { Placement } from '@floating-ui/react';
+import { TooltipContent, TooltipRenderProps, DatePickerStyles, DatePickerClassNames } from '../../types';
+type AnyProps = Record<string, unknown>;
+interface TooltipProps {
+    content: TooltipContent;
+    renderProps: TooltipRenderProps;
+    delay?: number;
+    placement?: Placement;
+    classNames?: DatePickerClassNames;
+    styles?: DatePickerStyles;
+    children: ReactElement<AnyProps>;
+}
+export declare function Tooltip({ content, renderProps, delay, placement, classNames, styles: slotStyles, children, }: TooltipProps): React.JSX.Element;
+export {};

package/dist/features/date-picker/context/date-picker-context.d.ts

@@ -0,0 +1,30 @@
+import { Dayjs } from 'dayjs';
+import { DateValue, DateRange, PickerMode, DisabledConfig, DatePickerClassNames, DatePickerStyles, TooltipContent, DatePickerEvents } from '../types';
+export interface DatePickerContextValue extends DatePickerEvents {
+    mode: PickerMode;
+    singleValue: DateValue;
+    rangeValue: DateRange;
+    hoveredDate: Dayjs | null;
+    currentYear: number;
+    currentMonth: number;
+    setCurrentYear: (y: number) => void;
+    setCurrentMonth: (m: number) => void;
+    selectDate: (date: Dayjs) => void;
+    setHoveredDate: (date: Dayjs | null) => void;
+    weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: string;
+    showMonthYearSelectors?: boolean;
+    disabled?: DisabledConfig | boolean;
+    isDisabled: boolean;
+    readOnly: boolean;
+    highlightToday: boolean;
+    showAdjacentMonthDays: boolean;
+    tooltip?: TooltipContent;
+    tooltipDelay: number;
+    format: string;
+    classNames: DatePickerClassNames;
+    styles: DatePickerStyles;
+}
+declare const DatePickerContext: import('react').Context<DatePickerContextValue | null>;
+export declare function useDatePickerContext(): DatePickerContextValue;
+export { DatePickerContext };

package/dist/features/date-picker/context/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePickerContext, useDatePickerContext } from './date-picker-context';
+export type { DatePickerContextValue } from './date-picker-context';

package/dist/features/date-picker/index.d.ts

@@ -0,0 +1,10 @@
+export { DatePicker } from './components/date-picker';
+export { Calendar } from './components/calendar';
+export { CalendarHeader } from './components/calendar-header';
+export { CalendarDay } from './components/calendar-day';
+export { Tooltip } from './components/tooltip';
+export { CalendarLegend } from './components/calendar-legend';
+export { DatePickerContext, useDatePickerContext } from './context';
+export { isSameDay, isBetween, isRangeStart, isRangeEnd, isInRange, isDateDisabled, generateCalendarDays, getWeekdayLabels, getMonthNames, generateTimeSlots, isTimeDisabled, } from './utils';
+export type { DatePickerProps, DateRange, DateValue, PickerMode, DatePickerClassNames, DatePickerStyles, DatePickerTheme, DatePickerEvents, DisabledConfig, DisabledTimeConfig, TimeRange, DateSchedule, TooltipContent, TooltipRenderProps, DateSelectionMeta, DateSelectionPhase, RenderInputProps, } from './types';
+export type { CalendarLegendProps, LegendItem } from './components/calendar-legend';

package/dist/features/date-picker/styles/theme-vars.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+import { DatePickerTheme } from '../types';
+export declare function buildThemeVars(theme?: DatePickerTheme): CSSProperties;

package/dist/features/date-picker/types/date-picker.types.d.ts

@@ -0,0 +1,355 @@
+import { Dayjs } from 'dayjs';
+import { CSSProperties, ReactNode } from 'react';
+export type DateValue = Dayjs | null;
+export interface DateRange {
+    start: DateValue;
+    end: DateValue;
+}
+export type PickerMode = 'single' | 'range';
+export type DateSelectionPhase = 'single' | 'range-start' | 'range-end';
+export interface DateSelectionMeta {
+    mode: PickerMode;
+    phase: DateSelectionPhase;
+    currentValue: DateValue;
+    currentRange: DateRange;
+    nextValue: DateValue | DateRange;
+}
+export interface DatePickerClassNames {
+    /** Outermost wrapper */
+    root?: string;
+    /** The input trigger area */
+    inputWrapper?: string;
+    /** Individual text input */
+    input?: string;
+    /** The separator between range inputs (e.g. "→") */
+    separator?: string;
+    /** Clear button */
+    clearButton?: string;
+    /** Calendar popover container */
+    popover?: string;
+    /** Calendar wrapper */
+    calendar?: string;
+    /** Calendar header row */
+    calendarHeader?: string;
+    /** Prev/next navigation buttons */
+    navButton?: string;
+    /** Month/year label */
+    monthYearLabel?: string;
+    /** Weekday name row */
+    weekdays?: string;
+    /** Individual weekday label */
+    weekday?: string;
+    /** Days grid */
+    daysGrid?: string;
+    /** Individual day cell */
+    day?: string;
+    /** Today's day */
+    dayToday?: string;
+    /** Selected single day */
+    daySelected?: string;
+    /** Range start day */
+    dayRangeStart?: string;
+    /** Range end day */
+    dayRangeEnd?: string;
+    /** Days between start and end */
+    dayInRange?: string;
+    /** Disabled day */
+    dayDisabled?: string;
+    /** Day outside current month */
+    dayOutside?: string;
+    /** Day being hovered */
+    dayHovered?: string;
+    /** Time picker wrapper */
+    timePicker?: string;
+    /** Time picker title */
+    timeTitle?: string;
+    /** Time slots list */
+    timeSlotList?: string;
+    /** Time slot item */
+    timeSlot?: string;
+    /** Selected time slot */
+    timeSlotSelected?: string;
+    /** Disabled time slot */
+    timeSlotDisabled?: string;
+    /** Tooltip container */
+    tooltip?: string;
+}
+export interface DatePickerStyles {
+    root?: CSSProperties;
+    inputWrapper?: CSSProperties;
+    input?: CSSProperties;
+    separator?: CSSProperties;
+    clearButton?: CSSProperties;
+    popover?: CSSProperties;
+    calendar?: CSSProperties;
+    calendarHeader?: CSSProperties;
+    navButton?: CSSProperties;
+    monthYearLabel?: CSSProperties;
+    weekdays?: CSSProperties;
+    weekday?: CSSProperties;
+    daysGrid?: CSSProperties;
+    day?: CSSProperties;
+    dayToday?: CSSProperties;
+    daySelected?: CSSProperties;
+    dayRangeStart?: CSSProperties;
+    dayRangeEnd?: CSSProperties;
+    dayInRange?: CSSProperties;
+    dayDisabled?: CSSProperties;
+    dayOutside?: CSSProperties;
+    dayHovered?: CSSProperties;
+    timePicker?: CSSProperties;
+    timeTitle?: CSSProperties;
+    timeSlotList?: CSSProperties;
+    timeSlot?: CSSProperties;
+    timeSlotSelected?: CSSProperties;
+    timeSlotDisabled?: CSSProperties;
+    tooltip?: CSSProperties;
+}
+export interface DisabledTimeConfig {
+    /** Disable times for specific weekdays: 0=Sun ... 6=Sat */
+    weekdays?: Partial<Record<0 | 1 | 2 | 3 | 4 | 5 | 6, string[]>>;
+    /** Disable times for specific dates by YYYY-MM-DD */
+    dates?: Record<string, string[]>;
+    /** Custom predicate for disabling a time slot */
+    predicate?: (date: Dayjs, time: string) => boolean;
+}
+/** A continuous block of time with its own slot interval */
+export interface TimeRange {
+    /** Start time (inclusive) in HH:mm */
+    from: string;
+    /** End time (inclusive) in HH:mm */
+    to: string;
+    /** Slot interval in minutes for this range (e.g. 5, 15, 30) */
+    step: number;
+}
+/**
+ * Time availability schedule for a single date.
+ *
+ * - `ranges`: one or more time blocks, each with its own step interval.
+ *   Gaps between ranges are simply absent from the slot list.
+ * - `unavailable`: set to `true` to hide the time picker entirely for this date.
+ */
+export interface DateSchedule {
+    ranges?: TimeRange[];
+    unavailable?: boolean;
+}
+export interface DatePickerTheme {
+    /** Primary/accent color */
+    primary?: string;
+    /** Primary hover color */
+    primaryHover?: string;
+    /** Text on primary background */
+    primaryForeground?: string;
+    /** Background of the popover/calendar */
+    background?: string;
+    /** Elevated surface used for trigger and menus */
+    surface?: string;
+    /** Stronger surface tone for hover/active states */
+    surfaceStrong?: string;
+    /** Default text color */
+    foreground?: string;
+    /** Muted background (in-range highlight) */
+    muted?: string;
+    /** Soft accent background */
+    accentSoft?: string;
+    /** Muted text */
+    mutedForeground?: string;
+    /** Border color */
+    border?: string;
+    /** Input background */
+    inputBackground?: string;
+    /** Border radius (e.g. "8px") */
+    borderRadius?: string;
+    /** Day cell border radius */
+    dayBorderRadius?: string;
+    /** Box shadow for popover */
+    shadow?: string;
+    /** Font family */
+    fontFamily?: string;
+    /** Font size base */
+    fontSize?: string;
+    /** Today indicator color */
+    todayColor?: string;
+    /** Disabled day opacity */
+    disabledOpacity?: string;
+    /** Transition duration */
+    transitionDuration?: string;
+    /** Popover z-index */
+    zIndex?: string;
+}
+export interface TooltipRenderProps {
+    date: Dayjs;
+    isToday: boolean;
+    isSelected: boolean;
+    isDisabled: boolean;
+    isRangeStart: boolean;
+    isRangeEnd: boolean;
+    isInRange: boolean;
+    /** True while user is selecting the end date in range mode */
+    isRangeSelecting?: boolean;
+    /** True for days inside the temporary hover preview range */
+    isInPreviewRange?: boolean;
+    /** True for the hovered candidate end date while selecting a range */
+    isPreviewRangeEnd?: boolean;
+    /** Range mode only: the committed or in-progress start date */
+    rangeStart?: Dayjs | null;
+    /** Range mode only: the committed end date, or the hovered candidate end while selecting */
+    rangeEnd?: Dayjs | null;
+    /**
+     * Range mode only: number of nights between `rangeStart` and `rangeEnd`
+     * (committed or previewed). `null` until both ends are known.
+     * Handy for hotel-style tooltips, e.g. `${nights} night(s)`.
+     */
+    nights?: number | null;
+}
+export type TooltipContent = string | ReactNode | ((props: TooltipRenderProps) => ReactNode);
+export interface DatePickerEvents {
+    /** Fired when a single date is selected */
+    onDateChange?: (date: DateValue) => void;
+    /** Fired when range selection changes */
+    onRangeChange?: (range: DateRange) => void;
+    /** Fired when the time changes for the current selection */
+    onTimeChange?: (date: DateValue, time: string) => void;
+    /** Fired before a date or range selection is committed; return false to cancel */
+    onBeforeSelect?: (date: Dayjs, meta: DateSelectionMeta) => boolean | void;
+    /** Fired after a date or range selection is committed */
+    onAfterSelect?: (date: Dayjs, meta: DateSelectionMeta) => void;
+    /** Fired when the viewed month changes */
+    onMonthChange?: (month: number, year: number) => void;
+    /** Fired when the viewed year changes */
+    onYearChange?: (year: number) => void;
+    /** Fired when a day is hovered */
+    onDayHover?: (date: Dayjs | null) => void;
+    /** Fired when the picker opens */
+    onOpen?: () => void;
+    /** Fired when the picker closes */
+    onClose?: () => void;
+    /** Fired when the picker is cleared */
+    onClear?: () => void;
+}
+export interface DisabledConfig {
+    /** Disable all dates before this date */
+    before?: Dayjs;
+    /** Disable all dates after this date */
+    after?: Dayjs;
+    /** Disable specific dates */
+    dates?: Dayjs[];
+    /** Custom predicate — return true to disable */
+    predicate?: (date: Dayjs) => boolean;
+}
+export interface DatePickerProps extends DatePickerEvents {
+    /** Selection mode */
+    mode?: PickerMode;
+    value?: DateValue;
+    defaultValue?: DateValue;
+    rangeValue?: DateRange;
+    defaultRangeValue?: DateRange;
+    /** Display format passed to dayjs .format() */
+    format?: string;
+    /** Locale string for dayjs (e.g. 'fr', 'ar') */
+    locale?: string;
+    /** Language alias for locale (e.g. 'fr', 'ar') */
+    lang?: string;
+    /** First day of the week: 0 = Sunday … 6 = Saturday */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /** Enable the time picker panel */
+    enableTime?: boolean;
+    /** Time slot interval in minutes (e.g. 5, 15, 30) */
+    timeStep?: number;
+    /** Time display format for slots, default HH:mm */
+    timeFormat?: string;
+    /** Earliest selectable time in HH:mm */
+    minTime?: string;
+    /** Latest selectable time in HH:mm */
+    maxTime?: string;
+    /** Disable specific time slots by weekday/date/predicate */
+    disabledTime?: DisabledTimeConfig;
+    /**
+     * Per-date time schedules — key is `YYYY-MM-DD`.
+     * When the selected date has an entry, its schedule overrides
+     * `timeStep` / `minTime` / `maxTime`.
+     *
+     * Example:
+     * ```ts
+     * timeSchedule={{
+     *   '2026-06-15': { unavailable: true },
+     *   '2026-06-16': {
+     *     ranges: [
+     *       { from: '08:00', to: '12:00', step: 15 },
+     *       { from: '14:00', to: '16:00', step: 5 },
+     *       { from: '16:00', to: '18:00', step: 10 },
+     *     ],
+     *   },
+     * }}
+     * ```
+     */
+    timeSchedule?: Record<string, DateSchedule>;
+    /**
+     * Default schedule applied to all dates not listed in `timeSchedule`.
+     * When provided, overrides `timeStep` / `minTime` / `maxTime`.
+     */
+    defaultTimeSchedule?: DateSchedule;
+    /** Earliest selectable date */
+    minDate?: Dayjs;
+    /** Latest selectable date */
+    maxDate?: Dayjs;
+    /** Placeholder for single input or [start, end] for range */
+    placeholder?: string | [string, string];
+    /** Disable specific dates / ranges */
+    disabled?: DisabledConfig | boolean;
+    /** Whether the picker is disabled entirely */
+    isDisabled?: boolean;
+    /** Whether the picker is read-only */
+    readOnly?: boolean;
+    /** Show a clear button */
+    clearable?: boolean;
+    /** Show today's date highlight */
+    highlightToday?: boolean;
+    /** Show day numbers from previous/next months inside the current month grid */
+    showAdjacentMonthDays?: boolean;
+    /** @deprecated Use showAdjacentMonthDays instead */
+    showOutsideDays?: boolean;
+    /** Tooltip content for day cells */
+    tooltip?: TooltipContent;
+    /** Tooltip delay in ms */
+    tooltipDelay?: number;
+    /** CSS custom-property theme overrides */
+    theme?: DatePickerTheme;
+    /** Per-slot className overrides */
+    classNames?: DatePickerClassNames;
+    /** Per-slot inline style overrides */
+    styles?: DatePickerStyles;
+    /** Additional className on the root wrapper */
+    className?: string;
+    /** Additional style on the root wrapper */
+    style?: CSSProperties;
+    /** Number of months to show at once (range pickers often use 2) */
+    numberOfMonths?: number;
+    /** Show month/year dropdown selectors in header (default: true) */
+    showMonthYearSelectors?: boolean;
+    /** Render the calendar inline instead of using the trigger/popover UI */
+    inline?: boolean;
+    /**
+     * Preferred popover placement relative to the trigger.
+     * - `'bottom'` — always open below
+     * - `'top'`    — always open above
+     * - `'auto'`   — (default) open below when there is enough room, otherwise
+     *                flip to above automatically; re-evaluates on window resize
+     */
+    placement?: 'top' | 'bottom' | 'auto';
+    /** Render a custom day cell content */
+    renderDay?: (date: Dayjs, props: TooltipRenderProps) => ReactNode;
+    /** Render custom navigation buttons */
+    renderNavButton?: (direction: 'prev' | 'next', onClick: () => void) => ReactNode;
+    /** Custom input render */
+    renderInput?: (props: RenderInputProps) => ReactNode;
+}
+export interface RenderInputProps {
+    value: string;
+    onClick: () => void;
+    onClear: () => void;
+    isOpen: boolean;
+    placeholder: string;
+    isDisabled: boolean;
+    readOnly: boolean;
+}

package/dist/features/date-picker/types/index.d.ts

@@ -0,0 +1 @@
+export type * from './date-picker.types';

package/dist/features/date-picker/utils/date-utils.d.ts

@@ -0,0 +1,37 @@
+import { Dayjs } from 'dayjs';
+import { DateRange, DateSchedule, DisabledConfig, DisabledTimeConfig } from '../types';
+export type { Dayjs };
+/** Check if two Dayjs values represent the same calendar day */
+export declare function isSameDay(a: Dayjs | null, b: Dayjs | null): boolean;
+/** Check if `date` is strictly between `start` and `end` (exclusive) */
+export declare function isBetween(date: Dayjs, start: Dayjs | null, end: Dayjs | null): boolean;
+/** Check if `date` is the start of a range */
+export declare function isRangeStart(date: Dayjs, range: DateRange): boolean;
+/** Check if `date` is the end of a range */
+export declare function isRangeEnd(date: Dayjs, range: DateRange): boolean;
+/** Check if `date` falls within a completed range (inclusive) */
+export declare function isInRange(date: Dayjs, range: DateRange): boolean;
+/** Check if `date` is disabled per the DisabledConfig */
+export declare function isDateDisabled(date: Dayjs, disabled?: DisabledConfig | boolean): boolean;
+/** Generate all day cells for a calendar month view (including padding days) */
+export declare function generateCalendarDays(year: number, month: number, weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6): Dayjs[];
+/** Build ordered weekday labels starting from `weekStartsOn` */
+export declare function getWeekdayLabels(weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6, locale?: string): string[];
+/** Short month names for a given locale */
+export declare function getMonthNames(locale?: string): string[];
+/** Range of years around the current year */
+export declare function getYearOptions(spread?: number): number[];
+/** Generate time slots in HH:mm format between min and max using step minutes */
+export declare function generateTimeSlots(stepMinutes?: number, minTime?: string, maxTime?: string): string[];
+/**
+ * Generate time slots from a `DateSchedule`.
+ *
+ * - Returns `[]` when `schedule.unavailable` is `true`.
+ * - Concatenates slots from each `TimeRange` in `schedule.ranges`.
+ *   Gaps between ranges produce no slots — just omit the time window.
+ * - Duplicate boundary values (e.g. `to:'12:00'` followed by `from:'12:00'`)
+ *   are deduplicated while preserving order.
+ */
+export declare function generateSlotsForSchedule(schedule: DateSchedule): string[];
+/** Check if a time slot should be disabled for a given date */
+export declare function isTimeDisabled(date: Dayjs, time: string, disabledTime?: DisabledTimeConfig): boolean;

package/dist/features/date-picker/utils/index.d.ts

@@ -0,0 +1 @@
+export { isSameDay, isBetween, isRangeStart, isRangeEnd, isInRange, isDateDisabled, generateCalendarDays, getWeekdayLabels, getMonthNames, getYearOptions, generateTimeSlots, generateSlotsForSchedule, isTimeDisabled, } from './date-utils';

package/dist/features/time-picker/components/time-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { TimePicker } from './time-picker';
+export type { TimePickerProps } from './time-picker';

package/dist/features/time-picker/components/time-picker/time-picker.d.ts

@@ -0,0 +1,61 @@
+import { CSSProperties } from 'react';
+import { Dayjs } from 'dayjs';
+import { DateSchedule, DisabledTimeConfig } from '../../../date-picker/types';
+export interface TimePickerProps {
+    /** Controlled value in `HH:mm` (24-hour) format */
+    value?: string;
+    /** Initial value when uncontrolled */
+    defaultValue?: string;
+    /** Called with the selected `HH:mm` string, or `''` after clear */
+    onChange?: (time: string) => void;
+    /** Uniform interval in minutes (default 15). Ignored when `schedule` is set. */
+    timeStep?: number;
+    /** Earliest slot in `HH:mm` (default `'00:00'`). Ignored when `schedule` is set. */
+    minTime?: string;
+    /** Latest slot in `HH:mm` (default `'23:59'`). Ignored when `schedule` is set. */
+    maxTime?: string;
+    /**
+     * Schedule-based slot generation. Each range has its own step interval.
+     * Gaps between ranges produce no slots.
+     * Overrides `timeStep` / `minTime` / `maxTime` when provided.
+     *
+     * @example
+     * schedule={{
+     *   ranges: [
+     *     { from: '08:00', to: '12:00', step: 15 },
+     *     { from: '14:00', to: '17:00', step: 30 },
+     *   ],
+     * }}
+     */
+    schedule?: DateSchedule;
+    /** dayjs format string for slot labels and input display (default `'HH:mm'`) */
+    timeFormat?: string;
+    /** Placeholder shown in the input when no time is selected */
+    placeholder?: string;
+    /** dayjs locale string (e.g. `'fr'`, `'ar'`) */
+    locale?: string;
+    /**
+     * Reference date used by `disabledTime` predicates.
+     * Defaults to today when omitted.
+     */
+    date?: Dayjs;
+    /** Disable specific slots by weekday / date / predicate */
+    disabledTime?: DisabledTimeConfig;
+    /**
+     * Render the slot list directly inside the element (no input trigger,
+     * no popover). Useful when embedding in a custom layout.
+     */
+    inline?: boolean;
+    /** Disable all interaction */
+    isDisabled?: boolean;
+    /** Prevent selection while still showing the picker */
+    readOnly?: boolean;
+    /** Show a clear (×) button when a time is selected */
+    clearable?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+    onClear?: () => void;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function TimePicker({ value, defaultValue, onChange, timeStep, minTime, maxTime, schedule, timeFormat, placeholder, locale, date, disabledTime, inline, isDisabled, readOnly, clearable, onOpen, onClose, onClear, className, style, }: TimePickerProps): import("react").JSX.Element;

package/dist/features/time-picker/components/time-picker/time-picker.stories.d.ts

@@ -0,0 +1,62 @@
+import { StoryObj } from '@storybook/react';
+import { TimePicker } from './time-picker';
+declare const meta: {
+    title: string;
+    component: typeof TimePicker;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        value: {
+            control: false;
+            description: string;
+        };
+        defaultValue: {
+            control: false;
+            description: string;
+        };
+        timeStep: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        minTime: {
+            control: "text";
+        };
+        maxTime: {
+            control: "text";
+        };
+        timeFormat: {
+            control: "text";
+        };
+        inline: {
+            control: "boolean";
+        };
+        isDisabled: {
+            control: "boolean";
+        };
+        readOnly: {
+            control: "boolean";
+        };
+        clearable: {
+            control: "boolean";
+        };
+    };
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Controlled: Story;
+export declare const Inline: Story;
+export declare const WithSchedule: Story;
+export declare const InlineWithSchedule: Story;
+export declare const DisabledSlots: Story;
+export declare const Disabled: Story;
+export declare const ReadOnly: Story;
+export declare const NoClear: Story;
+export declare const CustomFormat: Story;
+export declare const CustomPlaceholder: Story;

package/dist/features/time-picker/components/time-slot-list/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeSlotList } from './time-slot-list';
+export type { TimeSlotListProps } from './time-slot-list';

package/dist/features/time-picker/components/time-slot-list/time-slot-list.d.ts

@@ -0,0 +1,16 @@
+import { Dayjs } from 'dayjs';
+import { DatePickerClassNames, DatePickerStyles, DisabledTimeConfig } from '../../../date-picker/types';
+export interface TimeSlotListProps {
+    timeSlots: string[];
+    selectedTime: string;
+    onSelectTime: (slot: string) => void;
+    timeFormat: string;
+    locale?: string;
+    targetDate: Dayjs;
+    disabledTime?: DisabledTimeConfig;
+    isDisabled: boolean;
+    readOnly: boolean;
+    classNames?: Partial<DatePickerClassNames>;
+    styles?: Partial<DatePickerStyles>;
+}
+export declare function TimeSlotList({ timeSlots, selectedTime, onSelectTime, timeFormat, locale, targetDate, disabledTime, isDisabled, readOnly, classNames, styles, }: TimeSlotListProps): import("react").JSX.Element;

package/dist/features/time-picker/index.d.ts

@@ -0,0 +1,4 @@
+export { TimePicker } from './components/time-picker';
+export type { TimePickerProps } from './components/time-picker';
+export { TimeSlotList } from './components/time-slot-list';
+export type { TimeSlotListProps } from './components/time-slot-list';

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './features/date-picker';
+export * from './features/time-picker';

package/dist/shared/utils/cx.d.ts

@@ -0,0 +1,2 @@
+/** Merge class names, filtering out falsy values */
+export declare function cx(...classes: (string | undefined | null | false)[]): string;

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,18 +1,21 @@
 {
   "name": "@daxence/flexy-date-picker",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A fully customizable React date picker with single & range selection, injectable CSS theming, tooltips, and full event support.",
   "type": "module",
   "main": "./dist/flexy-date-picker.umd.cjs",
   "module": "./dist/flexy-date-picker.js",
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/flexy-date-picker.js",
       "require": "./dist/flexy-date-picker.umd.cjs",
-      "types": "./dist/types/index.d.ts"
+      "types": "./dist/index.d.ts"
     },
-    "./styles": "./dist/style.css"
+    "./styles": {
+      "types": "./dist/styles.d.ts",
+      "default": "./dist/style.css"
+    }
   },
   "files": [
     "dist"

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-export * from '../index'
-export {}