@konstructio/ui 0.1.2-alpha.99 → 0.1.4

package/dist/lib/components/DateRangePicker/DateRangePicker.types.d.ts

@@ -1,11 +1,12 @@
 import { VariantProps } from 'class-variance-authority';
-import { Theme } from '../../../domain/theme';
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { Theme } from '../../domain/theme';
 import { CalendarPanelClassNames, DayPickerClassNames } from './components/CalendarPanel/CalendarPanel.types';
 import { DateTimeInputsClassNames } from './components/DateTimeInputs/DateTimeInputs.types';
 import { PresetLabels, PresetPanelClassNames } from './components/PresetPanel/PresetPanel.types';
 import { dateRangePickerVariants } from './DateRangePicker.variants';
-import { DateRange, DateRangePreset, DateRangeWithTime, TimeRange } from './contexts';
-export type { DateRange, DateRangePreset, DateRangeWithTime, TimeRange };
+import { DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange } from './contexts';
+export type { DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange, };
 export type { CalendarPanelClassNames, DateTimeInputsClassNames, DayPickerClassNames, PresetLabels, PresetPanelClassNames, };
 /**
  * Props for the DateRangePicker component.
@@ -19,16 +20,32 @@ export type { CalendarPanelClassNames, DateTimeInputsClassNames, DayPickerClassN
  * ```
  */
 export type Props = VariantProps<typeof dateRangePickerVariants> & {
+    /**
+     * Browser autofill for the From/To date fields (default: 'off'). The default
+     * keeps the browser's saved-value dropdown from covering the calendar; set it
+     * when the picker sits in a form where autofill is wanted.
+     */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
     /** Initial date range */
     defaultRange?: DateRange;
     /** Initial time range */
     defaultTime?: TimeRange;
     /** Initially selected preset (default: 'custom') */
-    defaultPreset?: DateRangePreset;
+    /**
+     * Initially selected preset. `null` opens with nothing selected, which pairs
+     * with `revealCalendarOnCustom` to show only the preset list.
+     */
+    defaultPreset?: DateRangePreset | null;
     /** Callback when the range changes (includes time) */
     onRangeChange?: (range: DateRangeWithTime) => void;
     /** Callback when the date changes (start or end date, without time) */
     onDateChange?: (range: DateRange) => void;
+    /**
+     * Callback when a preset is selected, with the window it resolved to (empty for
+     * a manual-selection entry). Distinguishes choosing a preset from picking a day,
+     * which `onRangeChange` cannot.
+     */
+    onPresetChange?: (preset: DateRangePreset | null, range: DateRange) => void;
     /** Time format: '12' for 12-hour or '24' for 24-hour */
     timeFormat?: '12' | '24';
     /** Whether to show time inputs (default: true) */
@@ -71,6 +88,8 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
      * - 'together': Both months navigate together (prev/next moves both by one month)
      */
     navigationMode?: 'independent' | 'together';
+    numberOfMonths?: 1 | 2;
+    dateDisplayFormat?: DateDisplayFormat;
     /** Aria label for the calendar container (default: 'Date range picker calendar') */
     ariaLabelCalendar?: string;
     /** Aria label for previous month button in together mode (default: 'Previous month') */
@@ -101,6 +120,39 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
     errorDateNotAvailable?: string;
     /** Whether to show the preset panel (default: true) */
     showPresets?: boolean;
+    /**
+     * Replaces the built-in preset options. Each option carries its own label and a
+     * `resolve(now)` returning the window it stands for, which is what allows
+     * rolling windows ("the past 7×24 hours") rather than only calendar buckets.
+     *
+     * An option whose `resolve` returns an empty range is the manual-selection
+     * entry; `custom` is the reserved id the calendar switches back to when a day
+     * is picked, so include it in the list to keep that entry visible. Order in the
+     * array is the order rendered.
+     *
+     * @example
+     * ```tsx
+     * <DateRangePicker
+     *   presets={[
+     *     { value: 'last-24-hours', label: 'Last 24 hours',
+     *       resolve: (now) => ({ from: new Date(now.getTime() - 864e5), to: now }) },
+     *     { value: 'custom', label: 'Custom range', resolve: () => ({}) },
+     *   ]}
+     * />
+     * ```
+     */
+    presets?: DateRangePresetOption[];
+    footer?: ReactNode;
+    /**
+     * Render the date inputs and calendar only while the manual-selection preset is
+     * active — the entry whose `resolve` returns an empty range, `custom` by
+     * default (default: false, panels always visible).
+     *
+     * Presets become one-click shortcuts and the calendar is revealed on demand.
+     * Pair it with a `defaultPreset` that resolves to a window, otherwise the
+     * picker opens on `custom` — the library default — and starts expanded.
+     */
+    revealCalendarOnCustom?: boolean;
     /** Label for the time period section (default: 'Time period') */
     labelTimePeriod?: string;
     /** Aria label for the time period section (default: 'Time period options') */
@@ -108,6 +160,11 @@ export type Props = VariantProps<typeof dateRangePickerVariants> & {
     /** Custom labels for preset options */
     presetLabels?: PresetLabels;
     /** Custom class names for different parts of the component */
+    /**
+     * Marks the From/To fields with a required indicator. Decorative only — the
+     * fields carry no `aria-required`, since a range needs one date, not both.
+     */
+    requiredDates?: boolean;
     classNames?: DateRangePickerClassNames;
 };
 /** @deprecated Use Props instead */

package/dist/lib/components/DateRangePicker/DateRangePicker.variants.d.ts

@@ -1,2 +1,8 @@
+/**
+ * The surface is one continuous panel divided by hairlines, so the padding lives
+ * on the columns rather than here — that is what lets the preset column run to
+ * the edge and carry the rule between the two. `overflow-hidden` keeps those
+ * flush columns inside the rounded corner.
+ */
 export declare const dateRangePickerVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const rightPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/components/CalendarMonth/components/CalendarMonthContent/CalendarMonthContent.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from '../../CalendarMonth.types';
+export declare const CalendarMonthContent: FC<Props>;

package/dist/lib/components/DateRangePicker/components/CalendarPanel/hooks/useTogetherCarousel.d.ts

@@ -5,10 +5,11 @@ export type UseTogetherCarouselProps = {
     canNavigatePrev: boolean;
     canNavigateNext: boolean;
     navigationMode: 'together' | 'independent';
+    numberOfMonths?: 1 | 2;
     navigatePrevMonth: () => void;
     navigateNextMonth: () => void;
 };
-export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
+export declare const useTogetherCarousel: ({ displayedMonths, animationDuration, disabled, canNavigatePrev, canNavigateNext, navigationMode, numberOfMonths, navigatePrevMonth, navigateNextMonth, }: UseTogetherCarouselProps) => {
     carouselRef: import('react').RefObject<HTMLDivElement | null>;
     isAnimating: boolean;
     enableTransition: boolean;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.types.d.ts

@@ -1,3 +1,4 @@
+import { InputHTMLAttributes } from 'react';
 export type DateTimeInputsClassNames = {
     /** Root container */
     root?: string;
@@ -13,6 +14,8 @@ export type DateTimeInputsClassNames = {
     input?: string;
 };
 export type DateTimeInputsProps = {
+    /** Browser autofill for both date fields (default: 'off') */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
     className?: string;
     /** Label for start date input (default: 'Start date') */
     labelStartDate?: string;
@@ -20,6 +23,8 @@ export type DateTimeInputsProps = {
     labelEndDate?: string;
     /** Label for time inputs (default: 'Time') */
     labelTime?: string;
+    /** Marks both date fields as required */
+    requiredDates?: boolean;
     /** Aria label for start date input (default: 'Start date') */
     ariaLabelStartDate?: string;
     /** Aria label for end date input (default: 'End date') */
@@ -28,10 +33,6 @@ export type DateTimeInputsProps = {
     errorInvalidDate?: string;
     /** Error message for unavailable date (default: 'Date is not available') */
     errorDateNotAvailable?: string;
-    /** Error message when start date is after end date (default: 'Start date must be before end date') */
-    errorStartAfterEnd?: string;
-    /** Error message when end date is before start date (default: 'End date must be after start date') */
-    errorEndBeforeStart?: string;
     /** Custom class names for styling */
     classNames?: DateTimeInputsClassNames;
 };

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/DateTimeInputs.variants.d.ts

@@ -1,5 +1,12 @@
-export declare const dateTimeInputsVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export declare const dateTimeInputsVariants: (props?: ({
+    layout?: "row" | "compact" | "stacked" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const dateTimeGroupVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const dateInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const timeInputWrapperVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
 export declare const inputLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Marks the date fields as required. It is decorative: the range needs *a* date,
+ * not both, so the inputs are deliberately left without `aria-required`.
+ */
+export declare const inputRequiredMarkVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/EndInputFields/EndInputFields.types.d.ts

@@ -1,5 +1,7 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, InputHTMLAttributes } from 'react';
 export type Props = {
+    /** Browser autofill for the end date field (default: 'off') */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
     dateValue: string;
     timeValue?: Date;
     error?: string;
@@ -8,7 +10,10 @@ export type Props = {
     timeFormat?: '12' | '24';
     labelDate?: string;
     labelTime?: string;
+    /** Shows the required mark beside the date label */
+    required?: boolean;
     ariaLabelDate?: string;
+    ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onDateFocus: () => void;
     onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/components/StartInputFields/StartInputFields.types.d.ts

@@ -1,5 +1,7 @@
-import { ChangeEvent, FocusEvent } from 'react';
+import { ChangeEvent, FocusEvent, InputHTMLAttributes } from 'react';
 export type Props = {
+    /** Browser autofill for the start date field (default: 'off') */
+    autoComplete?: InputHTMLAttributes<HTMLInputElement>['autoComplete'];
     dateValue: string;
     timeValue?: Date;
     error?: string;
@@ -8,7 +10,10 @@ export type Props = {
     timeFormat?: '12' | '24';
     labelDate?: string;
     labelTime?: string;
+    /** Shows the required mark beside the date label */
+    required?: boolean;
     ariaLabelDate?: string;
+    ariaLabelTime?: string;
     onDateChange: (e: ChangeEvent<HTMLInputElement>) => void;
     onDateFocus: () => void;
     onDateBlur: (e: FocusEvent<HTMLInputElement>) => void;

package/dist/lib/components/DateRangePicker/components/DateTimeInputs/hooks/useDateTimeInputs.d.ts

@@ -2,15 +2,13 @@ import { ChangeEvent, FocusEvent } from 'react';
 type UseDateTimeInputsProps = {
     errorInvalidDate: string;
     errorDateNotAvailable: string;
-    errorStartAfterEnd: string;
-    errorEndBeforeStart: string;
 };
-export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, errorStartAfterEnd, errorEndBeforeStart, }: UseDateTimeInputsProps) => {
+export declare const useDateTimeInputs: ({ errorInvalidDate, errorDateNotAvailable, }: UseDateTimeInputsProps) => {
     timeFormat: "24" | "12";
     showTime: boolean;
     name: string | undefined;
     disabled: boolean;
-    time: import('../../../DateRangePicker.types').TimeRange;
+    time: import('../../../contexts').TimeRange;
     startDateValue: string;
     startDateError: string | undefined;
     handleStartDateFocus: () => void;

package/dist/lib/components/DateRangePicker/components/PresetPanel/PresetPanel.types.d.ts

@@ -17,6 +17,10 @@ export type PresetPanelClassNames = {
     title?: string;
     /** RadioGroup wrapper */
     radioGroup?: string;
+    /** Each option row */
+    option?: string;
+    /** Rule drawn above a trailing manual-selection option ('Custom range') */
+    separator?: string;
 };
 export type PresetPanelProps = {
     className?: string;

package/dist/lib/components/DateRangePicker/components/PresetPanel/PresetPanel.variants.d.ts

@@ -1,2 +1,39 @@
-export declare const presetPanelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * The column runs flush to the picker's edge and is set apart by a hairline, not
+ * by a fill — it shares the surface behind it. Its own padding stands in for the
+ * padding the picker no longer applies.
+ */
+export declare const presetPanelVariants: (props?: ({
+    divided?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The title sits on the same left edge as the option labels below it, so its
+ * inset has to match the padding an option row applies on top of the panel's.
+ */
 export declare const presetTitleVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * A row reads as a list item rather than a radio: the control itself is hidden
+ * and selection shows as a trailing check, so the whole row is the hit target
+ * and carries the hover fill.
+ *
+ * `[&>div]:flex-1` grows the wrapper Radio puts around its label, which is what
+ * lets the trailing icon sit against the right edge.
+ */
+export declare const presetOptionVariants: (props?: ({
+    disabled?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const presetChevronVariants: (props?: ({
+    expanded?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Lays the label out as text on the left and its trailing icon on the right. */
+export declare const presetOptionLabelVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * The rule above a trailing manual-selection entry ('Custom range').
+ *
+ * It is drawn as a pseudo-element rather than a border so it can run full-bleed
+ * across the panel — the insets cancel the panel's `px-2.5` — while the row's own
+ * hover fill stays inset. It sits in the row's top margin so the fill never
+ * touches it. Keep the two in step.
+ */
+export declare const presetSeparatorVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/DateRangePicker/components/RightPanel/RightPanel.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { Props } from './RightPanel.types';
+/**
+ * Wraps the inputs + calendar so `revealCalendarOnCustom` can hide them from
+ * inside the provider: whether the active preset is the manual-selection entry
+ * is only knowable from context.
+ */
+export declare const RightPanel: FC<Props>;

package/dist/lib/components/DateRangePicker/components/RightPanel/RightPanel.types.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren & {
+    className?: string;
+};

package/dist/lib/components/DateRangePicker/components/index.d.ts

@@ -1,3 +1,4 @@
 export { PresetPanel } from './PresetPanel/PresetPanel';
 export { DateTimeInputs } from './DateTimeInputs/DateTimeInputs';
 export { CalendarPanel } from './CalendarPanel/CalendarPanel';
+export { RightPanel } from './RightPanel/RightPanel';

package/dist/lib/components/DateRangePicker/constants/index.d.ts

@@ -1 +1,2 @@
-export * from './presets';
+export * from './presets/presets';
+export * from './presets/presets.types';

package/dist/lib/components/DateRangePicker/constants/presets/presets.d.ts

@@ -0,0 +1,10 @@
+import { DateRangePresetOption } from '../../contexts';
+/**
+ * The options offered when `presets` is not supplied. Each one owns the window it
+ * stands for, so the panel and the resolution cannot drift apart.
+ *
+ * These are day-granular: `last-7-days` is seven whole days ending today, not the
+ * past 7×24 hours. A consumer that needs rolling hour-precision windows supplies
+ * its own `presets`.
+ */
+export declare const PRESET_OPTIONS: DateRangePresetOption[];

package/dist/lib/components/DateRangePicker/constants/presets/presets.types.d.ts

@@ -0,0 +1,6 @@
+import { DateRangePreset } from '../../contexts';
+/** @deprecated Use `DateRangePresetOption`, which also carries the option's `resolve`. */
+export type PresetOption = {
+    value: DateRangePreset;
+    label: string;
+};

package/dist/lib/components/DateRangePicker/contexts/{date-range-picker.context.d.ts → date-range-picker/date-range-picker.context.d.ts}

@@ -1,13 +1,36 @@
-export type DateRangePreset = 'today' | 'current-month' | 'custom' | 'last-7-days' | 'last-2-weeks';
+/**
+ * Id of a preset. The five built-ins are listed for autocompletion; any string is
+ * accepted so consumers can supply their own options through the `presets` prop.
+ */
+export type DateRangePreset = 'today' | 'current-month' | 'custom' | 'last-7-days' | 'last-2-weeks' | (string & NonNullable<unknown>);
 export type DateRange = {
     from?: Date;
     to?: Date;
 };
+/**
+ * A selectable entry in the preset panel. The option owns both its label and the
+ * window it stands for, so a consumer can express windows the library does not
+ * ship — `resolve` receives `now`, which is what makes a rolling window
+ * ("the past 7×24 hours") expressible rather than only a calendar bucket.
+ *
+ * `custom` is a reserved id: returning an empty range marks the option as the
+ * manual-selection entry, and picking a day in the calendar switches the panel
+ * back to it.
+ */
+export type DateRangePresetOption = {
+    /** Stable id; doubles as the radio value. */
+    value: DateRangePreset;
+    /** Text shown in the preset panel. */
+    label: string;
+    /** The window this option stands for, resolved when it is selected. */
+    resolve: (now: Date) => DateRange;
+};
 export type TimeRange = {
     startTime?: Date;
     endTime?: Date;
 };
 export type DateRangeWithTime = DateRange & TimeRange;
+export type DateDisplayFormat = 'long' | 'numeric';
 export type BlockedMonth = {
     year: number;
     month: number;
@@ -17,8 +40,10 @@ export type DateRangePickerContextValue = {
     range: DateRange;
     /** Current time values */
     time: TimeRange;
-    /** Current active preset */
-    preset: DateRangePreset;
+    /** Current active preset, or `null` when nothing is selected */
+    preset: DateRangePreset | null;
+    /** The preset options on offer, built-ins unless overridden */
+    presets: DateRangePresetOption[];
     /** Currently displayed months [left, right] */
     displayedMonths: [Date, Date];
     /** Time format */
@@ -49,6 +74,10 @@ export type DateRangePickerContextValue = {
     showOutsideDays: boolean;
     /** Navigation mode: 'together' or 'independent' */
     navigationMode: 'together' | 'independent';
+    numberOfMonths: 1 | 2;
+    dateDisplayFormat: DateDisplayFormat;
+    /** Whether the inputs and calendar only show for the manual-selection preset */
+    revealCalendarOnCustom: boolean;
     /** Whether left month can navigate to previous (independent mode) */
     canLeftNavigatePrev: boolean;
     /** Whether left month can navigate to next (independent mode) */
@@ -61,8 +90,8 @@ export type DateRangePickerContextValue = {
     setRange: (range: DateRange) => void;
     /** Set the time range */
     setTime: (time: TimeRange) => void;
-    /** Set the preset */
-    setPreset: (preset: DateRangePreset) => void;
+    /** Set the preset, or `null` to leave nothing selected */
+    setPreset: (preset: DateRangePreset | null) => void;
     /** Navigate to previous month (together mode) */
     navigatePrevMonth: () => void;
     /** Navigate to next month (together mode) */

package/dist/lib/components/DateRangePicker/contexts/date-range-picker/date-range-picker.provider.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './date-range-picker.types';
+export declare const DateRangePickerProvider: FC<Props>;

package/dist/lib/components/DateRangePicker/contexts/{date-range-picker.provider.d.ts → date-range-picker/date-range-picker.types.d.ts}

@@ -1,24 +1,26 @@
-import { FC, ReactNode } from 'react';
-import { BlockedMonth, DateRange, DateRangePreset, TimeRange } from './date-range-picker.context';
-interface DateRangePickerProviderProps {
-    children: ReactNode;
-    defaultRange?: DateRange;
-    defaultTime?: TimeRange;
-    defaultPreset?: DateRangePreset;
-    timeFormat?: '12' | '24';
-    showTime?: boolean;
-    name?: string;
-    disabled?: boolean;
+import { PropsWithChildren } from 'react';
+import { BlockedMonth, DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, TimeRange } from './date-range-picker.context';
+export type Props = PropsWithChildren<{
     animationDuration?: number;
     blockedDays?: Date[];
     blockedMonths?: BlockedMonth[];
-    minDate?: Date;
-    maxDate?: Date;
+    dateDisplayFormat?: DateDisplayFormat;
+    defaultPreset?: DateRangePreset | null;
+    defaultRange?: DateRange;
+    defaultTime?: TimeRange;
+    disabled?: boolean;
     hideDisabledNavigation?: boolean;
-    showOutsideDays?: boolean;
+    maxDate?: Date;
+    minDate?: Date;
+    name?: string;
     navigationMode?: 'together' | 'independent';
-    onRangeChange?: (range: DateRange & TimeRange) => void;
+    numberOfMonths?: 1 | 2;
+    presets?: DateRangePresetOption[];
+    revealCalendarOnCustom?: boolean;
+    showOutsideDays?: boolean;
+    showTime?: boolean;
+    timeFormat?: '12' | '24';
     onDateChange?: (range: DateRange) => void;
-}
-export declare const DateRangePickerProvider: FC<DateRangePickerProviderProps>;
-export {};
+    onPresetChange?: (preset: DateRangePreset | null, range: DateRange) => void;
+    onRangeChange?: (range: DateRange & TimeRange) => void;
+}>;

package/dist/lib/components/DateRangePicker/contexts/index.d.ts

@@ -1,4 +1,4 @@
-export { DateRangePickerContext } from './date-range-picker.context';
-export type { BlockedMonth, DateRange, DateRangePreset, DateRangeWithTime, TimeRange, } from './date-range-picker.context';
-export { useDateRangePicker } from './date-range-picker.hook';
-export { DateRangePickerProvider } from './date-range-picker.provider';
+export { DateRangePickerContext } from './date-range-picker/date-range-picker.context';
+export type { BlockedMonth, DateDisplayFormat, DateRange, DateRangePreset, DateRangePresetOption, DateRangeWithTime, TimeRange, } from './date-range-picker/date-range-picker.context';
+export { useDateRangePicker } from './date-range-picker/date-range-picker.hook';
+export { DateRangePickerProvider } from './date-range-picker/date-range-picker.provider';

package/dist/lib/components/DateRangePicker/utils/{disabled-dates.d.ts → disabled-dates/disabled-dates.d.ts}

@@ -1,10 +1,4 @@
-import { BlockedMonth } from '../contexts';
-export type DateRestrictions = {
-    blockedDays: Date[];
-    blockedMonths: BlockedMonth[];
-    minDate?: Date;
-    maxDate?: Date;
-};
+import { DateRestrictions } from './disabled-dates.types';
 /**
  * Checks if a date is selectable based on all restrictions.
  */

package/dist/lib/components/DateRangePicker/utils/disabled-dates/disabled-dates.types.d.ts

@@ -0,0 +1,7 @@
+import { BlockedMonth } from '../../contexts';
+export type DateRestrictions = {
+    blockedDays: Date[];
+    blockedMonths: BlockedMonth[];
+    minDate?: Date;
+    maxDate?: Date;
+};

package/dist/lib/components/DateRangePicker/utils/displayed-months/displayed-months.d.ts

@@ -0,0 +1,12 @@
+/**
+ * The months the picker opens on: the one holding `referenceDate` and, for a
+ * two-month calendar, the one after it. The pair is always returned so a
+ * single-month calendar keeps the same shape and only shows the first.
+ *
+ * A backward-looking picker — a creation date capped at today — would otherwise
+ * open with its last month wholly past `maxDate` and every day in it disabled,
+ * spending half the calendar on dates nobody can pick. When that happens the
+ * window ends on the last month with something selectable in it and steps back,
+ * so the reference month stays in view.
+ */
+export declare const getDisplayedMonths: (referenceDate: Date, maxDate?: Date, numberOfMonths?: 1 | 2) => [Date, Date];

package/dist/lib/components/DateRangePicker/utils/index.d.ts

@@ -1,6 +1,9 @@
-export { calculatePresetRange } from './presets';
+export { calculatePresetRange } from './presets/presets';
+export { getDisplayedMonths } from './displayed-months/displayed-months';
+export { hidesRightPanel } from './right-panel/right-panel';
 export { PRESET_OPTIONS } from '../constants';
 export type { PresetOption } from '../constants';
-export { autoFormatDateInput, combineDateAndTime, formatDateToDisplayString, formatDateToString, formatTimeToString, getMonthName, isValidTimeString, parseDateString, parseDisplayDateString, parseTimeString, } from './validation';
-export { createDisabledMatcher, isDateSelectable, canNavigateToPrevMonth, canNavigateToNextMonth, } from './disabled-dates';
-export type { DateRestrictions } from './disabled-dates';
+export type { DateRangePresetOption } from '../contexts';
+export { autoFormatDateInput, combineDateAndTime, formatDateToDisplayString, formatDateToString, formatTimeToString, getMonthName, isValidTimeString, parseDateString, parseDisplayDateString, parseTimeString, } from './validation/validation';
+export { createDisabledMatcher, isDateSelectable, canNavigateToPrevMonth, canNavigateToNextMonth, } from './disabled-dates/disabled-dates';
+export type { DateRestrictions } from './disabled-dates/disabled-dates.types';

package/dist/lib/components/DateRangePicker/utils/presets/presets.d.ts

@@ -0,0 +1,9 @@
+import { DateRange, DateRangePreset, DateRangePresetOption } from '../../contexts';
+/**
+ * Calculates the date range for a given preset by asking the option itself.
+ *
+ * Looks the id up in `presets` (the built-ins unless the caller passes its own
+ * list), so an unknown id — including `custom` — resolves to an empty range and
+ * leaves the selection to the calendar.
+ */
+export declare const calculatePresetRange: (preset: DateRangePreset | null, presets?: DateRangePresetOption[], now?: Date) => DateRange;

package/dist/lib/components/DateRangePicker/utils/right-panel/right-panel.d.ts

@@ -0,0 +1,7 @@
+import { DateRangePreset, DateRangePresetOption } from '../../contexts';
+/**
+ * Whether the inputs and calendar are tucked away. A preset that resolves to a
+ * window speaks for itself, and no selection at all means no filter yet; only
+ * the manual-selection entry needs the calendar.
+ */
+export declare const hidesRightPanel: (preset: DateRangePreset | null, presets: DateRangePresetOption[], revealCalendarOnCustom: boolean) => boolean;

package/dist/lib/components/Datepicker/components/DatePickerContent/DatePickerContent.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from '../../DatePicker.types';
+export declare const DatePickerContent: FC<Props>;

package/dist/lib/components/Divider/Divider.d.ts

@@ -1,4 +1,5 @@
-import { FC, HTMLAttributes } from 'react';
+import { FC } from 'react';
+import { Props } from './Divider.types';
 /**
  * A horizontal divider/separator line.
  *
@@ -13,5 +14,5 @@ import { FC, HTMLAttributes } from 'react';
  *
  * @see {@link https://konstructio.github.io/konstruct-ui/?path=/docs/components-divider--docs Storybook}
  */
-declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
+declare const Divider: FC<Props>;
 export { Divider };

package/dist/lib/components/Divider/Divider.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type Props = HTMLAttributes<HTMLDivElement> & {
+    component?: 'div' | 'hr' | 'li';
+};

package/dist/lib/components/Drawer/Drawer.types.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { drawerVariants } from './Drawer.variants';
-import { Theme } from '../../../domain/theme';
+import { Theme } from '../../domain/theme';
 /**
  * Custom class names for each Drawer element.
  */
@@ -60,6 +60,20 @@ export type Props = PropsWithChildren & VariantProps<typeof drawerVariants> & {
     position?: 'left' | 'right';
     /** Show the X close button in the corner */
     showCloseButton?: boolean;
+    /**
+     * Close on a horizontal swipe towards the edge the panel came from: the
+     * panel follows the finger and closes past a quarter of its width (60px at
+     * least) or on a quick flick, springing back otherwise (default: true)
+     */
+    closeOnSwipe?: boolean;
+    /** Take the whole screen below 768px, whatever `defaultWidth` says (default: true) */
+    fullScreenOnMobile?: boolean;
+    /**
+     * Where focus lands on open: the first focusable element (default) or the
+     * panel itself, for drawers opened by a tap that should not start with a
+     * focus ring on their first control.
+     */
+    initialFocus?: 'first' | 'panel';
     /** Theme override for this component */
     theme?: Theme;
     /** Callback when drawer is closed (Escape key, overlay click, or close button) */

package/dist/lib/components/Drawer/Drawer.variants.d.ts

@@ -1,4 +1,5 @@
 export declare const drawerVariants: (props?: ({
+    fullScreenOnMobile?: boolean | null | undefined;
     position?: "left" | "right" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const overlayVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;

package/dist/lib/components/Drawer/constants/index.d.ts

@@ -4,3 +4,8 @@ export declare const DEFAULT_MAX_WIDTH = 800;
 export declare const ANIMATION_DELAY_MS = 10;
 export declare const ANIMATION_DURATION_MS = 300;
 export declare const KEYBOARD_RESIZE_STEP = 20;
+export declare const SWIPE_THRESHOLD = 60;
+export declare const SWIPE_DISTANCE_RATIO = 0.25;
+export declare const SWIPE_VELOCITY = 0.5;
+export declare const SWIPE_AXIS_LOCK_DISTANCE = 8;
+export declare const SWIPE_VELOCITY_STALE_MS = 100;

package/dist/lib/components/Drawer/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export { useDrawer } from './useDrawer';
 export type { UseDrawerProps, UseDrawerReturn } from './useDrawer.types';
+export { useSwipeToClose } from './useSwipeToClose';
+export type { UseSwipeToCloseProps, UseSwipeToCloseReturn, } from './useSwipeToClose.types';