@daxence/flexy-date-picker 1.0.0 → 1.0.2

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';