@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/datepicker/datepicker.style.variables.js

@@ -7,113 +7,113 @@ export const styleVariables = css `
      * ======================================== */
 
     /* Base datepicker styling - uses theme variables with fallbacks */
-    --nuraly-datepicker-local-background-color: var(--nuraly-color-datepicker-background, #ffffff);
-    --nuraly-datepicker-local-text-color: var(--nuraly-color-datepicker-text, #000000);
-    --nuraly-datepicker-local-font-family: var(--nuraly-font-family-datepicker, Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif);
-    --nuraly-datepicker-local-font-size: var(--nuraly-font-size-datepicker, 14px);
-    
+    --nuraly-datepicker-local-background-color: #ffffff;
+    --nuraly-datepicker-local-text-color: #000000;
+    --nuraly-datepicker-local-font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
+    --nuraly-datepicker-local-font-size: 14px;
+
     /* Datepicker borders - theme-aware */
-    --nuraly-datepicker-local-border-color: var(--nuraly-color-datepicker-border, #d9d9d9);
-    --nuraly-datepicker-local-border-width: var(--nuraly-border-width-datepicker, 1px);
-    --nuraly-datepicker-local-border-radius: var(--nuraly-border-radius-datepicker, 8px);
-    
+    --nuraly-datepicker-local-border-color: #d9d9d9;
+    --nuraly-datepicker-local-border-width: 1px;
+    --nuraly-datepicker-local-border-radius: 8px;
+
     /* Primary and selection colors - theme-aware */
-    --nuraly-datepicker-local-primary-color: var(--nuraly-color-datepicker-primary, #1677ff);
-    --nuraly-datepicker-local-selected-color: var(--nuraly-color-datepicker-selected, #1677ff);
-    --nuraly-datepicker-local-selected-text-color: var(--nuraly-color-datepicker-selected-text, #ffffff);
-    --nuraly-datepicker-local-hover-color: var(--nuraly-color-datepicker-hover, #f5f5f5);
-    --nuraly-datepicker-local-today-color: var(--nuraly-color-datepicker-today, #1677ff);
-    
+    --nuraly-datepicker-local-primary-color: #1677ff;
+    --nuraly-datepicker-local-selected-color: #1677ff;
+    --nuraly-datepicker-local-selected-text-color: #ffffff;
+    --nuraly-datepicker-local-hover-color: #f5f5f5;
+    --nuraly-datepicker-local-today-color: #1677ff;
+
     /* Disabled states - theme-aware */
-    --nuraly-datepicker-local-disabled-color: var(--nuraly-color-datepicker-disabled, #f5f5f5);
-    --nuraly-datepicker-local-disabled-text-color: var(--nuraly-color-datepicker-disabled-text, #bfbfbf);
-    --nuraly-datepicker-local-disabled-opacity: var(--nuraly-opacity-datepicker-disabled, 0.5);
-    
+    --nuraly-datepicker-local-disabled-color: #f5f5f5;
+    --nuraly-datepicker-local-disabled-text-color: #bfbfbf;
+    --nuraly-datepicker-local-disabled-opacity: 0.5;
+
     /* Input field colors - theme-aware */
-    --nuraly-datepicker-local-input-background: var(--nuraly-color-datepicker-input-background, #ffffff);
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-color-datepicker-input-border, #d9d9d9);
-    --nuraly-datepicker-local-input-focus-border-color: var(--nuraly-color-datepicker-input-focus-border, #1677ff);
-    --nuraly-datepicker-local-input-text-color: var(--nuraly-color-datepicker-input-text, #000000);
-    --nuraly-datepicker-local-input-placeholder-color: var(--nuraly-color-datepicker-input-placeholder, #bfbfbf);
-    
+    --nuraly-datepicker-local-input-background: #ffffff;
+    --nuraly-datepicker-local-input-border-color: #d9d9d9;
+    --nuraly-datepicker-local-input-focus-border-color: #1677ff;
+    --nuraly-datepicker-local-input-text-color: #000000;
+    --nuraly-datepicker-local-input-placeholder-color: #bfbfbf;
+
     /* Special date colors - theme-aware */
-    --nuraly-datepicker-local-weekend-color: var(--nuraly-color-datepicker-weekend, #ff4d4f);
-    --nuraly-datepicker-local-weekday-color: var(--nuraly-color-datepicker-weekday, #8c8c8c);
-    --nuraly-datepicker-local-range-color: var(--nuraly-color-datepicker-range, rgba(22, 119, 255, 0.1));
-    --nuraly-datepicker-local-error-color: var(--nuraly-color-datepicker-error, #da1e28);
-    --nuraly-datepicker-local-warning-color: var(--nuraly-color-datepicker-warning, #f0c300);
-    --nuraly-datepicker-local-success-color: var(--nuraly-color-datepicker-success, #24a148);
-    
+    --nuraly-datepicker-local-weekend-color: #ff4d4f;
+    --nuraly-datepicker-local-weekday-color: #8c8c8c;
+    --nuraly-datepicker-local-range-color: rgba(22, 119, 255, 0.1);
+    --nuraly-datepicker-local-error-color: #da1e28;
+    --nuraly-datepicker-local-warning-color: #f0c300;
+    --nuraly-datepicker-local-success-color: #24a148;
+
     /* Header specific colors - theme-aware */
-    --nuraly-datepicker-local-header-background: var(--nuraly-color-datepicker-header-background, #ffffff);
-    --nuraly-datepicker-local-hover-background: var(--nuraly-color-datepicker-hover-background, rgba(0, 0, 0, 0.04));
-    --nuraly-datepicker-local-active-background: var(--nuraly-color-datepicker-active-background, rgba(0, 0, 0, 0.06));
-    
+    --nuraly-datepicker-local-header-background: #ffffff;
+    --nuraly-datepicker-local-hover-background: rgba(0, 0, 0, 0.04);
+    --nuraly-datepicker-local-active-background: rgba(0, 0, 0, 0.06);
+
     /* Layout and sizing - theme-aware */
-    --nuraly-datepicker-local-width: var(--nuraly-size-datepicker-width, 280px);
-    --nuraly-datepicker-local-height: var(--nuraly-size-datepicker-height, auto);
-    --nuraly-datepicker-local-calendar-width: var(--nuraly-size-datepicker-calendar-width, 320px);
-    --nuraly-datepicker-local-calendar-height: var(--nuraly-size-datepicker-calendar-height, auto);
-    --nuraly-datepicker-local-day-size: var(--nuraly-size-datepicker-day, 36px);
-    --nuraly-datepicker-local-header-height: var(--nuraly-size-datepicker-header-height, 56px);
-    
+    --nuraly-datepicker-local-width: 280px;
+    --nuraly-datepicker-local-height: auto;
+    --nuraly-datepicker-local-calendar-width: 320px;
+    --nuraly-datepicker-local-calendar-height: auto;
+    --nuraly-datepicker-local-day-size: 36px;
+    --nuraly-datepicker-local-header-height: 56px;
+
     /* Typography - theme-aware */
-    --nuraly-datepicker-local-font-weight: var(--nuraly-font-weight-datepicker, 400);
-    --nuraly-datepicker-local-header-font-size: var(--nuraly-font-size-datepicker-header, 16px);
-    --nuraly-datepicker-local-header-font-weight: var(--nuraly-font-weight-datepicker-header, 600);
-    --nuraly-datepicker-local-day-font-size: var(--nuraly-font-size-datepicker-day, 14px);
-    --nuraly-datepicker-local-input-font-size: var(--nuraly-font-size-datepicker-input, 14px);
-    --nuraly-datepicker-local-label-font-size: var(--nuraly-font-size-datepicker-label, 14px);
-    --nuraly-datepicker-local-helper-font-size: var(--nuraly-font-size-datepicker-helper, 12px);
-    --nuraly-datepicker-local-message-font-size: var(--nuraly-font-size-datepicker-message, 12px);
-    
+    --nuraly-datepicker-local-font-weight: 400;
+    --nuraly-datepicker-local-header-font-size: 16px;
+    --nuraly-datepicker-local-header-font-weight: 600;
+    --nuraly-datepicker-local-day-font-size: 14px;
+    --nuraly-datepicker-local-input-font-size: 14px;
+    --nuraly-datepicker-local-label-font-size: 14px;
+    --nuraly-datepicker-local-helper-font-size: 12px;
+    --nuraly-datepicker-local-message-font-size: 12px;
+
     /* Spacing - theme-aware */
-    --nuraly-datepicker-local-gap: var(--nuraly-spacing-datepicker-gap, 6px);
-    --nuraly-datepicker-local-calendar-padding: var(--nuraly-spacing-datepicker-calendar-padding, 12px);
-    --nuraly-datepicker-local-day-padding: var(--nuraly-spacing-datepicker-day-padding, 6px);
-    --nuraly-datepicker-local-input-padding: var(--nuraly-spacing-datepicker-input-padding, 8px 12px);
-    --nuraly-datepicker-local-padding: var(--nuraly-spacing-datepicker-padding, 16px);
-    --nuraly-datepicker-local-margin: var(--nuraly-spacing-datepicker-margin, 0);
-    
+    --nuraly-datepicker-local-gap: 6px;
+    --nuraly-datepicker-local-calendar-padding: 12px;
+    --nuraly-datepicker-local-day-padding: 6px;
+    --nuraly-datepicker-local-input-padding: 8px 12px;
+    --nuraly-datepicker-local-padding: 16px;
+    --nuraly-datepicker-local-margin: 0;
+
     /* Borders - theme-aware */
-    --nuraly-datepicker-local-input-border-width: var(--nuraly-border-width-datepicker-input, 1px);
-    --nuraly-datepicker-local-focus-border-width: var(--nuraly-border-width-datepicker-focus, 2px);
-    
+    --nuraly-datepicker-local-input-border-width: 1px;
+    --nuraly-datepicker-local-focus-border-width: 2px;
+
     /* Shadows - theme-aware */
-    --nuraly-datepicker-local-shadow-color: var(--nuraly-color-datepicker-shadow, rgba(0, 0, 0, 0.1));
-    --nuraly-datepicker-local-box-shadow: var(--nuraly-shadow-datepicker-box, 0 6px 16px 0 var(--nuraly-datepicker-local-shadow-color));
-    --nuraly-datepicker-local-input-focus-shadow: var(--nuraly-shadow-datepicker-input-focus, 0 0 0 2px rgba(22, 119, 255, 0.2));
-    
+    --nuraly-datepicker-local-shadow-color: rgba(0, 0, 0, 0.1);
+    --nuraly-datepicker-local-box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.1);
+    --nuraly-datepicker-local-input-focus-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
+
     /* States - theme-aware */
-    --nuraly-datepicker-local-hover-opacity: var(--nuraly-opacity-datepicker-hover, 0.8);
-    
+    --nuraly-datepicker-local-hover-opacity: 0.8;
+
     /* Animation and transitions - theme-aware */
-    --nuraly-datepicker-local-transition-duration: var(--nuraly-transition-duration-datepicker, 0.2s);
-    --nuraly-datepicker-local-transition-timing: var(--nuraly-transition-timing-datepicker, ease-in-out);
-    --nuraly-datepicker-local-calendar-animation-duration: var(--nuraly-transition-duration-datepicker-calendar, 0.15s);
-    
+    --nuraly-datepicker-local-transition-duration: 0.2s;
+    --nuraly-datepicker-local-transition-timing: ease-in-out;
+    --nuraly-datepicker-local-calendar-animation-duration: 0.15s;
+
     /* Z-index - theme-aware */
-    --nuraly-datepicker-local-calendar-z-index: var(--nuraly-z-index-datepicker-calendar, 1000);
-    
+    --nuraly-datepicker-local-calendar-z-index: 1000;
+
     /* Icon sizes - theme-aware */
-    --nuraly-datepicker-local-icon-size: var(--nuraly-size-datepicker-icon, 16px);
-    --nuraly-datepicker-local-arrow-icon-size: var(--nuraly-size-datepicker-arrow-icon, 12px);
-    
+    --nuraly-datepicker-local-icon-size: 16px;
+    --nuraly-datepicker-local-arrow-icon-size: 12px;
+
     /* Size variants - theme-aware */
-    --nuraly-datepicker-local-small-font-size: var(--nuraly-font-size-datepicker-small, 12px);
-    --nuraly-datepicker-local-small-padding: var(--nuraly-spacing-datepicker-small-padding, 6px 8px);
-    --nuraly-datepicker-local-small-height: var(--nuraly-size-datepicker-small-height, 32px);
-    --nuraly-datepicker-local-small-day-size: var(--nuraly-size-datepicker-small-day, 28px);
-    
-    --nuraly-datepicker-local-medium-font-size: var(--nuraly-font-size-datepicker-medium, 14px);
-    --nuraly-datepicker-local-medium-padding: var(--nuraly-spacing-datepicker-medium-padding, 8px 12px);
-    --nuraly-datepicker-local-medium-height: var(--nuraly-size-datepicker-medium-height, 36px);
-    --nuraly-datepicker-local-medium-day-size: var(--nuraly-size-datepicker-medium-day, 36px);
-    
-    --nuraly-datepicker-local-large-font-size: var(--nuraly-font-size-datepicker-large, 16px);
-    --nuraly-datepicker-local-large-padding: var(--nuraly-spacing-datepicker-large-padding, 12px 16px);
-    --nuraly-datepicker-local-large-height: var(--nuraly-size-datepicker-large-height, 44px);
-    --nuraly-datepicker-local-large-day-size: var(--nuraly-size-datepicker-large-day, 44px);
+    --nuraly-datepicker-local-small-font-size: 12px;
+    --nuraly-datepicker-local-small-padding: 6px 8px;
+    --nuraly-datepicker-local-small-height: 32px;
+    --nuraly-datepicker-local-small-day-size: 28px;
+
+    --nuraly-datepicker-local-medium-font-size: 14px;
+    --nuraly-datepicker-local-medium-padding: 8px 12px;
+    --nuraly-datepicker-local-medium-height: 36px;
+    --nuraly-datepicker-local-medium-day-size: 36px;
+
+    --nuraly-datepicker-local-large-font-size: 16px;
+    --nuraly-datepicker-local-large-padding: 12px 16px;
+    --nuraly-datepicker-local-large-height: 44px;
+    --nuraly-datepicker-local-large-day-size: 44px;
   }
 `;
 //# sourceMappingURL=datepicker.style.variables.js.map

