From e6a86e3786db3bc938757014d5c2280bf55ac1c2 Mon Sep 17 00:00:00 2001
From: Ayoub FEJJAL <ayoub.fejjal@hightech.edu>
Date: Sun, 3 May 2026 17:09:36 +0100
Subject: [PATCH 1/4] feat(datepicker): add outside days styling support

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 6 ++++--
 packages/ui/src/components/Datepicker/theme.ts       | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index f91a0843f..bf11d519e 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -25,6 +25,7 @@ export interface DatepickerViewsDaysTheme {
       selected: string;
       disabled: string;
       today: string;
+      outside: string; // ← ajouté
     };
   };
 }
@@ -65,6 +66,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
+          const isOutside = currentDate.getMonth() !== viewDate.getMonth(); // ← ajouté
 
           return (
             <button
@@ -76,10 +78,10 @@ export function DatepickerViewsDays() {
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
+                isOutside && !isSelected && theme.items.item.outside, // ← ajouté
               )}
               onClick={() => {
                 if (isDisabled) return;
-
                 changeSelectedDate(currentDate, true);
               }}
             >
@@ -92,4 +94,4 @@ export function DatepickerViewsDays() {
   );
 }
 
-DatepickerViewsDays.displayName = "DatepickerViewsDays";
+DatepickerViewsDays.displayName = "DatepickerViewsDays";
\ No newline at end of file
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index e3394257b..5fba214d1 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -32,8 +32,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
       button: {
         base: "w-full rounded-lg px-5 py-2 text-center text-sm font-medium focus:ring-4 focus:ring-primary-300",
         today: "bg-primary-700 text-white hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700",
-        clear:
-          "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600",
+        clear: "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600",
       },
     },
   },
@@ -50,6 +49,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
           today: "",
+          outside: "opacity-40 text-gray-400", // ← ajouté
         },
       },
     },
@@ -84,4 +84,4 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
       },
     },
   },
-});
+});
\ No newline at end of file

From e377b023983b7ee564934fda0f69ad0e568008ef Mon Sep 17 00:00:00 2001
From: Ayoub FEJJAL <ayoub.fejjal@hightech.edu>
Date: Tue, 5 May 2026 19:37:31 +0100
Subject: [PATCH 2/4] style: fix formatting

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 2 +-
 packages/ui/src/components/Datepicker/theme.ts       | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index bf11d519e..90e9e29d1 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -94,4 +94,4 @@ export function DatepickerViewsDays() {
   );
 }
 
-DatepickerViewsDays.displayName = "DatepickerViewsDays";
\ No newline at end of file
+DatepickerViewsDays.displayName = "DatepickerViewsDays";
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index 5fba214d1..4be567939 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -32,7 +32,8 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
       button: {
         base: "w-full rounded-lg px-5 py-2 text-center text-sm font-medium focus:ring-4 focus:ring-primary-300",
         today: "bg-primary-700 text-white hover:bg-primary-800 dark:bg-primary-600 dark:hover:bg-primary-700",
-        clear: "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600",
+        clear:
+          "border border-gray-300 bg-white text-gray-900 hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600",
       },
     },
   },
@@ -49,7 +50,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
           today: "",
-          outside: "opacity-40 text-gray-400", // ← ajouté
+          outside: "text-gray-400 opacity-40", // ← ajouté
         },
       },
     },
@@ -84,4 +85,4 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
       },
     },
   },
-});
\ No newline at end of file
+});

From 664edaab61afd70b60e4fd16b32d068d1270d108 Mon Sep 17 00:00:00 2001
From: Ayoub FEJJAL <ayoub.fejjal@hightech.edu>
Date: Wed, 6 May 2026 10:59:25 +0100
Subject: [PATCH 3/4] =?UTF-8?q?fix:=20remove=20ajout=C3=A9=20comments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 6 +++---
 packages/ui/src/components/Datepicker/theme.ts       | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index 90e9e29d1..2ede61e8c 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -25,7 +25,7 @@ export interface DatepickerViewsDaysTheme {
       selected: string;
       disabled: string;
       today: string;
-      outside: string; // ← ajouté
+      outside: string;
     };
   };
 }
@@ -66,7 +66,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
-          const isOutside = currentDate.getMonth() !== viewDate.getMonth(); // ← ajouté
+          const isOutside = currentDate.getMonth() !== viewDate.getMonth(); 
 
           return (
             <button
@@ -78,7 +78,7 @@ export function DatepickerViewsDays() {
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
-                isOutside && !isSelected && theme.items.item.outside, // ← ajouté
+                isOutside && !isSelected && theme.items.item.outside, 
               )}
               onClick={() => {
                 if (isDisabled) return;
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index 4be567939..089ee1bd9 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -50,7 +50,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
           today: "",
-          outside: "text-gray-400 opacity-40", // ← ajouté
+          outside: "text-gray-400 opacity-40", 
         },
       },
     },

From 6260c317a44089f1d776cde617a2ec69dfa0d3aa Mon Sep 17 00:00:00 2001
From: Ayoub FEJJAL <ayoub.fejjal@hightech.edu>
Date: Wed, 6 May 2026 11:05:41 +0100
Subject: [PATCH 4/4] fix: fix line endings

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 4 ++--
 packages/ui/src/components/Datepicker/theme.ts       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index 2ede61e8c..4642de956 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -66,7 +66,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
-          const isOutside = currentDate.getMonth() !== viewDate.getMonth(); 
+          const isOutside = currentDate.getMonth() !== viewDate.getMonth();
 
           return (
             <button
@@ -78,7 +78,7 @@ export function DatepickerViewsDays() {
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
-                isOutside && !isSelected && theme.items.item.outside, 
+                isOutside && !isSelected && theme.items.item.outside,
               )}
               onClick={() => {
                 if (isDisabled) return;
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index 089ee1bd9..82c377eee 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -50,7 +50,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
           today: "",
-          outside: "text-gray-400 opacity-40", 
+          outside: "text-gray-400 opacity-40",
         },
       },
     },