@vendure/dashboard 3.3.6-master-202507041203 → 3.4.0-minor-202506250934

package/src/lib/components/ui/calendar.tsx

@@ -1,53 +1,59 @@
-'use client';
+"use client"
 
 // A custom calendar that is compatible
 // with react-day-picker v9 from https://date-picker.luca-felix.com/
 
-import { Button, buttonVariants } from '@/vdb/components/ui/button.js';
-import { cn } from '@/vdb/lib/utils.js';
-import { differenceInCalendarDays } from 'date-fns';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-import * as React from 'react';
-import { DayPicker, labelNext, labelPrevious, useDayPicker, type DayPickerProps } from 'react-day-picker';
+import { Button, buttonVariants } from "@/components/ui/button.js"
+import { cn } from "@/lib/utils.js"
+import { differenceInCalendarDays } from "date-fns"
+import { ChevronLeft, ChevronRight } from "lucide-react"
+import * as React from "react"
+import {
+  DayPicker,
+  labelNext,
+  labelPrevious,
+  useDayPicker,
+  type DayPickerProps,
+} from "react-day-picker"
 
 export type CalendarProps = DayPickerProps & {
-    /**
-     * In the year view, the number of years to display at once.
-     * @default 12
-     */
-    yearRange?: number;
+  /**
+   * In the year view, the number of years to display at once.
+   * @default 12
+   */
+  yearRange?: number
 
-    /**
-     * Wether to show the year switcher in the caption.
-     * @default true
-     */
-    showYearSwitcher?: boolean;
+  /**
+   * Wether to show the year switcher in the caption.
+   * @default true
+   */
+  showYearSwitcher?: boolean
 
-    monthsClassName?: string;
-    monthCaptionClassName?: string;
-    weekdaysClassName?: string;
-    weekdayClassName?: string;
-    monthClassName?: string;
-    captionClassName?: string;
-    captionLabelClassName?: string;
-    buttonNextClassName?: string;
-    buttonPreviousClassName?: string;
-    navClassName?: string;
-    monthGridClassName?: string;
-    weekClassName?: string;
-    dayClassName?: string;
-    dayButtonClassName?: string;
-    rangeStartClassName?: string;
-    rangeEndClassName?: string;
-    selectedClassName?: string;
-    todayClassName?: string;
-    outsideClassName?: string;
-    disabledClassName?: string;
-    rangeMiddleClassName?: string;
-    hiddenClassName?: string;
-};
+  monthsClassName?: string
+  monthCaptionClassName?: string
+  weekdaysClassName?: string
+  weekdayClassName?: string
+  monthClassName?: string
+  captionClassName?: string
+  captionLabelClassName?: string
+  buttonNextClassName?: string
+  buttonPreviousClassName?: string
+  navClassName?: string
+  monthGridClassName?: string
+  weekClassName?: string
+  dayClassName?: string
+  dayButtonClassName?: string
+  rangeStartClassName?: string
+  rangeEndClassName?: string
+  selectedClassName?: string
+  todayClassName?: string
+  outsideClassName?: string
+  disabledClassName?: string
+  rangeMiddleClassName?: string
+  hiddenClassName?: string
+}
 