package/dist/src/components/datepicker/interfaces/base-controller.interface.d.ts

@@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Base controller interface for all datepicker controllers
+ */
+export interface DatePickerBaseController {
+    readonly host: DatePickerHost;
+    handleError?(error: Error, context: string): void;
+}
+/**
+ * Error handler interface
+ */
+export interface ErrorHandler {
+    handleError(error: Error, context: string): void;
+}
+/**
+ * Host interface defining the datepicker component's API
+ */
+export interface DatePickerHost {
+    value: string;
+    dateValue: string;
+    defaultValue: string;
+    disabled: boolean;
+    required: boolean;
+    range: boolean;
+    locale: string;
+    fieldFormat: string;
+    minDate?: string;
+    maxDate?: string;
+    disabledDates?: string[];
+    requestUpdate(): void;
+    dispatchEvent(event: Event): boolean;
+    getCurrentDate(): Date;
+    formatDate(date: Date): string;
+    parseDate(dateString: string): Date | null;
+}
+//# sourceMappingURL=base-controller.interface.d.ts.map

package/dist/src/components/datepicker/interfaces/base-controller.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=base-controller.interface.js.map

package/dist/src/components/datepicker/interfaces/datepicker-controllers.interface.d.ts

@@ -0,0 +1,112 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { DatePickerBaseController } from './base-controller.interface.js';
+import { INavigationDate, IDayPresentation } from '../datepicker.types.js';
+/**
+ * Calendar controller interface for managing calendar display and navigation
+ */
+export interface CalendarController extends DatePickerBaseController {
+    navigationDates: INavigationDate;
+    daysPresentation: IDayPresentation[];
+    navigateToMonth(year: number, month: number): void;
+    navigateToPreviousMonth(): void;
+    navigateToNextMonth(): void;
+    navigateToPreviousYear(): void;
+    navigateToNextYear(): void;
+    getCurrentMonthDays(): IDayPresentation[];
+    isDateInCurrentMonth(date: Date): boolean;
+    isDateToday(date: Date): boolean;
+    isDateSelected(date: Date): boolean;
+    isDateDisabled(date: Date): boolean;
+    isDateInRange(date: Date): boolean;
+    generateCalendarDays(year: number, month: number): IDayPresentation[];
+    updateCalendarDisplay(): void;
+}
+/**
+ * Date selection controller interface
+ */
+export interface DateSelectionController extends DatePickerBaseController {
+    selectDate(date: Date): void;
+    selectDateRange(startDate: Date, endDate: Date): void;
+    clearSelection(): void;
+    getSelectedDate(): Date | null;
+    getSelectedDateRange(): {
+        start: Date;
+        end: Date;
+    } | null;
+    getSelectedDates(): Date[];
+    isDateSelected(date: Date): boolean;
+    isValidSelection(date: Date): boolean;
+    formatSelectedDate(): string;
+    formatSelectedRange(): string;
+}
+/**
+ * Keyboard navigation controller interface
+ */
+export interface KeyboardController extends DatePickerBaseController {
+    handleKeyDown(event: KeyboardEvent): void;
+    navigateUp(): void;
+    navigateDown(): void;
+    navigateLeft(): void;
+    navigateRight(): void;
+    navigateToFirstDayOfWeek(): void;
+    navigateToLastDayOfWeek(): void;
+    navigateToFirstDayOfMonth(): void;
+    navigateToLastDayOfMonth(): void;
+    selectCurrentDate(): void;
+    closeCalendar(): void;
+}
+/**
+ * Focus management controller interface
+ */
+export interface FocusController extends DatePickerBaseController {
+    setFocusedDate(date: Date): void;
+    getFocusedDate(): Date | null;
+    focus(): void;
+    blur(): void;
+    focusCalendar(): void;
+    focusInput(): void;
+    setTabIndex(element: HTMLElement, index: number): void;
+    updateFocusableElements(): void;
+}
+/**
+ * Validation controller interface
+ */
+export interface ValidationController extends DatePickerBaseController {
+    validate(): boolean;
+    reset(): void;
+    getFormData(): {
+        [key: string]: string;
+    };
+    readonly isValid: boolean;
+    readonly validationMessage: string;
+    validateDate(date: Date): boolean;
+    validateDateRange(startDate: Date, endDate: Date): boolean;
+    validateMinMaxDate(date: Date): boolean;
+    validateDisabledDates(date: Date): boolean;
+    setValidationState(isValid: boolean, message?: string): void;
+    clearValidation(): void;
+}
+/**
+ * Calendar positioning controller interface
+ */
+export interface PositioningController extends DatePickerBaseController {
+    positionCalendar(): void | Promise<void>;
+    updatePosition(): void;
+    calculateOptimalPosition(): {
+        top: number;
+        left: number;
+        placement: string;
+    };
+    hasSpaceBelow(): boolean;
+    hasSpaceAbove(): boolean;
+    openCalendar(): void;
+    closeCalendar(): void;
+    toggleCalendar(): void;
+    handleClickOutside(event: MouseEvent): void;
+    handleScroll(): void;
+}
+//# sourceMappingURL=datepicker-controllers.interface.d.ts.map

