import * as React from 'react';

/**
 * @file date-time-pickers/shared/types.ts
 *
 * Shared TypeScript base types for Date Pickers and Time Pickers system.
 * Designed for reuse across both picker systems.
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */
/**
 * Picker display mode.
 * - `picker` — calendar/dial UI (default)
 * - `input`  — text input mode for manual entry
 *
 * Equivalent to `DisplayMode` enum in Android Compose Material3.
 */
type DisplayMode = "picker" | "input";
/**
 * First day of the week.
 * - `0` = Sunday (US standard)
 * - `1` = Monday (ISO 8601, default for this library)
 */
type WeekStartsOn = 0 | 1;
/**
 * Locale configuration for Date Picker.
 * Uses native `Intl.DateTimeFormat` API — zero bundle overhead.
 *
 * @example
 * ```tsx
 * const state = useDatePickerState({
 *   locale: { locale: 'en-US', weekStartsOn: 1 }
 * });
 * ```
 */
interface DateLocale {
    /**
     * BCP 47 language tag.
     * @example 'en-US', 'fr-FR', 'ja-JP'
     * @default navigator.language (runtime)
     */
    locale?: string;
    /**
     * First day of the week.
     * @default 1 (Monday)
     */
    weekStartsOn?: WeekStartsOn;
}
/** Required version — all fields resolved */
type ResolvedDateLocale = Required<DateLocale>;
/**
 * Interface for filtering selectable dates and years.
 * Equivalent to `SelectableDates` interface in Android Compose Material3.

 *
 * @example
 * ```tsx
 * // Disable weekends
 * const selectableDates: SelectableDates = {
 *   isSelectableDate(utcMs) {
 *     const day = new Date(utcMs).getUTCDay();
 *     return day !== 0 && day !== 6;
 *   },
 *   isSelectableYear(year) {
 *     return year >= 2020;
 *   }
 * };
 * ```
 */
interface SelectableDates {
    /**
     * Checks if a date is selectable.
     * @param utcTimeMs - UTC milliseconds (normalized to UTC midnight)
     * @returns `true` if date is selectable
     */
    isSelectableDate(utcTimeMs: number): boolean;
    /**
     * Checks if a year is selectable.
     * Unselectable years are disabled in year grid view.
     * @param year - Full year (e.g., 2025)
     * @returns `true` if year is selectable
     */
    isSelectableYear(year: number): boolean;
}
/**
 * Date range with start and end.
 * Both can be null during selection flow.
 */
interface DateRange {
    /** Start date UTC milliseconds (UTC midnight). Null if unselected. */
    start: number | null;
    /** End date UTC milliseconds (UTC midnight). Null if unselected. */
    end: number | null;
}

/**
 * @file date-picker/date-picker.types.ts
 *
 * TypeScript interfaces and types for Date Picker component system.
 * Equivalent to DatePickerState + rememberDatePickerState in Android Compose.
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */

/**
 * State object for DatePicker — hoisted state pattern.
 * Equivalent to `DatePickerState` class in Android Compose Material3.
 *
 * @example
 * ```tsx
 * const state = useDatePickerState({ locale: { locale: 'en-US' } });
 *
 * <DatePicker state={state} />
 * <p>Selected: {state.selectedDateMs}</p>
 * ```
 */
interface DatePickerState {
    /** UTC ms of currently selected date. Null if unselected. */
    readonly selectedDateMs: number | null;
    /** UTC ms of 1st day of month currently displayed in calendar. */
    readonly displayedMonthMs: number;
    /** Current display mode: 'picker' | 'input' */
    readonly displayMode: DisplayMode;
    /** Selectable year range [min, max] */
    readonly yearRange: [number, number];
    /** Resolved locale (with default values) */
    readonly locale: ResolvedDateLocale;
    /** SelectableDates config */
    readonly selectableDates: SelectableDates;
    /** Selects a date by UTC ms. Pass null to deselect. */
    selectDate(ms: number | null): void;
    /** Navigates month backward or forward */
    navigateMonth(direction: "prev" | "next"): void;
    /** Navigates to a specific year and month */
    navigateToMonth(year: number, month: number): void;
    /** Switches display mode between 'picker' and 'input' */
    setDisplayMode(mode: DisplayMode): void;
    /** Resets to initial state */
    reset(): void;
}
/**
 * Options for `useDatePickerState` hook.
 * Equivalent to `rememberDatePickerState()` parameters in Compose.
 */
interface UseDatePickerStateOptions {
    /**
     * Initial selected date (UTC ms or null).
     * @default null
     */
    initialSelectedDateMs?: number | null;
    /**
     * Initial displayed month (UTC ms of any date in target month).
     * @default current month
     */
    initialDisplayedMonthMs?: number;
    /**
     * Selectable year range [min, max].
     * @default [1900, 2100]
     */
    yearRange?: [number, number];
    /**
     * Filter for unselectable dates/years.
     * @default ALL_DATES_SELECTABLE
     */
    selectableDates?: SelectableDates;
    /**
     * Initial display mode.
     * @default 'picker'
     */
    initialDisplayMode?: DisplayMode;
    /**
     * Locale configuration for calendar.
     * @default { weekStartsOn: 1 } (Monday)
     */
    locale?: DateLocale;
}
/**
 * State object for DateRangePicker — hoisted state pattern.
 * Equivalent to `DateRangePickerState` class in Android Compose Material3.
 */
