Calendar

1import * as React from 'react'
2import { ChevronLeft, ChevronRight } from 'lucide-react'
3import { DayPicker } from 'react-day-picker'
4import { cn } from '@/lib/utils'
5import { buttonVariants } from '@/components/ui/button'
6 
7export type CalendarProps = React.ComponentProps<typeof DayPicker>
8 
9function Calendar({
10  className,
11  classNames,
12  showOutsideDays = true,
13  ...props
14}: CalendarProps) {
15  return (
16    <DayPicker
17      showOutsideDays={showOutsideDays}
18      className={cn(
19        'p-3 border-3 border-foreground bg-background shadow-[4px_4px_0px_hsl(var(--shadow-color))]',
20        className
21      )}
22      classNames={{
23        months: 'flex flex-col sm:flex-row gap-4',
24        month: 'flex flex-col gap-4',
25        month_caption: 'flex justify-center pt-1 relative items-center px-10',
26        caption_label: 'text-sm font-bold uppercase tracking-wide',
27        nav: 'flex items-center gap-1',
28        button_previous: cn(
29          buttonVariants({ variant: 'outline' }),
30          'h-7 w-7 bg-transparent p-0 absolute left-0 hover:translate-x-0 hover:translate-y-0 hover:scale-110'
31        ),
32        button_next: cn(
33          buttonVariants({ variant: 'outline' }),
34          'h-7 w-7 bg-transparent p-0 absolute right-0 hover:translate-x-0 hover:translate-y-0 hover:scale-110'
35        ),
36        month_grid: 'w-full border-collapse space-y-1',
37        weekdays: 'flex',
38        weekday: 'text-muted-foreground w-9 font-bold text-[0.8rem] uppercase',
39        week: 'flex w-full mt-2',
40        day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20',
41        day_button: cn(
42          buttonVariants({ variant: 'ghost' }),
43          'h-9 w-9 p-0 font-medium border-0 aria-selected:opacity-100'
44        ),
45        selected: 'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground border-2 border-foreground',
46        today: 'bg-accent text-accent-foreground border-2 border-foreground',
47        outside: 'text-muted-foreground opacity-50 aria-selected:opacity-30',
48        disabled: 'text-muted-foreground opacity-50',
49        range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
50        hidden: 'invisible',
51        ...classNames,
52      }}
53      components={{
54        Chevron: ({ orientation }) => {
55          const Icon = orientation === 'left' ? ChevronLeft : ChevronRight
56          return <Icon className="h-4 w-4 stroke-[3]" />
57        },
58      }}
59// … truncated