package/dist/src/components/datepicker/interfaces/datepicker-controllers.interface.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=datepicker-controllers.interface.js.map

package/dist/src/components/datepicker/interfaces/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export { DatePickerBaseController, ErrorHandler, DatePickerHost } from './base-controller.interface.js';
+export { CalendarController, DateSelectionController, KeyboardController, FocusController, ValidationController, PositioningController, } from './datepicker-controllers.interface.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/datepicker/interfaces/index.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=index.js.map

package/dist/src/components/datepicker/templates/days.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { DateRawObject, IDayPresentation, INavigationDate } from '../datepicker.types.js';
+export declare const renderDays: (weekdaysShort: string[], navigationDates: INavigationDate, selectDay: (date: IDayPresentation) => void, dateRawObject: DateRawObject, isRange: boolean, days: string[]) => TemplateResult;
+//# sourceMappingURL=days.template.d.ts.map

package/dist/src/components/datepicker/templates/days.template.js

@@ -0,0 +1,40 @@
+import { html } from 'lit';
+import { todayIsTheDay } from '../utils/day.helper.js';
+import { capitalizeFirstLetter } from '../utils/string.helper.js';
+import { getMonthDetails } from '../utils/month.helper.js';
+import dayjs from 'dayjs';
+import { classMap } from 'lit/directives/class-map.js';
+const today = dayjs();
+const currentYear = today.year();
+const currentDay = today.date();
+const currentMonth = today.month() + 1;
+export const renderDays = (weekdaysShort, navigationDates, selectDay, dateRawObject, isRange, days) => {
+    const daysPresentation = getMonthDetails(navigationDates.start.year, isRange ? navigationDates.start.month : navigationDates.start.month - 1, days);
+    const dayContainer = (day) => {
+        const active = todayIsTheDay(day, dateRawObject, isRange) && day.valid;
+        const isToday = currentYear === day.year && currentMonth === day.month + 1 && currentDay === day.date;
+        return html `<div
+      class="day-cell ${classMap({
+            'selected': active,
+            'disabled': !day.valid,
+            'today': isToday,
+            'in-range': isRange && active
+        })}"
+      @click=${() => selectDay(day)}
+      role="gridcell"
+      tabindex="-1"
+      aria-label="${day.date}"
+    >
+      ${day.date}
+    </div>`;
+    };
+    return html `<div class="days-grid" role="grid" aria-label="Calendar days">
+    <div class="weekdays-header" role="row">
+      ${weekdaysShort.map((shortDay) => html `<div class="weekday-header" role="columnheader">${capitalizeFirstLetter(shortDay)}</div>`)}
+    </div>
+    <div class="days-body" role="rowgroup">
+      ${daysPresentation === null || daysPresentation === void 0 ? void 0 : daysPresentation.map(dayContainer)}
+    </div>
+  </div>`;
+};
+//# sourceMappingURL=days.template.js.map

