@keenthemes/ktui 1.0.28 → 1.1.0

package/src/components/datepicker/__tests__/time-preservation.test.ts

@@ -0,0 +1,387 @@
+/**
+ * time-preservation.test.ts - Tests for time preservation on calendar date clicks
+ * Ensures time is preserved across single, range, and multi-date selection modes
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { KTDatepicker } from '../datepicker';
+import { dateToTimeState, applyTimeToDate } from '../utils/time-utils';
+
+describe('KTDatepicker Time Preservation', () => {
+	let container: HTMLElement;
+	let datepicker: KTDatepicker;
+
+	beforeEach(() => {
+		// Create a fresh container for each test
+		container = document.createElement('div');
+		container.innerHTML = `
+      <div class="kt-datepicker" data-kt-datepicker>
+        <input type="text" data-kt-datepicker-input placeholder="Select date">
+      </div>
+    `;
+		document.body.innerHTML = '';
+		document.body.appendChild(container);
+	});
+
+	afterEach(() => {
+		if (datepicker) {
+			datepicker.destroy();
+		}
+		document.body.innerHTML = '';
+	});
+
+	describe('Single Date Mode', () => {
+		it('should preserve time when selectedTime exists', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 14, 30, 0); // Jan 15, 2024, 2:30 PM
+
+			datepicker = new KTDatepicker(element, {
+				enableTime: true,
+				value: initialDate,
+			});
+
+			// Verify initial date has time set
+			const initialState = datepicker.getState();
+			expect(initialState.selectedDate).toBeDefined();
+			expect(initialState.selectedDate?.getHours()).toBe(14);
+			expect(initialState.selectedDate?.getMinutes()).toBe(30);
+
+			// Select a new date
+			const newDate = new Date(2024, 0, 20, 0, 0, 0); // Jan 20, 2024, midnight
+			datepicker.setDate(newDate);
+
+			// Verify time is preserved
+			const newState = datepicker.getState();
+			expect(newState.selectedDate).toBeDefined();
+			expect(newState.selectedDate?.getDate()).toBe(20);
+			expect(newState.selectedDate?.getHours()).toBe(14);
+			expect(newState.selectedDate?.getMinutes()).toBe(30);
+		});
+
+		it('should extract time from selectedDate when selectedTime is missing', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 16, 45, 0); // Jan 15, 2024, 4:45 PM
+
+			datepicker = new KTDatepicker(element, {
+				enableTime: true,
+				value: initialDate,
+			});
+
+			// Clear selectedTime state (simulate missing state)
+			const state = datepicker.getState();
+			(datepicker as any)._unifiedStateManager.updateState(
+				{ selectedTime: null },
+				'test-clear'
+			);
+
+			// Select a new date
+			const newDate = new Date(2024, 0, 25, 0, 0, 0);
+			datepicker.setDate(newDate);
+
+			// Verify time is extracted from selectedDate
+			const newState = datepicker.getState();
+			expect(newState.selectedDate?.getDate()).toBe(25);
+			expect(newState.selectedDate?.getHours()).toBe(16);
+			expect(newState.selectedDate?.getMinutes()).toBe(45);
+		});
+
+		it('should default to current time when no time exists', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const now = new Date();
+
+			datepicker = new KTDatepicker(element, {
+				enableTime: true,
+			});
+
+			// Select a date
+			const newDate = new Date(2024, 0, 15, 0, 0, 0);
+			datepicker.setDate(newDate);
+
+			// Verify time defaults to current time
+			const state = datepicker.getState();
+			expect(state.selectedDate).toBeDefined();
+			expect(state.selectedDate?.getDate()).toBe(15);
+			// Allow 1-minute tolerance for test execution time
+			const timeDiff = Math.abs(state.selectedDate!.getHours() - now.getHours());
+			expect(timeDiff).toBeLessThanOrEqual(1);
+		});
+
+		it('should not reset time to midnight', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 10, 15, 30); // Jan 15, 2024, 10:15:30 AM
+
+			datepicker = new KTDatepicker(element, {
+				enableTime: true,
+				timeGranularity: 'second',
+				value: initialDate,
+			});
+
+			// Select a new date
+			const newDate = new Date(2024, 0, 20, 0, 0, 0);
+			datepicker.setDate(newDate);
+
+			// Verify time is NOT midnight
+			const state = datepicker.getState();
+			expect(state.selectedDate?.getHours()).not.toBe(0);
+			expect(state.selectedDate?.getMinutes()).not.toBe(0);
+			expect(state.selectedDate?.getSeconds()).not.toBe(0);
+			expect(state.selectedDate?.getHours()).toBe(10);
+			expect(state.selectedDate?.getMinutes()).toBe(15);
+			expect(state.selectedDate?.getSeconds()).toBe(30);
+		});
+	});
+
+	describe('Range Selection Mode', () => {
+		it('should preserve time for both start and end dates', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 14, 30, 0); // Jan 15, 2024, 2:30 PM
+
+			datepicker = new KTDatepicker(element, {
+				range: true,
+				enableTime: true,
+			});
+
+			// Manually set selectedTime to simulate time picker selection
+			// Use immediate update (third parameter = true)
+			(datepicker as any)._unifiedStateManager.updateState(
+				{ selectedTime: { hour: 14, minute: 30, second: 0 } },
+				'test-init',
+				true
+			);
+
+			// Select start date (first click creates start)
+			const startDate = new Date(2024, 0, 10, 0, 0, 0);
+			(datepicker as any)._selectRangeDate(startDate);
+
+			// Verify start has time preserved
+			const afterStartState = datepicker.getState();
+			expect(afterStartState.selectedRange?.start?.getDate()).toBe(10);
+			expect(afterStartState.selectedRange?.start?.getHours()).toBe(14);
+			expect(afterStartState.selectedRange?.start?.getMinutes()).toBe(30);
+
+			// Select end date (second click creates end)
+			const endDate = new Date(2024, 0, 20, 0, 0, 0);
+			(datepicker as any)._selectRangeDate(endDate);
+
+			// Verify both dates preserve time
+			const newState = datepicker.getState();
+			expect(newState.selectedRange).toBeDefined();
+			expect(newState.selectedRange?.start).toBeDefined();
+			expect(newState.selectedRange?.end).toBeDefined();
+
+			expect(newState.selectedRange?.start?.getDate()).toBe(10);
+			expect(newState.selectedRange?.start?.getHours()).toBe(14);
+			expect(newState.selectedRange?.start?.getMinutes()).toBe(30);
+
+			expect(newState.selectedRange?.end?.getDate()).toBe(20);
+			expect(newState.selectedRange?.end?.getHours()).toBe(14);
+			expect(newState.selectedRange?.end?.getMinutes()).toBe(30);
+		});
+
+		it('should not reset range dates to midnight', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 16, 45, 0); // Jan 15, 2024, 4:45 PM
+
+			datepicker = new KTDatepicker(element, {
+				range: true,
+				enableTime: true,
+				value: initialDate,
+			});
+
+			// Select start and end dates
+			const startDate = new Date(2024, 0, 10, 0, 0, 0);
+			(datepicker as any)._selectRangeDate(startDate);
+
+			const endDate = new Date(2024, 0, 25, 0, 0, 0);
+			(datepicker as any)._selectRangeDate(endDate);
+
+			// Verify time is NOT midnight for either date
+			const state = datepicker.getState();
+			expect(state.selectedRange?.start?.getHours()).not.toBe(0);
+			expect(state.selectedRange?.start?.getMinutes()).not.toBe(0);
+			expect(state.selectedRange?.end?.getHours()).not.toBe(0);
+			expect(state.selectedRange?.end?.getMinutes()).not.toBe(0);
+		});
+
+		it('should extract time from range start when selectedTime is missing', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+
+			datepicker = new KTDatepicker(element, {
+				range: true,
+				enableTime: true,
+				valueRange: {
+					start: new Date(2024, 0, 10, 13, 20, 0), // Jan 10, 2024, 1:20 PM
+					end: new Date(2024, 0, 15, 13, 20, 0), // Jan 15, 2024, 1:20 PM
+				},
+			});
+
+			// Clear selectedTime
+			(datepicker as any)._unifiedStateManager.updateState(
+				{ selectedTime: null },
+				'test-clear'
+			);
+
+			// Reset range to only have start
+			(datepicker as any)._unifiedStateManager.setSelectedRange(
+				{
+					start: new Date(2024, 0, 10, 13, 20, 0),
+					end: null,
+				},
+				'test-reset'
+			);
+
+			// Select a new end date
+			const newEndDate = new Date(2024, 0, 25, 0, 0, 0);
+			(datepicker as any)._selectRangeDate(newEndDate);
+
+			// Verify time is extracted from range start
+			const state = datepicker.getState();
+			expect(state.selectedRange?.end?.getDate()).toBe(25);
+			expect(state.selectedRange?.end?.getHours()).toBe(13);
+			expect(state.selectedRange?.end?.getMinutes()).toBe(20);
+		});
+	});
+
+	describe('Multi-Date Selection Mode', () => {
+		it('should preserve time for all selected dates', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 11, 30, 0); // Jan 15, 2024, 11:30 AM
+
+			datepicker = new KTDatepicker(element, {
+				multiDate: true,
+				enableTime: true,
+				values: [initialDate],
+			});
+
+			// Verify initial date has time set
+			const initialState = datepicker.getState();
+			expect(initialState.selectedDates).toBeDefined();
+			expect(initialState.selectedDates.length).toBe(1);
+			expect(initialState.selectedDates[0].getHours()).toBe(11);
+			expect(initialState.selectedDates[0].getMinutes()).toBe(30);
+
+			// Select multiple dates
+			const date1 = new Date(2024, 0, 10, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(date1);
+
+			const date2 = new Date(2024, 0, 20, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(date2);
+
+			const date3 = new Date(2024, 0, 25, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(date3);
+
+			// Verify all dates preserve time
+			const newState = datepicker.getState();
+			expect(newState.selectedDates).toBeDefined();
+			expect(newState.selectedDates.length).toBeGreaterThan(1);
+
+			newState.selectedDates.forEach((date) => {
+				expect(date.getHours()).toBe(11);
+				expect(date.getMinutes()).toBe(30);
+			});
+		});
+
+		it('should not reset multi-dates to midnight', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+			const initialDate = new Date(2024, 0, 15, 9, 15, 0); // Jan 15, 2024, 9:15 AM
+
+			datepicker = new KTDatepicker(element, {
+				multiDate: true,
+				enableTime: true,
+				value: initialDate,
+			});
+
+			// Select dates
+			const date1 = new Date(2024, 0, 10, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(date1);
+
+			const date2 = new Date(2024, 0, 20, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(date2);
+
+			// Verify time is NOT midnight for any date
+			const state = datepicker.getState();
+			state.selectedDates.forEach((date) => {
+				expect(date.getHours()).not.toBe(0);
+				expect(date.getMinutes()).not.toBe(0);
+			});
+		});
+
+		it('should extract time from existing selected dates when selectedTime is missing', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+
+			datepicker = new KTDatepicker(element, {
+				multiDate: true,
+				enableTime: true,
+				values: [
+					new Date(2024, 0, 10, 15, 45, 0), // Jan 10, 2024, 3:45 PM
+					new Date(2024, 0, 15, 15, 45, 0), // Jan 15, 2024, 3:45 PM
+				],
+			});
+
+			// Clear selectedTime
+			(datepicker as any)._unifiedStateManager.updateState(
+				{ selectedTime: null },
+				'test-clear'
+			);
+
+			// Select a new date
+			const newDate = new Date(2024, 0, 25, 0, 0, 0);
+			(datepicker as any)._selectMultiDate(newDate);
+
+			// Verify time is extracted from existing dates
+			const state = datepicker.getState();
+			const addedDate = state.selectedDates.find((d) => d.getDate() === 25);
+			expect(addedDate).toBeDefined();
+			expect(addedDate?.getHours()).toBe(15);
+			expect(addedDate?.getMinutes()).toBe(45);
+		});
+	});
+
+	describe('Date-Only Mode (No Time)', () => {
+		it('should not apply time when enableTime is false', () => {
+			const element = container.querySelector('[data-kt-datepicker]') as HTMLElement;
+
+			datepicker = new KTDatepicker(element, {
+				enableTime: false,
+			});
+
+			// Select a date
+			const date = new Date(2024, 0, 15, 0, 0, 0);
+			datepicker.setDate(date);
+
+			// Verify time remains at midnight (default for date-only)
+			const state = datepicker.getState();
+			expect(state.selectedDate?.getDate()).toBe(15);
+			// Time should be normalized to midnight for date-only mode
+			expect(state.selectedDate?.getHours()).toBe(0);
+			expect(state.selectedDate?.getMinutes()).toBe(0);
+			expect(state.selectedDate?.getSeconds()).toBe(0);
+		});
+	});
+
+	describe('Time Utility Functions', () => {
+		it('dateToTimeState should extract time correctly', () => {
+			const date = new Date(2024, 0, 15, 14, 30, 45);
+			const timeState = dateToTimeState(date);
+
+			expect(timeState.hour).toBe(14);
+			expect(timeState.minute).toBe(30);
+			expect(timeState.second).toBe(45);
+		});
+
+		it('applyTimeToDate should preserve date and apply time', () => {
+			const date = new Date(2024, 0, 15, 0, 0, 0);
+			const timeState = { hour: 16, minute: 45, second: 30 };
+
+			const result = applyTimeToDate(date, timeState);
+
+			expect(result.getFullYear()).toBe(2024);
+			expect(result.getMonth()).toBe(0);
+			expect(result.getDate()).toBe(15);
+			expect(result.getHours()).toBe(16);
+			expect(result.getMinutes()).toBe(45);
+			expect(result.getSeconds()).toBe(30);
+		});
+	});
+});
+

package/src/components/datepicker/config/config.ts

@@ -0,0 +1,40 @@
+import { KTDatepickerConfig } from './types';
+
+/**
+ * Default configuration for KTDatepicker
+ */
+export const defaultDatepickerConfig: KTDatepickerConfig = {
+  templates: {},
+  format: 'yyyy-MM-dd',
+  range: false,
+  multiDate: false,
+  minDate: undefined,
+  maxDate: undefined,
+  disabled: false,
+  locale: 'en-US',
+  placeholder: '',
+  value: undefined,
+  valueRange: undefined,
+  values: undefined,
+  showOnFocus: true,
+  closeOnSelect: false, // Default: don't close dropdown by default
+  closeOnOutsideClick: true, // Default: close dropdown when clicking outside
+  // Number of calendar months to display side-by-side (horizontal). Default: 1.
+  visibleMonths: 1,
+  // Time-related defaults
+  enableTime: false,
+  timeGranularity: 'minute',
+  timeFormat: '24h',
+  minTime: undefined,
+  maxTime: undefined,
+  timeStep: 1,
+  // Dropdown defaults
+  dropdownPlacement: 'bottom-end', // Position relative to calendar button (right side)
+  dropdownOffset: '0, 5',
+  dropdownBoundary: 'clippingParents',
+  dropdownWidth: 'auto', // 'auto' for fixed CSS width (20rem), 'toggle' to match input width, or custom string value
+  dropdownZindex: undefined,
+  dropdownContainer: undefined,
+  // Custom classes for template elements
+  classes: {},
+};

