Calendar Year

1"use client"
2 
3import * as React from "react"
4import { Slot } from "@radix-ui/react-slot"
5import { cva, type VariantProps } from "class-variance-authority"
6import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
7import { cn } from "@/lib/utils"
8import dayjs from "dayjs"
9import timezone from "dayjs/plugin/timezone"
10import utc from "dayjs/plugin/utc"
11dayjs.extend(timezone)
12dayjs.extend(utc)
13// ============================================================================
14// Types
15// ============================================================================
16 
17/**
18 * State of a calendar day
19 */
20export type DayState = "blocked" | "disabled"
21 
22/**
23 * Day data structure
24 */
25export interface CalendarDay {
26  date: string // YYYY-MM-DD format
27  state?: DayState
28  disabled?: boolean
29  tooltip?: string
30}
31 
32/**
33 * Month structure with rows of days
34 */
35export interface CalendarMonth {
36  name: string
37  monthIndex: number
38  weekdayLabels: string[]
39  rows: (CalendarDay | null)[][]
40}
41 
42// ============================================================================
43// Variants
44// ============================================================================
45 
46const calendarYearDayVariants = cva(
47  "cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-semibold transition-all disabled:pointer-events-none disabled:opacity-50 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive relative h-9 w-9 p-0",
48  {
49    variants: {
50      variant: {
51        default: "bg-foreground text-background dark:text-background hover:bg-foreground/90 border border-foreground",
52        "default-success":
53          "bg-green-500 text-background hover:bg-green-600 hover:border-green-600 dark:hover:bg-green-400 dark:hover:border-green-400 border border-green-500",
54        accent: "bg-accent text-background dark:text-background hover:bg-accent/90 border border-accent",
55        destructive:
56          "bg-destructive hover:!bg-destructive text-background focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 border border-destructive",
57        outline:
58          "border bg-background shadow-xs hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
59// … truncated