@daxence/flexy-date-picker 1.0.0 → 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';