35:Ta6c6,
"use client"

import { useEffect, useRef } from "react"
import {
  DayPicker,
  getDefaultClassNames,
  type DayButton,
} from "react-day-picker"

import { cn } from "@/lib/utils"
import { Button, buttonVariants } from "@/components/ui/button"

const Chevron = ({
  orientation,
  className,
}: {
  orientation?: "left" | "right" | "up" | "down"
  className?: string
}) => (
  <svg
    viewBox="0 0 16 16"
    fill="none"
    className={cn(
      "size-16",
      orientation === "left" && "rotate-90",
      orientation === "right" && "-rotate-90",
      orientation === "up" && "rotate-180",
      className
    )}
    aria-hidden="true"
  >
    <path
      d="M4 6l4 4 4-4"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
    />
  </svg>
)

const Calendar = ({
  className,
  classNames,
  showOutsideDays = true,
  captionLayout = "label",
  components,
  ...props
}: React.ComponentProps<typeof DayPicker>) => {
  const d = getDefaultClassNames()
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      captionLayout={captionLayout}
      className={cn("group/calendar w-fit p-12 [--cell-size:36px]", className)}
      classNames={{
        root: cn("w-fit", d.root),
        months: cn("relative flex flex-col gap-16 min-720:flex-row", d.months),
        month: cn("flex w-full flex-col gap-12", d.month),
        nav: cn(
          "absolute inset-x-0 top-0 flex w-full items-center justify-between",
          d.nav
        ),
        button_previous: cn(
          buttonVariants({ variant: "ghost", size: "icon" }),
          "size-(--cell-size) select-none aria-disabled:opacity-50",
          d.button_previous
        ),
        button_next: cn(
          buttonVariants({ variant: "ghost", size: "icon" }),
          "size-(--cell-size) select-none aria-disabled:opacity-50",
          d.button_next
        ),
        month_caption: cn(
          "flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)",
          d.month_caption
        ),
        dropdowns: cn(
          "flex h-(--cell-size) w-full items-center justify-center gap-8 text-compact-bold",
          d.dropdowns
        ),
        dropdown_root: cn(
          "relative rounded-8 has-focus:ring-2 has-focus:ring-text-primary",
          d.dropdown_root
        ),
        dropdown: cn("absolute inset-0 opacity-0", d.dropdown),
        caption_label: cn(
          "flex items-center gap-4 text-compact-bold select-none [&>svg]:size-12 [&>svg]:text-text-tertiary",
          d.caption_label
        ),
        month_grid: cn("w-full border-collapse", d.month_grid),
        weekdays: cn("flex", d.weekdays),
        weekday: cn(
          "flex-1 text-caption text-text-tertiary select-none",
          d.weekday
        ),
        week: cn("mt-4 flex w-full", d.week),
        week_number_header: cn(
          "w-(--cell-size) select-none",
          d.week_number_header
        ),
        week_number: cn(
          "text-caption text-text-tertiary select-none",
          d.week_number
        ),
        day: cn(
          "group/day relative aspect-square size-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-full [&:last-child[data-selected=true]_button]:rounded-r-full",
          d.day
        ),
        range_start: cn(
          "rounded-l-full bg-background-secondary",
          d.range_start
        ),
        range_middle: cn("rounded-none", d.range_middle),
        range_end: cn("rounded-r-full bg-background-secondary", d.range_end),
        today: cn(
          "rounded-full bg-background-tertiary data-[selected=true]:rounded-none",
          d.today
        ),
        outside: cn(
          "text-text-disabled aria-selected:text-text-disabled",
          d.outside
        ),
        disabled: cn("text-text-disabled opacity-50", d.disabled),
        hidden: cn("invisible", d.hidden),
        ...classNames,
      }}
      components={{
        Root: ({ className, rootRef, ...props }) => (
          <div
            data-slot="calendar"
            ref={rootRef}
            className={className}
            {...props}
          />
        ),
        Chevron,
        DayButton: CalendarDayButton,
        WeekNumber: ({ children, ...props }) => (
          <td {...props}>
            <div className="flex size-(--cell-size) items-center justify-center">
              {children}
            </div>
          </td>
        ),
        ...components,
      }}
      {...props}
    />
  )
}

const CalendarDayButton = ({
  className,
  day,
  modifiers,
  ...props
}: React.ComponentProps<typeof DayButton>) => {
  const ref = useRef<HTMLButtonElement>(null)
  useEffect(() => {
    if (modifiers.focused) ref.current?.focus()
  }, [modifiers.focused])
  const single =
    modifiers.selected &&
    !modifiers.range_start &&
    !modifiers.range_end &&
    !modifiers.range_middle
  return (
    <Button
      ref={ref}
      variant="ghost"
      size="icon"
      data-day={day.date.toLocaleDateString()}
      data-selected-single={single}
      data-range-start={modifiers.range_start}
      data-range-end={modifiers.range_end}
      data-range-middle={modifiers.range_middle}
      className={cn(
        "size-(--cell-size) text-compact group-data-[focused=true]/day:ring-4 group-data-[focused=true]/day:ring-blue-60/50 data-[range-end=true]:bg-background-inverse data-[range-end=true]:text-text-inverse data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-background-secondary data-[range-middle=true]:hover:bg-background-secondary-hover data-[range-start=true]:bg-background-inverse data-[range-start=true]:text-text-inverse data-[selected-single=true]:bg-background-inverse data-[selected-single=true]:text-text-inverse data-[selected-single=true]:hover:bg-background-inverse-hover",
        className
      )}
      {...props}
    />
  )
}

export { Calendar, CalendarDayButton }
34:["$","div",null,{"className":"relative overflow-hidden rounded-16 bg-background-secondary","children":[["$","div",null,{"className":"overflow-x-auto p-16 pr-48 font-mono text-compact leading-[20px] [&_pre]:bg-transparent!","dangerouslySetInnerHTML":{"__html":"$35"}}],"$L36"]}]
Installation

Usage