-type NavView = 'days' | 'years';
+type NavView = "days" | "years"
 
 /**
  * A custom calendar component built on top of react-day-picker.
@@ -56,392 +62,453 @@ type NavView = 'days' | 'years';
  * @returns
  */
 function Calendar({
-    className,
-    showOutsideDays = true,
-    showYearSwitcher = true,
-    yearRange = 12,
-    numberOfMonths,
-    ...props
+  className,
+  showOutsideDays = true,
+  showYearSwitcher = true,
+  yearRange = 12,
+  numberOfMonths,
+  ...props
 }: CalendarProps) {
-    const [navView, setNavView] = React.useState<NavView>('days');
-    const [displayYears, setDisplayYears] = React.useState<{
-        from: number;
-        to: number;
-    }>(
-        React.useMemo(() => {
-            const currentYear = new Date().getFullYear();
-            return {
-                from: currentYear - Math.floor(yearRange / 2 - 1),
-                to: currentYear + Math.ceil(yearRange / 2),
-            };
-        }, [yearRange]),
-    );
+  const [navView, setNavView] = React.useState<NavView>("days")
+  const [displayYears, setDisplayYears] = React.useState<{
+    from: number
+    to: number
+  }>(
+    React.useMemo(() => {
+      const currentYear = new Date().getFullYear()
+      return {
+        from: currentYear - Math.floor(yearRange / 2 - 1),
+        to: currentYear + Math.ceil(yearRange / 2),
+      }
+    }, [yearRange])
+  )
 
-    const { onNextClick, onPrevClick, startMonth, endMonth } = props;
+  const { onNextClick, onPrevClick, startMonth, endMonth } = props
 
-    const columnsDisplayed = navView === 'years' ? 1 : numberOfMonths;
+  const columnsDisplayed = navView === "years" ? 1 : numberOfMonths
 
-    const _monthsClassName = cn('relative flex', props.monthsClassName);
-    const _monthCaptionClassName = cn(
-        'relative mx-10 flex h-7 items-center justify-center',
-        props.monthCaptionClassName,
-    );
-    const _weekdaysClassName = cn('flex flex-row', props.weekdaysClassName);
-    const _weekdayClassName = cn('w-8 text-sm font-normal text-muted-foreground', props.weekdayClassName);
-    const _monthClassName = cn('w-full', props.monthClassName);
-    const _captionClassName = cn('relative flex items-center justify-center pt-1', props.captionClassName);
-    const _captionLabelClassName = cn('truncate text-sm font-medium', props.captionLabelClassName);
-    const buttonNavClassName = buttonVariants({
-        variant: 'outline',
-        className: 'absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-    });
-    const _buttonNextClassName = cn(buttonNavClassName, 'right-0', props.buttonNextClassName);
-    const _buttonPreviousClassName = cn(buttonNavClassName, 'left-0', props.buttonPreviousClassName);
-    const _navClassName = cn('flex items-start', props.navClassName);
-    const _monthGridClassName = cn('mx-auto mt-4', props.monthGridClassName);
-    const _weekClassName = cn('mt-2 flex w-max items-start', props.weekClassName);
-    const _dayClassName = cn(
-        'flex size-8 flex-1 items-center justify-center p-0 text-sm',
-        props.dayClassName,
-    );
-    const _dayButtonClassName = cn(
-        buttonVariants({ variant: 'ghost' }),
-        'size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100',
-        props.dayButtonClassName,
-    );
-    const buttonRangeClassName =
-        'bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground';
-    const _rangeStartClassName = cn(
-        buttonRangeClassName,
-        'day-range-start rounded-s-md',
-        props.rangeStartClassName,
-    );
-    const _rangeEndClassName = cn(
-        buttonRangeClassName,
-        'day-range-end rounded-e-md',
-        props.rangeEndClassName,
-    );
-    const _rangeMiddleClassName = cn(
-        'bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground',
-        props.rangeMiddleClassName,
-    );
-    const _selectedClassName = cn(
-        '[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground',
-        props.selectedClassName,
-    );
-    const _todayClassName = cn(
-        '[&>button]:bg-accent [&>button]:text-accent-foreground',
-        props.todayClassName,
-    );
-    const _outsideClassName = cn(
-        'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
-        props.outsideClassName,
-    );
-    const _disabledClassName = cn('text-muted-foreground opacity-50', props.disabledClassName);
-    const _hiddenClassName = cn('invisible flex-1', props.hiddenClassName);
+  const _monthsClassName = cn("relative flex", props.monthsClassName)
+  const _monthCaptionClassName = cn(
+    "relative mx-10 flex h-7 items-center justify-center",
+    props.monthCaptionClassName
+  )
+  const _weekdaysClassName = cn("flex flex-row", props.weekdaysClassName)
+  const _weekdayClassName = cn(
+    "w-8 text-sm font-normal text-muted-foreground",
+    props.weekdayClassName
+  )
+  const _monthClassName = cn("w-full", props.monthClassName)
+  const _captionClassName = cn(
+    "relative flex items-center justify-center pt-1",
+    props.captionClassName
+  )
+  const _captionLabelClassName = cn(
+    "truncate text-sm font-medium",
+    props.captionLabelClassName
+  )
+  const buttonNavClassName = buttonVariants({
+    variant: "outline",
+    className:
+      "absolute h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+  })
+  const _buttonNextClassName = cn(
+    buttonNavClassName,
+    "right-0",
+    props.buttonNextClassName
+  )
+  const _buttonPreviousClassName = cn(
+    buttonNavClassName,
+    "left-0",
+    props.buttonPreviousClassName
+  )
+  const _navClassName = cn("flex items-start", props.navClassName)
+  const _monthGridClassName = cn("mx-auto mt-4", props.monthGridClassName)
+  const _weekClassName = cn("mt-2 flex w-max items-start", props.weekClassName)
+  const _dayClassName = cn(
+    "flex size-8 flex-1 items-center justify-center p-0 text-sm",
+    props.dayClassName
+  )
+  const _dayButtonClassName = cn(
+    buttonVariants({ variant: "ghost" }),
+    "size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100",
+    props.dayButtonClassName
+  )
+  const buttonRangeClassName =
+    "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground"
+  const _rangeStartClassName = cn(
+    buttonRangeClassName,
+    "day-range-start rounded-s-md",
+    props.rangeStartClassName
+  )
+  const _rangeEndClassName = cn(
+    buttonRangeClassName,
+    "day-range-end rounded-e-md",
+    props.rangeEndClassName
+  )
+  const _rangeMiddleClassName = cn(
+    "bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground",
+    props.rangeMiddleClassName
+  )
+  const _selectedClassName = cn(
+    "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
+    props.selectedClassName
+  )
+  const _todayClassName = cn(
+    "[&>button]:bg-accent [&>button]:text-accent-foreground",
+    props.todayClassName
+  )
+  const _outsideClassName = cn(
+    "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+    props.outsideClassName
+  )
+  const _disabledClassName = cn(
+    "text-muted-foreground opacity-50",
+    props.disabledClassName
+  )
+  const _hiddenClassName = cn("invisible flex-1", props.hiddenClassName)
 
-    return (
-        <DayPicker
-            showOutsideDays={showOutsideDays}
-            className={cn('p-3', className)}
-            style={{
-                width: 248.8 * (columnsDisplayed ?? 1) + 'px',
-            }}
-            classNames={{
-                months: _monthsClassName,
-                month_caption: _monthCaptionClassName,
-                weekdays: _weekdaysClassName,
-                weekday: _weekdayClassName,
-                month: _monthClassName,
-                caption: _captionClassName,
-                caption_label: _captionLabelClassName,
-                button_next: _buttonNextClassName,
-                button_previous: _buttonPreviousClassName,
-                nav: _navClassName,
-                month_grid: _monthGridClassName,
-                week: _weekClassName,
-                day: _dayClassName,
-                day_button: _dayButtonClassName,
-                range_start: _rangeStartClassName,
-                range_middle: _rangeMiddleClassName,
-                range_end: _rangeEndClassName,
-                selected: _selectedClassName,
-                today: _todayClassName,
-                outside: _outsideClassName,
-                disabled: _disabledClassName,
-                hidden: _hiddenClassName,
-            }}
-            components={{
-                Chevron: ({ orientation }) => {
-                    const Icon = orientation === 'left' ? ChevronLeft : ChevronRight;
-                    return <Icon className="h-4 w-4" />;
-                },
-                Nav: ({ className }) => (
-                    <Nav
-                        className={className}
-                        displayYears={displayYears}
-                        navView={navView}
-                        setDisplayYears={setDisplayYears}
-                        startMonth={startMonth}
-                        endMonth={endMonth}
-                        onPrevClick={onPrevClick}
-                    />
-                ),
-                CaptionLabel: props => (
-                    <CaptionLabel
-                        showYearSwitcher={showYearSwitcher}
-                        navView={navView}
-                        setNavView={setNavView}
-                        displayYears={displayYears}
-                        {...props}
-                    />
-                ),
-                MonthGrid: ({ className, children, ...props }) => (
-                    <MonthGrid
-                        children={children}
-                        className={className}
-                        displayYears={displayYears}
-                        startMonth={startMonth}
-                        endMonth={endMonth}
-                        navView={navView}
-                        setNavView={setNavView}
-                        {...props}
-                    />
-                ),
-            }}
-            numberOfMonths={columnsDisplayed}
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      style={{
+        width: 248.8 * (columnsDisplayed ?? 1) + "px",
+      }}
+      classNames={{
+        months: _monthsClassName,
+        month_caption: _monthCaptionClassName,
+        weekdays: _weekdaysClassName,
+        weekday: _weekdayClassName,
+        month: _monthClassName,
+        caption: _captionClassName,
+        caption_label: _captionLabelClassName,
+        button_next: _buttonNextClassName,
+        button_previous: _buttonPreviousClassName,
+        nav: _navClassName,
+        month_grid: _monthGridClassName,
+        week: _weekClassName,
+        day: _dayClassName,
+        day_button: _dayButtonClassName,
+        range_start: _rangeStartClassName,
+        range_middle: _rangeMiddleClassName,
+        range_end: _rangeEndClassName,
+        selected: _selectedClassName,
+        today: _todayClassName,
+        outside: _outsideClassName,
+        disabled: _disabledClassName,
+        hidden: _hiddenClassName,
+      }}
+      components={{
+        Chevron: ({ orientation }) => {
+          const Icon = orientation === "left" ? ChevronLeft : ChevronRight
+          return <Icon className="h-4 w-4" />
+        },
+        Nav: ({ className }) => (
+          <Nav
+            className={className}
+            displayYears={displayYears}
+            navView={navView}
+            setDisplayYears={setDisplayYears}
+            startMonth={startMonth}
+            endMonth={endMonth}
+            onPrevClick={onPrevClick}
+          />
+        ),
+        CaptionLabel: (props) => (
+          <CaptionLabel
+            showYearSwitcher={showYearSwitcher}
+            navView={navView}
+            setNavView={setNavView}
+            displayYears={displayYears}
             {...props}
-        />
-    );
+          />
+        ),
+        MonthGrid: ({ className, children, ...props }) => (
+          <MonthGrid
+            children={children}
+            className={className}
+            displayYears={displayYears}
+            startMonth={startMonth}
+            endMonth={endMonth}
+            navView={navView}
+            setNavView={setNavView}
+            {...props}
+          />
+        ),
+      }}
+      numberOfMonths={columnsDisplayed}
+      {...props}
+    />
+  )
 }
-
-Calendar.displayName = 'Calendar';
+Calendar.displayName = "Calendar"
 
 function Nav({
-    className,
-    navView,
-    startMonth,
-    endMonth,
-    displayYears,
-    setDisplayYears,
-    onPrevClick,
-    onNextClick,
+  className,
+  navView,
+  startMonth,
+  endMonth,
+  displayYears,
+  setDisplayYears,
+  onPrevClick,
+  onNextClick,
 }: {
-    className?: string;
-    navView: NavView;
-    startMonth?: Date;
-    endMonth?: Date;
-    displayYears: { from: number; to: number };
-    setDisplayYears: React.Dispatch<React.SetStateAction<{ from: number; to: number }>>;
-    onPrevClick?: (date: Date) => void;
-    onNextClick?: (date: Date) => void;
+  className?: string
+  navView: NavView
+  startMonth?: Date
+  endMonth?: Date
+  displayYears: { from: number; to: number }
+  setDisplayYears: React.Dispatch<
+    React.SetStateAction<{ from: number; to: number }>
+  >
+  onPrevClick?: (date: Date) => void
+  onNextClick?: (date: Date) => void
 }) {
-    const { nextMonth, previousMonth, goToMonth } = useDayPicker();
+  const { nextMonth, previousMonth, goToMonth } = useDayPicker()
 
-    const isPreviousDisabled = (() => {
-        if (navView === 'years') {
-            return (
-                (startMonth &&
-                    differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), startMonth) < 0) ||
-                (endMonth && differenceInCalendarDays(new Date(displayYears.from - 1, 0, 1), endMonth) > 0)
-            );
-        }
-        return !previousMonth;
-    })();
+  const isPreviousDisabled = (() => {
+    if (navView === "years") {
+      return (
+        (startMonth &&
+          differenceInCalendarDays(
+            new Date(displayYears.from - 1, 0, 1),
+            startMonth
+          ) < 0) ||
+        (endMonth &&
+          differenceInCalendarDays(
+            new Date(displayYears.from - 1, 0, 1),
+            endMonth
+          ) > 0)
+      )
+    }
+    return !previousMonth
+  })()
 
-    const isNextDisabled = (() => {
-        if (navView === 'years') {
-            return (
-                (startMonth &&
-                    differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), startMonth) < 0) ||
-                (endMonth && differenceInCalendarDays(new Date(displayYears.to + 1, 0, 1), endMonth) > 0)
-            );
-        }
-        return !nextMonth;
-    })();
+  const isNextDisabled = (() => {
+    if (navView === "years") {
+      return (
+        (startMonth &&
+          differenceInCalendarDays(
+            new Date(displayYears.to + 1, 0, 1),
+            startMonth
+          ) < 0) ||
+        (endMonth &&
+          differenceInCalendarDays(
+            new Date(displayYears.to + 1, 0, 1),
+            endMonth
+          ) > 0)
+      )
+    }
+    return !nextMonth
+  })()
 
