Calendar

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
5import { format } from "date-fns";
6import * as React from "react";
7 
8import { Button, buttonVariants } from "@/components/ui/button";
9import {
10  Select,
11  SelectContent,
12  SelectItem,
13  SelectTrigger,
14  SelectValue,
15} from "@/components/ui/select";
16import { cn } from "@/lib/utils";
17import { ChevronDownIcon } from "lucide-react";
18import {
19  type DayButton,
20  DayPicker,
21  type DropdownProps,
22  getDefaultClassNames,
23} from "react-day-picker";
24 
25export function InBuiltDropdown({
26  options = [],
27  value,
28  onChange,
29  disabled,
30  name,
31  id,
32  "aria-label": ariaLabel,
33}: DropdownProps) {
34  return (
35    <Select
36      disabled={disabled}
37      name={name}
38      value={value != null ? String(value) : ""}
39      onValueChange={(val) => {
40        const e = {
41          target: { value: val },
42        } as unknown as React.ChangeEvent<HTMLSelectElement>;
43        onChange?.(e);
44      }}
45    >
46      <SelectTrigger
47        id={id}
48        size="sm"
49        aria-label={ariaLabel}
50        className="z-50 px-3 text-sm [&_svg:not([class*='text-'])]:text-accent-foreground bg-transparent dark:bg-transparent dark:hover:bg-transparent"
51      >
52        <SelectValue />
53      </SelectTrigger>
54 
55      <SelectContent className="rounded-md borde p-0 min-w-20">
56        {options.map(({ value: v, label, disabled }) => (
57          <SelectItem
58            key={String(v)}
59            value={String(v)}
60            disabled={disabled}
61            className="cursor-pointer px-3 py-1.5 text-sm"
62          >
63            {label}
64          </SelectItem>
65        ))}
66      </SelectContent>
67    </Select>
68  );
69}
70 
71function Calendar({
72  className,
73  classNames,
74  showOutsideDays = true,
75  captionLayout = "label",
76  buttonVariant = "ghost",
77  formatters,
78  components,
79  labels,
80  monthDropdownAriaLabel,
81  ...props
82}: React.ComponentProps<typeof DayPicker> & {
83  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
84  /** Sets `labels.labelMonthDropdown` for dropdown caption layouts (month `<select>` / custom trigger). */
85  monthDropdownAriaLabel?: string;
86}) {
87  const defaultClassNames = getDefaultClassNames();
88 
89  return (
90    <DayPicker
91      showOutsideDays={showOutsideDays}
92      className={cn("p-3", className)}
93      captionLayout={captionLayout}
94      labels={{
95        labelNav: () => "Month navigation",
96        ...labels,
97// … truncated