package/src/components/datepicker/config/index.ts

@@ -0,0 +1,8 @@
+/*
+ * config/index.ts - Configuration module exports
+ * Provides types, interfaces, and default configuration for KTDatepicker
+ */
+
+export * from './types';
+export * from './interfaces';
+export * from './config';

package/src/components/datepicker/config/interfaces.ts

@@ -0,0 +1,82 @@
+/*
+ * interfaces.ts - Interfaces for KTDatepicker components
+ * Defines contracts between components to reduce coupling and improve testability.
+ */
+
+import { KTDatepickerConfig, KTDatepickerState, KTDatepickerTemplateStrings } from './types';
+
+/**
+ * Interface for UI rendering operations
+ */
+export interface IUIRenderer {
+  renderContainer(): HTMLElement;
+  renderInputWrapper(calendarButtonHtml: string): HTMLElement;
+  renderDropdown(): HTMLElement;
+  renderDropdownContent(dropdownEl: HTMLElement): void;
+  renderCalendarButton(): string;
+  updateState(newState: KTDatepickerState): void;
+  updateConfig(newConfig: KTDatepickerConfig): void;
+}
+
+/**
+ * Interface for state management operations
+ */
+export interface IStateManager {
+  isOpen(): boolean;
+  isTransitioning(): boolean;
+  isDisabled(): boolean;
+  open(source?: string): boolean;
+  close(source?: string): boolean;
+  toggle(source?: string): boolean;
+  enable(source?: string): boolean;
+  disable(source?: string): boolean;
+  setFocus(focused: boolean, source?: string): boolean;
+  getState(): any;
+  subscribe(observer: (event: any) => void): () => void;
+  dispose(): void;
+}
+
+/**
+ * Interface for event management operations
+ */
+export interface IEventManager {
+  addListener(element: HTMLElement, event: string, handler: (e: Event) => void): void;
+  removeListener(element: HTMLElement, event: string, handler: (e: Event) => void): void;
+  removeAllListeners(element: HTMLElement): void;
+}
+
+/**
+ * Interface for dropdown positioning operations
+ */
+export interface IDropdownManager {
+  open(): void;
+  close(): void;
+  isOpen(): boolean;
+  updatePosition(): void;
+  dispose(): void;
+}
+
+/**
+ * Interface for date selection operations
+ */
+export interface IDateSelector {
+  selectDate(date: Date): void;
+  selectRange(start: Date, end: Date): void;
+  selectMultipleDates(dates: Date[]): void;
+  clearSelection(): void;
+  getSelectedDate(): Date | null;
+  getSelectedRange(): { start: Date | null; end: Date | null } | null;
+  getSelectedDates(): Date[];
+}
+
+/**
+ * Interface for input management operations
+ */
+export interface IInputManager {
+  setValue(value: string): void;
+  getValue(): string;
+  setPlaceholder(placeholder: string): void;
+  setDisabled(disabled: boolean): void;
+  focus(): void;
+  blur(): void;
+}

