calendar

1"use client"
2import type { ComponentProps } from "react"
3import { DayPicker } from "@zenithui/day-picker"
4import { cn } from "@/lib/utils"
5 
6export default function Calendar({
7  ...props
8}: ComponentProps<typeof DayPicker>) {
9  return (
10    <DayPicker
11      {...props}
12      classNames={{
13        calendar:
14          "w-full min-w-[300px] max-w-[320px] bg-background text-primary p-4 rounded-lg",
15        header: "flex justify-between items-center",
16        prevMonthButton: cn(
17          "rotate-180 cursor-pointer rounded-lg border-none bg-transparent p-2 transition-colors duration-200 ease-in-out",
18          // Hover Styles
19          "hover:bg-accent hover:text-accent-foreground",
20          // Focus Styles
21          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
22          // Disabled Styles
23          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
24        ),
25        nextMonthButton: cn(
26          "cursor-pointer rounded-lg border-none bg-transparent p-2 transition-colors duration-200 ease-in-out",
27          // Hover Styles
28          "hover:bg-accent hover:text-accent-foreground",
29          // Focus Styles
30          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
31          // Disabled Styles
32          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
33        ),
34        monthCaption: cn(
35          "text-primary flex h-10 min-w-[100px] cursor-pointer items-center justify-center rounded-md border-2 border-transparent bg-transparent text-sm font-medium",
36          // Hover Styles
37          "hover:bg-accent hover:text-accent-foreground",
38          // Focus Styles
39          "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none",
40          // Disabled Styles
41          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
42        ),
43        months: "grid grid-cols-3 gap-1",
44        weekdays: "grid grid-cols-7 text-center text-xs text-muted-foreground",
45        weekday: "py-2",
46        days: "grid grid-cols-7 gap-1 data-[mode='range']:gap-x-0",
47        day: cn(
48          "text-accent-foreground flex h-10 w-full cursor-pointer items-center justify-center rounded-lg bg-transparent text-sm font-medium transition-colors duration-200 ease-in-out",
49          // Hover Styles
50          "hover:bg-accent hover:text-accent-foreground",
51// … truncated