interface DateRangePickerState {
    /** Start date UTC ms. Null if unselected. */
    readonly selectedStartMs: number | null;
    /** End date UTC ms. Null if unselected. */
    readonly selectedEndMs: number | null;
    /** UTC ms of 1st day of displayed month. */
    readonly displayedMonthMs: number;
    /** Display mode: 'picker' | 'input' */
    readonly displayMode: DisplayMode;
    /** Selectable year range */
    readonly yearRange: [number, number];
    /** Resolved locale */
    readonly locale: ResolvedDateLocale;
    /** SelectableDates config */
    readonly selectableDates: SelectableDates;
    /**
     * Selects a date.
     * Logic: click 1 = set start, click 2 = set end (if ms > start).
     * If ms <= start or both start and end exist, resets to new start.
     */
    selectDate(ms: number): void;
    /** Clears entire range selection */
    clearRange(): void;
    /** Navigates month */
    navigateMonth(direction: "prev" | "next"): void;
    /** Navigates to a specific year and month */
    navigateToMonth(year: number, month: number): void;
    /** Switches display mode */
    setDisplayMode(mode: DisplayMode): void;
    /** Resets */
    reset(): void;
}
/** Options for `useDateRangePickerState` */
interface UseDateRangePickerStateOptions {
    /** Initial start date (UTC ms) */
    initialStartMs?: number | null;
    /** Initial end date (UTC ms) */
    initialEndMs?: number | null;
    /** Initial displayed month */
    initialDisplayedMonthMs?: number;
    /** Year range @default [1900, 2100] */
    yearRange?: [number, number];
    /** Filter unselectable dates */
    selectableDates?: SelectableDates;
    /** Initial display mode @default 'picker' */
    initialDisplayMode?: DisplayMode;
    /** Locale config */
    locale?: DateLocale;
}
/** Props for `DatePicker` component */
interface DatePickerProps {
    /** Hoisted state from `useDatePickerState()` */
    state: DatePickerState;
    /**
     * Show toggle button between picker and input mode.
     * @default true
     */
    showModeToggle?: boolean;
    /**
     * Title slot — displayed above header.
     * @default "Select date"
     */
    title?: React.ReactNode;
    /**
     * Headline slot — displays selected date.
     * @default formatted selected date or "--"
     */
    headline?: React.ReactNode;
    /** Additional CSS class for container */
    className?: string;
}
/** Props for `DateRangePicker` component */
interface DateRangePickerProps {
    /** Hoisted state from `useDateRangePickerState()` */
    state: DateRangePickerState;
    /**
     * Show toggle button for picker/input mode.
     * @default false (range pickers typically don't use text input mode)
     */
    showModeToggle?: boolean;
    /**
     * Title slot.
     * @default "Select dates"
     */
    title?: React.ReactNode;
    /** Additional CSS class */
    className?: string;
}
/** Props for `DatePickerDialog` component */
interface DatePickerDialogProps {
    /** Open/close state of dialog */
    open: boolean;
    /** Callback when dialog requests dismissal (scrim click, Escape) */
    onDismiss: () => void;
    /** Title for dialog (screen reader accessibility) */
    title?: string;
    /**
     * Confirm button element rendered by caller (e.g. Button "OK").
     */
    confirmButton: React.ReactNode;
    /**
     * Optional cancel/dismiss button element.
     * @default null
     */
    dismissButton?: React.ReactNode;
    /** Content — typically `DatePicker` or `DateRangePicker` */
    children: React.ReactNode;
    /** Additional CSS class for dialog panel */
    className?: string;
}
/** Props for `DatePickerInput` component */
interface DatePickerInputProps {
    /**
     * Current text value (format: "MM/DD/YYYY").
     */
    value: string;
    /** Callback when user changes text */
    onChange(value: string): void;
    /**
     * Callback when user confirms date (blur or Enter).
     * Passes parsed UTC ms, or null if invalid input.
     */
    onCommit(ms: number | null): void;
    /** Label for text field */
    label?: string;
    /** Error message (shown when format is invalid) */
    error?: string;
    /** Locale string for format hint */
    locale?: string;
    /** Additional CSS class */
    className?: string;
}

/**
 * @file date-picker/date-picker.tsx
 *
 * DatePicker — calendar UI component (excluding dialog wrapper).
 * Equivalent to `DatePicker` composable in Android Compose Material3.
 *
 * Layout:
 *   CalendarHeader (title, headline, month nav)
 *   ↓
 *   CalendarGrid | YearPickerGrid (AnimatePresence toggle)
 *   ↓
 *   DatePickerInput (when displayMode === 'input')
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */

/**
 * DatePicker calendar UI.
 *
 * @example
 * ```tsx
 * const state = useDatePickerState({ locale: { locale: 'en-US' } });
 *
 * <DatePicker
 *   state={state}
 *   showModeToggle
 *   title="Select date"
 * />
 * ```
 */
declare const DatePicker: React.FC<DatePickerProps>;

/**
 * @file date-picker/date-picker.tokens.ts
 *
 * MD3 Design tokens for Date Picker component.
 * Maps from DatePickerModalTokens.kt → CSS variables in packages/tailwind/src/index.css.
 *
 * @see docs/m3/date-and-time-pickers/date-pickers/DatePickerModalTokens.kt
 * @see packages/tailwind/src/index.css
 */
/** Color tokens — uses CSS custom properties from MD3 theme */
declare const DP_COLORS: {
    /** Dialog container — SurfaceContainerHigh */
    readonly container: "var(--md-sys-color-surface-container-high)";
    /** Selected day background — Primary */
    readonly daySelected: "var(--md-sys-color-primary)";
    /** Selected day text — OnPrimary */
    readonly daySelectedText: "var(--md-sys-color-on-primary)";
    /** Today outline — Primary */
    readonly todayOutline: "var(--md-sys-color-primary)";
    /** Today text — Primary */
    readonly todayText: "var(--md-sys-color-primary)";
    /** Unselected day text — OnSurface */
    readonly dayText: "var(--md-sys-color-on-surface)";
    /** Weekday header text — OnSurface */
    readonly weekdayText: "var(--md-sys-color-on-surface)";
    /** Header headline + supporting text — OnSurfaceVariant */
    readonly headerText: "var(--md-sys-color-on-surface-variant)";
    /** Range highlight background — SecondaryContainer */
    readonly rangeHighlight: "var(--md-sys-color-secondary-container)";
    /** Range highlight text — OnSecondaryContainer */
    readonly rangeText: "var(--md-sys-color-on-secondary-container)";
    /** Unselected year text — OnSurfaceVariant */
    readonly yearText: "var(--md-sys-color-on-surface-variant)";
    /** Selected year background — Primary */
    readonly yearSelected: "var(--md-sys-color-primary)";
    /** Selected year text — OnPrimary */
    readonly yearSelectedText: "var(--md-sys-color-on-primary)";
    /** Scrim overlay */
    readonly scrim: "var(--md-sys-color-scrim)";
};
/** Shape tokens — corner radii from MD3 shape scale */
declare const DP_SHAPE: {
    /** Dialog container — CornerExtraLarge = 28px */
    readonly container: "var(--md-sys-shape-corner-extra-large)";
    /** Day cell — CornerFull = pill */
    readonly day: "var(--md-sys-shape-corner-full)";
    /** Range start/end indicator — CornerFull */
    readonly rangeEndpoint: "var(--md-sys-shape-corner-full)";
    /** Year chip — CornerFull */
    readonly year: "var(--md-sys-shape-corner-full)";
};
/** Fixed dimension tokens from DatePickerModalTokens.kt */
declare const DP_SIZE: {
    /** Dialog container width */
    readonly containerWidth: 360;
    /** Dialog container height */
    readonly containerHeight: 568;
    /** Day cell width/height */
    readonly dayCell: 40;
    /** Today border width */
    readonly todayOutlineWidth: 1;
    /** Header container height */
    readonly headerHeight: 120;
    /** Range picker header height */
    readonly rangeHeaderHeight: 128;
    /** Year chip height */
    readonly yearChipHeight: 36;
    /** Year chip width */
    readonly yearChipWidth: 72;
};
/**
 * Tailwind utility class strings for Date Picker elements.
 * Used with `cn()` function.
 */
declare const DP_CLASSES: {
    /** Dialog container */
    readonly dialog: string;
    /** Day cell container */
    readonly dayCell: string;
    /** Day cell: selected state */
    readonly dayCellSelected: string;
    /** Day cell: today state */
    readonly dayCellToday: string;
    /** Day cell: disabled state */
    readonly dayCellDisabled: "opacity-[0.38] pointer-events-none cursor-not-allowed";
    /** Range highlight (between start and end) */
    readonly rangeHighlight: "bg-m3-secondary-container";
    /** Weekday header row */
    readonly weekdayRow: "text-[length:var(--md-typescale-body-large-size,14px)] text-m3-on-surface";
};

/**
 * @file date-picker/date-picker-dialog.tsx
 *
 * Modal container for Date Pickers — reuses Dialog + DialogPortal primitives.
 * Equivalent to `DatePickerDialog` composable in Android Compose Material3.
 *
 * Tokens from DatePickerModalTokens.kt:
 * - ContainerColor = SurfaceContainerHigh (#ece6f0)
 * - ContainerShape = CornerExtraLarge (28px)
 * - ContainerElevation = Level3
 * - ContainerWidth = 360px, ContainerHeight = 568px (single date)
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */

/**
 * Modal Date Picker dialog with MD3 Expressive spring animations.
 *
 * Reuses `<Dialog>` (Root) and `<DialogPortal>` (AnimatePresence + Portal lifecycle)
 * while managing Overlay and Content to preserve MD3 Date Picker layout specs.
 *
 * @example

 * ```tsx
 * const state = useDatePickerState();
 * const [open, setOpen] = React.useState(false);
 *
 * <DatePickerDialog
 *   open={open}
 *   onDismiss={() => setOpen(false)}
 *   confirmButton={
 *     <Button variant="text" onClick={() => { handleConfirm(state.selectedDateMs); setOpen(false); }}>
 *       OK
 *     </Button>
 *   }
 *   dismissButton={
 *     <Button variant="text" onClick={() => setOpen(false)}>Cancel</Button>
 *   }
 * >
 *   <DatePicker state={state} />
 * </DatePickerDialog>
 * ```
 */
declare const DatePickerDialog: React.FC<DatePickerDialogProps>;

/**
 * @file date-picker/date-picker-input.tsx
 *
 * Text input mode for Date Picker — manual entry in MM/DD/YYYY format.
 * Uses library TextField component.
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */

/**
 * Text input for Date Picker with MM/DD/YYYY format.
 * Validates realtime, commits on blur or Enter.
 */
declare const DatePickerInput: React.FC<DatePickerInputProps>;

/**
 * @file date-picker/date-range-picker.tsx
 *
 * DateRangePicker — calendar UI for date range selection.
 * Equivalent to `DateRangePicker` composable in Android Compose Material3.
 *
 * Differences from DatePicker:
 * - Highlights range between start and end (SecondaryContainer)
 * - Headline displays "Start date → End date"
 * - Default title: "Select dates" (plural)
 *
 * @see https://m3.material.io/components/date-pickers/overview
 */

/**
 * DateRangePicker calendar UI.
 *
 * @example
 * ```tsx
 * const state = useDateRangePickerState();
 *
 * <DateRangePicker
 *   state={state}
 *   title="Select travel dates"
 * />
 * ```
 */
declare const DateRangePicker: React.FC<DateRangePickerProps>;

/**
 * @file date-picker/use-date-picker-state.ts
 *
 * Core state hook for DatePicker — hoisted state pattern.
 * Equivalent to `rememberDatePickerState()` in Android Compose Material3.
 *
 * @example
 * ```tsx
 * const state = useDatePickerState({
 *   locale: { locale: 'en-US', weekStartsOn: 1 },
 *   selectableDates: {
 *     isSelectableDate: (ms) => new Date(ms).getUTCDay() !== 0,
 *     isSelectableYear: (year) => year >= 2020,
 *   }
 * });
 *
 * <DatePicker state={state} />
 * <p>Selected: {state.selectedDateMs}</p>
 * ```
 */

/**
 * Hook for managing state of DatePicker.
 *
 * @param options - Initial state configuration
 * @returns `DatePickerState` object with state and actions
 */
declare const useDatePickerState: (options?: UseDatePickerStateOptions) => DatePickerState;

/**
 * @file date-picker/use-date-range-picker-state.ts
 *
 * Core state hook for DateRangePicker — hoisted state pattern.
 * Equivalent to `rememberDateRangePickerState()` in Android Compose Material3.
 *
 * Range selection logic:
 * - Click 1: set start date
 * - Click 2 (ms > start): set end date → range complete
 * - Click 2 (ms <= start): reset, set start = ms
 * - If both start and end exist: reset, set start = ms
 *
 * @example
 * ```tsx
 * const state = useDateRangePickerState();
 *
 * <DateRangePicker state={state} />
 * <p>Start: {state.selectedStartMs}, End: {state.selectedEndMs}</p>
 * ```
 */

/**
 * Hook for managing state of DateRangePicker.
 *
 * @param options - Initial configuration
 * @returns `DateRangePickerState` object with state and actions
 */
declare const useDateRangePickerState: (options?: UseDateRangePickerStateOptions) => DateRangePickerState;

/**
 * @file time-picker/time-picker.types.ts
 *
 * TypeScript interfaces and types for Time Picker component system.
 * Ported from `TimePickerState` interface in Android Compose Material3.
 *
 * @see https://m3.material.io/components/time-pickers/overview
 * @see docs/m3/date-and-time-pickers/time-pickers/TimePickerState.md
 */

/**
 * Indicates which part of time is currently selected — hour or minute.
 * Equivalent to `TimePickerSelectionMode` enum in Android Compose.
 */
