timepicker-ui 2.6.0 → 3.0.0

package/dist/index.d.cts

@@ -0,0 +1,740 @@
+/**
+ * @description Callback function type for timepicker events
+ */
+type TimepickerEventCallback = (eventData: {
+  hour?: string | null;
+  minutes?: string | null;
+  type?: string | null;
+  degreesHours?: number | null;
+  degreesMinutes?: number | null;
+  hourNotAccepted?: string | null;
+  minutesNotAccepted?: string | null;
+  eventType?: any;
+  error?: string;
+  currentHour?: string | number;
+  currentMin?: string | number;
+  currentType?: string;
+  currentLength?: string | number;
+}) => void;
+
+type OptionTypes = {
+  /**
+   * @description Set custom text to AM label
+   * @default "AM"
+   */
+  amLabel?: string;
+  /**
+   * @description Turn on/off animations on picker on start/close
+   * @default true
+   */
+  animation?: boolean;
+  /**
+   * @description Set default selector to append timepicker inside it. Timepicker default append to `body`
+   * @default ""
+   */
+  appendModalSelector?: string;
+  /**
+   * @description Turn on/off backdrop
+   * @default true
+   */
+  backdrop?: boolean;
+  /**
+   * @description Set custom text to cancel button
+   * @default "CANCEL"
+   */
+  cancelLabel?: string;
+  /**
+   * @description Edit hour/minutes on the web mode.
+   * @default false
+   */
+  editable?: boolean;
+  /**
+   * @description Turn on/off scroll if timepicker is open
+   * @default false
+   */
+  enableScrollbar?: boolean;
+  /**
+   * @description Turn on/off icon to switch desktop/mobile
+   * @default false
+   */
+  enableSwitchIcon?: boolean;
+  /**
+   * @description Set custom text to time label on mobile version
+   * @default "Enter Time"
+   */
+  mobileTimeLabel?: string;
+  /**
+   * @description Turn on/off focus to input after close modal
+   * @default false
+   */
+  focusInputAfterCloseModal?: boolean;
+  /**
+   * @description Set custom text to hour label on mobile version
+   * @default "Hour"
+   */
+  hourMobileLabel?: string;
+  /**
+   * @description Set default template to switch desktop.This options is using by default material design icon
+   * @default "<i class='material-icons timepicker-ui-keyboard-icon'> keyboard </i>"
+   */
+  iconTemplate?: string;
+  /**
+   * @description Set default template to switch mobile. This options is using by default material design icon
+   * @default "<i class='material-icons timepicker-ui-keyboard-icon'> schedule </i>"
+   */
+  iconTemplateMobile?: string;
+  /**
+   * @description Set increment hour by `1`, `2`, `3` hour
+   * @default 1
+   */
+  incrementHours?: number;
+  /**
+   * @description Set increment minutes by `1`, `5`, `10`, `15` minutes
+   * @default 1
+   */
+  incrementMinutes?: number;
+  /**
+   * @description set custom text to minute label on mobile version
+   * @default "Minute"
+   */
+  minuteMobileLabel?: string;
+  /**
+   * @description Turn on/off mobile version
+   * @default false
+   */
+  mobile?: boolean;
+  /**
+   * @description Set custom text to ok label
+   * @default "OK"
+   */
+  okLabel?: string;
+  /**
+   * @description Set custom text to pm label
+   * @default "PM"
+   */
+  pmLabel?: string;
+  /**
+   * @description Set custom text to time label on desktop version
+   * @default "Select Time"
+   */
+  timeLabel?: string;
+  /**
+   * @description Turn on/off switch to minutes by select hour
+   * @default true
+   */
+  switchToMinutesAfterSelectHour?: boolean;
+  /**
+   * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
+
+   * The offical version of Material Design 3 is still not avaialbe for the WEB version.Theme `m3` has been added
+   * based on the design what you can find [here](https://m3.material.io/components/time-pickers/overview).
+   * If new version M3 will be released this design will get improve.
+   * @default "basic"
+   */
+  theme?:
+    | 'basic'
+    | 'crane-straight'
+    | 'crane-radius'
+    | 'm3'
+    | 'dark'
+    | 'glassmorphic'
+    | 'pastel'
+    | 'ai'
+    | 'cyberpunk';
+  /**
+   * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
+   * @default false
+   */
+  clockType?: '12h' | '24h';
+  /**
+   * @description - The `hours` and `minutes` are arrays which accept strings and numbers to block select hours/minutes.
+   * - The `interval` key allow only string with interval values i.e., if you have 24h clockType the string can be 03:00 - 15:00, 01:20 - 05:15, 02:03 - 06:55 etc.. On the other hand if you have 12h clockType the string can be i.e 01:30 PM - 6:30 PM, 02:00 AM - 10:00 AM, 02:30 AM - 10:30 PM. It is important to remember that first hour in the interval option should be less that the second value if you want to block values from AM to PM and if you are using interval with 24h clockType.
+   * - If the interval key is set, the hours/minutes keys are `ignored`.
+   * @example
+    disabledTime: {
+      minutes: [1,2,4,5,55,23,"22","38"],
+      hours: [1,"3","5", 8],
+      interval: "10:00 AM - 12:00 PM",
+    }
+   * @default  undefined
+   */
+  disabledTime?: {
+    minutes?: Array<string | number>;
+    hours?: Array<string | number>;
+    interval?: string;
+  };
+  /**
+   * @description Set current time to the input and timepicker.\
+   * If this options is set to `true` it's gonna update picker with toLocaleTimeString() and input with value based on your location.
+   * This option also allows to put object with properties.
+   * @example
+      currentTime: {
+        time: new Date(),
+        updateInput: true,
+        locales: "en-US",
+        preventClockType: false
+      };
+   * @example currentTime: true
+   * @default  undefined
+   */
+  currentTime?:
+    | {
+        /**
+         * The `time` key allows to put any valid date to update picker.
+         * @requires
+         * If the `updateInput` is set to `false/undefined` and the default value from the input not exist, the `time` key value will be displayed in the picker.
+         *
+         * If the `updateInput` is set to `false/undefined` but the default value from the input exist, the `time` key will be ignored.
+         */
+        time?: Date;
+        /**
+         * The `updateInput` key is set to `true` it's going update input value with set time key.
+         */
+        updateInput?: boolean;
+        /**
+         * The `locales` key can change language from `toLocaleTimeString()`.
+         */
+        locales?: string | string[];
+        /**
+         * The `preventClockType` key if is set to `true` it's `force` the clockType option to set value "12h" or "24h" based on your location
+         * with current time and `locales` key value is ignored.
+         */
+        preventClockType?: boolean;
+      }
+    | boolean;
+
+  /**
+   * @description Set focus trap to the modal element to all elements with tabindex in the picker
+   * @default true
+   */
+  focusTrap?: boolean;
+  /**
+   * @description Set delay to clickable elements like button "OK", "CANCEL" etc. The value has to be set in milliseconds.
+   * @default 300
+   */
+  delayHandler?: number;
+  /**
+   * @description Custom ID for the timepicker instance. Useful for identifying specific instances when using multiple timepickers.
+   * If not provided, a random UUID will be generated.
+   * @example id: "my-timepicker-1"
+   * @default undefined
+   */
+  id?: string;
+  /**
+   * @description Enable inline mode for always-visible timepicker
+   * If enabled is true, containerId must be provided and the timepicker will be rendered inside the specified container instead of as a modal.
+   * The timepicker will not open on input click and will be always visible.
+   * @example
+   * inline: {
+   *   enabled: true,
+   *   containerId: "timepicker-container",
+   *   showButtons: false,
+   *   autoUpdate: true
+   * }
+   * @default undefined
+   */
+  inline?: {
+    /**
+     * @description Enable or disable inline mode
+     */
+    enabled: boolean;
+    /**
+     * @description ID of the container element where the timepicker should be rendered (required when enabled is true)
+     */
+    containerId: string;
+    /**
+     * @description Show or hide OK/CANCEL buttons in inline mode
+     * @default false
+     */
+    showButtons?: boolean;
+    /**
+     * @description Automatically update input value when time changes (real-time updates)
+     * @default true
+     */
+    autoUpdate?: boolean;
+  };
+  /**
+   * @description Add additional custom CSS class to the timepicker wrapper element. The default 'timepicker-ui' class is always added.
+   * This allows multiple timepickers on the same page to have additional custom classes for styling or targeting.
+   * @example cssClass: "my-custom-timepicker"
+   * @default undefined
+   */
+  cssClass?: string;
+  /**
+   * @description Callback triggered when the timepicker opens
+   * @example onOpen: (data) => console.log('Picker opened!', data)
+   */
+  onOpen?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when user cancels the timepicker
+   * @example onCancel: (data) => console.log('Cancelled', data)
+   */
+  onCancel?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when user confirms the time selection (clicks OK)
+   * @example onConfirm: (data) => console.log('Time confirmed', data)
+   */
+  onConfirm?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered during interaction with the clock (real-time updates)
+   * @example onUpdate: (data) => console.log('Time updated', data)
+   */
+  onUpdate?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when hour selection mode is activated
+   * @example onSelectHour: (data) => console.log('Hour mode selected', data)
+   */
+  onSelectHour?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when minute selection mode is activated
+   * @example onSelectMinute: (data) => console.log('Minute mode selected', data)
+   */
+  onSelectMinute?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when AM is selected
+   * @example onSelectAM: (data) => console.log('AM selected', data)
+   */
+  onSelectAM?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when PM is selected
+   * @example onSelectPM: (data) => console.log('PM selected', data)
+   */
+  onSelectPM?: TimepickerEventCallback;
+  /**
+   * @description Callback triggered when invalid time format is detected in input
+   * @example onError: (data) => console.log('Invalid format:', data.error)
+   */
+  onError?: TimepickerEventCallback;
+};
+
+interface ITimepickerUI {
+  _degreesHours: number | null;
+  _degreesMinutes: number | null;
+  _eventsBundle: () => void;
+  _options: OptionTypes;
+  _eventsClickMobile: (event: Event) => Promise<void>;
+  _eventsClickMobileHandler: EventListenerOrEventListenerObject;
+  _mutliEventsMove: (event: Event) => void;
+  _mutliEventsMoveHandler: EventListenerOrEventListenerObject;
+  _clickTouchEvents: string[];
+  _element: HTMLElement;
+  _instanceId: string;
+  _isMobileView: boolean | null;
+  _isTouchMouseMove: boolean | null;
+  _disabledTime: any;
+  _cloned: Node | null;
+  _inputEvents: string[];
+  _isModalRemove?: boolean;
+  _isInitialized: boolean;
+  _customId?: string;
+
+  readonly modalTemplate: string;
+  readonly modalElement: HTMLDivElement;
+  readonly clockFace: HTMLDivElement;
+  readonly input: HTMLInputElement;
+  readonly clockHand: HTMLDivElement;
+  readonly circle: HTMLDivElement;
+  readonly tipsWrapper: HTMLDivElement;
+  readonly tipsWrapperFor24h: HTMLDivElement;
+  readonly minutes: HTMLInputElement;
+  readonly hour: HTMLInputElement;
+  readonly AM: HTMLDivElement;
+  readonly PM: HTMLDivElement;
+  readonly minutesTips: HTMLDivElement;
+  readonly hourTips: HTMLDivElement;
+  readonly allValueTips: readonly HTMLDivElement[];
+  readonly openElementData: string[] | null;
+  readonly openElement: any;
+  readonly cancelButton: HTMLButtonElement;
+  readonly okButton: HTMLButtonElement;
+  readonly activeTypeMode: HTMLButtonElement;
+  readonly keyboardClockIcon: HTMLButtonElement;
+  readonly footer: HTMLDivElement;
+  readonly wrapper: HTMLDivElement;
+
+  create(): void;
+  open(callback?: () => void): void;
+  close(): (...args: (boolean | (() => void))[]) => void;
+  destroy(options?: { keepInputValue?: boolean; callback?: () => void } | (() => void)): void;
+  update(value: { options: OptionTypes; create?: boolean }, callback?: () => void): void;
+  getElement(): HTMLElement;
+  getValue(): {
+    hour: string;
+    minutes: string;
+    type?: string;
+    time: string;
+    degreesHours: number | null;
+    degreesMinutes: number | null;
+  };
+  setValue(time: string, updateInput?: boolean): void;
+
+  eventManager?: any;
+  modalManager?: any;
+  animationManager?: any;
+  clockManager?: any;
+  validationManager?: any;
+  themeManager?: any;
+  configManager?: any;
+}
+
+declare class EventManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    handleOpenOnClick: () => void;
+    /** @internal */
+    handleOpenOnEnterFocus: () => void;
+    /** @internal */
+    handleCancelButton: () => void;
+    /** @internal */
+    handleOkButton: () => void;
+    /** @internal */
+    handleBackdropClick: () => void;
+    /** @internal */
+    getDestructuringObj(isAmPm?: boolean): {
+        minutesToUpdate: {
+            actualHour: string;
+            pmHours: any;
+            amHours: any;
+            activeMode: string | null;
+            startMinutes: any;
+            endMinutes: any;
+            removedAmHour: any;
+            removedPmHour: any;
+            removedEndHour?: undefined;
+            removedStartedHour?: undefined;
+        };
+    } | {
+        minutesToUpdate: {
+            endMinutes: any;
+            removedEndHour: any;
+            removedStartedHour: any;
+            actualHour: string;
+            startMinutes: any;
+            pmHours?: undefined;
+            amHours?: undefined;
+            activeMode?: undefined;
+            removedAmHour?: undefined;
+            removedPmHour?: undefined;
+        };
+    };
+    /** @internal */
+    handleAmClick: () => void;
+    /** @internal */
+    handlePmClick: () => void;
+    /** @internal */
+    handleClasses24h: (ev: any, element?: HTMLInputElement) => void;
+    /** @internal */
+    handleHourEvents: () => void;
+    /** @internal */
+    handleMinutesEvents: () => void;
+    /** @internal */
+    handleEventToMoveHand: (event: TouchEvent) => void;
+    /** @internal */
+    handleMoveHand: () => void;
+    /** @internal */
+    handleClickOnHourMobile: () => void;
+    /** @internal */
+    handlerClickHourMinutes: (event: Event) => Promise<void>;
+    /** @internal */
+    handleIconChangeView: () => Promise<void>;
+    /** @internal */
+    handleKeyPress: (e: KeyboardEvent) => void;
+    /** @internal */
+    handleEscClick: () => void;
+    /** @internal */
+    focusTrapHandler: () => void;
+    /**
+     * @description Handle real-time input updates for inline mode
+     */
+    /** @internal */
+    handleInlineAutoUpdate: () => void;
+}
+
+declare class ModalManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    setModalTemplate: () => void;
+    /** @internal */
+    setScrollbarOrNot: () => void;
+    /** @internal */
+    removeBackdrop: () => void;
+    /** @internal */
+    setNormalizeClass: () => void;
+    /** @internal */
+    setShowClassToBackdrop: () => void;
+    /** @internal */
+    setFlexEndToFooterIfNoKeyboardIcon: () => void;
+}
+
+declare class AnimationManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    setAnimationToOpen(): void;
+    /** @internal */
+    removeAnimationToClose(): void;
+    /** @internal */
+    handleAnimationClock(): void;
+    /** @internal */
+    handleAnimationSwitchTipsMode(): void;
+}
+
+declare class ClockManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    removeCircleClockClasses24h(): void;
+    /** @internal */
+    setCircleClockClasses24h(): void;
+    /** @internal */
+    setOnStartCSSClassesIfClockType24h(): void;
+    /** @internal */
+    setBgColorToCirleWithHourTips: () => void;
+    /** @internal */
+    setBgColorToCircleWithMinutesTips: () => void;
+    /** @internal */
+    removeBgColorToCirleWithMinutesTips: () => void;
+    /** @internal */
+    setClassActiveToHourOnOpen: () => void;
+    /** @internal */
+    setMinutesToClock: (value: string | null) => void;
+    /** @internal */
+    setHoursToClock: (value: string | null) => void;
+    /** @internal */
+    setTransformToCircleWithSwitchesHour: (val: string | null) => void;
+    /** @internal */
+    setTransformToCircleWithSwitchesMinutes: (val: string | null) => void;
+    /** @internal */
+    toggleClassActiveToValueTips: (value: string | number | null) => void;
+}
+
+declare class ValidationManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    setErrorHandler(): void;
+    /** @internal */
+    removeErrorHandler(): void;
+    /** @internal */
+    checkDisabledValuesOnStart(): void;
+}
+
+declare class ThemeManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    setTheme: () => void;
+    /** @internal */
+    setInputClassToInputElement: () => void;
+    /** @internal */
+    setDataOpenToInputIfDosentExistInWrapper: () => void;
+    /** @internal */
+    setClassTopOpenElement: () => void;
+    /** @internal */
+    setTimepickerClassToElement: () => void;
+}
+
+type InputValueResult = {
+    hour: string;
+    minutes: string;
+    type?: string;
+    error?: string;
+    currentHour?: string | number;
+    currentMin?: string | number;
+    currentType?: string;
+    currentLength?: number;
+};
+
+declare class ConfigManager {
+    private timepicker;
+    constructor(timepicker: ITimepickerUI);
+    /** @internal */
+    preventClockTypeByCurrentTime: () => void;
+    /** @internal */
+    updateInputValueWithCurrentTimeOnStart: () => void;
+    /** @internal */
+    checkMobileOption(): void;
+    /** @internal */
+    getDisableTime(): void;
+    /** @internal */
+    getInputValueOnOpenAndSet: () => void;
+    /** @internal */
+    handlerViewChange: () => () => void;
+    /** @internal */
+    getInputValue: (el: HTMLInputElement, clockType?: string, currentTime?: OptionTypes["currentTime"], updateOptions?: boolean) => InputValueResult;
+}
+
+type TypeFunction = () => void;
+declare class TimepickerUI implements ITimepickerUI {
+    _degreesHours: number | null;
+    _degreesMinutes: number | null;
+    _options: OptionTypes;
+    _eventsClickMobile: (event: Event) => Promise<void>;
+    _eventsClickMobileHandler: EventListenerOrEventListenerObject;
+    _mutliEventsMove: (event: Event) => void;
+    _mutliEventsMoveHandler: EventListenerOrEventListenerObject;
+    _clickTouchEvents: string[];
+    _element: HTMLElement;
+    _instanceId: string;
+    _isMobileView: boolean | null;
+    _isTouchMouseMove: boolean | null;
+    _disabledTime: any;
+    _cloned: Node | null;
+    _inputEvents: string[];
+    _isModalRemove?: boolean;
+    _isInitialized: boolean;
+    _customId?: string;
+    _eventHandlersRegistered: boolean;
+    _isDestroyed: boolean;
+    eventManager: EventManager;
+    modalManager: ModalManager;
+    animationManager: AnimationManager;
+    clockManager: ClockManager;
+    validationManager: ValidationManager;
+    themeManager: ThemeManager;
+    configManager: ConfigManager;
+    constructor(selectorOrElement: string | HTMLElement, options?: OptionTypes);
+    /**
+     * @description Static method to get a timepicker instance by its ID
+     * @param id - The ID of the timepicker instance
+     * @returns TimepickerUI instance or undefined if not found
+     */
+    static getById(id: string): TimepickerUI | undefined;
+    /**
+     * @description Static method to get all active timepicker instances
+     * @returns Array of all active TimepickerUI instances
+     */
+    static getAllInstances(): TimepickerUI[];
+    /**
+     * @description Static method to check if an element is available in the DOM
+     * @param selectorOrElement - String selector or HTMLElement to check
+     * @returns boolean indicating if the element exists
+     */
+    static isAvailable(selectorOrElement: string | HTMLElement): boolean;
+    /**
+     * @description Static method to destroy all timepicker instances
+     */
+    static destroyAll(): void;
+    /** @internal */
+    get modalTemplate(): string;
+    /** @internal */
+    get modalElement(): HTMLDivElement;
+    /** @internal */
+    get clockFace(): HTMLDivElement;
+    /** @internal */
+    get input(): HTMLInputElement;
+    /** @internal */
+    get clockHand(): HTMLDivElement;
+    /** @internal */
+    get circle(): HTMLDivElement;
+    /** @internal */
+    get tipsWrapper(): HTMLDivElement;
+    /** @internal */
+    get tipsWrapperFor24h(): HTMLDivElement;
+    /** @internal */
+    get minutes(): HTMLInputElement;
+    /** @internal */
+    get hour(): HTMLInputElement;
+    /** @internal */
+    get AM(): HTMLDivElement;
+    /** @internal */
+    get PM(): HTMLDivElement;
+    /** @internal */
+    get minutesTips(): HTMLDivElement;
+    /** @internal */
+    get hourTips(): HTMLDivElement;
+    /** @internal */
+    get allValueTips(): HTMLDivElement[];
+    /** @internal */
+    get openElementData(): string[] | null;
+    /** @internal */
+    get openElement(): NodeListOf<Element> | HTMLInputElement[];
+    /** @internal */
+    get cancelButton(): HTMLButtonElement;
+    /** @internal */
+    get okButton(): HTMLButtonElement;
+    /** @internal */
+    get activeTypeMode(): HTMLButtonElement;
+    /** @internal */
+    get keyboardClockIcon(): HTMLButtonElement;
+    /** @internal */
+    get footer(): HTMLDivElement;
+    /** @internal */
+    get wrapper(): HTMLDivElement;
+    /**
+     * @description Returns the root wrapper element (`.timepicker-ui`) for this instance.
+     * This is the element that dispatches custom events like `timepicker:confirm`.
+     * @returns {HTMLElement}
+     */
+    getElement(): HTMLElement;
+    /**
+     * @description The create method that init timepicker
+     */
+    create: () => void;
+    /**
+     * @description The open method opens immediately timepicker after init
+     * @param callback - The callback function triggered when timepicker is open by this method
+     */
+    open: (callback?: () => void) => void;
+    /**
+     * @description Closure method closes the timepicker with double parentheses
+     * @param args - The first parentheses doesn't have any paremeters. The second parentheses accepts parameters and these parameters are optional in this method and order is any. You can set callback function first or boolean,
+     * or just boolean or just callback. If the boolean is set to true the input will be updating with the current value on picker.
+     * The callback function start immediately after close, if is invoke. The max parameters length is set to 2
+     */
+    close: () => (...args: (boolean | TypeFunction)[]) => void;
+    /**
+     * @description
+     * Destroys the current TimepickerUI instance by:
+     * - removing all event listeners
+     * - cleaning up DOM elements related to the modal
+     * - removing all dynamically added classes and data attributes
+     * - clearing handler references for better garbage collection
+     * - resetting internal state
+     *
+     * The original element remains in place (no DOM cloning).
+     * Fully compatible with React, Vue, Angular and vanilla JS.
+     *
+     * @param options - Optional configuration object with:
+     *   - keepInputValue: boolean - if true, preserves input value after destruction (default: false)
+     *   - callback: function - callback executed after cleanup completes
+     */
+    destroy: (options?: {
+        keepInputValue?: boolean;
+        callback?: TypeFunction;
+    } | TypeFunction) => void;
+    /**
+     * @description The update method which update timepicker with new options and can create a new instance.
+     * @param value - The first parameter is a object with key options which is timepicker options and it will be updated to current
+     * instance and is `required`. The `create` key is a boolean which if is set to true it starting the create() method after invoke update
+     * function and is optional. The `create` option is useful if you are using destroy and update methods together.
+     * @param callback - The `callback` function is started after update method. This parameter is optional.
+     */
+    update: (value: {
+        options: OptionTypes;
+        create?: boolean;
+    }, callback?: TypeFunction) => void;
+    /**
+     * @description Get the current time value from the timepicker
+     * @returns Object with hour, minutes, type (AM/PM), and formatted time string
+     */
+    getValue: () => {
+        hour: string;
+        minutes: string;
+        type?: string;
+        time: string;
+        degreesHours: number | null;
+        degreesMinutes: number | null;
+    };
+    /**
+     * @description Set the time value in the timepicker
+     * @param time - Time string in format "HH:MM" for 24h or "HH:MM AM/PM" for 12h
+     * @param updateInput - Whether to update the input element (default: true)
+     */
+    setValue: (time: string, updateInput?: boolean) => void;
+    _eventsBundle: () => void;
+}
+
+export { type OptionTypes, TimepickerUI };