import { Value, type Renderable } from '@tempots/dom';
import { ControlSize } from '../theme';
import { ThemeColorName } from '../../tokens';
import type { PlainTime } from '../../temporal/types';
/**
 * Configuration options for the {@link TimePicker} component.
 * Uses Temporal `PlainTime` for time values — no date or timezone concerns.
 */
export interface TimePickerOptions {
    /** The currently selected time. */
    value?: Value<PlainTime | null>;
    /** Callback invoked when a time is selected. */
    onSelect?: (time: PlainTime) => void;
    /** Whether to show the seconds column. @default false */
    showSeconds?: Value<boolean>;
    /** Whether the picker uses 12-hour format with AM/PM. When omitted, auto-detected from the current locale. */
    use12Hour?: Value<boolean>;
    /** Theme color for the selected highlight. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Visual size of the time picker. @default 'md' */
    size?: Value<ControlSize>;
    /** Whether the time picker is disabled. @default false */
    disabled?: Value<boolean>;
    /** Step for minutes column. @default 1 */
    minuteStep?: Value<number>;
    /** Step for seconds column. @default 1 */
    secondStep?: Value<number>;
    /** Whether to show a "Now" button that sets the time to the current local time. @default false */
    showNow?: Value<boolean>;
}
/**
 * A time picker component for selecting hours, minutes, and optionally seconds.
 *
 * Uses Temporal `PlainTime` internally — a time-only type with no date or
 * timezone concerns. Renders scrollable columns for hours and minutes (and
 * optionally seconds), with support for 12-hour format with AM/PM.
 *
 * @param options - Configuration for the time picker
 * @returns A time picker element with time selection capability
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { TimePicker } from '@tempots/beatui'
 * import { Temporal } from '@js-temporal/polyfill'
 *
 * const time = prop<PlainTime | null>(Temporal.PlainTime.from('14:30'))
 * TimePicker({
 *   value: time,
 *   onSelect: v => time.set(v),
 * })
 * ```
 */
export declare function TimePicker(options?: TimePickerOptions): Renderable;