package/src/components/datepicker/config/types.ts

@@ -0,0 +1,188 @@
+/*
+ * types.ts - Type definitions for KTDatepicker (revamp)
+ * Defines config, template, and state interfaces for modular, extensible template customization.
+ */
+
+// Template keys for all customizable UI fragments
+export type KTDatepickerTemplateKey =
+  | 'container'
+  | 'header'
+  | 'footer'
+  | 'calendarGrid'
+  | 'dayCell'
+  | 'monthYearSelect'
+  | 'monthSelection'
+  | 'yearSelection'
+  | 'inputWrapper'
+  | 'segmentedDateInput'
+  | 'segmentedDateRangeInput'
+  | 'placeholder'
+  | 'displayWrapper'
+  | 'displayElement'
+  | 'timePanel'
+  | 'multiDateTag'
+  | 'emptyState'
+  | 'calendarButton'
+  | 'dropdown'
+  | 'prevButton'
+  | 'nextButton'
+  | 'calendarTable'
+  | 'calendarRow'
+  | 'calendarBody'
+  | 'todayButton'
+  | 'clearButton'
+  | 'applyButton'
+  | 'multiMonthContainer'
+  | 'dateSegment'
+  | 'segmentSeparator'
+  | 'timePickerWrapper'
+  | 'timeDisplay'
+  | 'timeControls'
+  | 'timeUnit'
+  | 'timeUpButton'
+  | 'timeDownButton'
+  | 'timeValue'
+  | 'timeSeparator'
+  | 'ampmControl'
+  | 'ampmButton'
+  | 'panel'
+  | 'liveRegion'
+  | 'rangeStartContainer'
+  | 'rangeEndContainer';
+
+// Template string map
+export type KTDatepickerTemplateStrings = {
+  [K in KTDatepickerTemplateKey]?: string | ((data: any) => string);
+};
+
+/**
+ * Configuration options for KTDatepicker
+ */
+export interface KTDatepickerConfig {
+  /** Custom templates for UI fragments */
+  templates?: KTDatepickerTemplateStrings;
+  /** Date format string (e.g. 'yyyy-mm-dd', 'dd/mm/yyyy') */
+  format?: string;
+  /** Enable date range selection */
+  range?: boolean;
+  /** Enable multi-date selection */
+  multiDate?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date | string;
+  /** Maximum selectable date */
+  maxDate?: Date | string;
+  /** Disable the datepicker */
+  disabled?: boolean;
+  /** Locale for date formatting (e.g. 'en-US') */
+  locale?: string;
+  /** Placeholder text for the input */
+  placeholder?: string;
+  /** Initial selected date */
+  value?: Date | string;
+  /** Initial selected date range */
+  valueRange?: { start: Date | string; end: Date | string };
+  /** Initial selected dates (multi-date) */
+  values?: (Date | string)[];
+  /** Custom class for the root element */
+  className?: string;
+  /** Whether to show the calendar on input focus (default: true) */
+  showOnFocus?: boolean;
+  /** Whether to close the calendar on date selection (default: true) */
+  closeOnSelect?: boolean;
+  /** Whether to close the calendar when clicking outside (default: true) */
+  closeOnOutsideClick?: boolean;
+  /**
+   * Number of calendar months to display side-by-side (horizontal). Default: 1.
+   */
+  visibleMonths?: number;
+  /** Enable time selection (default: false) */
+  enableTime?: boolean;
+  /** Time granularity - smallest unit to display (default: 'minute') */
+  timeGranularity?: 'second' | 'minute' | 'hour';
+  /** Time format - 12 or 24 hour (default: '24h') */
+  timeFormat?: '12h' | '24h';
+  /** Minimum time constraint (format: 'HH:MM' or 'HH:MM:SS') */
+  minTime?: string;
+  /** Maximum time constraint (format: 'HH:MM' or 'HH:MM:SS') */
+  maxTime?: string;
+  /** Time step increment in minutes (default: 1) */
+  timeStep?: number;
+  /** Dropdown positioning and behavior options */
+  dropdownPlacement?: string;
+  dropdownOffset?: string;
+  dropdownBoundary?: string;
+  dropdownWidth?: 'auto' | 'toggle' | string;
+  dropdownZindex?: number;
+  dropdownContainer?: string;
+  /** Custom classes for template elements */
+  classes?: {
+    container?: string;
+    header?: string;
+    footer?: string;
+    calendarGrid?: string;
+    dayCell?: string;
+    monthYearSelect?: string;
+    monthSelection?: string;
+    yearSelection?: string;
+    inputWrapper?: string;
+    segmentedDateInput?: string;
+    segmentedDateRangeInput?: string;
+    dateSegment?: string;
+    segmentSeparator?: string;
+    placeholder?: string;
+    displayWrapper?: string;
+    displayElement?: string;
+    timePanel?: string;
+    multiDateTag?: string;
+    emptyState?: string;
+    calendarButton?: string;
+    dropdown?: string;
+    prevButton?: string;
+    nextButton?: string;
+    calendarTable?: string;
+    calendarRow?: string;
+    calendarBody?: string;
+    todayButton?: string;
+    clearButton?: string;
+    applyButton?: string;
+    multiMonthContainer?: string;
+  };
+  /** Any additional custom config options */
+  [key: string]: any;
+}
+
+// Time state interface
+export interface TimeState {
+  hour: number;
+  minute: number;
+  second: number;
+}
+
+// State interface for KTDatepicker
+/**
+ * Dropdown state interface
+ */
+export interface DropdownState {
+  isOpen: boolean;
+  isTransitioning: boolean;
+  isDisabled: boolean;
+  isFocused: boolean;
+}
+
+export interface KTDatepickerState {
+  currentDate: Date;
+  selectedDate: Date | null;
+  selectedRange: { start: Date | null; end: Date | null } | null;
+  selectedDates: Date[];
+  selectedTime: TimeState | null;
+  timeGranularity: 'second' | 'minute' | 'hour';
+  viewMode: 'days' | 'months' | 'years';
+  isOpen: boolean;
+  isFocused: boolean;
+  isTransitioning: boolean;
+  isDisabled: boolean;
+  validationErrors: string[];
+  isValid: boolean;
+  // Dropdown state (consolidated from legacy state manager)
+  dropdownState: DropdownState;
+}