type TimePickerSelectionMode = "hour" | "minute";
/** Visual arrangement of the clock display. */
type TimePickerLayout = "auto" | "vertical" | "horizontal";
/**
 * State object for TimePicker — hoisted state pattern.
 * Equivalent to `TimePickerState` interface in Android Compose Material3.
 *
 * Separates `hour`/`minute` (always valid) and `hourInput`/`minuteInput`
 * (raw input, can be invalid mid-typing in TimeInput mode).
 *
 * @example
 * ```tsx
 * const state = useTimePickerState({ initialHour: 7, initialMinute: 0 });
 *
 * <TimePicker state={state} />
 * <p>Selected: {state.hour}:{String(state.minute).padStart(2, '0')}</p>
 * ```
 */
interface TimePickerState {
    /** Current hour (0-23). Always valid. */
    readonly hour: number;
    /** Current minute (0-59). Always valid. */
    readonly minute: number;
    /**
     * Raw input for hour — bound to UI element.
     * Can be invalid during typing (e.g. typing "1" before "2").
     * Automatically updates `hour` when valid.
     */
    readonly hourInput: number;
    /**
     * Raw input for minute — bound to UI element.
     * Can be invalid during typing.
     * Automatically updates `minute` when valid.
     */
    readonly minuteInput: number;
    /** Format: `true` for 24h format, `false` for 12h AM/PM. */
    readonly is24hour: boolean;
    /** Currently active selection mode ('hour' or 'minute'). */
    readonly selection: TimePickerSelectionMode;
    /** `true` if both hourInput and minuteInput are valid. */
    readonly isInputValid: boolean;
    /** `true` if hourInput is a valid hour (0-23 for 24h, 1-12 for 12h). */
    readonly isHourInputValid: boolean;
    /** `true` if minuteInput is a valid minute (0-59). */
    readonly isMinuteInputValid: boolean;
    /** `true` if current hour is PM (hour >= 12). */
    readonly isPm: boolean;
    /**
     * Sets valid hour (0-23). Also updates hourInput.
     * Used for clock dial interaction.
     */
    setHour(h: number): void;
    /**
     * Sets valid minute (0-59). Also updates minuteInput.
     * Used for clock dial interaction.
     */
    setMinute(m: number): void;
    /**
     * Sets raw hour input (can be invalid).
     * Used for TimeInput text field.
     * Only updates `hour` when value is valid.
     */
    setHourInput(h: number): void;
    /**
     * Sets raw minute input (can be invalid).
     * Used for TimeInput text field.
     * Only updates `minute` when value is valid.
     */
    setMinuteInput(m: number): void;
    /** Switches selection mode between 'hour' and 'minute'. */
    setSelection(mode: TimePickerSelectionMode): void;
    /**
     * Toggle AM/PM.
     * Automatically converts internal hour (e.g. 7 AM → 19, 15 PM → 3 AM).
     */
    setIsPm(pm: boolean): void;
    /** Resets to initial state. */
    reset(): void;
}
/**
 * Options for `useTimePickerState` hook.
 * Equivalent to `rememberTimePickerState()` parameters in Compose.
 *
 * @example
 * ```tsx
 * const state = useTimePickerState({
 *   initialHour: 14,
 *   initialMinute: 30,
 *   is24hour: true,
 * });
 * ```
 */
interface UseTimePickerStateOptions {
    /**
     * Initial hour (0-23).
     * @default 0
     */
    initialHour?: number;
    /**
     * Initial minute (0-59).
     * @default 0
     */
    initialMinute?: number;
    /**
     * Format: 24h format (`true`) or 12h AM/PM (`false`).
     * @default false (12h format with AM/PM selector)
     */
    is24hour?: boolean;
}
/**
 * Props for `TimePicker` component (dial/clock mode).
 * Equivalent to `TimePicker` composable in Android Compose.
 */
interface TimePickerProps {
    /** Hoisted state from `useTimePickerState()`. */
    state: TimePickerState;
    /**
     * Arrangement of the clock header and dial.
     * `auto` uses the Android-style horizontal layout in a sufficiently wide
     * landscape viewport and the vertical layout elsewhere.
     * @default "auto"
     */
    layout?: TimePickerLayout;
    /** Additional CSS class for container. */
    className?: string;
}
/**
 * Props for `TimeInput` component (text input mode).
 * Equivalent to `TimeInput` composable in Android Compose.
 */
interface TimeInputProps {
    /** Hoisted state from `useTimePickerState()`. */
    state: TimePickerState;
    /** Additional CSS class for container. */
    className?: string;
}
/**
 * Props for `TimePickerDialog` component.
 * Equivalent to `TimePickerDialog` composable in Android Compose.
 */
interface TimePickerDialogProps {
    /** Open/close state of the dialog. */
    open: boolean;
    /** Callback when dialog requests dismissal (scrim click, Escape). */
    onDismiss: () => void;
    /**
     * Confirm button element rendered by caller (e.g. Button "OK").
     */
    confirmButton: React.ReactNode;
    /**
     * Optional cancel/dismiss button element.
     * @default null
     */
    dismissButton?: React.ReactNode;
    /**
     * Optional mode toggle button between Dial and Input mode.
     * Positioned at bottom-left of footer.
     */
    modeToggleButton?: React.ReactNode;
    /**
     * Accessible title displayed on dialog header.
     * @default "Select time"
     */
    title?: string;
    /** Content — typically `<TimePicker>` or `<TimeInput>`. */
    children: React.ReactNode;
    /** Additional CSS class for dialog panel. */
    className?: string;
}

