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 DatePicker} component.
 * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
 */
export interface DatePickerOptions {
    /** The currently selected date. */
    value?: Value<PlainDate | null>;
    /** Callback invoked when a date is selected. */
    onSelect?: (date: PlainDate) => void;
    /**
     * Predicate that returns `true` if the given date should be disabled (unselectable).
     * Replaces min/max — use e.g. `d => PlainDate.compare(d, minDate) < 0` for range constraints.
     */
    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 selection with month/year navigation.
 *
 * Uses Temporal `PlainDate` internally — a date-only type with no time or
 * timezone concerns, 1-based months, and proper date arithmetic.
 *
 * Renders a full month grid with day-of-week headers, previous/next month
 * navigation, and a flexible `isDateDisabled` predicate for controlling which
 * dates are selectable. The date picker highlights the currently selected date
 * and today's date. Navigation buttons allow moving between months and years.
 *
 * @param options - Configuration for the date picker
 * @returns A date picker element with date selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { DatePicker, PlainDate } from '@tempots/beatui'
 *
 * const date = prop<PlainDate | null>(null)
 * DatePicker({
 *   value: date,
 *   onSelect: v => date.set(v),
 * })
 * ```
 */
export declare function DatePicker(options?: DatePickerOptions): Renderable;