timepicker-ui 3.0.1 → 3.1.0

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 /**
- * @description Callback function type for timepicker events
+ * @description Callback data type for timepicker events
  */
-type TimepickerEventCallback = (eventData: {
+type CallbackData = {
   hour?: string | null;
   minutes?: string | null;
   type?: string | null;
@@ -15,7 +15,12 @@ type TimepickerEventCallback = (eventData: {
   currentMin?: string | number;
   currentType?: string;
   currentLength?: string | number;
-}) => void;
+};
+
+/**
+ * @description Callback function type for timepicker events
+ */
+type TimepickerEventCallback = (eventData: CallbackData) => void;
 
 type OptionTypes = {
   /**
@@ -124,8 +129,9 @@ type OptionTypes = {
    */
   switchToMinutesAfterSelectHour?: boolean;
   /**
-   * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`.
-
+   * @description Set theme to timepicker. Available options: `basic`, `crane-straight`, `crane-radius`, `m3`, `dark`, `glassmorphic`, `pastel`, `ai`, `cyberpunk`, `custom`.
+   *
+   * The `custom` theme allows you to create your own styling by overriding CSS variables.
    * 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.
@@ -140,7 +146,8 @@ type OptionTypes = {
     | 'glassmorphic'
     | 'pastel'
     | 'ai'
-    | 'cyberpunk';
+    | 'cyberpunk'
+    | 'custom';
   /**
    * @description Set type of clock, it contains 2 versions: `12h` and `24h`.
    * @default false
@@ -148,20 +155,20 @@ type OptionTypes = {
   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.
+   * - The `interval` key can accept string or string[] to block select time intervals.
    * - 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",
+      interval: "10:00 AM - 12:00 PM" | ["10:00 AM - 12:00 PM", "5:00 PM - 8:00 PM"],
     }
    * @default  undefined
    */
   disabledTime?: {
     minutes?: Array<string | number>;
     hours?: Array<string | number>;
-    interval?: string;
+    interval?: string | string[];
   };
   /**
    * @description Set current time to the input and timepicker.\
@@ -307,178 +314,69 @@ type OptionTypes = {
   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;
-}
+type InputValueResult = {
+    hour: string;
+    minutes: string;
+    type?: string;
+    error?: string;
+    currentHour?: string | number;
+    currentMin?: string | number;
+    currentType?: string;
+    currentLength?: number;
+};
 
-declare class EventManager {
+declare class ConfigManager {
     private timepicker;
+    private timeouts;
+    private debouncedHandler?;
     constructor(timepicker: ITimepickerUI);
+    private clearAllTimeouts;
+    private runWithTimeout;
+    private isCurrentTimeEnabled;
     /** @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;
+    preventClockTypeByCurrentTime: () => void;
     /** @internal */
-    handlerClickHourMinutes: (event: Event) => Promise<void>;
+    updateInputValueWithCurrentTimeOnStart: () => void;
     /** @internal */
-    handleIconChangeView: () => Promise<void>;
+    checkMobileOption(): void;
     /** @internal */
-    handleKeyPress: (e: KeyboardEvent) => void;
+    getDisableTime(): void;
     /** @internal */
-    handleEscClick: () => void;
+    getInputValueOnOpenAndSet: () => void;
+    private handleModeSwitch;
     /** @internal */
-    focusTrapHandler: () => void;
-    /**
-     * @description Handle real-time input updates for inline mode
-     */
+    handlerViewChange: () => (...args: any[]) => void;
     /** @internal */
-    handleInlineAutoUpdate: () => void;
+    getInputValue: (el: HTMLInputElement, clockType?: string, currentTime?: OptionTypes["currentTime"], updateOptions?: boolean) => InputValueResult;
+    destroy(): void;
 }
 
-declare class ModalManager {
+declare class ThemeManager {
     private timepicker;
     constructor(timepicker: ITimepickerUI);
     /** @internal */
-    setModalTemplate: () => void;
-    /** @internal */
-    setScrollbarOrNot: () => void;
+    setTheme: () => void;
     /** @internal */
-    removeBackdrop: () => void;
+    setInputClassToInputElement: () => void;
     /** @internal */
-    setNormalizeClass: () => void;
+    setDataOpenToInputIfDoesntExistInWrapper: () => void;
     /** @internal */
-    setShowClassToBackdrop: () => void;
+    setClassTopOpenElement: () => void;
     /** @internal */
-    setFlexEndToFooterIfNoKeyboardIcon: () => void;
+    setTimepickerClassToElement: () => void;
+    destroy(): void;
 }
 
-declare class AnimationManager {
+declare class ValidationManager {
     private timepicker;
     constructor(timepicker: ITimepickerUI);
     /** @internal */
-    setAnimationToOpen(): void;
+    setErrorHandler(): boolean | undefined;
     /** @internal */
-    removeAnimationToClose(): void;
-    /** @internal */
-    handleAnimationClock(): void;
+    removeErrorHandler(): void;
     /** @internal */
-    handleAnimationSwitchTipsMode(): void;
+    checkDisabledValuesOnStart(): void;
+    destroy(): void;
 }
 
 declare class ClockManager {
@@ -491,8 +389,6 @@ declare class ClockManager {
     /** @internal */
     setOnStartCSSClassesIfClockType24h(): void;
     /** @internal */
-    setBgColorToCirleWithHourTips: () => void;
-    /** @internal */
     setBgColorToCircleWithMinutesTips: () => void;
     /** @internal */
     removeBgColorToCirleWithMinutesTips: () => void;
@@ -510,64 +406,263 @@ declare class ClockManager {
     toggleClassActiveToValueTips: (value: string | number | null) => void;
 }
 
-declare class ValidationManager {
+declare class AnimationManager {
     private timepicker;
+    private timeouts;
     constructor(timepicker: ITimepickerUI);
+    private runWithAnimation;
+    private clearAllTimeouts;
     /** @internal */
-    setErrorHandler(): void;
+    setAnimationToOpen(): void;
     /** @internal */
-    removeErrorHandler(): void;
+    removeAnimationToClose(): void;
     /** @internal */
-    checkDisabledValuesOnStart(): void;
+    handleAnimationClock(): void;
+    /** @internal */
+    handleAnimationSwitchTipsMode(): void;
+    /** @internal */
+    destroy(): void;
 }
 
-declare class ThemeManager {
+declare class ModalManager {
     private timepicker;
+    private timeouts;
+    private originalOverflow?;
+    private originalPaddingRight?;
     constructor(timepicker: ITimepickerUI);
+    private runWithTimeout;
+    private clearAllTimeouts;
+    private clearExistingModal;
     /** @internal */
-    setTheme: () => void;
+    setModalTemplate: () => void;
     /** @internal */
-    setInputClassToInputElement: () => void;
+    setScrollbarOrNot: () => void;
     /** @internal */
-    setDataOpenToInputIfDosentExistInWrapper: () => void;
+    removeBackdrop: () => void;
     /** @internal */
-    setClassTopOpenElement: () => void;
+    setNormalizeClass: () => void;
     /** @internal */
-    setTimepickerClassToElement: () => void;
+    setShowClassToBackdrop: () => void;
+    /** @internal */
+    setFlexEndToFooterIfNoKeyboardIcon: () => void;
+    /** Cleanup to avoid leaks */
+    destroy(): 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;
+declare class EventManager {
+    private _cleanupHandlers;
+    private buttonHandlers;
+    private dragHandlers;
+    private typeModeHandlers;
+    private inputHandlers;
+    private clockHandPositionUpdater;
+    private miscHandlers;
+    private inlineHandlers;
     constructor(timepicker: ITimepickerUI);
+    destroy(): void;
+    handleOpenOnClick: () => void;
+    handleOpenOnEnterFocus: () => void;
+    handleCancelButton: () => void;
+    handleOkButton: () => void;
+    handleBackdropClick: () => void;
+    handleAmClick: () => void;
+    handlePmClick: () => void;
+    handleHourEvents: () => void;
+    handleMinutesEvents: () => void;
+    handleEventToMoveHand: (event: TouchEvent) => void;
+    handleMoveHand: () => void;
+    handleClickOnHourMobile: () => void;
+    handlerClickHourMinutes: (event: Event) => Promise<void>;
+    handleIconChangeView: () => Promise<void>;
+    handleEscClick: () => void;
+    focusTrapHandler: () => void;
+    handleInlineAutoUpdate: () => void;
+    get _isDragging(): boolean;
+    get _animationFrameId(): number | null;
+    _onDragStart: (event: MouseEvent | TouchEvent) => void;
+    _onDragMove: (event: MouseEvent | TouchEvent) => void;
+    _onDragEnd: (event: MouseEvent | TouchEvent) => void;
+}
+
+declare class ClockFaceManager {
+    private array?;
+    private classToAdd?;
+    private clockFace?;
+    private tipsWrapper?;
+    private theme?;
+    private clockType?;
+    private disabledTime?;
+    private hour?;
+    private activeTypeMode?;
+    constructor(obj?: {
+        array?: string[];
+        classToAdd?: string;
+        clockFace?: HTMLElement;
+        tipsWrapper?: HTMLElement;
+        theme?: string;
+        clockType?: string;
+        disabledTime?: any;
+        hour?: any;
+        activeTypeMode?: string;
+    });
+    /** @internal */
+    clean: () => void;
     /** @internal */
-    preventClockTypeByCurrentTime: () => void;
-    /** @internal */
-    updateInputValueWithCurrentTimeOnStart: () => void;
-    /** @internal */
-    checkMobileOption(): void;
-    /** @internal */
-    getDisableTime(): void;
-    /** @internal */
-    getInputValueOnOpenAndSet: () => void;
+    create: () => void;
     /** @internal */
-    handlerViewChange: () => () => void;
+    updateDisable: (hour?: string, activeTypeMode?: string) => void;
     /** @internal */
-    getInputValue: (el: HTMLInputElement, clockType?: string, currentTime?: OptionTypes["currentTime"], updateOptions?: boolean) => InputValueResult;
+    private _removeClasses;
+    /** Cleanup */
+    destroy(): void;
 }
 
-type TypeFunction = () => void;
-declare class TimepickerUI implements ITimepickerUI {
+interface ClockFaceConfig {
+    array?: string[];
+    classToAdd?: string;
+    clockFace?: HTMLElement;
+    tipsWrapper?: HTMLElement;
+    theme?: string;
+    clockType?: string;
+    disabledTime?: {
+        isInterval?: boolean;
+        intervals?: string[];
+        clockType?: string;
+    } | string[] | null;
+    hour?: string;
+    activeTypeMode?: string;
+}
+declare class ClockFaceManagerPool {
+    private pool;
+    private maxSize;
+    acquire(config: ClockFaceConfig): ClockFaceManager;
+    release(instance: ClockFaceManager): void;
+    clear(): void;
+}
+
+type EventHandler<T = CallbackData> = (data: T) => void;
+interface TimepickerEventMap {
+    open: CallbackData;
+    cancel: CallbackData;
+    confirm: CallbackData;
+    show: CallbackData;
+    hide: CallbackData;
+    update: CallbackData;
+    'select:hour': CallbackData;
+    'select:minute': CallbackData;
+    'select:am': CallbackData;
+    'select:pm': CallbackData;
+    error: CallbackData;
+}
+declare class EventEmitter<EventMap extends Record<string, any> = TimepickerEventMap> {
+    private events;
+    on<K extends keyof EventMap>(event: K, handler: EventHandler<EventMap[K]>): void;
+    once<K extends keyof EventMap>(event: K, handler: EventHandler<EventMap[K]>): void;
+    off<K extends keyof EventMap>(event: K, handler?: EventHandler<EventMap[K]>): void;
+    emit<K extends keyof EventMap>(event: K, data?: EventMap[K]): void;
+    clear(): void;
+    hasListeners<K extends keyof EventMap>(event: K): boolean;
+}
+
+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: {
+    value?: {
+      isInterval?: boolean;
+      intervals?: string[];
+      clockType?: string;
+      hours?: string[];
+      minutes?: string[];
+    };
+  } | null;
+  _cloned: Node | null;
+  _inputEvents: string[];
+  _isModalRemove?: boolean;
+  _isInitialized: boolean;
+  _customId?: string;
+
+  clockFacePool: ClockFaceManagerPool;
+
+  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: NodeListOf<Element> | readonly [HTMLInputElement];
+  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;
+  setTheme(themeConfig: {
+    primaryColor?: string;
+    backgroundColor?: string;
+    surfaceColor?: string;
+    surfaceHoverColor?: string;
+    textColor?: string;
+    secondaryTextColor?: string;
+    disabledTextColor?: string;
+    onPrimaryColor?: string;
+    borderColor?: string;
+    shadow?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+  }): void;
+
+  on<K extends keyof TimepickerEventMap>(event: K, handler: (data: TimepickerEventMap[K]) => void): void;
+  once<K extends keyof TimepickerEventMap>(event: K, handler: (data: TimepickerEventMap[K]) => void): void;
+  off<K extends keyof TimepickerEventMap>(event: K, handler?: (data: TimepickerEventMap[K]) => void): void;
+
+  eventManager?: EventManager;
+  modalManager?: ModalManager;
+  animationManager?: AnimationManager;
+  clockManager?: ClockManager;
+  validationManager?: ValidationManager;
+  themeManager?: ThemeManager;
+  configManager?: ConfigManager;
+}
+
+declare class TimepickerCore {
     _degreesHours: number | null;
     _degreesMinutes: number | null;
     _options: OptionTypes;
@@ -580,7 +675,15 @@ declare class TimepickerUI implements ITimepickerUI {
     _instanceId: string;
     _isMobileView: boolean | null;
     _isTouchMouseMove: boolean | null;
-    _disabledTime: any;
+    _disabledTime: {
+        value?: {
+            isInterval?: boolean;
+            intervals?: string[];
+            clockType?: string;
+            hours?: string[];
+            minutes?: string[];
+        };
+    } | null;
     _cloned: Node | null;
     _inputEvents: string[];
     _isModalRemove?: boolean;
@@ -588,6 +691,21 @@ declare class TimepickerUI implements ITimepickerUI {
     _customId?: string;
     _eventHandlersRegistered: boolean;
     _isDestroyed: boolean;
+    _pendingThemeConfig?: {
+        primaryColor?: string;
+        backgroundColor?: string;
+        surfaceColor?: string;
+        surfaceHoverColor?: string;
+        textColor?: string;
+        secondaryTextColor?: string;
+        disabledTextColor?: string;
+        onPrimaryColor?: string;
+        borderColor?: string;
+        shadow?: string;
+        borderRadius?: string;
+        fontFamily?: string;
+    };
+    clockFacePool: ClockFaceManagerPool;
     eventManager: EventManager;
     modalManager: ModalManager;
     animationManager: AnimationManager;
@@ -595,131 +713,54 @@ declare class TimepickerUI implements ITimepickerUI {
     validationManager: ValidationManager;
     themeManager: ThemeManager;
     configManager: ConfigManager;
+    private _eventEmitter;
     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 modalTemplate(): any;
     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 openElement(): NodeListOf<Element> | readonly [HTMLInputElement];
     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
-     */
+    on<K extends keyof TimepickerEventMap>(event: K, handler: (data: TimepickerEventMap[K]) => void): void;
+    once<K extends keyof TimepickerEventMap>(event: K, handler: (data: TimepickerEventMap[K]) => void): void;
+    off<K extends keyof TimepickerEventMap>(event: K, handler?: (data: TimepickerEventMap[K]) => void): void;
+    protected emit<K extends keyof TimepickerEventMap>(event: K, data?: TimepickerEventMap[K]): void;
+    protected _applyThemeToWrapper(wrapper: HTMLElement): void;
+}
+
+type TypeFunction$1 = () => void;
+declare class TimepickerLifecycle extends TimepickerCore {
     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
-     */
+    close: () => (...args: (boolean | TypeFunction$1)[]) => void;
     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
-     */
+        callback?: TypeFunction$1;
+    } | TypeFunction$1) => void;
+    protected onDestroy?: () => void;
+    _eventsBundle: () => void;
+}
+
+type TypeFunction = () => void;
+declare class TimepickerAPI extends TimepickerLifecycle {
     getValue: () => {
         hour: string;
         minutes: string;
@@ -728,13 +769,33 @@ declare class TimepickerUI implements ITimepickerUI {
         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;
+    update: (value: {
+        options: OptionTypes;
+        create?: boolean;
+    }, callback?: TypeFunction) => void;
+    setTheme(themeConfig: {
+        primaryColor?: string;
+        backgroundColor?: string;
+        surfaceColor?: string;
+        surfaceHoverColor?: string;
+        textColor?: string;
+        secondaryTextColor?: string;
+        disabledTextColor?: string;
+        onPrimaryColor?: string;
+        borderColor?: string;
+        shadow?: string;
+        borderRadius?: string;
+        fontFamily?: string;
+    }): void;
+}
+
+declare class TimepickerUI extends TimepickerAPI implements ITimepickerUI {
+    constructor(selectorOrElement: string | HTMLElement, options?: OptionTypes);
+    static getById(id: string): TimepickerUI | undefined;
+    static getAllInstances(): TimepickerUI[];
+    static isAvailable(selectorOrElement: string | HTMLElement): boolean;
+    static destroyAll(): void;
 }
 
-export { type OptionTypes, TimepickerUI };
+export { type CallbackData, EventEmitter, type OptionTypes, TimepickerUI, TimepickerUI as default };