feat: add multiple date selection mode to Calendar component

Author: renejfc

src/components/experimental/Calendar/Calendar.styled.ts

@@ -239,4 +239,11 @@ export const DayButton = styled.button`
     &[data-selected-single='true'] {
         border-radius: 50%;
     }
+
+    /* Multiple selected days */
+    &[data-selected-multiple='true'] {
+        border-radius: 50%;
+        background: ${getSemanticValue('interactive-container')};
+        color: ${getSemanticValue('on-interactive-container')};
+    }
 `;

src/components/experimental/Calendar/Calendar.tsx

@@ -7,7 +7,7 @@ import ChevronRightIcon from '../../../icons/arrows/ChevronRightIcon';
 import * as Styled from './Calendar.styled';
 
 type Props = React.ComponentProps<typeof DayPicker> & {
-    selectionType?: 'single' | 'range';
+    selectionType?: 'single' | 'range' | 'multiple';
     visibleMonths?: 1 | 2 | 3;
 };
 
@@ -45,12 +45,20 @@ function Calendar({
         }
     } satisfies Omit<React.ComponentProps<typeof DayPicker>, 'mode'>;
 
+    const modeProps = (() => {
+        switch (selectionType) {
+            case 'range':
+                return { mode: 'range' } as const;
+            case 'multiple':
+                return { mode: 'multiple' } as const;
+            default:
+                return { mode: 'single' } as const;
+        }
+    })();
+
     return (
         <Styled.Container className={className}>
-            <DayPicker
-                {...common}
-                {...(selectionType === 'range' ? ({ mode: 'range' } as const) : ({ mode: 'single' } as const))}
-            />
+            <DayPicker {...common} {...modeProps} />
         </Styled.Container>
     );
 }
@@ -74,6 +82,9 @@ function CalendarDayButton({ day, modifiers, ...props }: React.ComponentProps<ty
             data-selected-single={
                 modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
             }
+            data-selected-multiple={
+                modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle
+            }
             data-selected={modifiers.selected}
             data-today={modifiers.today}
             data-outside={modifiers.outside}

src/components/experimental/Calendar/docs/Calendar.stories.tsx

@@ -39,3 +39,10 @@ export const RangeSelection: Story = {
         defaultMonth: TODAY
     }
 };
+
+export const MultipleSelection: Story = {
+    args: {
+        selectionType: 'multiple',
+        defaultMonth: TODAY
+    }
+};