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 Calendar} component.
 * Uses Temporal `PlainDate` for date values — no time or timezone concerns.
 */
export interface CalendarOptions {
    /** 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 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 DateCalendar} component.
 * Convenience wrapper that uses JavaScript `Date` objects.
 */
export interface DateCalendarOptions {
    /** The currently selected date (year, month, day). */
    value?: Value<Date | null>;
    /** Callback invoked when a date is selected. */
    onSelect?: (date: Date) => void;
    /**
     * Predicate that returns `true` if the given date should be disabled (unselectable).
     * Replaces min/max — use e.g. `d => d < minDate || d > maxDate` for range constraints.
     */
    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 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 calendar highlights the currently selected date
 * and today's date. Navigation buttons allow moving between months and years.
 *
 * @param options - Configuration for the calendar
 * @returns A calendar element with date selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { Calendar, PlainDate } from '@tempots/beatui'
 *
 * const date = prop<PlainDate | null>(null)
 * Calendar({
 *   value: date,
 *   onSelect: date.set,
 * })
 * ```
 */
export declare function Calendar(options?: CalendarOptions): Renderable;
/**
 * A convenience 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 calendar (uses `Date` objects)
 * @returns A calendar element with date selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { DateCalendar } from '@tempots/beatui'
 *
 * const date = prop<Date | null>(new Date())
 * DateCalendar({
 *   value: date,
 *   onSelect: date.set,
 * })
 * ```
 */
export declare function DateCalendar(options?: DateCalendarOptions): Renderable;