package/dist/src/components/datepicker/templates/dropdown.template.d.ts

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+/**
+ * Render month dropdown template
+ */
+export declare const renderMonthDropdown: (isOpen: boolean, currentMonth: number, months: string[], onMonthSelect: (monthIndex: number) => void) => TemplateResult;
+/**
+ * Render year dropdown template
+ */
+export declare const renderYearDropdown: (isOpen: boolean, currentYear: number, onYearSelect: (year: number) => void) => TemplateResult;
+//# sourceMappingURL=dropdown.template.d.ts.map

package/dist/src/components/datepicker/templates/dropdown.template.js

@@ -0,0 +1,50 @@
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+/**
+ * Render month dropdown template
+ */
+export const renderMonthDropdown = (isOpen, currentMonth, months, onMonthSelect) => {
+    if (!isOpen)
+        return html ``;
+    return html `
+    <div class="month-dropdown dropdown-open">
+      <div class="dropdown-content">
+        ${months.map((month, index) => html `
+          <div 
+            class="dropdown-item ${classMap({ 'selected': index === currentMonth - 1 })}"
+            @click=${() => onMonthSelect(index)}
+          >
+            ${month.charAt(0).toUpperCase() + month.slice(1)}
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+};
+/**
+ * Render year dropdown template
+ */
+export const renderYearDropdown = (isOpen, currentYear, onYearSelect) => {
+    if (!isOpen)
+        return html ``;
+    // Generate years array (current year ± 10 years)
+    const years = [];
+    for (let year = currentYear - 10; year <= currentYear + 10; year++) {
+        years.push(year);
+    }
+    return html `
+    <div class="year-dropdown dropdown-open">
+      <div class="dropdown-content">
+        ${years.map(year => html `
+          <div 
+            class="dropdown-item ${classMap({ 'selected': year === currentYear })}"
+            @click=${() => onYearSelect(year)}
+          >
+            ${year}
+          </div>
+        `)}
+      </div>
+    </div>
+  `;
+};
+//# sourceMappingURL=dropdown.template.js.map

