themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/components/base/command/command.d.ts

@@ -0,0 +1,73 @@
+/**
+ * Command — base wrapper around the internal Base UI command primitive.
+ *
+ * What this layer adds on top of the primitive:
+ *  - One standard, tokenized surface inset across the root, groups, and rows.
+ *  - Design-system typography and density-aware row sizing for admin commands.
+ *  - Stable BEM hooks on the wrapped root, input, list, group, item, separator,
+ *    and empty regions while retaining each primitive part's original props.
+ *  - Preserves the compound-component pattern: consumers compose
+ *    `<Command><CommandList><CommandGroup><CommandItem/></CommandGroup></CommandList></Command>`.
+ *
+ * For the recurring "popover-with-command-list" pattern, prefer
+ * `base/popover-menu/` which composes both wrappers and adds slots.
+ */
+import * as React from 'react';
+import { Command as CommandPrimitive, CommandEmpty as CommandEmptyPrimitive, CommandGroup as CommandGroupPrimitive, CommandInput as CommandInputPrimitive, CommandItem as CommandItemPrimitive, CommandList as CommandListPrimitive, CommandSeparator as CommandSeparatorPrimitive, CommandShortcut as CommandShortcutPrimitive } from '../../ui/command';
+import { type CollectionDensity } from '../popover/popover.recipes';
+type CommandRootProps = React.ComponentProps<typeof CommandPrimitive>;
+export type CommandInset = 'default' | 'compact' | 'flush';
+export type CommandProps = CommandRootProps & {
+    /**
+     * Surface inset role. Defaults to the compact collection shell.
+     * Use `default` explicitly for substantive content, or `flush` when regions own their insets.
+     */
+    inset?: CommandInset;
+};
+/** Tokenized command surface with semantic default, compact, and flush inset roles. */
+declare function Command({ className, inset, ...props }: CommandProps): React.JSX.Element;
+declare namespace Command {
+    var displayName: string;
+}
+type CommandListProps = React.ComponentProps<typeof CommandListPrimitive>;
+type CommandInputProps = React.ComponentProps<typeof CommandInputPrimitive>;
+declare function CommandInput({ className, asChild, children, ...props }: CommandInputProps): React.JSX.Element;
+declare namespace CommandInput {
+    var displayName: string;
+}
+declare function CommandList({ className, ...props }: CommandListProps): React.JSX.Element;
+declare namespace CommandList {
+    var displayName: string;
+}
+type CommandGroupProps = React.ComponentProps<typeof CommandGroupPrimitive>;
+declare function CommandGroup({ className, heading, ...props }: CommandGroupProps): React.JSX.Element;
+declare namespace CommandGroup {
+    var displayName: string;
+}
+type CommandItemProps = React.ComponentProps<typeof CommandItemPrimitive> & {
+    /** Vertical row rhythm, independent from label typography. */
+    density?: CollectionDensity;
+    /** Persistent selection, distinct from the keyboard-highlight state. */
+    'data-checked'?: boolean | 'true' | 'false';
+};
+declare function CommandItem({ children, className, density, ...props }: CommandItemProps): React.JSX.Element;
+declare namespace CommandItem {
+    var displayName: string;
+}
+type CommandEmptyProps = React.ComponentProps<typeof CommandEmptyPrimitive>;
+declare function CommandEmpty({ children, className, ...props }: CommandEmptyProps): React.JSX.Element;
+declare namespace CommandEmpty {
+    var displayName: string;
+}
+type CommandShortcutProps = React.ComponentProps<typeof CommandShortcutPrimitive>;
+type CommandSeparatorProps = React.ComponentProps<typeof CommandSeparatorPrimitive>;
+/** Presentational divider that remains hidden from the Command listbox tree. */
+declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): React.JSX.Element;
+declare namespace CommandSeparator {
+    var displayName: string;
+}
+declare function CommandShortcut({ children, className, ...props }: CommandShortcutProps): React.JSX.Element;
+declare namespace CommandShortcut {
+    var displayName: string;
+}
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, };

