silver-ui 0.1.0

package/dist/chunk-WIO3XITR.js

@@ -0,0 +1,769 @@
+import { plainDateIsEqual, plainDateIsBefore, plainDateGetWeekNumber, plainDateFormat, DATE_FORMAT_MONTH_YEAR, plainDateIsInRange, DATE_FORMAT_WITH_WEEKDAY, getDaysInMonth, plainDateCreate, plainDateDayOfWeek, plainDateIsAfter, plainDateToday } from './chunk-QSEDH7T2.js';
+import { getBrowserTimezoneID } from './chunk-OX4ZMUF4.js';
+import { Button } from './chunk-VLIQPSPM.js';
+import { cx } from './chunk-OKKL652L.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { memo, useMemo, useCallback, useEffect, useRef, useState, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function useGridFocus({
+  columns,
+  cellSelector = 'button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+  onNavigateAfter,
+  onNavigateBefore,
+  onPageDown,
+  onPageUp
+}) {
+  const gridRef = useRef(null);
+  const getCells = useCallback(() => {
+    return gridRef.current == null ? [] : Array.from(gridRef.current.querySelectorAll(cellSelector));
+  }, [cellSelector]);
+  const focusCell = useCallback(
+    (index) => {
+      const cells = getCells();
+      const clampedIndex = Math.max(0, Math.min(index, cells.length - 1));
+      cells[clampedIndex]?.focus();
+    },
+    [getCells]
+  );
+  const focusFirst = useCallback(() => focusCell(0), [focusCell]);
+  const focusLast = useCallback(() => {
+    const cells = getCells();
+    cells.at(-1)?.focus();
+  }, [getCells]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      const cells = getCells();
+      const currentIndex = cells.findIndex(
+        (cell) => cell === document.activeElement
+      );
+      if (currentIndex === -1) {
+        return;
+      }
+      const currentRow = Math.floor(currentIndex / columns);
+      const currentColumn = currentIndex % columns;
+      const totalRows = Math.ceil(cells.length / columns);
+      let nextIndex = null;
+      switch (event.key) {
+        case "ArrowRight":
+          nextIndex = currentIndex + 1;
+          break;
+        case "ArrowLeft":
+          nextIndex = currentIndex - 1;
+          break;
+        case "ArrowDown":
+          if (currentRow >= totalRows - 1) {
+            onNavigateAfter?.(currentColumn, columns);
+          } else {
+            nextIndex = currentIndex + columns;
+          }
+          break;
+        case "ArrowUp":
+          if (currentRow <= 0) {
+            onNavigateBefore?.(currentColumn, columns);
+          } else {
+            nextIndex = currentIndex - columns;
+          }
+          break;
+        case "Home":
+          nextIndex = event.ctrlKey || event.metaKey ? 0 : currentRow * columns;
+          break;
+        case "End":
+          nextIndex = event.ctrlKey || event.metaKey ? cells.length - 1 : Math.min((currentRow + 1) * columns - 1, cells.length - 1);
+          break;
+        case "PageUp":
+          onPageUp?.();
+          break;
+        case "PageDown":
+          onPageDown?.();
+          break;
+        default:
+          return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (nextIndex == null) {
+        return;
+      }
+      if (nextIndex < 0) {
+        onNavigateBefore?.(currentColumn, 1);
+        return;
+      }
+      if (nextIndex >= cells.length) {
+        onNavigateAfter?.(currentColumn, 1);
+        return;
+      }
+      cells[nextIndex]?.focus();
+    },
+    [
+      columns,
+      getCells,
+      onNavigateAfter,
+      onNavigateBefore,
+      onPageDown,
+      onPageUp
+    ]
+  );
+  return { gridRef, handleKeyDown, focusCell, focusFirst, focusLast };
+}
+var styles = {
+  root: css({
+    display: "inline-block",
+    minW: "220px",
+    color: "fg",
+    fontFamily: "body"
+  }),
+  header: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "2",
+    mb: "2"
+  }),
+  monthYear: css({
+    flex: 1,
+    textAlign: "center",
+    fontSize: "sm",
+    fontWeight: "semibold"
+  }),
+  months: css({
+    display: "flex",
+    gap: "4"
+  }),
+  monthGrid: css({
+    flex: "1 1 0"
+  }),
+  weekHeader: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)",
+    mb: "1"
+  }),
+  weekHeaderWithNumbers: css({
+    gridTemplateColumns: "auto repeat(7, 1fr)"
+  }),
+  dayName: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "component.md",
+    h: "component.md",
+    color: "fg.muted",
+    fontSize: "sm"
+  }),
+  daysGrid: css({
+    display: "grid",
+    gridTemplateColumns: "repeat(7, 1fr)"
+  }),
+  daysGridWithNumbers: css({
+    gridTemplateColumns: "auto repeat(7, 1fr)"
+  }),
+  weekRow: css({
+    display: "contents"
+  }),
+  weekNumber: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "component.md",
+    h: "component.md",
+    color: "fg.muted",
+    fontSize: "sm"
+  }),
+  cell: css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    h: "component.md",
+    isolation: "isolate"
+  }),
+  rangeBackground: css({
+    position: "absolute",
+    insetBlock: "2px",
+    insetInline: 0,
+    bg: "bg.selected"
+  }),
+  previewBackground: css({
+    position: "absolute",
+    insetBlock: "2px",
+    insetInline: 0,
+    bg: "bg.subtle"
+  }),
+  rangeLeft: css({
+    left: "2px",
+    borderTopLeftRadius: "full",
+    borderBottomLeftRadius: "full"
+  }),
+  rangeRight: css({
+    right: "2px",
+    borderTopRightRadius: "full",
+    borderBottomRightRadius: "full"
+  }),
+  day: css({
+    position: "relative",
+    zIndex: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    w: "component.sm",
+    h: "component.sm",
+    p: 0,
+    borderWidth: 0,
+    borderStyle: "none",
+    borderRadius: "full",
+    bg: "transparent",
+    color: "fg",
+    cursor: "pointer",
+    fontFamily: "inherit",
+    fontSize: "md",
+    transitionProperty: "background-color, color",
+    transitionDuration: "fast",
+    _hover: {
+      bg: "bg.subtle"
+    },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    },
+    _disabled: {
+      cursor: "not-allowed"
+    }
+  }),
+  dayOutside: css({
+    color: "fg.muted",
+    opacity: 0.55
+  }),
+  dayToday: css({
+    boxShadow: "inset 0 0 0 1px token(colors.border.emphasized)"
+  }),
+  daySelected: css({
+    bg: "primary",
+    color: "fg.onPrimary",
+    _hover: {
+      bg: "primary"
+    }
+  }),
+  dayDisabled: css({
+    opacity: 0.35
+  })
+};
+function generateCalendarDays({
+  year,
+  month,
+  weekStartsOn,
+  hasVariableRowCount
+}) {
+  const names = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+  const dayNames = Array.from({ length: 7 }, (_, index) => {
+    return names[(index + weekStartsOn) % 7];
+  });
+  const daysInMonth = getDaysInMonth(year, month);
+  const firstOfMonth = plainDateCreate(year, month, 1);
+  let startOffset = plainDateDayOfWeek(firstOfMonth) - weekStartsOn;
+  if (startOffset < 0) {
+    startOffset += 7;
+  }
+  const totalDays = daysInMonth + startOffset;
+  const totalRows = hasVariableRowCount ? Math.ceil(totalDays / 7) : 6;
+  const days = Array.from({ length: totalRows * 7 }, (_, index) => {
+    const dayOffset = index - startOffset + 1;
+    const isOutside = dayOffset < 1 || dayOffset > daysInMonth;
+    const date = isOutside ? firstOfMonth.add({ days: dayOffset - 1 }) : plainDateCreate(year, month, dayOffset);
+    return {
+      date,
+      dayNumber: date.day,
+      isOutside
+    };
+  });
+  const weeks = [];
+  for (let index = 0; index < days.length; index += 7) {
+    weeks.push(days.slice(index, index + 7));
+  }
+  return { dayNames, weeks };
+}
+function checkDateDisabled(date, options) {
+  if (options.min != null && plainDateIsBefore(date, options.min)) {
+    return true;
+  }
+  if (options.max != null && plainDateIsAfter(date, options.max)) {
+    return true;
+  }
+  return options.getIsDateDisabled?.(date) ?? false;
+}
+function plainDateFromDataAttribute(value) {
+  return plainDateCreate(
+    parseInt(value.slice(0, 4)),
+    parseInt(value.slice(5, 7)),
+    parseInt(value.slice(8, 10))
+  );
+}
+function getSelectedTabDate({
+  days,
+  getIsDisabled,
+  month,
+  selectedDate,
+  today,
+  year
+}) {
+  if (selectedDate?.year === year && selectedDate.month === month && !getIsDisabled(selectedDate)) {
+    return selectedDate;
+  }
+  if (today.year === year && today.month === month && !getIsDisabled(today)) {
+    return today;
+  }
+  return days.find((day) => !day.isOutside && !getIsDisabled(day.date))?.date ?? null;
+}
+function Calendar({
+  className,
+  "data-testid": dataTestId,
+  defaultValue,
+  getIsDateDisabled: getIsDateDisabledProp,
+  hasOutsideDays = true,
+  hasVariableRowCount = false,
+  hasWeekNumbers = false,
+  max,
+  min,
+  mode = "single",
+  numberOfMonths = 1,
+  onChange,
+  onViewDateChange,
+  ref,
+  style,
+  timezoneID,
+  value,
+  viewDate: viewDateFromProps,
+  weekStartsOn = 0
+}) {
+  const effectiveTimezoneID = timezoneID ?? getBrowserTimezoneID();
+  const today = useMemo(
+    () => plainDateToday(effectiveTimezoneID),
+    [effectiveTimezoneID]
+  );
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [rangeSelectionStart, setRangeSelectionStart] = useState(null);
+  const [hoveredDate, setHoveredDate] = useState(null);
+  const [pendingFocus, setPendingFocus] = useState(null);
+  const effectiveValue = value ?? internalValue;
+  const isViewDateControlled = viewDateFromProps != null && onViewDateChange != null;
+  const [internalViewDate, setInternalViewDate] = useState(() => {
+    if (viewDateFromProps != null) {
+      return viewDateFromProps;
+    }
+    if (effectiveValue != null && "year" in effectiveValue) {
+      return effectiveValue;
+    }
+    if (effectiveValue != null && "start" in effectiveValue) {
+      return effectiveValue.start;
+    }
+    return today;
+  });
+  const viewDate = isViewDateControlled ? viewDateFromProps : internalViewDate;
+  const baseMonth = useMemo(() => viewDate.with({ day: 1 }), [viewDate]);
+  const visibleMonths = useMemo(
+    () => Array.from(
+      { length: numberOfMonths },
+      (_, index) => baseMonth.add({ months: index })
+    ),
+    [baseMonth, numberOfMonths]
+  );
+  const monthYearLabel = useMemo(
+    () => visibleMonths.map((month) => plainDateFormat(month, DATE_FORMAT_MONTH_YEAR)).join(" - "),
+    [visibleMonths]
+  );
+  const canNavigatePrevious = min == null || plainDateIsBefore(min.with({ day: 1 }), baseMonth);
+  const lastVisibleMonth = visibleMonths.at(-1) ?? baseMonth;
+  const canNavigateNext = max == null || plainDateIsAfter(max.with({ day: 1 }), lastVisibleMonth);
+  const navigateMonth = useCallback(
+    (delta, focusedDate, offset = 7) => {
+      const nextMonth = baseMonth.add({ months: delta });
+      if (focusedDate != null) {
+        setPendingFocus(focusedDate.add({ days: delta * offset }));
+      }
+      onViewDateChange?.(nextMonth);
+      if (!isViewDateControlled) {
+        setInternalViewDate(nextMonth);
+      }
+    },
+    [baseMonth, isViewDateControlled, onViewDateChange]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      navigateTo: (date) => {
+        onViewDateChange?.(date);
+        if (!isViewDateControlled) {
+          setInternalViewDate(date);
+        }
+      }
+    }),
+    [isViewDateControlled, onViewDateChange]
+  );
+  const handleDayClick = useCallback(
+    (date) => {
+      if (mode === "single") {
+        setInternalValue(date);
+        onChange(date);
+        return;
+      }
+      if (rangeSelectionStart == null) {
+        setRangeSelectionStart(date);
+        return;
+      }
+      const range = plainDateIsBefore(date, rangeSelectionStart) ? { start: date, end: rangeSelectionStart } : { start: rangeSelectionStart, end: date };
+      setInternalValue(range);
+      setRangeSelectionStart(null);
+      onChange(range);
+    },
+    [mode, onChange, rangeSelectionStart]
+  );
+  const handleNavigateNext = useCallback(
+    (focusedDate, offset) => navigateMonth(1, focusedDate, offset),
+    [navigateMonth]
+  );
+  const handleNavigatePrevious = useCallback(
+    (focusedDate, offset) => navigateMonth(-1, focusedDate, offset),
+    [navigateMonth]
+  );
+  const handlePendingFocusHandled = useCallback(
+    () => setPendingFocus(null),
+    []
+  );
+  return (
+    // eslint-disable-next-line jsx-a11y-x/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(styles.root, className),
+        "data-testid": dataTestId,
+        onKeyDown: (event) => {
+          if (mode === "range" && rangeSelectionStart != null && event.key === "Escape") {
+            setRangeSelectionStart(null);
+            event.preventDefault();
+            event.stopPropagation();
+          }
+        },
+        style,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: ChevronLeft,
+                isDisabled: !canNavigatePrevious,
+                isIconOnly: true,
+                label: "Previous month",
+                onClick: () => navigateMonth(-1),
+                size: "sm",
+                variant: "ghost"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: styles.monthYear, children: monthYearLabel }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: ChevronRight,
+                isDisabled: !canNavigateNext,
+                isIconOnly: true,
+                label: "Next month",
+                onClick: () => navigateMonth(1),
+                size: "sm",
+                variant: "ghost"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: styles.months, children: visibleMonths.map((month) => /* @__PURE__ */ jsx(
+            MonthGrid,
+            {
+              getIsDateDisabled: getIsDateDisabledProp,
+              hasOutsideDays,
+              hasVariableRowCount,
+              hasWeekNumbers,
+              hoveredDate,
+              max,
+              min,
+              mode,
+              month,
+              onDayClick: handleDayClick,
+              onDayHover: setHoveredDate,
+              onNavigateNext: handleNavigateNext,
+              onNavigatePrevious: handleNavigatePrevious,
+              onPendingFocusHandled: handlePendingFocusHandled,
+              pendingFocus,
+              rangeSelectionStart,
+              today,
+              value: effectiveValue,
+              weekStartsOn
+            },
+            month.toString()
+          )) })
+        ]
+      }
+    )
+  );
+}
+var MonthGrid = memo(function MonthGrid2({
+  month,
+  value,
+  mode,
+  rangeSelectionStart,
+  hoveredDate,
+  min,
+  max,
+  getIsDateDisabled: getIsDateDisabledProp,
+  hasOutsideDays,
+  hasWeekNumbers,
+  hasVariableRowCount,
+  weekStartsOn,
+  onDayClick,
+  onDayHover,
+  today,
+  onNavigatePrevious,
+  onNavigateNext,
+  pendingFocus,
+  onPendingFocusHandled
+}) {
+  const { dayNames, weeks } = useMemo(
+    () => generateCalendarDays({
+      year: month.year,
+      month: month.month,
+      weekStartsOn,
+      hasVariableRowCount
+    }),
+    [hasVariableRowCount, month.month, month.year, weekStartsOn]
+  );
+  const days = weeks.flat();
+  const isDisabled = useCallback(
+    (date) => checkDateDisabled(date, {
+      min,
+      max,
+      getIsDateDisabled: getIsDateDisabledProp
+    }),
+    [getIsDateDisabledProp, max, min]
+  );
+  const selectedDate = mode === "single" && value != null && "year" in value ? value : null;
+  const tabbableDate = getSelectedTabDate({
+    days,
+    getIsDisabled: isDisabled,
+    month: month.month,
+    selectedDate,
+    today,
+    year: month.year
+  });
+  const getFocusedDate = useCallback(() => {
+    const activeElement = document.activeElement;
+    const date = activeElement?.dataset.date;
+    return date == null ? null : plainDateFromDataAttribute(date);
+  }, []);
+  const { gridRef, handleKeyDown } = useGridFocus({
+    columns: 7,
+    cellSelector: "button:not([disabled])",
+    onNavigateBefore: (_column, offset) => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate != null) {
+        onNavigatePrevious(focusedDate, offset);
+      }
+    },
+    onNavigateAfter: (_column, offset) => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate != null) {
+        onNavigateNext(focusedDate, offset);
+      }
+    },
+    onPageUp: () => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate != null) {
+        onNavigatePrevious(focusedDate, 7);
+      }
+    },
+    onPageDown: () => {
+      const focusedDate = getFocusedDate();
+      if (focusedDate != null) {
+        onNavigateNext(focusedDate, 7);
+      }
+    }
+  });
+  useEffect(() => {
+    if (pendingFocus == null || gridRef.current == null) {
+      return;
+    }
+    const button = gridRef.current.querySelector(
+      `button[data-date="${pendingFocus.toString()}"]`
+    );
+    button?.focus();
+    onPendingFocusHandled();
+  }, [gridRef, onPendingFocusHandled, pendingFocus]);
+  let rangeStart = null;
+  let rangeEnd = null;
+  if (mode === "range" && value != null && "start" in value) {
+    rangeStart = value.start;
+    rangeEnd = value.end;
+  }
+  if (rangeSelectionStart != null) {
+    rangeStart = rangeSelectionStart;
+    rangeEnd = rangeSelectionStart;
+  }
+  let previewStart = null;
+  let previewEnd = null;
+  if (mode === "range" && rangeSelectionStart != null && hoveredDate != null) {
+    if (!plainDateIsEqual(rangeSelectionStart, hoveredDate)) {
+      previewStart = plainDateIsBefore(hoveredDate, rangeSelectionStart) ? hoveredDate : rangeSelectionStart;
+      previewEnd = plainDateIsBefore(hoveredDate, rangeSelectionStart) ? rangeSelectionStart : hoveredDate;
+    }
+  }
+  return /* @__PURE__ */ jsxs("div", { className: styles.monthGrid, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cx(
+          styles.weekHeader,
+          hasWeekNumbers ? styles.weekHeaderWithNumbers : void 0
+        ),
+        children: [
+          hasWeekNumbers ? /* @__PURE__ */ jsx("div", { className: styles.dayName }) : null,
+          dayNames.map((dayName) => /* @__PURE__ */ jsx("div", { className: styles.dayName, role: "columnheader", children: dayName }, dayName))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": plainDateFormat(month, DATE_FORMAT_MONTH_YEAR),
+        className: cx(
+          styles.daysGrid,
+          hasWeekNumbers ? styles.daysGridWithNumbers : void 0
+        ),
+        onKeyDown: handleKeyDown,
+        ref: gridRef,
+        role: "grid",
+        tabIndex: -1,
+        children: weeks.map((week) => {
+          const weekDate = week.find((day) => !day.isOutside)?.date ?? week[0].date;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: styles.weekRow,
+              role: "row",
+              children: [
+                hasWeekNumbers ? /* @__PURE__ */ jsx("div", { className: styles.weekNumber, children: plainDateGetWeekNumber(weekDate) }) : null,
+                week.map((day, dayIndex) => /* @__PURE__ */ jsx(
+                  DayCell,
+                  {
+                    day,
+                    dayIndex,
+                    hasOutsideDays,
+                    isDisabled: isDisabled(day.date),
+                    isTabbable: tabbableDate != null && plainDateIsEqual(tabbableDate, day.date),
+                    mode,
+                    onDayClick,
+                    onDayHover,
+                    previewEnd,
+                    previewStart,
+                    rangeEnd,
+                    rangeStart,
+                    selectedDate,
+                    today
+                  },
+                  day.date.toString()
+                ))
+              ]
+            },
+            week[0].date.toString()
+          );
+        })
+      }
+    )
+  ] });
+});
+var DayCell = memo(function DayCell2({
+  day,
+  dayIndex,
+  mode,
+  selectedDate,
+  rangeStart,
+  rangeEnd,
+  previewStart,
+  previewEnd,
+  today,
+  hasOutsideDays,
+  isDisabled,
+  isTabbable,
+  onDayClick,
+  onDayHover
+}) {
+  if (day.isOutside && !hasOutsideDays) {
+    return /* @__PURE__ */ jsx("div", { className: styles.cell });
+  }
+  const effectivelyDisabled = isDisabled || day.isOutside;
+  const isToday = plainDateIsEqual(day.date, today);
+  const isSelected = mode === "single" && selectedDate != null && plainDateIsEqual(day.date, selectedDate);
+  const isInRange = mode === "range" && rangeStart != null && rangeEnd != null && plainDateIsInRange(day.date, [rangeStart, rangeEnd]);
+  const isRangeStart = mode === "range" && rangeStart != null && plainDateIsEqual(day.date, rangeStart);
+  const isRangeEnd = mode === "range" && rangeEnd != null && plainDateIsEqual(day.date, rangeEnd);
+  const isInPreview = previewStart != null && previewEnd != null && plainDateIsInRange(day.date, [previewStart, previewEnd]);
+  const isPreviewStart = previewStart != null && plainDateIsEqual(day.date, previewStart);
+  const isPreviewEnd = previewEnd != null && plainDateIsEqual(day.date, previewEnd);
+  const isFirstColumn = dayIndex === 0;
+  const isLastColumn = dayIndex === 6;
+  return /* @__PURE__ */ jsxs("div", { className: styles.cell, children: [
+    isInRange ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          styles.rangeBackground,
+          isRangeStart || isFirstColumn ? styles.rangeLeft : void 0,
+          isRangeEnd || isLastColumn ? styles.rangeRight : void 0
+        )
+      }
+    ) : null,
+    isInPreview ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cx(
+          styles.previewBackground,
+          isPreviewStart || isFirstColumn ? styles.rangeLeft : void 0,
+          isPreviewEnd || isLastColumn ? styles.rangeRight : void 0
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-disabled": effectivelyDisabled || void 0,
+        "aria-label": plainDateFormat(day.date, DATE_FORMAT_WITH_WEEKDAY),
+        "aria-selected": isSelected || isInRange || void 0,
+        className: cx(
+          styles.day,
+          day.isOutside ? styles.dayOutside : void 0,
+          isToday && !isSelected && !isInRange ? styles.dayToday : void 0,
+          isSelected || isRangeStart || isRangeEnd ? styles.daySelected : void 0,
+          effectivelyDisabled ? styles.dayDisabled : void 0
+        ),
+        "data-date": day.date.toString(),
+        disabled: isDisabled,
+        onClick: () => {
+          if (!effectivelyDisabled) {
+            onDayClick(day.date);
+          }
+        },
+        onMouseEnter: () => {
+          if (!effectivelyDisabled) {
+            onDayHover(day.date);
+          }
+        },
+        onMouseLeave: () => onDayHover(null),
+        role: "gridcell",
+        tabIndex: isTabbable ? 0 : -1,
+        type: "button",
+        children: day.dayNumber
+      }
+    )
+  ] });
+});
+Calendar.displayName = "Calendar";
+
+export { Calendar };
+//# sourceMappingURL=chunk-WIO3XITR.js.map
+//# sourceMappingURL=chunk-WIO3XITR.js.map