package/dist/src/components/datepicker/templates/headers.template.d.ts

@@ -0,0 +1,2 @@
+export declare const renderDayHeaderTemplate: () => import("lit-html").TemplateResult<1>[];
+//# sourceMappingURL=headers.template.d.ts.map

package/dist/src/components/datepicker/templates/headers.template.js

@@ -0,0 +1,5 @@
+import { html } from 'lit';
+export const renderDayHeaderTemplate = () => {
+    return ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'].map((shortDay) => html `<div class="day-header-item">${shortDay}</div>`);
+};
+//# sourceMappingURL=headers.template.js.map

package/dist/src/components/datepicker/templates/months.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (index: number): void;
+}
+export declare const renderMonthsTemplate: (months: string[], currentMonth: number, clickHandler: ClickHandler) => import("lit-html").TemplateResult<1>;
+export {};
+//# sourceMappingURL=months.template.d.ts.map

package/dist/src/components/datepicker/templates/months.template.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../datepicker.constant.js';
+export const renderMonthsTemplate = (months, currentMonth, clickHandler) => {
+    const monthContainer = (month, index) => {
+        const active = currentMonth - 1 === index ? 'month-active' : EMPTY_STRING;
+        return html ` <div class="month-container ${active}" @click=${() => clickHandler(index)}>${month}</div> `;
+    };
+    return html ` <div class="months-container">${months.map(monthContainer)}</div> `;
+};
+//# sourceMappingURL=months.template.js.map

