@nuraly/lumenui 0.1.0 → 0.2.2

package/dist/src/components/datepicker/controllers/selection.controller.js

@@ -0,0 +1,267 @@
+/**
+ * @license
+ * Copyright 2023 Google Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { DATE_PICKER_EVENTS } from '../datepicker.constant.js';
+/**
+ * Date selection controller for managing date selection logic
+ * Handles single date, date range, and multiple date selections
+ */
+export class DatePickerSelectionController {
+    constructor(host) {
+        this.selectedDates = [];
+        this.selectedRange = null;
+        this.host = host;
+        this.host.addController(this);
+    }
+    hostConnected() {
+        // Initialize selection from host value
+        this.initializeFromHostValue();
+    }
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Initialize selection state from host value
+     */
+    initializeFromHostValue() {
+        if (this.host.value || this.host.dateValue) {
+            const dateString = this.host.value || this.host.dateValue;
+            const date = this.host.parseDate(dateString);
+            if (date) {
+                this.selectedDates = [date];
+            }
+        }
+    }
+    /**
+     * Select a single date
+     */
+    selectDate(date) {
+        var _a;
+        try {
+            if (!this.isValidSelection(date)) {
+                return;
+            }
+            if (this.host.range) {
+                this.handleRangeSelection(date);
+            }
+            else {
+                this.selectedDates = [date];
+                this.updateHostValue();
+                this.dispatchSelectionEvent(date);
+            }
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'selectDate');
+        }
+    }
+    /**
+     * Handle range selection logic
+     */
+    handleRangeSelection(date) {
+        if (!this.selectedRange || this.selectedRange.end) {
+            // Start new range
+            this.selectedRange = { start: date, end: date };
+            this.selectedDates = [date];
+        }
+        else {
+            // Complete the range
+            const startDate = this.selectedRange.start;
+            if (date >= startDate) {
+                this.selectedRange.end = date;
+            }
+            else {
+                this.selectedRange = { start: date, end: startDate };
+            }
+            this.selectedDates = this.generateDateRange(this.selectedRange.start, this.selectedRange.end);
+            this.dispatchRangeEvent(this.selectedRange.start, this.selectedRange.end);
+        }
+        this.updateHostValue();
+    }
+    /**
+     * Generate array of dates between start and end (inclusive)
+     */
+    generateDateRange(start, end) {
+        const dates = [];
+        const current = new Date(start);
+        while (current <= end) {
+            dates.push(new Date(current));
+            current.setDate(current.getDate() + 1);
+        }
+        return dates;
+    }
+    /**
+     * Select a date range
+     */
+    selectDateRange(startDate, endDate) {
+        var _a;
+        try {
+            if (!this.isValidSelection(startDate) || !this.isValidSelection(endDate)) {
+                return;
+            }
+            // Ensure start is before end
+            if (startDate > endDate) {
+                [startDate, endDate] = [endDate, startDate];
+            }
+            this.selectedRange = { start: startDate, end: endDate };
+            this.selectedDates = this.generateDateRange(startDate, endDate);
+            this.updateHostValue();
+            this.dispatchRangeEvent(startDate, endDate);
+            this.host.requestUpdate();
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'selectDateRange');
+        }
+    }
+    /**
+     * Clear all selections
+     */
+    clearSelection() {
+        var _a;
+        try {
+            this.selectedDates = [];
+            this.selectedRange = null;
+            this.updateHostValue();
+            this.host.requestUpdate();
+            // Dispatch clear event
+            this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.DATE_CHANGE, {
+                detail: { value: '', dates: [], type: 'clear' },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (error) {
+            (_a = this.handleError) === null || _a === void 0 ? void 0 : _a.call(this, error, 'clearSelection');
+        }
+    }
+    /**
+     * Get selected date (single selection)
+     */
+    getSelectedDate() {
+        return this.selectedDates.length > 0 ? this.selectedDates[0] : null;
+    }
+    /**
+     * Get selected date range
+     */
+    getSelectedDateRange() {
+        return this.selectedRange;
+    }
+    /**
+     * Get all selected dates
+     */
+    getSelectedDates() {
+        return [...this.selectedDates];
+    }
+    /**
+     * Check if a date is selected
+     */
+    isDateSelected(date) {
+        return this.selectedDates.some(selectedDate => selectedDate.getFullYear() === date.getFullYear() &&
+            selectedDate.getMonth() === date.getMonth() &&
+            selectedDate.getDate() === date.getDate());
+    }
+    /**
+     * Check if a date selection is valid
+     */
+    isValidSelection(date) {
+        // Check if date is disabled
+        if (this.host.disabled)
+            return false;
+        // Check min/max dates
+        if (this.host.minDate) {
+            const minDate = this.host.parseDate(this.host.minDate);
+            if (minDate && date < minDate)
+                return false;
+        }
+        if (this.host.maxDate) {
+            const maxDate = this.host.parseDate(this.host.maxDate);
+            if (maxDate && date > maxDate)
+                return false;
+        }
+        // Check disabled dates
+        if (this.host.disabledDates) {
+            const dateString = this.host.formatDate(date);
+            if (this.host.disabledDates.includes(dateString))
+                return false;
+        }
+        return true;
+    }
+    /**
+     * Format selected date as string
+     */
+    formatSelectedDate() {
+        const selectedDate = this.getSelectedDate();
+        return selectedDate ? this.host.formatDate(selectedDate) : '';
+    }
+    /**
+     * Format selected range as string
+     */
+    formatSelectedRange() {
+        if (!this.selectedRange)
+            return '';
+        const startStr = this.host.formatDate(this.selectedRange.start);
+        const endStr = this.host.formatDate(this.selectedRange.end);
+        return `${startStr} - ${endStr}`;
+    }
+    /**
+     * Update host component value
+     */
+    updateHostValue() {
+        if (this.host.range && this.selectedRange) {
+            // For range selection, update both value and dateValue
+            const rangeString = this.formatSelectedRange();
+            this.host.value = rangeString;
+            this.host.dateValue = rangeString;
+        }
+        else {
+            const dateString = this.formatSelectedDate();
+            this.host.value = dateString;
+            this.host.dateValue = dateString;
+        }
+    }
+    /**
+     * Dispatch single date selection event
+     */
+    dispatchSelectionEvent(date) {
+        this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.DATE_CHANGE, {
+            detail: {
+                value: this.formatSelectedDate(),
+                date,
+                dates: this.selectedDates,
+                type: 'single'
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Dispatch range selection event
+     */
+    dispatchRangeEvent(startDate, endDate) {
+        this.host.dispatchEvent(new CustomEvent(DATE_PICKER_EVENTS.RANGE_CHANGE, {
+            detail: {
+                value: this.formatSelectedRange(),
+                startDate,
+                endDate,
+                dates: this.selectedDates,
+                type: 'range'
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /**
+     * Handle errors that occur within the controller
+     */
+    handleError(error, context) {
+        console.error(`DatePickerSelectionController error in ${context}:`, error);
+        this.host.dispatchEvent(new CustomEvent('datepicker-error', {
+            detail: { error, context, controller: 'selection' },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+}
+//# sourceMappingURL=selection.controller.js.map

package/dist/src/components/datepicker/datepicker.component.d.ts

@@ -8,7 +8,7 @@ import { DatePickerMode, DatePickerType, DatePickerSize, DatePickerVariant, Date
 import { DatePickerHost } from './interfaces/base-controller.interface.js';
 import './utils/locale.helper.js';
 import { INPUT_STATE } from '../input/input.types.js';
-declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
+declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & (new (...args: any[]) => import("packages/common/src/shared/base-mixin.js").LightDomContent) & typeof LitElement;
 /**
  * HyDatePicker - A comprehensive date picker component
  *
@@ -53,6 +53,7 @@ declare const HyDatePickerElement_base: (new (...args: any[]) => import("@nuraly
  * ```
  */
 export declare class HyDatePickerElement extends HyDatePickerElement_base implements DatePickerHost {
+    static useShadowDom: boolean;
     static styles: import("lit").CSSResult;
     requiredComponents: string[];
     private calendarController;

package/dist/src/components/datepicker/datepicker.component.js

@@ -551,6 +551,7 @@ let HyDatePickerElement = class HyDatePickerElement extends NuralyUIBaseMixin(Li
         return renderYearsTemplate(this.navigationDates.start.year, this.selectYear);
     }
 };
+HyDatePickerElement.useShadowDom = true;
 HyDatePickerElement.styles = styles;
 __decorate([
     property({ type: String })

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

@@ -21,12 +21,12 @@ export const styles = css `
   :host {
     width: fit-content;
     display: block;
-    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   }
 
   /* Host attribute selectors for configuration */
   :host([disabled]) {
-    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    opacity: 0.5;
     pointer-events: none;
   }
 
@@ -38,50 +38,50 @@ export const styles = css `
   .datepicker-container {
     position: relative;
     display: block;
-    width: var(--nuraly-datepicker-width, var(--nuraly-datepicker-local-width));
-    font-family: var(--nuraly-datepicker-font-family, var(--nuraly-datepicker-local-font-family));
+    width: 280px;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
     /* Allow calendar to overflow container without causing scroll */
     overflow: visible;
   }
 
   .datepicker-disabled {
-    opacity: var(--nuraly-datepicker-disabled-opacity, var(--nuraly-datepicker-local-disabled-opacity));
+    opacity: 0.5;
     pointer-events: none;
   }
 
   /* Size variants */
   .datepicker-size-small {
-    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-small-day-size);
-    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-small-font-size);
+    --nuraly-datepicker-local-day-size: 1.75rem;
+    --nuraly-datepicker-local-font-size: 0.75rem;
   }
 
   .datepicker-size-medium {
-    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-medium-day-size);
-    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-medium-font-size);
+    --nuraly-datepicker-local-day-size: 2rem;
+    --nuraly-datepicker-local-font-size: 0.875rem;
   }
 
   .datepicker-size-large {
-    --nuraly-datepicker-local-day-size: var(--nuraly-datepicker-local-large-day-size);
-    --nuraly-datepicker-local-font-size: var(--nuraly-datepicker-local-large-font-size);
+    --nuraly-datepicker-local-day-size: 2.5rem;
+    --nuraly-datepicker-local-font-size: 1rem;
   }
 
   /* Calendar container */
   .calendar-container {
     position: fixed;
-    z-index: var(--nuraly-datepicker-calendar-z-index, var(--nuraly-datepicker-local-calendar-z-index));
+    z-index: 1000;
     user-select: none;
-    padding: var(--nuraly-datepicker-calendar-padding, var(--nuraly-datepicker-local-calendar-padding));
-    width: var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width));
-    height: var(--nuraly-datepicker-calendar-height, var(--nuraly-datepicker-local-calendar-height));
-    background-color: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));
-    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
-    border-radius: var(--nuraly-datepicker-border-radius, var(--nuraly-datepicker-local-border-radius));
-    box-shadow: var(--nuraly-datepicker-box-shadow, var(--nuraly-datepicker-local-box-shadow));
-    animation: calendar-slide-in var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+    padding: 0.75rem;
+    width: 280px;
+    height: auto;
+    background-color: #ffffff;
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    animation: calendar-slide-in 0.2s ease;
   }
 
   .calendar-range {
-    width: calc(var(--nuraly-datepicker-calendar-width, var(--nuraly-datepicker-local-calendar-width)) * 2);
+    width: calc(280px * 2);
   }
 
   /* Calendar header */
@@ -89,10 +89,10 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: var(--nuraly-datepicker-header-padding, var(--nuraly-datepicker-local-header-padding));
-    height: var(--nuraly-datepicker-header-height, var(--nuraly-datepicker-local-header-height));
-    border-bottom: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
-    background: var(--nuraly-datepicker-header-background, var(--nuraly-datepicker-local-header-background));
+    padding: 0.5rem;
+    height: 2.5rem;
+    border-bottom: 1px solid #e0e0e0;
+    background: transparent;
   }
 
   .year-month-header {
@@ -106,7 +106,7 @@ export const styles = css `
   .current-year-container {
     display: inline-flex;
     align-items: center;
-    gap: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);
+    gap: calc(0.25rem / 2);
   }
 
   .year-icons-toggler {
@@ -117,30 +117,30 @@ export const styles = css `
 
   /* Calendar content */
   .calendar-content {
-    padding: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));
-    padding-bottom: calc(var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap)) / 2);
+    padding: 0.25rem;
+    padding-bottom: calc(0.25rem / 2);
   }
 
   /* Button customizations */
   nr-button {
     --nuraly-button-border-color: transparent;
     --nuraly-button-background-color: transparent;
-    --nuraly-button-text-color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
-    --nuraly-button-hover-background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));
-    --nuraly-button-transition-duration: var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration));
+    --nuraly-button-text-color: #161616;
+    --nuraly-button-hover-background-color: #7c3aed;
+    --nuraly-button-transition-duration: 0.2s;
   }
 
   .toggle-year-view,
   .toggle-month-view {
-    --nuraly-button-font-weight: var(--nuraly-datepicker-header-font-weight, var(--nuraly-datepicker-local-header-font-weight));
-    --nuraly-button-font-size: var(--nuraly-datepicker-header-font-size, var(--nuraly-datepicker-local-header-font-size));
+    --nuraly-button-font-weight: 600;
+    --nuraly-button-font-size: 0.875rem;
     --nuraly-button-padding: 4px 20px 4px 8px;
     --nuraly-button-border-radius: 6px;
-    --nuraly-button-border: 1px solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    --nuraly-button-border: 1px solid #e0e0e0;
     --nuraly-button-background-color: #ffffff;
-    --nuraly-button-hover-border-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    --nuraly-button-hover-border-color: #7c3aed;
     --nuraly-button-hover-background-color: #ffffff;
-    --nuraly-button-active-background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+    --nuraly-button-active-background-color: #f4f4f4;
     --nuraly-button-transition: all 0.2s;
     position: relative;
     min-width: 80px;
@@ -163,7 +163,7 @@ export const styles = css `
 
   .toggle-month-view:hover::after,
   .toggle-year-view:hover::after {
-    border-top-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    border-top-color: #7c3aed;
   }
 
   .next-year,
@@ -198,11 +198,11 @@ export const styles = css `
 
   /* Placement variants */
   .placement-top {
-    animation: calendar-slide-down var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+    animation: calendar-slide-down 0.2s ease;
   }
 
   .placement-bottom {
-    animation: calendar-slide-up var(--nuraly-datepicker-calendar-animation-duration, var(--nuraly-datepicker-local-calendar-animation-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
+    animation: calendar-slide-up 0.2s ease;
   }
 
   /* Animations */
@@ -246,7 +246,7 @@ export const styles = css `
 
   /* Accessibility improvements */
   .calendar-container:focus-within {
-    outline: var(--nuraly-datepicker-focus-border-width, var(--nuraly-datepicker-local-focus-border-width)) solid var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    outline: 2px solid #7c3aed;
     outline-offset: 2px;
   }
 
@@ -266,7 +266,7 @@ export const styles = css `
     display: grid;
     grid-template-columns: repeat(7, 1fr);
     gap: 1px;
-    margin-bottom: var(--nuraly-datepicker-gap, var(--nuraly-datepicker-local-gap));
+    margin-bottom: 0.25rem;
   }
 
   .weekday-header {
@@ -276,7 +276,7 @@ export const styles = css `
     padding: 8px 4px;
     font-size: 12px;
     font-weight: 500;
-    color: var(--nuraly-datepicker-weekday-color, var(--nuraly-datepicker-local-weekday-color));
+    color: #525252;
     text-align: center;
   }
 
@@ -288,52 +288,52 @@ export const styles = css `
 
   /* Day cell base styles */
   .day-cell {
-    width: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));
-    height: var(--nuraly-datepicker-day-size, var(--nuraly-datepicker-local-day-size));
+    width: 2rem;
+    height: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 6px;
     cursor: pointer;
-    transition: all var(--nuraly-datepicker-transition-duration, var(--nuraly-datepicker-local-transition-duration)) var(--nuraly-datepicker-transition-timing, var(--nuraly-datepicker-local-transition-timing));
-    font-size: var(--nuraly-datepicker-day-font-size, var(--nuraly-datepicker-local-day-font-size));
+    transition: all 0.2s ease;
+    font-size: 0.875rem;
     font-weight: 400;
-    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
+    color: #161616;
     margin: 1px;
     position: relative;
   }
 
   .day-cell:hover:not(.disabled):not(.selected) {
-    background-color: var(--nuraly-datepicker-hover-color, var(--nuraly-datepicker-local-hover-color));
+    background-color: #7c3aed;
     scale: 1.05;
   }
 
   .day-cell.selected {
-    background-color: var(--nuraly-datepicker-selected-color, var(--nuraly-datepicker-local-selected-color)) !important;
-    color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color)) !important;
+    background-color: #7c3aed !important;
+    color: #ffffff !important;
     font-weight: 600;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
   }
 
   .day-cell.today {
-    border: 2px solid var(--nuraly-datepicker-today-color, var(--nuraly-datepicker-local-today-color));
+    border: 2px solid #7c3aed;
     font-weight: 600;
   }
 
   .day-cell.today.selected {
-    border-color: var(--nuraly-datepicker-selected-text-color, var(--nuraly-datepicker-local-selected-text-color));
+    border-color: #ffffff;
   }
 
   .day-cell.disabled {
-    background-color: var(--nuraly-datepicker-disabled-color, var(--nuraly-datepicker-local-disabled-color));
-    color: var(--nuraly-datepicker-disabled-text-color, var(--nuraly-datepicker-local-disabled-text-color));
+    background-color: #f4f4f4;
+    color: #c6c6c6;
     cursor: not-allowed;
     pointer-events: none;
     opacity: 0.4;
   }
 
   .day-cell.in-range {
-    background-color: var(--nuraly-datepicker-range-color, var(--nuraly-datepicker-local-range-color));
+    background-color: #f4f0fd;
     border-radius: 0;
   }
 
