import { Value, type Renderable } from '@tempots/dom';
import { ControlSize } from '../theme';
import { ThemeColorName } from '../../tokens';
import type { PlainDate } from '../../temporal/types';
/**
 * Configuration options for the {@link DateRangePicker} component.
 * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
 */
export interface DateRangePickerOptions {
    /** The currently selected date range as `[start, end]`. */
    value?: Value<[PlainDate, PlainDate] | null>;
    /** Callback invoked when a complete range is selected. */
    onChange?: (range: [PlainDate, PlainDate]) => void;
    /**
     * Predicate that returns `true` if the given date should be disabled (unselectable).
     */
    isDateDisabled?: (date: PlainDate) => boolean;
    /** Theme color for selected and today highlights. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Visual size of the date picker. @default 'md' */
    size?: Value<ControlSize>;
    /** Whether the date picker is disabled. @default false */
    disabled?: Value<boolean>;
    /**
     * The day the week starts on.
     * 0 = Sunday, 1 = Monday, etc.
     * @default 0
     */
    weekStartsOn?: Value<number>;
}
/**
 * A date picker component for date range selection with hover preview.
 *
 * Uses Temporal `PlainDate` internally — a date-only type with no time or
 * timezone concerns, 1-based months, and proper date arithmetic.
 *
 * Users click twice to select a range: the first click sets the start date,
 * hovering shows a preview, and the second click completes the range.
 * The range is auto-sorted so start is always before end.
 *
 * @param options - Configuration for the range date picker
 * @returns A date picker element with date range selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { DateRangePicker, PlainDate } from '@tempots/beatui'
 *
 * const range = prop<[PlainDate, PlainDate] | null>(null)
 * DateRangePicker({
 *   value: range,
 *   onChange: v => range.set(v),
 * })
 * ```
 */
export declare function DateRangePicker(options?: DateRangePickerOptions): Renderable;