Merge pull request #913 from flags-gg/k-branch-1

✨ feat(calendar): improve calendar component styles and structure

Author: Keloran

package.json

@@ -54,7 +54,6 @@
     "clsx": "^2.1.1",
     "cmdk": "1.1.1",
     "cookies-next": "^5.1.0",
-    "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "geist": "^1.3.1",
     "input-otp": "^1.4.2",

pnpm-lock.yaml

@@ -34,13 +34,13 @@ function Calendar({
         head_cell:
           "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
         row: "flex w-full mt-2",
-        cell: cn(
+        day: cn(
           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range"
             ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
             : "[&:has([aria-selected])]:rounded-md"
         ),
-        day: cn(
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "size-8 p-0 font-normal aria-selected:opacity-100"
         ),
@@ -53,19 +53,20 @@ function Calendar({
         day_today: "bg-accent text-accent-foreground",
         day_outside:
           "day-outside text-muted-foreground aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
         day_range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
         day_hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: ({ className, ...props }) => (
-          <ChevronLeft className={cn("size-4", className)} {...props} />
-        ),
-        IconRight: ({ className, ...props }) => (
-          <ChevronRight className={cn("size-4", className)} {...props} />
-        ),
+        Chevron: (className, props) => {
+          if (props.orientation === "left") {
+            return <ChevronLeft className={cn("size-4", className)} {...props} />
+          }
+
+          return <ChevronRight className={cn("size-4", className)} {...props} />
+        }
       }}
       {...props}
     />