import { type EventName } from '@lit/react';
import Component from '../../components/timepicker';
import type { Events } from '../../components/timepicker/timepicker.types';
/**
 * mdc-timepicker is a component that allows users to select a specific time
 * or enter a time manually. It supports both 12-hour and 24-hour formats.
 *
 * The component consists of:
 * - label - describes the time picker field
 * - input field - made up of 2-3 spinbuttons (hours, minutes, optional AM/PM period)
 * - dropdown arrow button - opens a flyout menu with predefined time intervals
 * - helper text - displayed below the input field
 *
 * Users can input values by:
 * - Manually entering numbers/characters in spinbuttons
 * - Navigating using arrow keys to increment/decrement values
 * - Selecting a predefined time from the dropdown menu
 *
 * @tagname mdc-timepicker
 *
 * @dependency mdc-button
 * @dependency mdc-icon
 * @dependency mdc-option
 * @dependency mdc-popover
 * @dependency mdc-text
 * @dependency mdc-toggletip
 *
 * @event input - (React: onInput) This event is dispatched when the time value changes.
 * @event change - (React: onChange) This event is dispatched when the time value is committed.
 * @event focus - (React: onFocus) This event is dispatched when the timepicker receives focus.
 * @event blur - (React: onBlur) This event is dispatched when the timepicker loses focus.
 *
 * @slot label - Slot for the label element.
 * @slot toggletip - Slot for the toggletip info icon button.
 * @slot help-icon - Slot for the helper/validation icon.
 * @slot help-text - Slot for the helper/validation text.
 *
 * @cssproperty --mdc-timepicker-background-color - Background color of the timepicker input.
 * @cssproperty --mdc-timepicker-border-color - Border color of the timepicker input.
 * @cssproperty --mdc-timepicker-text-color - Text color of the timepicker input.
 * @cssproperty --mdc-timepicker-height - The height of the timepicker trigger control.
 * @cssproperty --mdc-timepicker-width - Width of the timepicker component.
 * @cssproperty --mdc-timepicker-listbox-height - The max-height of the dropdown listbox. Default shows ~6 items.
 *
 * @csspart label - The label element.
 * @csspart label-text - The container for the label and required indicator elements.
 * @csspart required-indicator - The required indicator element.
 * @csspart info-icon-btn - The info icon button element.
 * @csspart label-toggletip - The toggletip element.
 * @csspart help-text - The helper/validation text element.
 * @csspart helper-icon - The helper/validation icon element.
 * @csspart help-text-container - The container for helper/validation elements.
 * @csspart container - The outer container for the input and popover.
 * @csspart base-container - The input container with border and background.
 * @csspart spinbutton-group - The container for spinbutton elements.
 * @csspart spinbutton - A spinbutton input element.
 * @csspart separator - The colon separator between spinbuttons.
 * @csspart period - The AM/PM period spinbutton.
 * @csspart icon-container - The dropdown arrow button container.
 * @csspart leading-icon - The prefix icon element displayed before spinbuttons.
 * @csspart native-input - The hidden native input for form participation.
 * @csspart listbox - The dropdown list container.
 */
declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
    onInput: EventName<Events["onInputEvent"]>;
    onChange: EventName<Events["onChangeEvent"]>;
    onFocus: EventName<Events["onFocusEvent"]>;
    onBlur: EventName<Events["onBlurEvent"]>;
}>;
export default reactWrapper;
