spb/vquant Public MIT

1/*2 * =============================================================================3 *  VibeQuant (vquant) — AI-Powered Financial Intelligence Platform4 * -----------------------------------------------------------------------------5 *  File:      client/src/components/ui/calendar.tsx6 *7 *  Author:    Simon-Pierre Boucher8 *  Contact:   contact@spboucher.ai9 *  Website:   https://www.spboucher.ai10 *  Demo:      https://www.vquant.ai11 *  License:   MIT (see LICENSE)12 *13 *  Copyright © 2026 Simon-Pierre Boucher. All rights reserved.14 * =============================================================================15 */1617import * as React from "react"18import { ChevronLeft, ChevronRight } from "lucide-react"19import { DayPicker } from "react-day-picker"2021import { cn } from "@/lib/utils"22import { buttonVariants } from "@/components/ui/button"2324export type CalendarProps = React.ComponentProps<typeof DayPicker>2526function Calendar({27  className,28  classNames,29  showOutsideDays = true,30  ...props31}: CalendarProps) {32  return (33    <DayPicker34      showOutsideDays={showOutsideDays}35      className={cn("p-3", className)}36      classNames={{37        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",38        month: "space-y-4",39        caption: "flex justify-center pt-1 relative items-center",40        caption_label: "text-sm font-medium",41        nav: "space-x-1 flex items-center",42        nav_button: cn(43          buttonVariants({ variant: "outline" }),44          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"45        ),46        nav_button_previous: "absolute left-1",47        nav_button_next: "absolute right-1",48        table: "w-full border-collapse space-y-1",49        head_row: "flex",50        head_cell:51          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",52        row: "flex w-full mt-2",53        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",54        day: cn(55          buttonVariants({ variant: "ghost" }),56          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"57        ),58        day_range_end: "day-range-end",59        day_selected:60          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",61        day_today: "bg-accent text-accent-foreground",62        day_outside:63          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",64        day_disabled: "text-muted-foreground opacity-50",65        day_range_middle:66          "aria-selected:bg-accent aria-selected:text-accent-foreground",67        day_hidden: "invisible",68        ...classNames,69      }}70      components={{71        IconLeft: ({ className, ...props }) => (72          <ChevronLeft className={cn("h-4 w-4", className)} {...props} />73        ),74        IconRight: ({ className, ...props }) => (75          <ChevronRight className={cn("h-4 w-4", className)} {...props} />76        ),77      }}78      {...props}79    />80  )81}82Calendar.displayName = "Calendar"8384export { Calendar }85