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 RangeCalendar} component.
 * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
 */
export interface RangeCalendarOptions {
    /** 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 calendar. @default 'md' */
    size?: Value<ControlSize>;
    /** Whether the calendar is disabled. @default false */
    disabled?: Value<boolean>;
    /**
     * The day the week starts on.
     * 0 = Sunday, 1 = Monday, etc.
     * @default 0
     */
    weekStartsOn?: number;
}
/**
 * Configuration options for the {@link DateRangeCalendar} component.
 * Convenience wrapper that uses JavaScript `Date` objects.
 */
export interface DateRangeCalendarOptions {
    /** The currently selected date range as `[start, end]`. */
    value?: Value<[Date, Date] | null>;
    /** Callback invoked when a complete range is selected. */
    onChange?: (range: [Date, Date]) => void;
    /**
     * Predicate that returns `true` if the given date should be disabled (unselectable).
     */
    isDateDisabled?: (date: Date) => boolean;
    /** Theme color for selected and today highlights. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Visual size of the calendar. @default 'md' */
    size?: Value<ControlSize>;
    /** Whether the calendar is disabled. @default false */
    disabled?: Value<boolean>;
    /**
     * The day the week starts on.
     * 0 = Sunday, 1 = Monday, etc.
     * @default 0
     */
    weekStartsOn?: number;
}
/**
 * A calendar 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 calendar
 * @returns A calendar element with date range selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { RangeCalendar, PlainDate } from '@tempots/beatui'
 *
 * const range = prop<[PlainDate, PlainDate] | null>(null)
 * RangeCalendar({
 *   value: range,
 *   onChange: range.set,
 * })
 * ```
 */
export declare function RangeCalendar(options?: RangeCalendarOptions): Renderable;
/**
 * A convenience range calendar wrapper that uses JavaScript `Date` objects.
 *
 * Accepts and fires `Date` values, converting to/from `PlainDate` internally.
 * Use this when integrating with existing `Date`-based code.
 *
 * @param options - Configuration for the range calendar (uses `Date` objects)
 * @returns A calendar element with date range selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { DateRangeCalendar } from '@tempots/beatui'
 *
 * const range = prop<[Date, Date] | null>(null)
 * DateRangeCalendar({
 *   value: range,
 *   onChange: range.set,
 * })
 * ```
 */
export declare function DateRangeCalendar(options?: DateRangeCalendarOptions): Renderable;