/**
 * @file time-picker/time-input.tsx
 *
 * TimeInput — text input mode for time entry.
 *
 * Layout:
 * ```
 *   ┌────────────────────────────────┐
 *   │ Enter time                     │  ← headline (labelMedium)
 *   │ [07] : [00] [AM]              │  ← input fields + PeriodSelector
 *   │              [PM]             │
 *   │  Hour   Minute                │  ← helper labels (bodySmall)
 *   └────────────────────────────────┘
 * ```
 *
 * Behavior:
 * - Two `<input>` fields for hour and minute
 * - Auto-advance: entering 2 valid digits automatically focuses next field
 * - Validation: error state when value is out of range
 * - AM/PM toggle on right (hidden when is24hour)
 *
 * Ported from `TimeInputImpl` in TimePicker.kt.
 *
 * @see docs/m3/date-and-time-pickers/time-pickers/TimePicker.kt (TimeInputImpl)
 */

/**
 * TimeInput — text input mode.
 *
 * Used with `useTimePickerState`:
 *
 * @example
 * ```tsx
 * const state = useTimePickerState({ initialHour: 9, initialMinute: 30 });
 *
 * // Standalone
 * <TimeInput state={state} />
 *
 * // In dialog (with toggle)
 * <TimePickerDialog
 *   open={open}
 *   onDismiss={() => setOpen(false)}
 *   confirmButton={<Button variant="text" onClick={() => setOpen(false)}>OK</Button>}
 * >
 *   <TimeInput state={state} />
 * </TimePickerDialog>
 * ```
 */
declare const TimeInput: React.FC<TimeInputProps>;

/**
 * @file time-picker/time-picker.tsx
 *
 * Android MD3 clock picker. The picker uses a compact vertical arrangement in
 * portrait and moves the clock beside the display on larger landscape screens.
 */

declare const TimePicker: React.FC<TimePickerProps>;

/**
 * @file time-picker/time-picker.tokens.ts
 *
 * MD3 Design tokens for Time Picker component system.
 * Verified mapping from:
 *   - TimePickerTokens.kt → ClockDial, TimeSelector, PeriodSelector (Picker mode)
 *   - TimeInputTokens.kt  → TimeField, PeriodSelector (Input mode)
 *
 * CSS variables → packages/tokens/src/colors.css
 * Tailwind classes → packages/tailwind/src/index.css
 *
 * @see docs/m3/date-and-time-pickers/time-pickers/TimePickerTokens.kt
 * @see docs/m3/date-and-time-pickers/time-pickers/TimeInputTokens.kt
 */
/**
 * Color tokens for Time Picker — mapped from TimePickerTokens.kt + TimeInputTokens.kt.
 * Uses CSS custom properties from MD3 theme (packages/tokens/src/colors.css).
 */
declare const TP_COLORS: {
    /** Dial background — SurfaceContainerHighest */
    readonly clockDial: "var(--md-sys-color-surface-container-highest)";
    /** Selected number text — OnPrimary */
    readonly clockDialSelected: "var(--md-sys-color-on-primary)";
    /** Unselected number text — OnSurface */
    readonly clockDialUnselected: "var(--md-sys-color-on-surface)";
    /** Selector handle circle — Primary */
    readonly selectorHandle: "var(--md-sys-color-primary)";
    /** Selector track line — Primary */
    readonly selectorTrack: "var(--md-sys-color-primary)";
    /** Selector center dot — Primary */
    readonly selectorCenter: "var(--md-sys-color-primary)";
    /** Picker/Input container — SurfaceContainerHigh */
    readonly container: "var(--md-sys-color-surface-container-high)";
    /** Selected selector (hour/min button) — PrimaryContainer */
    readonly timeSelectorSelected: "var(--md-sys-color-primary-container)";
    /** Unselected selector — SurfaceContainerHighest */
    readonly timeSelectorUnselected: "var(--md-sys-color-surface-container-highest)";
    /** Selected selector text — OnPrimaryContainer */
    readonly timeSelectorSelectedText: "var(--md-sys-color-on-primary-container)";
    /** Unselected selector text — OnSurface */
    readonly timeSelectorUnselectedText: "var(--md-sys-color-on-surface)";
    /** AM/PM selected background — TertiaryContainer */
    readonly periodSelected: "var(--md-sys-color-tertiary-container)";
    /** AM/PM unselected background — transparent */
    readonly periodUnselected: "transparent";
    /** AM/PM selected text — OnTertiaryContainer */
    readonly periodSelectedText: "var(--md-sys-color-on-tertiary-container)";
    /** AM/PM unselected text — OnSurfaceVariant */
    readonly periodUnselectedText: "var(--md-sys-color-on-surface-variant)";
    /** AM/PM border — Outline */
    readonly periodOutline: "var(--md-sys-color-outline)";
    /** Time field default background — SurfaceContainerHighest */
    readonly timeField: "var(--md-sys-color-surface-container-highest)";
    /** Time field focused background — PrimaryContainer */
    readonly timeFieldFocus: "var(--md-sys-color-primary-container)";
    /** Time field focused text — OnPrimaryContainer */
    readonly timeFieldFocusText: "var(--md-sys-color-on-primary-container)";
    /** Time field focus outline — Primary */
    readonly timeFieldFocusOutline: "var(--md-sys-color-primary)";
    /** Time field default text — OnSurface */
    readonly timeFieldText: "var(--md-sys-color-on-surface)";
    /** ":" separator — OnSurface */
    readonly separator: "var(--md-sys-color-on-surface)";
    /** Headline label ("Select time") — OnSurfaceVariant */
    readonly headline: "var(--md-sys-color-on-surface-variant)";
};
/**
 * Tailwind utility class strings for Time Picker elements.
 * Used with `cn()` function.
 * Mapped from packages/tailwind/src/index.css (--color-m3-* tokens).
 */
