@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.3

package/components/datepicker/dayPickerTypes.d.ts

@@ -0,0 +1,517 @@
+import { FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';
+import { DateRange as ReactDayPickerDateRange } from 'react-day-picker';
+import { RioglyphIconType } from '../rioglyph/RioglyphIconType';
+export type DateRange = ReactDayPickerDateRange;
+export type Modifiers = Record<string, boolean>;
+export type DayPickerMode = 'single' | 'multiple' | 'range';
+export type DayPickerSelection = Date | Date[] | DateRange | undefined;
+export type DayPickerRangeSelectionVariant = 'default' | 'week' | 'month' | 'rolling';
+export type DayPickerDateBefore = {
+    before: Date;
+};
+export type DayPickerDateAfter = {
+    after: Date;
+};
+export type DayPickerDateInterval = {
+    before: Date;
+    after: Date;
+};
+export type DayPickerDayOfWeek = {
+    dayOfWeek: number | number[];
+};
+export type DayPickerDateMatcher = boolean | Date | Date[] | DateRange | DayPickerDateBefore | DayPickerDateAfter | DayPickerDateInterval | DayPickerDayOfWeek | ((date: Date) => boolean);
+export type DayPickerDisabledDays = DayPickerDateMatcher | DayPickerDateMatcher[];
+export type DayPickerHiddenDays = DayPickerDateMatcher | DayPickerDateMatcher[];
+export type DayPickerCustomModifiers = Record<string, DayPickerDateMatcher | DayPickerDateMatcher[]>;
+type CommonCalendarProps = {
+    /**
+     * Locale used for calendar labels and default input formatting.
+     *
+     * @default 'en-GB'
+     */
+    locale?: string;
+    /**
+     * Optional size variant for the rendered calendar density.
+     *
+     * Changes the size and spacing of the individual day cells instead of the outer wrapper.
+     *
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Additional classes for the calendar root element.
+     */
+    className?: string;
+    /**
+     * Number of visible calendar months.
+     *
+     * @default 1
+     */
+    numberOfMonths?: 1 | 2;
+    /**
+     * Shows the days from adjacent months inside the current month grid.
+     *
+     * @default true
+     */
+    showOutsideDays?: boolean;
+    /**
+     * Keeps the calendar height stable by always rendering full weeks.
+     *
+     * @default true
+     */
+    fixedWeeks?: boolean;
+    /**
+     * Shows the calendar week number column.
+     *
+     * @default false
+     */
+    showWeekNumber?: boolean;
+    /**
+     * Overrides the first day of the week.
+     *
+     * `0` is Sunday, `1` is Monday, up to `6` for Saturday.
+     */
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Initial month shown when the calendar is first rendered.
+     */
+    defaultMonth?: Date;
+    /**
+     * Controlled currently visible month.
+     */
+    month?: Date;
+    /**
+     * Called when the visible month changes.
+     */
+    onMonthChange?: (month: Date) => void;
+    /**
+     * Lower month boundary for month navigation.
+     */
+    startMonth?: Date;
+    /**
+     * Upper month boundary for month navigation.
+     */
+    endMonth?: Date;
+    /**
+     * Days that cannot be selected.
+     */
+    disabledDays?: DayPickerDisabledDays;
+    /**
+     * Days that should not be rendered in the calendar grid.
+     */
+    hiddenDays?: DayPickerHiddenDays;
+    /**
+     * Custom day modifiers forwarded to the underlying calendar.
+     */
+    modifiers?: DayPickerCustomModifiers;
+    /**
+     * Additional CSS classes attached to custom modifiers.
+     */
+    modifiersClassNames?: Record<string, string>;
+    /**
+     * Renders optional custom content inside a day cell.
+     *
+     * Useful for icons, dots, tooltips or other domain-specific markers.
+     */
+    renderDayContent?: (date: Date, modifiers: Modifiers) => ReactNode;
+};
+export type SingleDayPickerCalendarProps = CommonCalendarProps & {
+    /**
+     * Enables single-date selection.
+     *
+     * @default 'single'
+     */
+    mode?: 'single';
+    /**
+     * Controlled single selected date.
+     */
+    value?: Date;
+    /**
+     * Initial single selected date for uncontrolled usage.
+     */
+    defaultValue?: Date;
+    /**
+     * Called when the selected date changes.
+     */
+    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;
+};
+export type MultipleDayPickerCalendarProps = CommonCalendarProps & {
+    /**
+     * Enables multiple independent date selection.
+     */
+    mode: 'multiple';
+    /**
+     * Controlled list of selected dates.
+     */
+    value?: Date[];
+    /**
+     * Initial selected dates for uncontrolled usage.
+     */
+    defaultValue?: Date[];
+    /**
+     * Called when the selected dates change.
+     */
+    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;
+};
+export type RangeDayPickerCalendarProps = CommonCalendarProps & {
+    /**
+     * Enables date-range selection.
+     */
+    mode: 'range';
+    /**
+     * Controlled selected date range.
+     */
+    value?: DateRange;
+    /**
+     * Initial selected date range for uncontrolled usage.
+     */
+    defaultValue?: DateRange;
+    /**
+     * Called when the selected range changes.
+     */
+    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;
+    /**
+     * Selects how a range is created when clicking a day.
+     *
+     * `default` uses the built-in range behavior.
+     * `week` selects the whole week of the clicked day.
+     * `month` selects the whole month of the clicked day.
+     * `rolling` selects a fixed-length range starting at the clicked day.
+     *
+     * @default 'default'
+     */
+    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';
+    /**
+     * Fixed number of days used when `selectionVariant='rolling'`.
+     *
+     * @default 7
+     */
+    rollingDays?: number;
+};
+export type DayPickerCalendarProps = SingleDayPickerCalendarProps | MultipleDayPickerCalendarProps | RangeDayPickerCalendarProps;
+export type DayPickerSlotRenderProps<TValue> = {
+    /**
+     * Currently committed value of the picker.
+     */
+    value: TValue | undefined;
+    /**
+     * Current draft value while the dropdown is open.
+     *
+     * In deferred mode, this can differ from `value` until `apply()` is called.
+     */
+    draftValue: TValue | undefined;
+    /**
+     * Updates the current draft value from custom slot content.
+     */
+    setDraftValue: (value: TValue | undefined) => void;
+    /**
+     * Commits the current draft value and closes the dropdown.
+     */
+    apply: () => void;
+    /**
+     * Clears the current selection.
+     */
+    clear: () => void;
+    /**
+     * Closes the dropdown without necessarily committing the current draft value.
+     */
+    close: () => void;
+    /**
+     * Active selection mode of the picker.
+     */
+    mode: DayPickerMode;
+    /**
+     * Active locale used for formatting and calendar labels.
+     */
+    locale: string;
+};
+export type DayPickerTriggerRenderProps<TValue> = DayPickerSlotRenderProps<TValue> & {
+    /**
+     * Optional id forwarded from the DayPicker props.
+     */
+    id?: string;
+    /**
+     * Optional form field name forwarded from the DayPicker props.
+     */
+    name?: string;
+    /**
+     * String currently shown by the default trigger input.
+     */
+    displayValue: string;
+    /**
+     * Whether the dropdown is currently open.
+     */
+    isOpen: boolean;
+    /**
+     * Opens the dropdown.
+     */
+    open: () => void;
+    /**
+     * Toggles the dropdown open state.
+     */
+    toggle: () => void;
+};
+type CommonDayPickerProps = Omit<CommonCalendarProps, 'size'> & {
+    /**
+     * Optional id forwarded to the default input trigger.
+     */
+    id?: string;
+    /**
+     * Optional form field name forwarded to the default input trigger.
+     */
+    name?: string;
+    /**
+     * Placeholder text shown in the default input trigger.
+     */
+    placeholder?: string;
+    /**
+     * Rioglyph icon shown in the default input trigger addon.
+     *
+     * @default 'rioglyph-calendar'
+     */
+    iconName?: RioglyphIconType;
+    /**
+     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.
+     * If omitted, locale-based display is used for the input.
+     */
+    dateFormat?: string;
+    /**
+     * Called when the internal input loses focus.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /**
+     * Additional props forwarded to the default input element.
+     *
+     * Useful for attributes like `readOnly`, `disabled`, `required`, `autoFocus`, or custom ARIA labels.
+     */
+    inputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'value' | 'defaultValue' | 'onChange' | 'size'>;
+    /**
+     * Shows the built-in error styling and help block below the input.
+     */
+    errorMessage?: string | ReactNode;
+    /**
+     * Shows the built-in warning styling and help block below the input.
+     */
+    warningMessage?: string | ReactNode;
+    /**
+     * Controls white-space handling inside the built-in help block.
+     *
+     * @default 'normal'
+     */
+    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';
+    /**
+     * Additional classes for the text input element.
+     */
+    inputClassName?: string;
+    /**
+     * Additional classes for the dropdown container.
+     */
+    dropdownClassName?: string;
+    /**
+     * Additional classes for the left sidebar container.
+     */
+    leftSidebarClassName?: string;
+    /**
+     * Additional classes for the right sidebar container.
+     */
+    rightSidebarClassName?: string;
+    /**
+     * Additional classes for the footer container.
+     */
+    footerClassName?: string;
+    /**
+     * Renders the dropdown into a dedicated react portal.
+     *
+     * @default false
+     */
+    usePortal?: boolean;
+    /**
+     * Aligns the dropdown to the right edge of the input.
+     *
+     * @default false
+     */
+    alignRight?: boolean;
+    /**
+     * Shows a clear button inside the input.
+     *
+     * @default false
+     */
+    isClearable?: boolean;
+    /**
+     * Closes the dropdown after selecting a complete value.
+     *
+     * Range mode closes only after both dates are selected.
+     *
+     * @default true for `selectionBehavior='immediate'`, otherwise false
+     */
+    closeOnSelect?: boolean;
+    /**
+     * Closes the dropdown when clicking outside of the trigger and dropdown.
+     *
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * Defines whether the value is committed immediately or only when applied explicitly.
+     *
+     * @default 'immediate'
+     */
+    selectionBehavior?: 'immediate' | 'deferred';
+};
+/**
+ * Props for a `DayPicker` with single-date selection.
+ */
+export type SingleDayPickerProps = CommonDayPickerProps & {
+    /**
+     * Enables single-date selection.
+     *
+     * @default 'single'
+     */
+    mode?: 'single';
+    /**
+     * Controlled single selected date.
+     */
+    value?: Date;
+    /**
+     * Initial single selected date for uncontrolled usage.
+     */
+    defaultValue?: Date;
+    /**
+     * Called when the selected date changes.
+     */
+    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;
+    /**
+     * Called whenever the user changes the raw input value.
+     * Useful for custom validation and form-library integration.
+     */
+    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;
+    /**
+     * Custom parser for manual single-date input.
+     * Overrides the built-in locale/dateFormat parsing.
+     */
+    parseInput?: (rawValue: string, locale: string) => Date | undefined;
+    /**
+     * Custom renderer for the value shown in the input.
+     */
+    renderValue?: (value: Date | undefined, locale: string) => string;
+    /**
+     * Replaces the default input trigger with custom trigger content.
+     */
+    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date>) => ReactNode);
+    /**
+     * Optional content rendered on the left side of the dropdown.
+     */
+    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);
+    /**
+     * Optional content rendered on the right side of the dropdown.
+     */
+    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);
+    /**
+     * Optional content rendered below the calendar inside the dropdown.
+     */
+    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);
+};
+/**
+ * Props for a `DayPicker` with multiple independent dates.
+ */
+export type MultipleDayPickerProps = CommonDayPickerProps & {
+    /**
+     * Enables multiple independent date selection.
+     */
+    mode: 'multiple';
+    /**
+     * Controlled list of selected dates.
+     */
+    value?: Date[];
+    /**
+     * Initial selected dates for uncontrolled usage.
+     */
+    defaultValue?: Date[];
+    /**
+     * Called when the selected dates change.
+     */
+    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;
+    /**
+     * Custom renderer for the value shown in the input.
+     */
+    renderValue?: (value: Date[] | undefined, locale: string) => string;
+    /**
+     * Replaces the default input trigger with custom trigger content.
+     */
+    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode);
+    /**
+     * Optional content rendered on the left side of the dropdown.
+     */
+    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);
+    /**
+     * Optional content rendered on the right side of the dropdown.
+     */
+    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);
+    /**
+     * Optional content rendered below the calendar inside the dropdown.
+     */
+    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);
+};
+/**
+ * Props for a `DayPicker` with date-range selection.
+ */
+export type RangeDayPickerProps = CommonDayPickerProps & {
+    /**
+     * Enables date-range selection.
+     */
+    mode: 'range';
+    /**
+     * Controlled selected date range.
+     */
+    value?: DateRange;
+    /**
+     * Initial selected date range for uncontrolled usage.
+     */
+    defaultValue?: DateRange;
+    /**
+     * Called when the selected range changes.
+     */
+    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;
+    /**
+     * Custom renderer for the value shown in the input.
+     */
+    renderValue?: (value: DateRange | undefined, locale: string) => string;
+    /**
+     * Selects how a range is created when clicking a day.
+     *
+     * `default` uses the built-in range behavior.
+     * `week` selects the whole week of the clicked day.
+     * `month` selects the whole month of the clicked day.
+     * `rolling` selects a fixed-length range starting at the clicked day.
+     *
+     * @default 'default'
+     */
+    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';
+    /**
+     * Fixed number of days used when `selectionVariant='rolling'`.
+     *
+     * @default 7
+     */
+    rollingDays?: number;
+    /**
+     * Replaces the default input trigger with custom trigger content.
+     */
+    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode);
+    /**
+     * Optional content rendered on the left side of the dropdown.
+     */
+    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);
+    /**
+     * Optional content rendered on the right side of the dropdown.
+     */
+    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);
+    /**
+     * Optional content rendered below the calendar inside the dropdown.
+     */
+    footer?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);
+};
+export type DayPickerProps = SingleDayPickerProps | MultipleDayPickerProps | RangeDayPickerProps;
+export declare const isSingleDayPickerProps: (props: DayPickerProps | DayPickerCalendarProps) => props is SingleDayPickerProps | SingleDayPickerCalendarProps;
+export declare const isMultipleDayPickerProps: (props: DayPickerProps | DayPickerCalendarProps) => props is MultipleDayPickerProps | MultipleDayPickerCalendarProps;
+export declare const isRangeDayPickerProps: (props: DayPickerProps | DayPickerCalendarProps) => props is RangeDayPickerProps | RangeDayPickerCalendarProps;
+export {};