package/dist/src/components/datepicker/templates/years.template.d.ts

@@ -0,0 +1,6 @@
+interface ClickHandler {
+    (year: number): void;
+}
+export declare const renderYearsTemplate: (currentYear: number, clickHandler: ClickHandler) => import("lit-html").TemplateResult<1>;
+export {};
+//# sourceMappingURL=years.template.d.ts.map

package/dist/src/components/datepicker/templates/years.template.js

@@ -0,0 +1,11 @@
+import { html } from 'lit';
+import { EMPTY_STRING } from '../datepicker.constant.js';
+export const renderYearsTemplate = (currentYear, clickHandler) => {
+    const yearRange = Array.from({ length: 12 }, (_v, i) => i + (currentYear - 6));
+    const yearContainer = (year) => {
+        const active = currentYear === year ? 'year-active' : EMPTY_STRING;
+        return html ` <div class="year-container ${active}" @click=${() => clickHandler(year)}>${year}</div> `;
+    };
+    return html ` <div class="years-container">${yearRange.map(yearContainer)}</div> `;
+};
+//# sourceMappingURL=years.template.js.map

package/dist/src/components/datepicker/test/datepicker_test.d.ts

@@ -0,0 +1,2 @@
+import '../datepicker.component';
+//# sourceMappingURL=datepicker_test.d.ts.map