"use client";
import * as React from "react";
import { DayPicker, type DayButtonProps, type ChevronProps } from "react-day-picker";
import { motion } from "motion/react";
import { CaretDownIcon, CaretLeftIcon, CaretRightIcon, CaretUpIcon } from "@phosphor-icons/react";
import { springs } from "@/lib/motion";
import { cn } from "@/lib/utils";

export type CalendarProps = React.ComponentProps<typeof DayPicker>;

const navButton =
  "inline-grid size-9 cursor-pointer place-items-center rounded-full bg-surface text-on-surface shadow-clay-sm transition-[box-shadow,translate] hover:-translate-y-0.5 active:translate-y-0 active:shadow-clay-pressed focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-40";

function CalendarChevron({ orientation, className }: ChevronProps) {
  const Icon = { left: CaretLeftIcon, right: CaretRightIcon, up: CaretUpIcon, down: CaretDownIcon }[orientation ?? "left"];
  return <Icon weight="bold" className={cn("size-4", className)} />;
}

/** Round day. Selected days pop into a raised primary pill, range middles sink into primary-container. */
function CalendarDayButton({ day, modifiers, className, ...props }: DayButtonProps) {
  const ref = React.useRef<HTMLButtonElement>(null);
  React.useEffect(() => {
    if (modifiers.focused) ref.current?.focus();
  }, [modifiers.focused]);

  const solo = modifiers.selected && !modifiers.range_middle;
  return (
    <motion.button
      ref={ref}
      data-day={day.date.toDateString()}
      whileTap={{ scale: 0.88 }}
      animate={{ scale: solo ? 1 : 0.98 }}
      transition={springs.squish}
      className={cn(
        "relative grid size-10 cursor-pointer place-items-center rounded-full text-sm font-semibold text-on-surface transition-[background-color,box-shadow,color] duration-150",
        "hover:bg-surface-sunken focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40 disabled:pointer-events-none",
        modifiers.today && !modifiers.selected && "ring-2 ring-inset ring-primary/60 font-extrabold",
        modifiers.outside && "text-on-surface-muted/60",
        modifiers.disabled && "text-on-surface-muted/40 line-through",
        modifiers.range_middle && "rounded-none bg-transparent text-on-primary-container hover:bg-transparent",
        solo && "bg-primary font-bold text-on-primary shadow-clay-sm hover:bg-primary",
        className
      )}
      {...(props as React.ComponentProps<typeof motion.button>)}
    />
  );
}

export function Calendar({ className, classNames, showOutsideDays = true, components, ...props }: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("w-fit rounded-xl bg-surface p-4 text-on-surface shadow-clay", className)}
      classNames={{
        root: "relative",
        months: "relative flex flex-col gap-6 sm:flex-row",
        month: "flex flex-col gap-3",
        nav: "absolute inset-x-0 top-0 z-10 flex items-center justify-between",
        button_previous: navButton,
        button_next: navButton,
        month_caption: "flex h-9 items-center justify-center px-10",
        caption_label: "text-base font-extrabold tracking-tight",
        dropdowns: "flex items-center gap-2 font-bold",
        month_grid: "border-collapse",
        weekdays: "flex",
        weekday: "w-10 pb-1 font-mono text-[0.7rem] font-bold uppercase text-on-surface-muted",
        week: "mt-1 flex",
        day: "group/day relative p-0 text-center",
        range_start: "rounded-l-full bg-primary-container",
        range_end: "rounded-r-full bg-primary-container",
        range_middle: "bg-primary-container",
        today: "",
        outside: "",
        disabled: "",
        hidden: "invisible",
        footer: "pt-3 text-sm font-medium text-on-surface-muted",
        ...classNames,
      }}
      components={{ Chevron: CalendarChevron, DayButton: CalendarDayButton, ...components }}
      {...props}
    />
  );
}
export { CalendarDayButton };
Installation