package/dist/components/base/command/index.d.ts

@@ -0,0 +1 @@
+export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, type CommandInset, type CommandProps, } from './command';

package/dist/components/base/copyable/copyable.d.ts

@@ -0,0 +1,36 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type ButtonActionProps } from '../buttons';
+import { type StringsProp } from '../../../lib/strings';
+export interface CopyableStrings {
+    copyLabel: string;
+    copiedLabel: string;
+    success: string;
+    error: string;
+}
+export declare const defaultCopyableStrings: CopyableStrings;
+export interface CopyableProps extends Omit<ComponentPropsWithoutRef<'span'>, 'children' | 'onCopy' | 'onError'> {
+    /** Value written to the clipboard. */
+    value: string;
+    /** Optional display content when it differs from the copied value. */
+    displayValue?: ReactNode;
+    /** Use monospace typography for scalar display content. */
+    mono?: boolean;
+    /** Truncate scalar display content with an ellipsis at the width the caller allots. */
+    truncate?: boolean;
+    /** Classes for the scalar display-content wrapper. */
+    contentClassName?: string;
+    /** Classes and native action props for the dedicated copy button. */
+    buttonProps?: Omit<ButtonActionProps, 'children' | 'onClick' | 'type'>;
+    /** Localizable copy affordance and toast copy. */
+    strings?: StringsProp<CopyableStrings>;
+    /** Called after the Clipboard API successfully writes the value. */
+    onCopy?: (value: string) => void;
+    /** Called when the Clipboard API rejects the write. */
+    onError?: (error: unknown) => void;
+}
+/**
+ * Copyable keeps display content passive and renders a sibling copy button.
+ * This permits rich display nodes such as Email or Url without nesting one
+ * interactive element inside another.
+ */
+export declare const Copyable: import("react").ForwardRefExoticComponent<CopyableProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist/components/base/copyable/index.d.ts

@@ -0,0 +1 @@
+export { Copyable, defaultCopyableStrings, type CopyableProps, type CopyableStrings, } from './copyable';

package/dist/components/base/date-pickers/date-picker-footer.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { DatePickerFooterConfig, DateOutput, DateRangeOutput, MultipleDatesOutput } from './datepicker.types';
+export interface DatePickerFooterProps {
+    /** Configuration for this surface. */
+    config: DatePickerFooterConfig;
+    output: DateOutput | DateRangeOutput | MultipleDatesOutput;
+    hasSelection: boolean;
+    autoSummary?: string;
+    className?: string;
+}
+export declare function DatePickerFooter({ config, output, hasSelection, autoSummary, className }: DatePickerFooterProps): React.JSX.Element | null;
+export declare namespace DatePickerFooter {
+    var displayName: string;
+}

package/dist/components/base/date-pickers/date-picker-header.d.ts

@@ -0,0 +1,10 @@
+import type { DatePickerHeaderConfig } from './datepicker.types';
+export interface DatePickerHeaderProps {
+    /** Configuration for this surface. */
+    config: DatePickerHeaderConfig;
+    className?: string;
+}
+export declare function DatePickerHeader({ config, className }: DatePickerHeaderProps): import("react").JSX.Element;
+export declare namespace DatePickerHeader {
+    var displayName: string;
+}

package/dist/components/base/date-pickers/date-picker-helpers.d.ts