declare const TP_CLASSES: {
    /** Main picker/input container */
    readonly container: "bg-m3-surface-container-high rounded-m3-xl select-none";
    /** Hour/minute selector button — selected */
    readonly timeSelectorSelected: "bg-m3-primary-container text-m3-on-primary-container";
    /** Hour/minute selector button — unselected */
    readonly timeSelectorUnselected: "bg-m3-surface-container-highest text-m3-on-surface";
    /** AM/PM button — selected */
    readonly periodSelected: "bg-m3-primary-container text-m3-on-primary-container";
    /** AM/PM button — unselected */
    readonly periodUnselected: "bg-transparent text-m3-on-surface-variant";
    /** Time input field — default */
    readonly timeField: "bg-m3-surface-container-highest text-m3-on-surface";
    /** Time input field — focused */
    readonly timeFieldFocused: "bg-m3-primary-container text-m3-on-primary-container ring-2 ring-m3-primary";
    /** Clock dial background circle */
    readonly clockDial: "fill-[var(--md-sys-color-surface-container-highest)]";
    /** Selected number on dial */
    readonly clockDialSelectedText: "fill-[var(--md-sys-color-on-primary)]";
    /** Unselected number on dial */
    readonly clockDialUnselectedText: "fill-[var(--md-sys-color-on-surface)]";
    /** Selector handle, track, center dot */
    readonly selectorPrimary: "fill-m3-primary stroke-m3-primary";
};
/**
 * Shape tokens — corner radii from MD3 shape scale.
 * Mapped from ShapeKeyTokens in TimePickerTokens.kt + TimeInputTokens.kt.
 *
 * Uses Tailwind class names from packages/tailwind/src/index.css.
 */
declare const TP_SHAPE: {
    /** Dialog container — CornerExtraLarge = 28px */
    readonly container: "rounded-m3-xl";
    /** Hour/minute selector button — CornerSmall = 8px */
    readonly timeSelector: "rounded-m3-sm";
    /** Period (AM/PM) container — CornerSmall = 8px */
    readonly periodSelector: "rounded-m3-sm";
    /** Clock dial circle — CornerFull */
    readonly clockDial: "rounded-m3-full";
    /** Time field — CornerSmall = 8px */
    readonly timeField: "rounded-m3-sm";
};
/**
 * Fixed dimension tokens from TimePickerTokens.kt + TimeInputTokens.kt.
 * Unit: px (converted from dp).
 */
declare const TP_SIZE: {
    /** ClockDialContainerSize = 256dp */
    readonly clockDialSize: 256;
    /** ClockDialSelectorHandleContainerSize = 48dp */
    readonly selectorHandleSize: 48;
    /** ClockDialSelectorCenterContainerSize = 8dp */
    readonly selectorCenterSize: 8;
    /** ClockDialSelectorTrackContainerWidth = 2dp */
    readonly selectorTrackWidth: 2;
    /** TimeSelectorContainerWidth = 96dp */
    readonly timeSelectorWidth: 96;
    /** TimeSelectorContainerHeight = 80dp */
    readonly timeSelectorHeight: 80;
    /** TimeSelector24HVerticalContainerWidth = 114dp (24h mode) */
    readonly timeSelector24hWidth: 114;
    /** PeriodSelectorVerticalContainerWidth = 52dp */
    readonly periodSelectorVerticalWidth: 52;
    /** PeriodSelectorVerticalContainerHeight = 80dp */
    readonly periodSelectorVerticalHeight: 80;
    /** PeriodSelectorHorizontalContainerWidth = 216dp */
    readonly periodSelectorHorizWidth: 216;
    /** PeriodSelectorHorizontalContainerHeight = 38dp */
    readonly periodSelectorHorizHeight: 38;
    /** TimeFieldContainerWidth = 96dp */
    readonly timeFieldWidth: 96;
    /** TimeFieldContainerHeight = 72dp */
    readonly timeFieldHeight: 72;
    /** PeriodSelectorContainerHeight (Input mode) = 72dp */
    readonly periodInputHeight: 72;
    /** PeriodSelectorContainerWidth (Input mode) = 52dp */
    readonly periodInputWidth: 52;
};

