feat: xxs size supported

package.json

@@ -9,17 +9,17 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "date-fns": "^2.30.0",
-    "classnames": "^2.3.2"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "date-fns": "^4.1.0",
+    "classnames": "^2.5.1"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5",
-    "sass": "^1.69.5"
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^4.6.0",
+    "typescript": "^5.8.3",
+    "vite": "^7.0.4",
+    "sass": "^1.89.2"
   }
 }

src/components/calendar/Controls.tsx

@@ -111,6 +111,12 @@ export const Controls: React.FC<ControlsProps> = ({
         >
           XS
         </Button>
+        <Button 
+          active={size === 'xxs'} 
+          onClick={() => onSizeChange('xxs')}
+        >
+          XXS
+        </Button>
       </ButtonGroup>
 
       {(magnify !== undefined && onMagnifyChange !== undefined && (

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

@@ -424,7 +424,7 @@
 }
 
 // Size variants
-@each $size in ('xl', 'l', 'm', 's', 'xs') {
+@each $size in ('xl', 'l', 'm', 's', 'xs', 'xxs') {
   .Day--#{$size} {
     .Day__Header {
       height: v.get-size-value($size, 'header-height');
@@ -437,10 +437,10 @@
     }
 
     .Day__Content {
-      height: v.get-size-value($size, 'header-height') * 2;
+      height: v.get-size-value($size, 'header-height') * v.get-size-value($size, 'content-ratio');
       
       @media (min-width: shared.$breakpoint-tablet) {
-        height: v.get-size-value($size, 'header-height-desktop') * 2;
+        height: v.get-size-value($size, 'header-height-desktop') * v.get-size-value($size, 'content-ratio');
       }
     }
   }

src/components/calendar/Day/_variables.scss

@@ -12,35 +12,48 @@ $size-xl: (
   header-height: 48px,
   header-height-desktop: 56px,
   header-font: 1rem,
-  header-font-desktop: 1.1rem
+  header-font-desktop: 1.1rem,
+  content-ratio: 2
 );
 
 $size-l: (
   header-height: 36px,
   header-height-desktop: 42px,
   header-font: 0.9rem,
-  header-font-desktop: 1rem
+  header-font-desktop: 1rem,
+  content-ratio: 2
 );
 
 $size-m: (
   header-height: 32px,
   header-height-desktop: 36px,
   header-font: 0.8rem,
-  header-font-desktop: 0.9rem
+  header-font-desktop: 0.9rem,
+  content-ratio: 2
 );
 
 $size-s: (
   header-height: 28px,
   header-height-desktop: 32px,
   header-font: 0.75rem,
-  header-font-desktop: 0.8rem
+  header-font-desktop: 0.8rem,
+  content-ratio: 2
 );
 
 $size-xs: (
   header-height: 24px,
   header-height-desktop: 28px,
   header-font: 0.7rem,
-  header-font-desktop: 0.75rem
+  header-font-desktop: 0.75rem,
+  content-ratio: 2
+);
+
+$size-xxs: (
+  header-height: 20px,
+  header-height-desktop: 24px,
+  header-font: 0.65rem,
+  header-font-desktop: 0.7rem,
+  content-ratio: 1.5
 );
 
 // Functions
@@ -57,6 +70,8 @@ $size-xs: (
     $size-map: $size-s;
   } @else if $size == 'xs' {
     $size-map: $size-xs;
+  } @else if $size == 'xxs' {
+    $size-map: $size-xxs;
   }
   
   @return map.get($size-map, $property);

src/types/calendar.ts

@@ -17,7 +17,7 @@ export type DayVariation =
   | 'selecting'
   | 'rowStart'
   | 'rowEnd';
-export type DaySize = 'xl' | 'l' | 'm' | 's' | 'xs';
+export type DaySize = 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
 
 export interface YearProps {
   year: number;