@@ -0,0 +1,87 @@
+import type { Locale as DateFnsLocale } from 'date-fns/locale';
+import type { DateRange } from 'react-day-picker';
+import type { DateOutput, MultipleDatesOutput, DateRangeOutput, DatePickerStrings, YearSelectionConfig } from './datepicker.types';
+export type TimePeriod = 'AM' | 'PM';
+export interface NormalizedTime {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export interface DisplayTimeSegments {
+    hours: string;
+    minutes: string;
+    seconds?: string;
+    period?: TimePeriod;
+}
+export interface TimeDisplayLabels {
+    am?: string;
+    pm?: string;
+}
+export declare const HOURS_24_MAX = 23;
+export declare const HOURS_12_MAX = 12;
+export declare const MINUTES_MAX = 59;
+export declare const SECONDS_MAX = 59;
+export declare function padTimeSegment(value: number): string;
+export declare function parseTimeString(timeString: string | undefined): NormalizedTime | null;
+export declare function normalizedTimeToString(time: NormalizedTime, includeSeconds: boolean): string;
+export declare function createDefaultNormalizedTime(date: Date | undefined, includeSeconds: boolean, step: number): NormalizedTime;
+export declare function normalizedTimeToDisplaySegments(time: NormalizedTime, format: '12' | '24', includeSeconds: boolean): DisplayTimeSegments;
+export declare function displaySegmentsToNormalizedTime(segments: DisplayTimeSegments, format: '12' | '24', includeSeconds: boolean): NormalizedTime;
+export declare function alignNormalizedTimeToStep(time: NormalizedTime, step: number, includeSeconds: boolean): NormalizedTime;
+export declare function formatNormalizedTimeForDisplay(time: NormalizedTime, includeSeconds: boolean, format: '12' | '24', labels?: TimeDisplayLabels): string;
+export declare function readableFormatIncludesTime(format: string | undefined): boolean;
+export declare function getDayPickerYearBounds(yearSelection: YearSelectionConfig | undefined): {
+    startMonth?: Date;
+    endMonth?: Date;
+};
+/**
+ * Create date output object with formatted strings
+ */
+export declare function createDateOutput(date: Date | undefined, dateFormat: string, readableFormat: string, locale?: DateFnsLocale): DateOutput;
+/**
+ * Create multiple dates output object with formatted strings
+ */
+export declare function createMultipleDatesOutput(dates: Date[], dateFormat: string, readableFormat: string, locale?: DateFnsLocale): MultipleDatesOutput;
+/**
+ * Create date range output object with formatted strings
+ */
+export declare function createDateRangeOutput(range: DateRange | undefined, dateFormat: string, readableFormat: string, locale?: DateFnsLocale): DateRangeOutput;
+/**
+ * Apply time to a date
+ */
+export declare function applyTimeToDate(date: Date, time: string | NormalizedTime): Date;
+/**
+ * Apply time to date range
+ */
+export declare function applyTimeToRange(range: DateRange, startTime: string | NormalizedTime, endTime: string | NormalizedTime): DateRange;
+/**
+ * Calculate days difference between two dates
+ */
+export declare function calculateDaysDifference(from: Date, to: Date): number;
+/**
+ * Validate date range constraints
+ */
+export declare function validateDateRange(range: DateRange | undefined, min?: number, max?: number): {
+    isValid: boolean;
+    daysDiff?: number;
+};
+/**
+ * Get validation message for date range
+ */
+export declare function getRangeValidationMessage(range: DateRange | undefined, min: number | undefined, max: number | undefined, translations: DatePickerStrings): string | null;
+/**
+ * Get validation message for multiple dates
+ */
+export declare function getMultipleDatesValidationMessage(dates: Date[], min: number | undefined, max: number | undefined, required: boolean | undefined, translations: DatePickerStrings): string | null;
+/**
+ * Format button text for single date
+ */
+export declare function formatDateButtonText(date: Date | undefined, readableFormat: string, placeholder: string | undefined, defaultPlaceholder: string, time?: string, locale?: DateFnsLocale): string;
+/**
+ * Format button text for multiple dates
+ */
+export declare function formatMultipleDatesButtonText(dates: Date[], readableFormat: string, placeholder: string | undefined, defaultPlaceholder: string, translations: DatePickerStrings, locale?: DateFnsLocale): string;
+/**
+ * Format button text for date range
+ */
+export declare function formatRangeButtonText(range: DateRange | undefined, readableFormat: string, placeholder: string | undefined, defaultPlaceholder: string, locale?: DateFnsLocale): string;

package/dist/components/base/date-pickers/date-picker-internals.d.ts

@@ -0,0 +1,10 @@
+import { type ButtonTone, type ButtonStyle } from '../buttons';
+import type { DatePickerProps, SingleDatePickerProps, MultipleDatePickerProps, RangeDatePickerProps, DatePickerStrings, PresetDateRange } from './datepicker.types';
+export declare function resolvePickerButtonProps(tone?: ButtonTone, buttonStyle?: ButtonStyle): {
+    tone: ButtonTone;
+    buttonStyle: ButtonStyle;
+};
+export declare function isSingleMode(props: DatePickerProps): props is SingleDatePickerProps;
+export declare function isMultipleMode(props: DatePickerProps): props is MultipleDatePickerProps;
+export declare function isRangeMode(props: DatePickerProps): props is RangeDatePickerProps;
+export declare function getDefaultPresets(t: DatePickerStrings, weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6): PresetDateRange[];

package/dist/components/base/date-pickers/date-picker-multiple.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Multiple-dates variant of <DatePicker>, moved out of date-picker.tsx
+ * unchanged. Internal: date-picker.tsx is the only importer, and
+ * date-pickers/index.ts does not re-export it.
+ */
+import type { Locale as DateFnsLocale } from 'date-fns/locale';
+import * as React from 'react';
+import { getDayPickerYearBounds } from './date-picker-helpers';
+import { defaultDatePickerStrings } from './date-pickers.strings';
+import type { MultipleDatePickerProps } from './datepicker.types';
+export declare function MultipleDatePicker({ value, defaultValue, onValueChange, format: dateFormat, readableFormat, placeholder, min, max, required, closeOnSelect, disabledDates, calendarProps, open, setOpen, t, dateFnsLocale, captionLayout, yearBounds, rootRef, ...baseProps }: MultipleDatePickerProps & {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    t: typeof defaultDatePickerStrings;
+    dateFnsLocale: DateFnsLocale;
+    captionLayout: 'label' | 'dropdown';
+    yearBounds: ReturnType<typeof getDayPickerYearBounds>;
+    /** Forwarded from `DatePicker`, landing on this mode's root element. */
+    rootRef?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;

package/dist/components/base/date-pickers/date-picker-range.d.ts

@@ -0,0 +1,15 @@
+import type { Locale as DateFnsLocale } from 'date-fns/locale';
+import * as React from 'react';
+import { getDayPickerYearBounds } from './date-picker-helpers';
+import { defaultDatePickerStrings } from './date-pickers.strings';
+import type { RangeDatePickerProps } from './datepicker.types';
+export declare function RangeDatePicker({ value, defaultValue, onValueChange, format: dateFormat, readableFormat, placeholder, withConfirm, min, max, closeOnSelect, withTime, presets: presetsProp, disabledDates, calendarProps, open, setOpen, t, dateFnsLocale, captionLayout, yearBounds, rootRef, ...baseProps }: RangeDatePickerProps & {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    t: typeof defaultDatePickerStrings;
+    dateFnsLocale: DateFnsLocale;
+    captionLayout: 'label' | 'dropdown';
+    yearBounds: ReturnType<typeof getDayPickerYearBounds>;
+    /** Forwarded from `DatePicker`, landing on this mode's root element. */
+    rootRef?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;

package/dist/components/base/date-pickers/date-picker-single.d.ts

@@ -0,0 +1,15 @@
+import type { Locale as DateFnsLocale } from 'date-fns/locale';
+import * as React from 'react';
+import { getDayPickerYearBounds } from './date-picker-helpers';
+import { defaultDatePickerStrings } from './date-pickers.strings';
+import type { SingleDatePickerProps } from './datepicker.types';
+export declare function SingleDatePicker({ value, defaultValue, onValueChange, format: dateFormat, readableFormat, placeholder, closeOnSelect, withTime, disabledDates, calendarProps, open, setOpen, t, dateFnsLocale, captionLayout, yearBounds, rootRef, ...baseProps }: SingleDatePickerProps & {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    t: typeof defaultDatePickerStrings;
+    dateFnsLocale: DateFnsLocale;
+    captionLayout: 'label' | 'dropdown';
+    yearBounds: ReturnType<typeof getDayPickerYearBounds>;
+    /** Forwarded from `DatePicker`, landing on this mode's root element. */
+    rootRef?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;

package/dist/components/base/date-pickers/date-picker.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { DatePickerProps } from './datepicker.types';
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/base/date-pickers/date-picker.recipes.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Field-style chrome override applied on top of `<Button>` so the
+ * picker trigger reads as a form field — visually identical to
+ * `<Input>` (same height, border, padding, focus ring, typography).
+ *
+ * Mirrors the `Input` component's chrome:
+ * - `border-input` border, `rounded-radius-md`, `bg-transparent`
+ * - `h-control` + `px-control` + `py-space-xs`
+ * - `text-sm` body text, normal weight, `text-foreground`
+ * - `focus-visible:border-ring ring-ring/50 ring-[3px]`
+ * - `aria-invalid:` destructive ring + border
+ * - flat (no shadow) — library is intentionally flat
+ *
+ * `!` prefix wins against the global `<Button>`'s pill-shaped default
+ * + `data-[size=*]` attribute selectors. Caret-icon sits in
+ * library-default left padding equal to `<Input startIcon>` rules.
+ */
+export declare const PICKER_TRIGGER_CHROME: string;

package/dist/components/base/date-pickers/date-pickers.strings.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Default user-facing strings for the date-picker family
+ * (`<DatePicker>`, `<DateRangePicker>`, `<MonthYearPicker>`).
+ *
+ * Library is locale-agnostic — consumers wire backend i18n via the
+ * `strings` prop and pass a `Locale` object from `date-fns/locale` (or
+ * any equivalent) via the `locale` prop:
+ *
+ *   import { bg } from 'date-fns/locale';
+ *   <DatePicker locale={bg} strings={{ today: t('date.today') }} />
+ */
+import type { DatePickerStrings } from './datepicker.types';
+export declare const defaultDatePickerStrings: DatePickerStrings;
+export type { DatePickerStrings };

package/dist/components/base/date-pickers/datepicker.types.d.ts

@@ -0,0 +1,285 @@
+import type { LucideIcon } from 'lucide-react';
+import type { DateRange, PropsSingle, PropsRange, PropsMulti, Locale } from 'react-day-picker';
+import type { StringsProp } from '../../../lib/strings';
+import type { ActionPresentation } from '../../../lib/action-presentation';
+import type { ButtonStyle, ButtonTone } from '../buttons';
+export interface DatePickerHeaderConfig {
+    title: string;
+    description?: string;
+    icon?: LucideIcon;
+    align?: 'left' | 'center';
+}
+export interface DatePickerFooterAction extends Omit<ActionPresentation, 'disabled'> {
+    label: string;
+    onClick: (output: DateOutput | DateRangeOutput | MultipleDatesOutput) => void;
+    disabled?: boolean | ((output: DateOutput | DateRangeOutput | MultipleDatesOutput) => boolean);
+    loading?: boolean;
+}
+export interface DatePickerFooterConfig {
+    text?: string | ((output: DateOutput | DateRangeOutput | MultipleDatesOutput) => string | undefined);
+    actions?: DatePickerFooterAction[];
+    showOnlyWhenSelected?: boolean;
+    showSummary?: boolean;
+}
+export interface YearSelectionConfig {
+    enabled: boolean;
+    fromYear?: number;
+    toYear?: number;
+}
+export interface DatePickerStrings {
+    selectDate: string;
+    selectDates: string;
+    selectDateRange: string;
+    from: string;
+    to: string;
+    confirm: string;
+    clear: string;
+    today: string;
+    startDate: string;
+    endDate: string;
+    startTime: string;
+    endTime: string;
+    hours: string;
+    minutes: string;
+    seconds: string;
+    am: string;
+    pm: string;
+    minimumDays: (days: number) => string;
+    maximumDays: (days: number) => string;
+    minimumDates: (min: number) => string;
+    maximumDates: (max: number) => string;
+    datesRequired: string;
+    datesSelected: (count: number) => string;
+    lastWeek: string;
+    lastMonth: string;
+    lastYear: string;
+    nextWeek: string;
+    nextMonth: string;
+    nextYear: string;
+    thisWeek: string;
+    thisMonth: string;
+    last30Days: string;
+    selectMonthYear: string;
+    month: string;
+    year: string;
+}
+export interface DatePickerBaseProps {
+    /** Caption above the trigger, associated through `htmlFor`. Omit when an external FormField owns the chrome. */
+    label?: string;
+    /** Short guidance shown beside the label. Suppressed while `error` is set. */
+    hint?: string;
+    /**
+     * Validation message rendered below the trigger and referenced by the
+     * trigger's `aria-describedby`. Setting it also marks the control invalid
+     * and tints the label.
+     */
+    error?: string;
+    /** Disables the trigger and prevents the calendar from opening. */
+    disabled?: boolean;
+    /** Merged onto the outermost node. */
+    className?: string;
+    /**
+     * Overrides the picker's own copy. Deep-merges over
+     * `defaultDatePickerStrings`, so partial overrides are fine.
+     */
+    strings?: StringsProp<DatePickerStrings>;
+    /**
+     * date-fns `Locale` object used for formatting and calendar labels. Consumers
+     * pass their chosen locale directly (e.g. `import { bg } from 'date-fns/locale'`).
+     */
+    locale?: Locale;
+    /** Optional title/description block above the calendar. */
+    header?: DatePickerHeaderConfig;
+    /** Optional text/actions block below the calendar. */
+    footer?: DatePickerFooterConfig;
+    /** Set when rendering inside a modal or drawer, to avoid competing focus traps. */
+    modal?: boolean;
+    /** Shorthand that turns on the year dropdown (sets `captionLayout="dropdown"`). */
+    enableYearDropdown?: boolean;
+    /** Fine-grained year-navigation config. Takes precedence over `enableYearDropdown`. */
+    yearSelection?: YearSelectionConfig;
+    /** Visible calendar months. Defaults to one below 768px and two on wider surfaces. */
+    numberOfMonths?: number;
+    /** Renders leading/trailing days from adjacent months. */
+    showOutsideDays?: boolean;
+    /** Semantic color intent of the trigger button. */
+    buttonTone?: ButtonTone;
+    /** Fill treatment of the trigger button. */
+    buttonStyle?: ButtonStyle;
+}
+export interface DateOutput {
+    date: Date | undefined;
+    formatted: string | undefined;
+    readable: string | undefined;
+}
+export interface MonthYearOutput {
+    /** Zero-indexed month, matching `Date` (January = 0). */
+    month: number;
+    /** Four-digit year. */
+    year: number;
+    /** Machine-readable value built with `format`, e.g. `"2025-01"`. */
+    formatted: string;
+    /** Display value built with `readableFormat`, e.g. `"January 2025"`. */
+    readable: string;
+    /** First day of the selected month, for range maths and querying. */
+    date: Date;
+}
+export interface MultipleDatesOutput {
+    dates: Date[];
+    formatted: string[];
+    readable: string[];
+}
+export interface DateRangeOutput {
+    range: DateRange | undefined;
+    formatted: FormattedDateRange;
+    readable: {
+        from: string | undefined;
+        to: string | undefined;
+    };
+}
+export type FormattedDateRange = {
+    from: string | undefined;
+    to: string | undefined;
+};
+export interface TimeConfig {
+    /** Turns the time field on. */
+    enabled: boolean;
+    /** Clock convention for the time field. Default: `'24'`. */
+    format?: '12' | '24';
+    /** Granularity of the time field, in seconds. Default: `60`. */
+    step?: number;
+    /** Shows a seconds segment. Default: `false`. */
+    showSeconds?: boolean;
+    /** Appends the time to the trigger text. Defaults to automatic, based on `enabled`. */
+    showTimeInButton?: boolean;
+    /** Appends the time to the footer summary. Defaults to automatic, based on `enabled`. */
+    showTimeInSummary?: boolean;
+}
+export interface PresetDateRange {
+    label: string;
+    getValue: () => DateRange;
+}
+export interface SingleDatePickerProps extends DatePickerBaseProps {
+    /** Selects the single-date variant. This is the default mode. */
+    mode?: 'single';
+    /** Selected date, for controlled use. */
+    value?: Date;
+    /** Initial date for uncontrolled use. */
+    defaultValue?: Date;
+    /** Fired with the selection in every representation the component computed. */
+    onValueChange?: (output: DateOutput) => void;
+    /** date-fns pattern for `output.formatted`. Default: `'yyyy-MM-dd'`. */
+    format?: string;
+    /** date-fns pattern for the trigger text and `output.readable`. Default: `'PPP'`. */
+    readableFormat?: string;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Closes the popover once a date is picked. Default: `true`. */
+    closeOnSelect?: boolean;
+    /** Adds a time field alongside the calendar. */
+    withTime?: TimeConfig;
+    /** Dates to disable, as a list or a predicate. */
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    /** Escape hatch forwarded to the underlying react-day-picker calendar. */
+    calendarProps?: Omit<PropsSingle, 'mode' | 'selected' | 'onSelect'> & {
+        className?: string;
+    };
+}
+export interface MultipleDatePickerProps extends DatePickerBaseProps {
+    /** Selects the multiple-date variant. Required — this mode is not the default. */
+    mode: 'multiple';
+    /** Selected dates, for controlled use. */
+    value?: Date[];
+    /** Initial dates for uncontrolled use. */
+    defaultValue?: Date[];
+    /** Fired with the selection in every representation the component computed. */
+    onValueChange?: (output: MultipleDatesOutput) => void;
+    /** date-fns pattern for each entry of `output.formatted`. Default: `'yyyy-MM-dd'`. */
+    format?: string;
+    /** date-fns pattern for the trigger text and `output.readable`. Default: `'PPP'`. */
+    readableFormat?: string;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Closes the popover after each pick. Default: `false`, so several dates can be chosen in one visit. */
+    closeOnSelect?: boolean;
+    /** Fewest dates the user may end up with. */
+    min?: number;
+    /** Most dates the user may select. */
+    max?: number;
+    /** Requires at least one date to be selected. */
+    required?: boolean;
+    /** Dates to disable, as a list or a predicate. */
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    /** Escape hatch forwarded to the underlying react-day-picker calendar. */
+    calendarProps?: Omit<PropsMulti, 'mode' | 'selected' | 'onSelect'> & {
+        className?: string;
+    };
+}
+export interface RangeDatePickerProps extends DatePickerBaseProps {
+    /** Selects the range variant. */
+    mode?: 'range';
+    /** Selected range, for controlled use. */
+    value?: DateRange;
+    /** Initial range for uncontrolled use. */
+    defaultValue?: DateRange;
+    /** Fired with the range in every representation the component computed. */
+    onValueChange?: (output: DateRangeOutput) => void;
+    /** date-fns pattern for both ends of `output.formatted`. Default: `'yyyy-MM-dd'`. */
+    format?: string;
+    /** date-fns pattern for the trigger text and `output.readable`. Default: `'PPP'`. */
+    readableFormat?: string;
+    /** Trigger text when nothing is selected. */
+    placeholder?: string;
+    /** Requires an explicit confirm before the range is committed. */
+    withConfirm?: boolean;
+    /** Fewest days the range may span. */
+    min?: number;
+    /** Most days the range may span. */
+    max?: number;
+    /** Closes the popover once both ends are chosen. Default: `true`, unless `withConfirm` is set. */
+    closeOnSelect?: boolean;
+    /** Adds time fields for each end of the range. */
+    withTime?: TimeConfig;
+    /** Shortcut ranges ("Last 7 days") listed beside the calendar. */
+    presets?: PresetDateRange[];
+    /** Dates to disable, as a list or a predicate. */
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    /** Escape hatch forwarded to the underlying react-day-picker calendar. */
+    calendarProps?: Omit<PropsRange, 'mode' | 'selected' | 'onSelect'> & {
+        className?: string;
+    };
+}
+export interface MonthYearPickerProps extends DatePickerBaseProps {
+    /** Selected month/year, for controlled use. `month` is 0-indexed (January = 0). */
+    value?: {
+        month: number;
+        year: number;
+    };
+    /** Initial selection for uncontrolled use. `month` is 0-indexed. */
+    defaultValue?: {
+        month: number;
+        year: number;
+    };
+    /** Fired with the selection in every representation the component computed. */
+    onValueChange?: (output: MonthYearOutput) => void;
+    /** date-fns pattern for `output.formatted`. Default: `'yyyy-MM'`. */
+    format?: string;
+    /** date-fns pattern for the trigger text and `output.readable`. Default: `'MMMM yyyy'`. */
+    readableFormat?: string;
+    /** Trigger text when nothing is selected. Defaults to the `selectMonthYear` string. */
+    placeholder?: string;
+    /** Closes the popover once a month is confirmed. Default: `true`. */
+    closeOnSelect?: boolean;
+    /** Earliest selectable year. Default: current year − 10. */
+    fromYear?: number;
+    /** Latest selectable year. Default: current year + 10. */
+    toYear?: number;
+    /**
+     * Collapses the trigger to the calendar icon alone. Reach for it when a
+     * heading beside the picker already names the selected month, so the
+     * trigger would otherwise repeat it word for word. The `selectMonthYear`
+     * string becomes the button's accessible name.
+     */
+    iconOnly?: boolean;
+}
+export type DatePickerProps = SingleDatePickerProps | MultipleDatePickerProps | RangeDatePickerProps;

package/dist/components/base/date-pickers/index.d.ts

@@ -0,0 +1,7 @@
+export { DatePicker } from './date-picker';
+export { TimePicker, defaultTimePickerStrings, type TimePickerProps, type TimePickerStrings, } from './time-picker';
+export { MonthYearPicker } from './month-year-picker';
+export type { DatePickerProps, DatePickerBaseProps, SingleDatePickerProps, MultipleDatePickerProps, RangeDatePickerProps, MonthYearPickerProps, DatePickerStrings, DateOutput, MultipleDatesOutput, DateRangeOutput, MonthYearOutput, FormattedDateRange, TimeConfig, PresetDateRange, DatePickerHeaderConfig, DatePickerFooterConfig, DatePickerFooterAction, YearSelectionConfig } from './datepicker.types';
+export { defaultDatePickerStrings, } from './date-pickers.strings';
+export { DatePickerHeader, type DatePickerHeaderProps } from './date-picker-header';
+export { DatePickerFooter, type DatePickerFooterProps } from './date-picker-footer';

package/dist/components/base/date-pickers/month-year-picker.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { MonthYearPickerProps, MonthYearOutput } from './datepicker.types';
+export declare const MonthYearPicker: React.ForwardRefExoticComponent<MonthYearPickerProps & React.RefAttributes<HTMLDivElement>>;
+export type { MonthYearPickerProps, MonthYearOutput };