feat: active date

src/App.tsx

@@ -3,6 +3,7 @@ import { DateRangePicker } from './examples/DateRangePicker';
 import { SingleMonth } from './examples/SingleMonth';
 import { WeekView } from './examples/WeekView';
 import { DateRangeView } from './examples/DateRangeView';
+import { InteractiveDateRange } from './examples/InteractiveDateRange';
 import { CompactYear } from './examples/CompactYear';
 import styles from './App.module.scss';
 
@@ -13,6 +14,7 @@ const App: React.FC = () => {
       <SingleMonth />
       <WeekView />
       <DateRangeView />
+      <InteractiveDateRange />
       <CompactYear />
     </div>
   );

src/components/calendar/DateRange/index.tsx

@@ -16,6 +16,8 @@ interface DateRangeProps {
   size?: DaySize;
   fontProportion?: number;
   magnify?: boolean;
+  onDateClick?: (date: Date) => void;
+  activeDates?: Date[];
 }
 
 export const DateRange: React.FC<DateRangeProps> = ({
@@ -27,7 +29,9 @@ export const DateRange: React.FC<DateRangeProps> = ({
   weekendDays = [6, 0],
   size = 'l',
   fontProportion = 100,
-  magnify = false
+  magnify = false,
+  onDateClick,
+  activeDates = []
 }) => {
   const startDate = startOfDay(from);
   const endDate = startOfDay(to);
@@ -53,6 +57,16 @@ export const DateRange: React.FC<DateRangeProps> = ({
         const dayOfWeek = date.getDay();
         const variations = getDateVariations(date, dateRange, weekendDays, dayOfWeek);
         
+        // Check if this date is active
+        const isActive = activeDates.some(activeDate => 
+          startOfDay(activeDate).getTime() === startOfDay(date).getTime()
+        );
+        
+        // Add 'active' to variations if the date is active
+        const variationsWithActive = isActive 
+          ? [...variations, 'active' as DayVariation]
+          : variations;
+        
         const wrapperClasses = classNames(
           styles.DateRange__DayWrapper,
           {
@@ -67,7 +81,8 @@ export const DateRange: React.FC<DateRangeProps> = ({
             <Day
               date={date}
               headerStyle={headerStyle}
-              variations={variations}
+              variations={variationsWithActive}
+              onSelect={onDateClick ? () => onDateClick(date) : undefined}
               size={size}
               fontProportion={fontProportion}
               magnify={magnify}

src/components/calendar/Day/Day.module.scss

@@ -190,6 +190,69 @@
     }
     // end implicit (midrange) {
 
+    // active state - inverted colors
+    &.Day__Container--active {
+      background: colors.$day-header-defaultmode-defaultstate-background-color;
+      color: colors.$day-header-defaultmode-defaultstate-color;
+
+      .Day__Header {
+        background: colors.$day-content-defaultmode-defaultstate-background-color;
+        color: colors.$day-content-defaultmode-defaultstate-color;
+      }
+
+      .Day__Number {
+        color: colors.$day-header-defaultmode-defaultstate-color;
+        
+        // Ensure number stays inverted on hover
+        .Day__Container--interactive:hover & {
+          color: colors.$day-header-defaultmode-defaultstate-color;
+        }
+      }
+
+      // Maintain dark background on hover
+      &.Day__Container--interactive:hover {
+        background: colors.$day-header-defaultmode-defaultstate-background-color;
+      }
+
+      &.Day__Container--greyed {
+        background: colors.$day-header-greyedmode-defaultstate-background-color;
+        color: colors.$day-header-greyedmode-defaultstate-color;
+
+        .Day__Header {
+          background: colors.$day-content-greyedmode-defaultstate-background-color;
+          color: colors.$day-content-greyedmode-defaultstate-color;
+        }
+
+        .Day__Number {
+          color: colors.$day-header-greyedmode-defaultstate-color;
+          
+          // Ensure number stays inverted on hover for greyed days
+          .Day__Container--interactive:hover & {
+            color: colors.$day-header-greyedmode-defaultstate-color;
+          }
+        }
+
+        // Maintain grey background on hover
+        &.Day__Container--interactive:hover {
+          background: colors.$day-header-greyedmode-defaultstate-background-color;
+        }
+      }
+
+      // Active state takes precedence over selected/selecting for visual clarity
+      &.Day__Container--selected,
+      &.Day__Container--selecting {
+        background: colors.$day-header-defaultmode-defaultstate-background-color;
+        
+        .Day__Header {
+          background: colors.$day-content-defaultmode-defaultstate-background-color;
+        }
+        
+        .Day__Number {
+          color: colors.$day-header-defaultmode-defaultstate-color;
+        }
+      }
+    }
+
     // rangestart (selected|selecting)(greyed|defaultMode)
     &.Day__Container--rangeStart:not(.Day__Container--rangeEnd) {
       // implicit .Day__Container--selected {
@@ -488,7 +551,7 @@
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
     font-feature-settings: 'tnum' on, 'lnum' on;
 
-    .Day__Container--interactive:hover &:not(&--selected) {
+    .Day__Container--interactive:hover &:not(&--selected):not(&--active) {
       fill: colors.$day-color-interactive-text-hover;
     }
 
@@ -497,6 +560,24 @@
       fill: colors.$day-content-greyedmode-defaultstate-color;
     }
 
+    // Active state - inverted colors (high priority)
+    &--active {
+      fill: colors.$day-header-defaultmode-defaultstate-color;
+      
+      // Ensure active state is maintained on hover
+      .Day__Container--interactive:hover & {
+        fill: colors.$day-header-defaultmode-defaultstate-color;
+      }
+      
+      &.DayNumber__Text--greyed {
+        fill: colors.$day-header-greyedmode-defaultstate-color;
+        
+        .Day__Container--interactive:hover & {
+          fill: colors.$day-header-greyedmode-defaultstate-color;
+        }
+      }
+    }
+
     // Selected states
     &--selected {
       fill: colors.$day-content-defaultmode-selectedstate-midrange-color;

src/components/calendar/Day/index.tsx

@@ -40,6 +40,7 @@ export const Day: React.FC<DayProps> = ({
       [styles['Day__Container--greyed']]: variations.includes('greyed'),
       [styles['Day__Container--rowStart']]: variations.includes('rowStart'),
       [styles['Day__Container--rowEnd']]: variations.includes('rowEnd'),
+      [styles['Day__Container--active']]: variations.includes('active'),
       [styles['magnify']]: magnify && (variations.includes('selected') || variations.includes('selecting'))
     },
     styles[`Day--${headerStyle}`],

src/components/calendar/DayNumber/index.tsx

@@ -54,6 +54,7 @@ export const DayNumber: React.FC<DayNumberProps> = ({
       [styles['DayNumber__Text--selecting']]: variations.includes('selecting'),
       [styles['DayNumber__Text--rangeStart']]: variations.includes('rangeStart'),
       [styles['DayNumber__Text--rangeEnd']]: variations.includes('rangeEnd'),
+      [styles['DayNumber__Text--active']]: variations.includes('active'),
     }
   );
 

src/types/calendar.ts

@@ -16,7 +16,8 @@ export type DayVariation =
   | 'rangeEnd'
   | 'selecting'
   | 'rowStart'
-  | 'rowEnd';
+  | 'rowEnd'
+  | 'active';
 export type DaySize = 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
 
 export interface YearProps {