refactor(calendar): enhance calendar component styling and structure

apps/web/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts'
+import './.next/dev/types/routes.d.ts'
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

packages/ui/src/components/ui/calendar.tsx

@@ -17,18 +17,28 @@ function Calendar({
 }: CalendarProps) {
   return (
     <DayPicker
+      hideNavigation
       showOutsideDays={showOutsideDays}
       className={cn('p-3', className)}
       classNames={{
         months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
         month: 'space-y-4',
-        month_caption: 'flex justify-center pt-1 relative items-center',
-        caption_label: 'text-sm font-medium',
+        month_caption: 'flex w-full justify-center gap-2 pt-1 relative items-center',
+        caption_label: 'text-sm font-medium hidden',
         nav: 'space-x-1 flex items-center',
         button_previous: cn(
           buttonVariants({ variant: 'outline' }),
           'absolute left-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
         ),
+
+        dropdown:'rounded-md border border-input bg-background px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring',
+
+        dropdowns:'flex w-full items-center gap-2',
+        dropdown_root:'w-full' ,
+        months_dropdown: 'w-full px-3 py-2',
+        years_dropdown: 'w-full px-3 py-2',
+
+
         button_next: cn(
           buttonVariants({ variant: 'outline' }),
           'absolute right-1 h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
@@ -41,13 +51,13 @@ function Calendar({
         day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected])]:rounded-md',
         day_button: cn(
           buttonVariants({ variant: 'ghost' }),
-          'h-8 w-8 p-0 font-normal aria-selected:opacity-100'
+          'h-8 w-8 p-0 font-normal aria-selected:opacity-100 hover:bg-primary hover:text-primary-foreground'
         ),
         range_start: 'day-range-start',
         range_end: 'day-range-end',
         selected:
-          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
-        today: 'bg-accent text-accent-foreground',
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md',
+        today: 'bg-accent text-accent-foreground rounded-md',
         outside:
           'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
         disabled: 'text-muted-foreground opacity-50',
@@ -56,14 +66,6 @@ function Calendar({
         hidden: 'invisible',
         ...classNames,
       }}
-      components={{
-        Chevron: ({ orientation }) =>
-          orientation === 'left' ? (
-            <ChevronLeftIcon className="h-4 w-4" />
-          ) : (
-            <ChevronRightIcon className="h-4 w-4" />
-          ),
-      }}
       {...props}
     />
   )