-    const handlePreviousClick = React.useCallback(() => {
-        if (!previousMonth) return;
-        if (navView === 'years') {
-            setDisplayYears(prev => ({
-                from: prev.from - (prev.to - prev.from + 1),
-                to: prev.to - (prev.to - prev.from + 1),
-            }));
-            onPrevClick?.(new Date(displayYears.from - (displayYears.to - displayYears.from), 0, 1));
-            return;
-        }
-        goToMonth(previousMonth);
-        onPrevClick?.(previousMonth);
-    }, [previousMonth, goToMonth]);
+  const handlePreviousClick = React.useCallback(() => {
+    if (!previousMonth) return
+    if (navView === "years") {
+      setDisplayYears((prev) => ({
+        from: prev.from - (prev.to - prev.from + 1),
+        to: prev.to - (prev.to - prev.from + 1),
+      }))
+      onPrevClick?.(
+        new Date(
+          displayYears.from - (displayYears.to - displayYears.from),
+          0,
+          1
+        )
+      )
+      return
+    }
+    goToMonth(previousMonth)
+    onPrevClick?.(previousMonth)
+  }, [previousMonth, goToMonth])
 
-    const handleNextClick = React.useCallback(() => {
-        if (!nextMonth) return;
-        if (navView === 'years') {
-            setDisplayYears(prev => ({
-                from: prev.from + (prev.to - prev.from + 1),
-                to: prev.to + (prev.to - prev.from + 1),
-            }));
-            onNextClick?.(new Date(displayYears.from + (displayYears.to - displayYears.from), 0, 1));
-            return;
+  const handleNextClick = React.useCallback(() => {
+    if (!nextMonth) return
+    if (navView === "years") {
+      setDisplayYears((prev) => ({
+        from: prev.from + (prev.to - prev.from + 1),
+        to: prev.to + (prev.to - prev.from + 1),
+      }))
+      onNextClick?.(
+        new Date(
+          displayYears.from + (displayYears.to - displayYears.from),
+          0,
+          1
+        )
+      )
+      return
+    }
+    goToMonth(nextMonth)
+    onNextClick?.(nextMonth)
+  }, [goToMonth, nextMonth])
+  return (
+    <nav className={cn("flex items-center", className)}>
+      <Button
+        variant="outline"
+        className="absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
+        type="button"
+        tabIndex={isPreviousDisabled ? undefined : -1}
+        disabled={isPreviousDisabled}
+        aria-label={
+          navView === "years"
+            ? `Go to the previous ${
+                displayYears.to - displayYears.from + 1
+              } years`
+            : labelPrevious(previousMonth)
         }
-        goToMonth(nextMonth);
-        onNextClick?.(nextMonth);
-    }, [goToMonth, nextMonth]);
-    return (
-        <nav className={cn('flex items-center', className)}>
-            <Button
-                variant="outline"
-                className="absolute left-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-                type="button"
-                tabIndex={isPreviousDisabled ? undefined : -1}
-                disabled={isPreviousDisabled}
-                aria-label={
-                    navView === 'years'
-                        ? `Go to the previous ${displayYears.to - displayYears.from + 1} years`
-                        : labelPrevious(previousMonth)
-                }
-                onClick={handlePreviousClick}
-            >
-                <ChevronLeft className="h-4 w-4" />
-            </Button>
+        onClick={handlePreviousClick}
+      >
+        <ChevronLeft className="h-4 w-4" />
+      </Button>
 
-            <Button
-                variant="outline"
-                className="absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
-                type="button"
-                tabIndex={isNextDisabled ? undefined : -1}
-                disabled={isNextDisabled}
-                aria-label={
-                    navView === 'years'
-                        ? `Go to the next ${displayYears.to - displayYears.from + 1} years`
-                        : labelNext(nextMonth)
-                }
-                onClick={handleNextClick}
-            >
-                <ChevronRight className="h-4 w-4" />
-            </Button>
-        </nav>
-    );
+      <Button
+        variant="outline"
+        className="absolute right-0 h-7 w-7 bg-transparent p-0 opacity-80 hover:opacity-100"
+        type="button"
+        tabIndex={isNextDisabled ? undefined : -1}
+        disabled={isNextDisabled}
+        aria-label={
+          navView === "years"
+            ? `Go to the next ${displayYears.to - displayYears.from + 1} years`
+            : labelNext(nextMonth)
+        }
+        onClick={handleNextClick}
+      >
+        <ChevronRight className="h-4 w-4" />
+      </Button>
+    </nav>
+  )
 }
 
 function CaptionLabel({
-    children,
-    showYearSwitcher,
-    navView,
-    setNavView,
-    displayYears,
-    ...props
+  children,
+  showYearSwitcher,
+  navView,
+  setNavView,
+  displayYears,
+  ...props
 }: {
-    showYearSwitcher?: boolean;
-    navView: NavView;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
-    displayYears: { from: number; to: number };
+  showYearSwitcher?: boolean
+  navView: NavView
+  setNavView: React.Dispatch<React.SetStateAction<NavView>>
+  displayYears: { from: number; to: number }
 } & React.HTMLAttributes<HTMLSpanElement>) {
-    if (!showYearSwitcher) return <span {...props}>{children}</span>;
-    return (
-        <Button
-            className="h-7 w-full truncate text-sm font-medium"
-            variant="ghost"
-            size="sm"
-            onClick={() => setNavView(prev => (prev === 'days' ? 'years' : 'days'))}
-        >
-            {navView === 'days' ? children : displayYears.from + ' - ' + displayYears.to}
-        </Button>
-    );
+  if (!showYearSwitcher) return <span {...props}>{children}</span>
+  return (
+    <Button
+      className="h-7 w-full truncate text-sm font-medium"
+      variant="ghost"
+      size="sm"
+      onClick={() => setNavView((prev) => (prev === "days" ? "years" : "days"))}
+    >
+      {navView === "days"
+        ? children
+        : displayYears.from + " - " + displayYears.to}
+    </Button>
+  )
 }
 
 function MonthGrid({
-    className,
-    children,
-    displayYears,
-    startMonth,
-    endMonth,
-    navView,
-    setNavView,
-    ...props
+  className,
+  children,
+  displayYears,
+  startMonth,
+  endMonth,
+  navView,
+  setNavView,
+  ...props
 }: {
-    className?: string;
-    children: React.ReactNode;
-    displayYears: { from: number; to: number };
-    startMonth?: Date;
-    endMonth?: Date;
-    navView: NavView;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
+  className?: string
+  children: React.ReactNode
+  displayYears: { from: number; to: number }
+  startMonth?: Date
+  endMonth?: Date
+  navView: NavView
+  setNavView: React.Dispatch<React.SetStateAction<NavView>>
 } & React.TableHTMLAttributes<HTMLTableElement>) {
-    if (navView === 'years') {
-        return (
-            <YearGrid
-                displayYears={displayYears}
-                startMonth={startMonth}
-                endMonth={endMonth}
-                setNavView={setNavView}
-                navView={navView}
-                className={className}
-                {...props}
-            />
-        );
-    }
+  if (navView === "years") {
     return (
-        <table className={className} {...props}>
-            {children}
-        </table>
-    );
+      <YearGrid
+        displayYears={displayYears}
+        startMonth={startMonth}
+        endMonth={endMonth}
+        setNavView={setNavView}
+        navView={navView}
+        className={className}
+        {...props}
+      />
+    )
+  }
+  return (
+    <table className={className} {...props}>
+      {children}
+    </table>
+  )
 }
 
 function YearGrid({
-    className,
-    displayYears,
-    startMonth,
-    endMonth,
-    setNavView,
-    navView,
-    ...props
+  className,
+  displayYears,
+  startMonth,
+  endMonth,
+  setNavView,
+  navView,
+  ...props
 }: {
-    className?: string;
-    displayYears: { from: number; to: number };
-    startMonth?: Date;
-    endMonth?: Date;
-    setNavView: React.Dispatch<React.SetStateAction<NavView>>;
-    navView: NavView;
+  className?: string
+  displayYears: { from: number; to: number }
+  startMonth?: Date
+  endMonth?: Date
+  setNavView: React.Dispatch<React.SetStateAction<NavView>>
+  navView: NavView
 } & React.HTMLAttributes<HTMLDivElement>) {
-    const { goToMonth, selected } = useDayPicker();
+  const { goToMonth, selected } = useDayPicker()
 
-    return (
-        <div className={cn('grid grid-cols-4 gap-y-2', className)} {...props}>
-            {Array.from({ length: displayYears.to - displayYears.from + 1 }, (_, i) => {
-                const isBefore =
-                    differenceInCalendarDays(new Date(displayYears.from + i, 11, 31), startMonth!) < 0;
+  return (
+    <div className={cn("grid grid-cols-4 gap-y-2", className)} {...props}>
+      {Array.from(
+        { length: displayYears.to - displayYears.from + 1 },
+        (_, i) => {
+          const isBefore =
+            differenceInCalendarDays(
+              new Date(displayYears.from + i, 11, 31),
+              startMonth!
+            ) < 0
 
-                const isAfter =
-                    differenceInCalendarDays(new Date(displayYears.from + i, 0, 0), endMonth!) > 0;
+          const isAfter =
+            differenceInCalendarDays(
+              new Date(displayYears.from + i, 0, 0),
+              endMonth!
+            ) > 0
 
-                const isDisabled = isBefore || isAfter;
-                return (
-                    <Button
-                        key={i}
-                        className={cn(
-                            'h-7 w-full text-sm font-normal text-foreground',
-                            displayYears.from + i === new Date().getFullYear() &&
-                                'bg-accent font-medium text-accent-foreground',
-                        )}
-                        variant="ghost"
-                        onClick={() => {
-                            setNavView('days');
-                            goToMonth(
-                                new Date(
-                                    displayYears.from + i,
-                                    (selected as Date | undefined)?.getMonth() ?? 0,
-                                ),
-                            );
-                        }}
-                        disabled={navView === 'years' ? isDisabled : undefined}
-                    >
-                        {displayYears.from + i}
-                    </Button>
-                );
-            })}
-        </div>
-    );
+          const isDisabled = isBefore || isAfter
+          return (
+            <Button
+              key={i}
+              className={cn(
+                "h-7 w-full text-sm font-normal text-foreground",
+                displayYears.from + i === new Date().getFullYear() &&
+                  "bg-accent font-medium text-accent-foreground"
+              )}
+              variant="ghost"
+              onClick={() => {
+                setNavView("days")
+                goToMonth(
+                  new Date(
+                    displayYears.from + i,
+                    (selected as Date | undefined)?.getMonth() ?? 0
+                  )
+                )
+              }}
+              disabled={navView === "years" ? isDisabled : undefined}
+            >
+              {displayYears.from + i}
+            </Button>
+          )
+        }
+      )}
+    </div>
+  )
 }
 
-export { Calendar };
+export { Calendar }