feat (calendar): add dateInfo

apps/www/src/app/examples/page.tsx

@@ -4,6 +4,7 @@ import {
   Avatar,
   AvatarGroup,
   Button,
+  Calendar,
   Callout,
   DatePicker,
   Dialog,
@@ -45,7 +46,7 @@ const Page = () => {
   const [selectValue1, setSelectValue1] = useState('');
   const [selectValue2, setSelectValue2] = useState('');
   const [inputValue, setInputValue] = useState('');
-  const [rangeValue, setRangeValue] = useState<any>({
+  const [rangeValue, setRangeValue] = useState({
     from: dayjs('2027-11-15').toDate(),
     to: dayjs('2027-12-10').toDate()
   });
@@ -165,7 +166,6 @@ const Page = () => {
               onClear={() => setSearch1('')}
             />
             <DatePicker
-              side='bottom'
               dateFormat='D MMM YYYY'
               value={dayjs().add(16, 'year').toDate()}
               onSelect={(value: Date) => console.log(value)}
@@ -187,10 +187,14 @@ const Page = () => {
             />
 
             <RangePicker
-              side='bottom'
               dateFormat='D MMM YYYY'
               value={rangeValue}
-              onSelect={range => setRangeValue(range)}
+              onSelect={range =>
+                setRangeValue({
+                  from: range.from ?? new Date(),
+                  to: range.to ?? new Date()
+                })
+              }
               calendarProps={{
                 captionLayout: 'dropdown',
                 mode: 'range',
@@ -233,6 +237,143 @@ const Page = () => {
               }}
             />
 
+            <Text
+              size='large'
+              weight='medium'
+              style={{ marginTop: '32px', marginBottom: '16px' }}
+            >
+              Calendar with Date Info (Object)
+            </Text>
+
+            <Calendar
+              numberOfMonths={2}
+              dateInfo={{
+                [dayjs().format('DD-MM-YYYY')]: (
+                  <Flex
+                    align='center'
+                    gap={1}
+                    style={{
+                      fontSize: '8px',
+                      color: 'var(--rs-color-foreground-base-secondary)'
+                    }}
+                  >
+                    <BellIcon style={{ width: '8px', height: '8px' }} />
+                    <Text style={{ fontSize: '8px' }} color='secondary'>
+                      25%
+                    </Text>
+                  </Flex>
+                ),
+                [dayjs().add(5, 'day').format('DD-MM-YYYY')]: (
+                  <Flex
+                    align='center'
+                    gap={1}
+                    style={{
+                      fontSize: '8px',
+                      color: 'var(--rs-color-foreground-base-secondary)'
+                    }}
+                  >
+                    <BellIcon style={{ width: '8px', height: '8px' }} />
+                    <Text style={{ fontSize: '8px' }} color='secondary'>
+                      25%
+                    </Text>
+                  </Flex>
+                ),
+                [dayjs().add(10, 'day').format('DD-MM-YYYY')]: (
+                  <Flex
+                    align='center'
+                    gap={1}
+                    style={{
+                      fontSize: '8px',
+                      color: 'var(--rs-color-foreground-base-secondary)'
+                    }}
+                  >
+                    <BellIcon style={{ width: '8px', height: '8px' }} />
+                    <Text style={{ fontSize: '8px' }} color='secondary'>
+                      25%
+                    </Text>
+                  </Flex>
+                )
+              }}
+            />
+
+            <Text
+              size='large'
+              weight='medium'
+              style={{ marginTop: '32px', marginBottom: '16px' }}
+            >
+              Calendar with Date Info (Function)
+            </Text>
+
+            <Calendar
+              numberOfMonths={2}
+              dateInfo={date => {
+                const today = new Date();
+                const isToday =
+                  date.getDate() === today.getDate() &&
+                  date.getMonth() === today.getMonth() &&
+                  date.getFullYear() === today.getFullYear();
+
+                // Show info on Sundays
+                if (date.getDay() === 0) {
+                  return (
+                    <Flex
+                      align='center'
+                      gap={1}
+                      style={{
+                        fontSize: '8px',
+                        color: 'var(--rs-color-foreground-base-secondary)'
+                      }}
+                    >
+                      <BellIcon style={{ width: '8px', height: '8px' }} />
+                      <Text style={{ fontSize: '8px' }} color='secondary'>
+                        Sun
+                      </Text>
+                    </Flex>
+                  );
+                }
+
+                // Show info on 15th of any month
+                if (date.getDate() === 15) {
+                  return (
+                    <Flex
+                      align='center'
+                      gap={1}
+                      style={{
+                        fontSize: '8px',
+                        color: 'var(--rs-color-foreground-base-secondary)'
+                      }}
+                    >
+                      <BellIcon style={{ width: '8px', height: '8px' }} />
+                      <Text style={{ fontSize: '8px' }} color='secondary'>
+                        15th
+                      </Text>
+                    </Flex>
+                  );
+                }
+
+                // Show info for today
+                if (isToday) {
+                  return (
+                    <Flex
+                      align='center'
+                      gap={1}
+                      style={{
+                        fontSize: '8px',
+                        color: 'var(--rs-color-foreground-base-secondary)'
+                      }}
+                    >
+                      <BellIcon style={{ width: '8px', height: '8px' }} />
+                      <Text style={{ fontSize: '8px' }} color='secondary'>
+                        Today
+                      </Text>
+                    </Flex>
+                  );
+                }
+
+                return null;
+              }}
+            />
+
             <Text
               size='large'
               weight='medium'

apps/www/src/content/docs/components/calendar/demo.ts

@@ -1,53 +1,53 @@
-"use client";
+'use client';
 
 export const preview = {
-  type: "code",
+  type: 'code',
   tabs: [
     {
-      name: "Calendar",
-      code: `<Calendar />`,
+      name: 'Calendar',
+      code: `<Calendar />`
     },
     {
-      name: "Range Picker",
+      name: 'Range Picker',
       code: `
-        <RangePicker inputFieldsProps={{ startDate: { size: "small" }, endDate: { size: "small" } }} />`,
+        <RangePicker inputFieldsProps={{ startDate: { size: "small" }, endDate: { size: "small" } }} />`
     },
     {
-      name: "Date Picker",
+      name: 'Date Picker',
       code: `
       <Flex style={{height:200}}>
         <DatePicker />
-      </Flex>`,
-    },
-  ],
+      </Flex>`
+    }
+  ]
 };
 
 export const calendarDemo = {
-  type: "code",
+  type: 'code',
   tabs: [
     {
-      name: "Basic",
-      code: `<Calendar numberOfMonths={2} />`,
+      name: 'Basic',
+      code: `<Calendar numberOfMonths={2} />`
     },
     {
-      name: "With Loading",
-      code: `<Calendar loadingData={true} numberOfMonths={2} />`,
-    },
-  ],
+      name: 'With Loading',
+      code: `<Calendar loadingData={true} numberOfMonths={2} />`
+    }
+  ]
 };
 export const rangePickerDemo = {
-  type: "code",
+  type: 'code',
   tabs: [
     {
-      name: "Basic",
-      code: `<RangePicker />`,
+      name: 'Basic',
+      code: `<RangePicker />`
     },
     {
-      name: "Without Calendar Icon",
-      code: `<RangePicker showCalendarIcon={false} />`,
+      name: 'Without Calendar Icon',
+      code: `<RangePicker showCalendarIcon={false} />`
     },
     {
-      name: "Custom Trigger",
+      name: 'Custom Trigger',
       code: `
       <RangePicker
         dateFormat="DD/MM/YYYY"
@@ -72,31 +72,56 @@ export const rangePickerDemo = {
             {startDate} - {endDate}
           </button>
         )}
-      </RangePicker>`,
-    },
-  ],
+      </RangePicker>`
+    }
+  ]
 };
 export const datePickerDemo = {
-  type: "code",
+  type: 'code',
   tabs: [
     {
-      name: "Basic",
-      code: `<DatePicker textFieldProps={{ size: "medium" }} />`,
+      name: 'Basic',
+      code: `<DatePicker textFieldProps={{ size: "medium" }} />`
     },
     {
-      name: "Without Calendar Icon",
-      code: `<DatePicker showCalendarIcon={false} textFieldProps={{ size: "medium" }} />`,
+      name: 'Without Calendar Icon',
+      code: `<DatePicker showCalendarIcon={false} textFieldProps={{ size: "medium" }} />`
     },
     {
-      name: "Custom Trigger",
+      name: 'Custom Trigger',
       code: `
       <DatePicker>
         {({ selectedDate }) => (
           <button>
             Selected: {selectedDate}
           </button>
         )}
-      </DatePicker>`,
-    },
-  ],
+      </DatePicker>`
+    }
+  ]
+};
+
+export const dateInfoDemo = {
+  type: 'code',
+  tabs: [
+    {
+      name: 'With Date Info',
+      code: `
+<Calendar
+  numberOfMonths={2}
+  dateInfo={{
+    [dayjs().format('DD-MM-YYYY')]: (
+      <Flex
+        align='center'
+        gap={2}
+        style={{ fontSize: '8px', color: 'var(--rs-color-foreground-base-secondary)' }}
+      >
+        <BellIcon style={{ width: '8px', height: '8px' }} />
+        <Text style={{ fontSize: '8px' }} color='secondary'>25%</Text>
+      </Flex>
+    )
+  }}
+/>`
+    }
+  ]
 };

apps/www/src/content/docs/components/calendar/index.mdx

@@ -8,6 +8,7 @@ import {
   datePickerDemo,
   rangePickerDemo,
   calendarDemo,
+  dateInfoDemo,
 } from "./demo.ts";
 
 <Demo data={preview} />
@@ -42,6 +43,12 @@ Choose between different variants to convey different meanings or importance lev
 
 <Demo data={calendarDemo} />
 
+#### Custom Date Information
+
+You can display custom components above each date using the `dateInfo` prop. The keys should be date strings in `"dd-MM-yyyy"` format, and the values are React components that will be rendered above the date number.
+
+<Demo data={dateInfoDemo} />
+
 ### Range Picker
 
 The Range Picker component allows selecting a date range with the following behaviors:

apps/www/src/content/docs/components/calendar/props.ts

@@ -11,8 +11,24 @@ export interface CalendarProps {
   /** Boolean to show loading state */
   loadingData?: boolean;
 
-  /** Object containing date-specific information like icons and text */
-  dateInfo?: Record<string, unknown>;
+  /**
+   * Custom React components to render above each date.
+   * Can be either:
+   * - An object with date strings in "dd-MM-yyyy" format as keys
+   * - A function that receives a Date and returns a ReactNode or null
+   * The component will be rendered above the date number.
+   *
+   * @example
+   * // Object approach (static data)
+   * dateInfo={{ "15-01-2024": <div><Icon /> 17%</div> }}
+   *
+   * @example
+   * // Function approach (dynamic logic)
+   * dateInfo={(date) => date.getDay() === 0 ? <div>Sunday</div> : null}
+   */
+  dateInfo?:
+    | Record<string, React.ReactNode>
+    | ((date: Date) => React.ReactNode | null);
 
   /** Boolean to show days from previous/next months */
   showOutsideDays?: boolean;

packages/raystack/components/badge/badge.module.css

@@ -59,11 +59,7 @@
 }
 
 .badge-gradient {
-  background: linear-gradient(
-    to right,
-    #AD00E933 0%,
-    #EF040433 100%
-  );
+  background: linear-gradient(to right, #ad00e933 0%, #ef040433 100%);
   color: var(--rs-color-foreground-base-primary);
 }