package/components/datepicker/dayPickerTypes.js

@@ -0,0 +1,7 @@
+const i = (e) => !e.mode || e.mode === "single", o = (e) => e.mode === "multiple", s = (e) => e.mode === "range";
+export {
+  o as isMultipleDayPickerProps,
+  s as isRangeDayPickerProps,
+  i as isSingleDayPickerProps
+};
+//# sourceMappingURL=dayPickerTypes.js.map

package/components/datepicker/dayPickerTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dayPickerTypes.js","sources":["../../../src/components/datepicker/dayPickerTypes.ts"],"sourcesContent":["import type { FocusEventHandler, InputHTMLAttributes, ReactNode } from 'react';\nimport type { DateRange as ReactDayPickerDateRange } from 'react-day-picker';\nimport type { RioglyphIconType } from '../rioglyph/RioglyphIconType';\n\nexport type DateRange = ReactDayPickerDateRange;\nexport type Modifiers = Record<string, boolean>;\nexport type DayPickerMode = 'single' | 'multiple' | 'range';\nexport type DayPickerSelection = Date | Date[] | DateRange | undefined;\nexport type DayPickerRangeSelectionVariant = 'default' | 'week' | 'month' | 'rolling';\nexport type DayPickerDateBefore = { before: Date };\nexport type DayPickerDateAfter = { after: Date };\nexport type DayPickerDateInterval = { before: Date; after: Date };\nexport type DayPickerDayOfWeek = { dayOfWeek: number | number[] };\nexport type DayPickerDateMatcher =\n    | boolean\n    | Date\n    | Date[]\n    | DateRange\n    | DayPickerDateBefore\n    | DayPickerDateAfter\n    | DayPickerDateInterval\n    | DayPickerDayOfWeek\n    | ((date: Date) => boolean);\nexport type DayPickerDisabledDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerHiddenDays = DayPickerDateMatcher | DayPickerDateMatcher[];\nexport type DayPickerCustomModifiers = Record<string, DayPickerDateMatcher | DayPickerDateMatcher[]>;\n\ntype CommonCalendarProps = {\n    /**\n     * Locale used for calendar labels and default input formatting.\n     *\n     * @default 'en-GB'\n     */\n    locale?: string;\n\n    /**\n     * Optional size variant for the rendered calendar density.\n     *\n     * Changes the size and spacing of the individual day cells instead of the outer wrapper.\n     *\n     * @default 'md'\n     */\n    size?: 'sm' | 'md' | 'lg';\n\n    /**\n     * Additional classes for the calendar root element.\n     */\n    className?: string;\n\n    /**\n     * Number of visible calendar months.\n     *\n     * @default 1\n     */\n    numberOfMonths?: 1 | 2;\n\n    /**\n     * Shows the days from adjacent months inside the current month grid.\n     *\n     * @default true\n     */\n    showOutsideDays?: boolean;\n\n    /**\n     * Keeps the calendar height stable by always rendering full weeks.\n     *\n     * @default true\n     */\n    fixedWeeks?: boolean;\n\n    /**\n     * Shows the calendar week number column.\n     *\n     * @default false\n     */\n    showWeekNumber?: boolean;\n\n    /**\n     * Overrides the first day of the week.\n     *\n     * `0` is Sunday, `1` is Monday, up to `6` for Saturday.\n     */\n    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n\n    /**\n     * Initial month shown when the calendar is first rendered.\n     */\n    defaultMonth?: Date;\n\n    /**\n     * Controlled currently visible month.\n     */\n    month?: Date;\n\n    /**\n     * Called when the visible month changes.\n     */\n    onMonthChange?: (month: Date) => void;\n\n    /**\n     * Lower month boundary for month navigation.\n     */\n    startMonth?: Date;\n\n    /**\n     * Upper month boundary for month navigation.\n     */\n    endMonth?: Date;\n\n    /**\n     * Days that cannot be selected.\n     */\n    disabledDays?: DayPickerDisabledDays;\n\n    /**\n     * Days that should not be rendered in the calendar grid.\n     */\n    hiddenDays?: DayPickerHiddenDays;\n\n    /**\n     * Custom day modifiers forwarded to the underlying calendar.\n     */\n    modifiers?: DayPickerCustomModifiers;\n\n    /**\n     * Additional CSS classes attached to custom modifiers.\n     */\n    modifiersClassNames?: Record<string, string>;\n\n    /**\n     * Renders optional custom content inside a day cell.\n     *\n     * Useful for icons, dots, tooltips or other domain-specific markers.\n     */\n    renderDayContent?: (date: Date, modifiers: Modifiers) => ReactNode;\n};\n\nexport type SingleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n};\n\nexport type MultipleDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n};\n\nexport type RangeDayPickerCalendarProps = CommonCalendarProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n};\n\nexport type DayPickerCalendarProps =\n    | SingleDayPickerCalendarProps\n    | MultipleDayPickerCalendarProps\n    | RangeDayPickerCalendarProps;\n\nexport type DayPickerSlotRenderProps<TValue> = {\n    /**\n     * Currently committed value of the picker.\n     */\n    value: TValue | undefined;\n\n    /**\n     * Current draft value while the dropdown is open.\n     *\n     * In deferred mode, this can differ from `value` until `apply()` is called.\n     */\n    draftValue: TValue | undefined;\n\n    /**\n     * Updates the current draft value from custom slot content.\n     */\n    setDraftValue: (value: TValue | undefined) => void;\n\n    /**\n     * Commits the current draft value and closes the dropdown.\n     */\n    apply: () => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clear: () => void;\n\n    /**\n     * Closes the dropdown without necessarily committing the current draft value.\n     */\n    close: () => void;\n\n    /**\n     * Active selection mode of the picker.\n     */\n    mode: DayPickerMode;\n\n    /**\n     * Active locale used for formatting and calendar labels.\n     */\n    locale: string;\n};\n\nexport type DayPickerTriggerRenderProps<TValue> = DayPickerSlotRenderProps<TValue> & {\n    /**\n     * Optional id forwarded from the DayPicker props.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded from the DayPicker props.\n     */\n    name?: string;\n\n    /**\n     * String currently shown by the default trigger input.\n     */\n    displayValue: string;\n\n    /**\n     * Whether the dropdown is currently open.\n     */\n    isOpen: boolean;\n\n    /**\n     * Opens the dropdown.\n     */\n    open: () => void;\n\n    /**\n     * Toggles the dropdown open state.\n     */\n    toggle: () => void;\n};\n\ntype CommonDayPickerProps = Omit<CommonCalendarProps, 'size'> & {\n    /**\n     * Optional id forwarded to the default input trigger.\n     */\n    id?: string;\n\n    /**\n     * Optional form field name forwarded to the default input trigger.\n     */\n    name?: string;\n\n    /**\n     * Placeholder text shown in the default input trigger.\n     */\n    placeholder?: string;\n\n    /**\n     * Rioglyph icon shown in the default input trigger addon.\n     *\n     * @default 'rioglyph-calendar'\n     */\n    iconName?: RioglyphIconType;\n\n    /**\n     * Custom format string (e.g., 'yyyy-MM-dd') to override locale-based formatting.\n     * If omitted, locale-based display is used for the input.\n     */\n    dateFormat?: string;\n\n    /**\n     * Called when the internal input loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n\n    /**\n     * Additional props forwarded to the default input element.\n     *\n     * Useful for attributes like `readOnly`, `disabled`, `required`, `autoFocus`, or custom ARIA labels.\n     */\n    inputProps?: Omit<\n        InputHTMLAttributes<HTMLInputElement>,\n        'children' | 'value' | 'defaultValue' | 'onChange' | 'size'\n    >;\n\n    /**\n     * Shows the built-in error styling and help block below the input.\n     */\n    errorMessage?: string | ReactNode;\n\n    /**\n     * Shows the built-in warning styling and help block below the input.\n     */\n    warningMessage?: string | ReactNode;\n\n    /**\n     * Controls white-space handling inside the built-in help block.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional classes for the text input element.\n     */\n    inputClassName?: string;\n\n    /**\n     * Additional classes for the dropdown container.\n     */\n    dropdownClassName?: string;\n\n    /**\n     * Additional classes for the left sidebar container.\n     */\n    leftSidebarClassName?: string;\n\n    /**\n     * Additional classes for the right sidebar container.\n     */\n    rightSidebarClassName?: string;\n\n    /**\n     * Additional classes for the footer container.\n     */\n    footerClassName?: string;\n\n    /**\n     * Renders the dropdown into a dedicated react portal.\n     *\n     * @default false\n     */\n    usePortal?: boolean;\n\n    /**\n     * Aligns the dropdown to the right edge of the input.\n     *\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Shows a clear button inside the input.\n     *\n     * @default false\n     */\n    isClearable?: boolean;\n\n    /**\n     * Closes the dropdown after selecting a complete value.\n     *\n     * Range mode closes only after both dates are selected.\n     *\n     * @default true for `selectionBehavior='immediate'`, otherwise false\n     */\n    closeOnSelect?: boolean;\n\n    /**\n     * Closes the dropdown when clicking outside of the trigger and dropdown.\n     *\n     * @default true\n     */\n    closeOnOutsideClick?: boolean;\n\n    /**\n     * Defines whether the value is committed immediately or only when applied explicitly.\n     *\n     * @default 'immediate'\n     */\n    selectionBehavior?: 'immediate' | 'deferred';\n};\n\n/**\n * Props for a `DayPicker` with single-date selection.\n */\nexport type SingleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables single-date selection.\n     *\n     * @default 'single'\n     */\n    mode?: 'single';\n\n    /**\n     * Controlled single selected date.\n     */\n    value?: Date;\n\n    /**\n     * Initial single selected date for uncontrolled usage.\n     */\n    defaultValue?: Date;\n\n    /**\n     * Called when the selected date changes.\n     */\n    onChange?: (value: Date | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Called whenever the user changes the raw input value.\n     * Useful for custom validation and form-library integration.\n     */\n    onInputChange?: (rawValue: string, parsedDate: Date | undefined, isValid: boolean) => void;\n\n    /**\n     * Custom parser for manual single-date input.\n     * Overrides the built-in locale/dateFormat parsing.\n     */\n    parseInput?: (rawValue: string, locale: string) => Date | undefined;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with multiple independent dates.\n */\nexport type MultipleDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables multiple independent date selection.\n     */\n    mode: 'multiple';\n\n    /**\n     * Controlled list of selected dates.\n     */\n    value?: Date[];\n\n    /**\n     * Initial selected dates for uncontrolled usage.\n     */\n    defaultValue?: Date[];\n\n    /**\n     * Called when the selected dates change.\n     */\n    onChange?: (value: Date[] | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: Date[] | undefined, locale: string) => string;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<Date[]>) => ReactNode);\n};\n\n/**\n * Props for a `DayPicker` with date-range selection.\n */\nexport type RangeDayPickerProps = CommonDayPickerProps & {\n    /**\n     * Enables date-range selection.\n     */\n    mode: 'range';\n\n    /**\n     * Controlled selected date range.\n     */\n    value?: DateRange;\n\n    /**\n     * Initial selected date range for uncontrolled usage.\n     */\n    defaultValue?: DateRange;\n\n    /**\n     * Called when the selected range changes.\n     */\n    onChange?: (value: DateRange | undefined, modifiers: Modifiers) => void;\n\n    /**\n     * Custom renderer for the value shown in the input.\n     */\n    renderValue?: (value: DateRange | undefined, locale: string) => string;\n\n    /**\n     * Selects how a range is created when clicking a day.\n     *\n     * `default` uses the built-in range behavior.\n     * `week` selects the whole week of the clicked day.\n     * `month` selects the whole month of the clicked day.\n     * `rolling` selects a fixed-length range starting at the clicked day.\n     *\n     * @default 'default'\n     */\n    selectionVariant?: 'default' | 'week' | 'month' | 'rolling';\n\n    /**\n     * Fixed number of days used when `selectionVariant='rolling'`.\n     *\n     * @default 7\n     */\n    rollingDays?: number;\n\n    /**\n     * Replaces the default input trigger with custom trigger content.\n     */\n    trigger?: ReactNode | ((props: DayPickerTriggerRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the left side of the dropdown.\n     */\n    leftSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered on the right side of the dropdown.\n     */\n    rightSidebar?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n\n    /**\n     * Optional content rendered below the calendar inside the dropdown.\n     */\n    footer?: ReactNode | ((props: DayPickerSlotRenderProps<DateRange>) => ReactNode);\n};\n\nexport type DayPickerProps = SingleDayPickerProps | MultipleDayPickerProps | RangeDayPickerProps;\n\nexport const isSingleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is SingleDayPickerProps | SingleDayPickerCalendarProps => !props.mode || props.mode === 'single';\n\nexport const isMultipleDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is MultipleDayPickerProps | MultipleDayPickerCalendarProps => props.mode === 'multiple';\n\nexport const isRangeDayPickerProps = (\n    props: DayPickerProps | DayPickerCalendarProps\n): props is RangeDayPickerProps | RangeDayPickerCalendarProps => props.mode === 'range';\n"],"names":["isSingleDayPickerProps","props","isMultipleDayPickerProps","isRangeDayPickerProps"],"mappings":"AA6mBO,MAAMA,IAAyB,CAClCC,MAC+D,CAACA,EAAM,QAAQA,EAAM,SAAS,UAEpFC,IAA2B,CACpCD,MACmEA,EAAM,SAAS,YAEzEE,IAAwB,CACjCF,MAC6DA,EAAM,SAAS;"}

package/components/datepicker/dayPickerUtils.d.ts

@@ -0,0 +1,10 @@
+import { Locale } from 'date-fns';
+import { ClearableInputProps } from '../clearableInput/ClearableInput';
+import { DateRange, DayPickerMode } from './dayPickerTypes';
+export declare const supportedDayPickerLocales: string[];
+export declare const resolveLocale: (localeCode: string) => Locale;
+export declare const formatDate: (date: Date | undefined, localeCode: string, dateFormat?: string) => string;
+export declare const formatSelectionForInput: (selected: Date | Date[] | DateRange | undefined, localeCode: string, mode: DayPickerMode, dateFormat?: string) => string;
+export declare const getInputFormat: (localeCode: string, dateFormat?: string) => string;
+export declare const getInputMaskProps: (localeCode: string, dateFormat?: string) => Pick<ClearableInputProps, "mask" | "pattern" | "format" | "parse"> | undefined;
+export declare const parseDateString: (value: string | undefined, localeCode: string, dateFormat?: string) => Date | undefined;

package/components/datepicker/dayPickerUtils.js

@@ -0,0 +1,92 @@
+import { parse as s, format as e, isValid as c } from "date-fns";
+import * as d from "date-fns/locale";
+const i = {
+  "bg-BG": "dd.MM.yyyy",
+  "cs-CZ": "dd.MM.yyyy",
+  "da-DK": "dd-MM-yyyy",
+  "de-DE": "dd.MM.yyyy",
+  "el-GR": "dd/MM/yyyy",
+  "en-GB": "dd/MM/yyyy",
+  "es-ES": "dd/MM/yyyy",
+  "et-EE": "dd.MM.yyyy",
+  "fi-FI": "dd.MM.yyyy",
+  "fr-FR": "dd/MM/yyyy",
+  "hr-HR": "dd.MM.yyyy",
+  "hu-HU": "yyyy. MM. dd.",
+  "it-IT": "dd/MM/yyyy",
+  "lt-LT": "dd-MM-yyyy",
+  "lv-LV": "dd.MM.yyyy",
+  "nb-NO": "dd.MM.yyyy",
+  "nl-NL": "dd-MM-yyyy",
+  "pl-PL": "dd.MM.yyyy",
+  "pt-BR": "dd/MM/yyyy",
+  "pt-PT": "dd/MM/yyyy",
+  "ro-RO": "dd.MM.yyyy",
+  "sk-SK": "dd.MM.yyyy",
+  "sl-SI": "dd.MM.yyyy",
+  "sv-SE": "yyyy-MM-dd"
+}, l = Object.keys(i), g = (y) => {
+  const r = y.trim(), t = r.replace(/-([a-z])/gi, (n, M) => M.toUpperCase()), o = r.split("-")[0];
+  return d[t] || d[r] || d[o] || d.enGB;
+}, p = (y, r, t) => y ? e(y, a(r, t)) : "", D = (y, r, t, o) => {
+  if (!y)
+    return "";
+  const n = (M) => p(M, r, o);
+  if (t === "single" && y instanceof Date)
+    return n(y);
+  if (t === "multiple" && Array.isArray(y))
+    return y.map(n).join(", ");
+  if (t === "range" && typeof y == "object" && "from" in y) {
+    const M = y.from ? n(y.from) : "...", f = y.to ? n(y.to) : "...";
+    return `${M} - ${f}`;
+  }
+  return "";
+}, a = (y, r) => r || i[y] || "yyyy-MM-dd", u = (y) => {
+  let r = "";
+  for (let t = 0; t < y.length; ) {
+    if (y.startsWith("dd", t)) {
+      r += "d", t += 2;
+      continue;
+    }
+    if (y.startsWith("MM", t)) {
+      r += "m", t += 2;
+      continue;
+    }
+    if (y.startsWith("yyyy", t)) {
+      r += "Y", t += 4;
+      continue;
+    }
+    const o = y[t];
+    if (!o)
+      break;
+    if (/[a-zA-Z]/.test(o))
+      return;
+    r += o, t += 1;
+  }
+  return r;
+}, L = (y, r) => {
+  const t = a(y, r), o = u(t);
+  if (o)
+    return {
+      mask: Date,
+      pattern: o,
+      format: (n) => n ? e(n, t) : "",
+      parse: (n) => s(n, t, /* @__PURE__ */ new Date())
+    };
+}, h = (y, r, t) => {
+  if (!y)
+    return;
+  const o = t || a(r), n = s(y, o, /* @__PURE__ */ new Date());
+  if (c(n) && e(n, o) === y)
+    return n;
+};
+export {
+  p as formatDate,
+  D as formatSelectionForInput,
+  a as getInputFormat,
+  L as getInputMaskProps,
+  h as parseDateString,
+  g as resolveLocale,
+  l as supportedDayPickerLocales
+};
+//# sourceMappingURL=dayPickerUtils.js.map