/**
 * @file time-picker/time-picker-dialog.tsx
 *
 * TimePickerDialog — modal container for TimePicker and TimeInput.
 * Reuses Dialog + DialogPortal primitives matching DatePickerDialog pattern.
 *
 * Layout:
 * ```
 *   ┌─────────────────────┐
 *   │  [Content]          │  ← TimePicker or TimeInput
 *   │─────────────────────│
 *   │ 🎹  [Cancel] [OK]   │  ← footer: modeToggle + spacer + dismiss + confirm
 *   └─────────────────────┘
 * ```
 *
 * Tokens from TimePickerDialog.kt (shared with DatePickerDialog):
 * - ContainerColor = SurfaceContainerHigh
 * - ContainerShape = CornerExtraLarge (28px)
 * - ContainerElevation = Level3
 *
 * Ported from `TimePickerDialog.kt` and `DatePickerDialog` pattern.
 *
 * @see docs/m3/date-and-time-pickers/time-pickers/TimePickerDialog.kt
 * @see packages/react/src/ui/date-time-pickers/date-picker/date-picker-dialog.tsx
 */

/**
 * TimePickerDialog — modal dialog container for TimePicker / TimeInput.
 *
 * Reuses `<Dialog>` (Root) and `<DialogPortal>` (AnimatePresence + Portal)
 * while managing Overlay and Content to preserve MD3 Time Picker specs.
 *
 * @example Basic usage

 * ```tsx
 * const state = useTimePickerState({ initialHour: 7 });
 * const [open, setOpen] = React.useState(false);
 * const [mode, setMode] = React.useState<'dial' | 'input'>('dial');
 *
 * <TimePickerDialog
 *   open={open}
 *   onDismiss={() => setOpen(false)}
 *   modeToggleButton={
 *     <button onClick={() => setMode(m => m === 'dial' ? 'input' : 'dial')}>
 *       <span className="md-icon">{mode === 'dial' ? 'keyboard' : 'schedule'}</span>
 *     </button>
 *   }
 *   confirmButton={
 *     <Button variant="text" onClick={() => { handleConfirm(state); setOpen(false); }}>
 *       OK
 *     </Button>
 *   }
 *   dismissButton={
 *     <Button variant="text" onClick={() => setOpen(false)}>Cancel</Button>
 *   }
 * >
 *   {mode === 'dial' ? <TimePicker state={state} /> : <TimeInput state={state} />}
 * </TimePickerDialog>
 * ```
 */
declare const TimePickerDialog: React.FC<TimePickerDialogProps>;

/**
 * @file time-picker/use-time-picker-state.ts
 *
 * Core state hook for TimePicker — hoisted state pattern.
 * Ported from `rememberTimePickerState()` in Android Compose Material3.
 *
 * Separates `hour`/`minute` (always valid) and `hourInput`/`minuteInput`
 * (raw input, can be invalid mid-typing) — preserving Kotlin semantics.
 *
 * @see docs/m3/date-and-time-pickers/time-pickers/TimePickerState.md
 *
 * @example
 * ```tsx
 * const state = useTimePickerState({
 *   initialHour: 7,
 *   initialMinute: 0,
 *   is24hour: false,
 * });
 *
 * <TimePicker state={state} />
 * <p>{state.hour}:{String(state.minute).padStart(2, '0')} {state.isPm ? 'PM' : 'AM'}</p>
 * ```
 */

/**
 * State management hook for TimePicker and TimeInput.
 * Equivalent to `rememberTimePickerState()` in Android Compose.
 *
 * @param options - Initial configuration options
 * @returns `TimePickerState` object with state and actions
 */
declare const useTimePickerState: (options?: UseTimePickerStateOptions) => TimePickerState;

export { DP_CLASSES, DP_COLORS, DP_SHAPE, DP_SIZE, type DateLocale, DatePicker, DatePickerDialog, type DatePickerDialogProps, DatePickerInput, type DatePickerInputProps, type DatePickerProps, type DatePickerState, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePickerState, type DisplayMode, type SelectableDates, TP_CLASSES, TP_COLORS, TP_SHAPE, TP_SIZE, TimeInput, type TimeInputProps, TimePicker, TimePickerDialog, type TimePickerDialogProps, type TimePickerLayout, type TimePickerProps, type TimePickerSelectionMode, type TimePickerState, type UseDatePickerStateOptions, type UseDateRangePickerStateOptions, type UseTimePickerStateOptions, useDatePickerState, useDateRangePickerState, useTimePickerState };