From 6a8a56bb7fe685ba5cb62d3d761b068939424922 Mon Sep 17 00:00:00 2001
From: aun-afzaal <codewithaun@gmail.com>
Date: Tue, 31 Mar 2026 14:55:54 +0500
Subject: [PATCH 1/2] Update Tailwind CSS configuration and enhance Datepicker
 component

- Added support for additional class list paths in Tailwind CSS configuration for both Storybook and web applications.
- Updated the Datepicker component to include a new 'outside' state for days that are not part of the current month, improving visual feedback for users.
- Refactored the Datepicker's Days view to incorporate the new 'outside' state in the button class logic.
---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 6 +++++-
 packages/ui/src/components/Datepicker/theme.ts       | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index f91a0843f..e94e2cf99 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -10,6 +10,8 @@ import {
   isDateEqual,
   isDateInRange,
   isDateToday,
+  isOutOfMonth,
+  isMonthEqual,
   Views,
 } from "../helpers";
 
@@ -25,6 +27,7 @@ export interface DatepickerViewsDaysTheme {
       selected: string;
       disabled: string;
       today: string;
+      outside: string;
     };
   };
 }
@@ -46,7 +49,6 @@ export function DatepickerViewsDays() {
 
   const weekDays = getWeekDays(language, weekStart);
   const startDate = getFirstDayOfTheMonth(viewDate, weekStart);
-
   return (
     <>
       <div className={theme.header.base}>
@@ -65,6 +67,7 @@ export function DatepickerViewsDays() {
           const isDisabled =
             !isDateInRange(currentDate, minDate, maxDate) || (filterDate && !filterDate(currentDate, Views.Days));
           const isToday = isDateToday(currentDate);
+          const isOutOfMonth = !isMonthEqual(currentDate, viewDate)
 
           return (
             <button
@@ -73,6 +76,7 @@ export function DatepickerViewsDays() {
               type="button"
               className={twMerge(
                 theme.items.item.base,
+                isOutOfMonth && theme.items.item.outside,
                 isToday && theme.items.item.today,
                 isSelected && theme.items.item.selected,
                 isDisabled && theme.items.item.disabled,
diff --git a/packages/ui/src/components/Datepicker/theme.ts b/packages/ui/src/components/Datepicker/theme.ts
index e3394257b..968880d94 100644
--- a/packages/ui/src/components/Datepicker/theme.ts
+++ b/packages/ui/src/components/Datepicker/theme.ts
@@ -49,6 +49,7 @@ export const datePickerTheme = createTheme<DatepickerTheme>({
           base: "block flex-1 cursor-pointer rounded-lg border-0 text-center text-sm font-semibold leading-9 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-600",
           selected: "bg-primary-700 text-white hover:bg-primary-600",
           disabled: "text-gray-500",
+          outside: "opacity-40 text-gray-500",
           today: "",
         },
       },

From 4c057ee8c390dfd353ce857e2100eb0861b79c66 Mon Sep 17 00:00:00 2001
From: aun-afzaal <codewithaun@gmail.com>
Date: Tue, 31 Mar 2026 14:58:45 +0500
Subject: [PATCH 2/2] Remove unused `isOutOfMonth` import from Datepicker Days
 view

---
 packages/ui/src/components/Datepicker/Views/Days.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/ui/src/components/Datepicker/Views/Days.tsx b/packages/ui/src/components/Datepicker/Views/Days.tsx
index e94e2cf99..fba965467 100644
--- a/packages/ui/src/components/Datepicker/Views/Days.tsx
+++ b/packages/ui/src/components/Datepicker/Views/Days.tsx
@@ -10,7 +10,6 @@ import {
   isDateEqual,
   isDateInRange,
   isDateToday,
-  isOutOfMonth,
   isMonthEqual,
   Views,
 } from "../helpers";