@@ -351,15 +351,15 @@ export const styles = css `
 
   /* Error states */
   :host([state="error"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-error-color, var(--nuraly-datepicker-local-error-color));
+    --nuraly-datepicker-local-input-border-color: #dc2626;
   }
 
   :host([state="warning"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-warning-color, var(--nuraly-datepicker-local-warning-color));
+    --nuraly-datepicker-local-input-border-color: #f1c21b;
   }
 
   :host([state="success"]) .datepicker-container {
-    --nuraly-datepicker-local-input-border-color: var(--nuraly-datepicker-success-color, var(--nuraly-datepicker-local-success-color));
+    --nuraly-datepicker-local-input-border-color: #198038;
   }
 
   /* Month/Year Dropdown Styles */
@@ -371,8 +371,8 @@ export const styles = css `
     right: 0;
     width: 120px;
     z-index: 1001;
-    background: var(--nuraly-datepicker-background-color, var(--nuraly-datepicker-local-background-color));
-    border: var(--nuraly-datepicker-border-width, var(--nuraly-datepicker-local-border-width)) solid var(--nuraly-datepicker-border-color, var(--nuraly-datepicker-local-border-color));
+    background: #ffffff;
+    border: 1px solid #e0e0e0;
     border-radius: 6px;
     box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
     max-height: 200px;
@@ -391,24 +391,24 @@ export const styles = css `
   .dropdown-item {
     padding: 8px 12px;
     cursor: pointer;
-    color: var(--nuraly-datepicker-text-color, var(--nuraly-datepicker-local-text-color));
-    font-size: var(--nuraly-datepicker-font-size, var(--nuraly-datepicker-local-font-size));
+    color: #161616;
+    font-size: 0.875rem;
     transition: all 0.2s;
     border-radius: 0;
   }
 
   .dropdown-item:hover {
-    background-color: var(--nuraly-datepicker-hover-background, var(--nuraly-datepicker-local-hover-background));
+    background-color: #f4f4f4;
   }
 
   .dropdown-item.selected {
-    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    background-color: #7c3aed;
     color: #ffffff;
     font-weight: 600;
   }
 
   .dropdown-item.selected:hover {
-    background-color: var(--nuraly-datepicker-primary-color, var(--nuraly-datepicker-local-primary-color));
+    background-color: #7c3aed;
     opacity: 0.9;
   }