colibri-ui 0.8.67 → 0.8.69

package/Calendar/Calendar.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+export type CalendarSize = "xs" | "s" | "m" | "l" | "xl";
+export type CalendarSelectionMode = "single" | "range";
+export type CalendarView = "days" | "months" | "years";
+export interface CalendarEvent {
+    date: Date;
+    color?: string;
+    label?: ReactNode;
+}
+interface CalendarCommonProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    defaultVisibleMonth?: Date;
+    defaultView?: CalendarView;
+    disabledDates?: Date[] | ((date: Date) => boolean);
+    events?: CalendarEvent[];
+    locale?: string;
+    maxDate?: Date;
+    minDate?: Date;
+    monthLabel?: string;
+    monthsToShow?: 1 | 2;
+    nextMonthLabel?: string;
+    onVisibleMonthChange?: (month: Date) => void;
+    previousMonthLabel?: string;
+    showOutsideDays?: boolean;
+    size?: CalendarSize;
+    visibleMonth?: Date;
+    weekStartsOn?: 0 | 1;
+    yearLabel?: string;
+    yearRange?: [number, number];
+}
+export interface CalendarSingleProps extends CalendarCommonProps {
+    onChange: (value: Date) => void;
+    selectionMode?: "single";
+    value: Date | null;
+}
+export interface CalendarRangeProps extends CalendarCommonProps {
+    onChange: (value: [Date | null, Date | null]) => void;
+    selectionMode: "range";
+    value: [Date | null, Date | null];
+}
+export type CalendarProps = CalendarSingleProps | CalendarRangeProps;
+declare const Calendar: (props: CalendarProps) => React.JSX.Element;
+export default Calendar;

package/Calendar/Calendar.js

@@ -0,0 +1,511 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var tslib = require('tslib');
+var React = require('react');
+var index = require('../Button/index.js');
+require('../Icons/index.js');
+var styles = require('./Calendar.module.css');
+var Chevron = require('../Icons/Chevron.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _toConsumableArray__default = /*#__PURE__*/_interopDefault(_toConsumableArray);
+var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+var cx = function cx() {
+  for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) {
+    classNames[_key] = arguments[_key];
+  }
+  return classNames.filter(Boolean).join(" ");
+};
+var startOfDay = function startOfDay(date) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
+};
+var startOfMonth = function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+};
+var addMonths = function addMonths(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth() + amount, 1);
+};
+var addDays = function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+};
+var dayKey = function dayKey(date) {
+  return "".concat(date.getFullYear(), "-").concat(date.getMonth(), "-").concat(date.getDate());
+};
+var alignYearPage = function alignYearPage(year) {
+  return year - year % 12;
+};
+var isSameDay = function isSameDay(left, right) {
+  return Boolean(left && right && dayKey(left) === dayKey(right));
+};
+var isBefore = function isBefore(left, right) {
+  return startOfDay(left).getTime() < startOfDay(right).getTime();
+};
+var isMonthBefore = function isMonthBefore(left, right) {
+  return startOfMonth(left).getTime() < startOfMonth(right).getTime();
+};
+var getMonthDays = function getMonthDays(month, weekStartsOn) {
+  var first = startOfMonth(month);
+  var offset = (first.getDay() - weekStartsOn + 7) % 7;
+  var gridStart = addDays(first, -offset);
+  return Array.from({
+    length: 42
+  }, function (_, index) {
+    return addDays(gridStart, index);
+  });
+};
+var isDateDisabled = function isDateDisabled(date, minDate, maxDate, disabledDates) {
+  var _a;
+  if (minDate && isBefore(date, minDate)) return true;
+  if (maxDate && isBefore(maxDate, date)) return true;
+  if (typeof disabledDates === "function") return disabledDates(date);
+  return (_a = disabledDates === null || disabledDates === void 0 ? void 0 : disabledDates.some(function (item) {
+    return isSameDay(item, date);
+  })) !== null && _a !== void 0 ? _a : false;
+};
+var getButtonSize = function getButtonSize(size) {
+  return size === "xl" ? "l" : size;
+};
+var NextIcon = function NextIcon(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor"
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "m8.25 4.5 7.5 7.5-7.5 7.5"
+  }));
+};
+var PreviousIcon = function PreviousIcon(props) {
+  return /*#__PURE__*/React__default.default.createElement("svg", Object.assign({
+    width: "100%",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    strokeWidth: "1.5",
+    stroke: "currentColor"
+  }, props), /*#__PURE__*/React__default.default.createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    d: "M15.75 19.5 8.25 12l7.5-7.5"
+  }));
+};
+var Calendar = function Calendar(props) {
+  var _a, _b;
+  var _props$selectionMode = props.selectionMode,
+    selectionMode = _props$selectionMode === void 0 ? "single" : _props$selectionMode,
+    value = props.value,
+    onChange = props.onChange,
+    _props$locale = props.locale,
+    locale = _props$locale === void 0 ? "en-US" : _props$locale,
+    _props$weekStartsOn = props.weekStartsOn,
+    weekStartsOn = _props$weekStartsOn === void 0 ? 1 : _props$weekStartsOn,
+    _props$monthsToShow = props.monthsToShow,
+    monthsToShow = _props$monthsToShow === void 0 ? 1 : _props$monthsToShow,
+    _props$size = props.size,
+    size = _props$size === void 0 ? "m" : _props$size,
+    visibleMonth = props.visibleMonth,
+    defaultVisibleMonth = props.defaultVisibleMonth,
+    _props$defaultView = props.defaultView,
+    defaultView = _props$defaultView === void 0 ? "days" : _props$defaultView,
+    onVisibleMonthChange = props.onVisibleMonthChange,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    _props$monthLabel = props.monthLabel,
+    monthLabel = _props$monthLabel === void 0 ? "Month" : _props$monthLabel,
+    disabledDates = props.disabledDates,
+    _props$events = props.events,
+    events = _props$events === void 0 ? [] : _props$events,
+    _props$showOutsideDay = props.showOutsideDays,
+    showOutsideDays = _props$showOutsideDay === void 0 ? true : _props$showOutsideDay,
+    _props$previousMonthL = props.previousMonthLabel,
+    previousMonthLabel = _props$previousMonthL === void 0 ? "Previous month" : _props$previousMonthL,
+    _props$nextMonthLabel = props.nextMonthLabel,
+    nextMonthLabel = _props$nextMonthLabel === void 0 ? "Next month" : _props$nextMonthLabel,
+    _props$yearLabel = props.yearLabel,
+    yearLabel = _props$yearLabel === void 0 ? "Year" : _props$yearLabel,
+    yearRange = props.yearRange,
+    className = props.className,
+    rest = tslib.__rest(props, ["selectionMode", "value", "onChange", "locale", "weekStartsOn", "monthsToShow", "size", "visibleMonth", "defaultVisibleMonth", "defaultView", "onVisibleMonthChange", "minDate", "maxDate", "monthLabel", "disabledDates", "events", "showOutsideDays", "previousMonthLabel", "nextMonthLabel", "yearLabel", "yearRange", "className"]);
+  var initialDate = Array.isArray(value) ? value[0] : value;
+  var initialVisibleMonth = startOfMonth((_a = defaultVisibleMonth !== null && defaultVisibleMonth !== void 0 ? defaultVisibleMonth : initialDate) !== null && _a !== void 0 ? _a : new Date());
+  var _useState = React.useState(initialVisibleMonth),
+    _useState2 = _slicedToArray__default.default(_useState, 2),
+    internalMonth = _useState2[0],
+    setInternalMonth = _useState2[1];
+  var _useState3 = React.useState(defaultView),
+    _useState4 = _slicedToArray__default.default(_useState3, 2),
+    calendarView = _useState4[0],
+    setCalendarView = _useState4[1];
+  var _useState5 = React.useState(alignYearPage(initialVisibleMonth.getFullYear())),
+    _useState6 = _slicedToArray__default.default(_useState5, 2),
+    yearPageStart = _useState6[0],
+    setYearPageStart = _useState6[1];
+  var _useState7 = React.useState(null),
+    _useState8 = _slicedToArray__default.default(_useState7, 2),
+    hoveredDate = _useState8[0],
+    setHoveredDate = _useState8[1];
+  var _useState9 = React.useState(function () {
+      return startOfDay(initialDate !== null && initialDate !== void 0 ? initialDate : new Date());
+    }),
+    _useState0 = _slicedToArray__default.default(_useState9, 2),
+    focusedDate = _useState0[0],
+    setFocusedDate = _useState0[1];
+  var rootRef = React.useRef(null);
+  var currentMonth = startOfMonth(visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : internalMonth);
+  var buttonSize = getButtonSize(size);
+  var today = React.useMemo(function () {
+    return startOfDay(new Date());
+  }, []);
+  var monthNames = React.useMemo(function () {
+    return Array.from({
+      length: 12
+    }, function (_, monthIndex) {
+      return new Intl.DateTimeFormat(locale, {
+        month: "long"
+      }).format(new Date(2024, monthIndex, 1));
+    });
+  }, [locale]);
+  var yearBounds = React.useMemo(function () {
+    var _a, _b, _c, _d;
+    var currentYear = currentMonth.getFullYear();
+    var minYear = (_b = (_a = yearRange === null || yearRange === void 0 ? void 0 : yearRange[0]) !== null && _a !== void 0 ? _a : minDate === null || minDate === void 0 ? void 0 : minDate.getFullYear()) !== null && _b !== void 0 ? _b : currentYear - 50;
+    var maxYear = (_d = (_c = yearRange === null || yearRange === void 0 ? void 0 : yearRange[1]) !== null && _c !== void 0 ? _c : maxDate === null || maxDate === void 0 ? void 0 : maxDate.getFullYear()) !== null && _d !== void 0 ? _d : currentYear + 50;
+    return {
+      max: Math.max(minYear, maxYear),
+      min: Math.min(minYear, maxYear)
+    };
+  }, [currentMonth, maxDate, minDate, yearRange]);
+  var visibleYears = React.useMemo(function () {
+    return Array.from({
+      length: 12
+    }, function (_, index) {
+      return yearPageStart + index;
+    });
+  }, [yearPageStart]);
+  var rangeValue = selectionMode === "range" ? value : [null, null];
+  var singleValue = selectionMode === "single" ? value : null;
+  var clampMonth = function clampMonth(month) {
+    if (minDate && isMonthBefore(month, minDate)) return startOfMonth(minDate);
+    if (maxDate && isMonthBefore(maxDate, month)) return startOfMonth(maxDate);
+    return startOfMonth(month);
+  };
+  var setMonth = function setMonth(nextMonth) {
+    var normalized = clampMonth(nextMonth);
+    if (visibleMonth === undefined) setInternalMonth(normalized);
+    onVisibleMonthChange === null || onVisibleMonthChange === void 0 ? void 0 : onVisibleMonthChange(normalized);
+  };
+  var isVisibleMonthDisabled = function isVisibleMonthDisabled(year, monthIndex) {
+    var optionMonth = new Date(year, monthIndex, 1);
+    return Boolean(minDate && isMonthBefore(optionMonth, minDate) || maxDate && isMonthBefore(maxDate, optionMonth));
+  };
+  var isVisibleYearDisabled = function isVisibleYearDisabled(year) {
+    return year < yearBounds.min || year > yearBounds.max;
+  };
+  var handleHeaderClick = function handleHeaderClick() {
+    if (calendarView === "days") {
+      setCalendarView("months");
+      return;
+    }
+    if (calendarView === "months") {
+      setYearPageStart(alignYearPage(currentMonth.getFullYear()));
+      setCalendarView("years");
+    }
+  };
+  var handlePreviousClick = function handlePreviousClick() {
+    if (calendarView === "days") {
+      setMonth(addMonths(currentMonth, -1));
+    } else if (calendarView === "months") {
+      setMonth(addMonths(currentMonth, -12));
+    } else {
+      setYearPageStart(function (year) {
+        return year - 12;
+      });
+    }
+  };
+  var handleNextClick = function handleNextClick() {
+    if (calendarView === "days") {
+      setMonth(addMonths(currentMonth, 1));
+    } else if (calendarView === "months") {
+      setMonth(addMonths(currentMonth, 12));
+    } else {
+      setYearPageStart(function (year) {
+        return year + 12;
+      });
+    }
+  };
+  var handleMonthSelect = function handleMonthSelect(monthIndex) {
+    setMonth(new Date(currentMonth.getFullYear(), monthIndex, 1));
+    setCalendarView("days");
+  };
+  var handleYearSelect = function handleYearSelect(year) {
+    setMonth(new Date(year, currentMonth.getMonth(), 1));
+    setCalendarView("months");
+  };
+  var headerTitle = React.useMemo(function () {
+    if (calendarView === "months") return String(currentMonth.getFullYear());
+    if (calendarView === "years") {
+      return "".concat(yearPageStart, "-").concat(yearPageStart + visibleYears.length - 1);
+    }
+    return new Intl.DateTimeFormat(locale, {
+      month: "long",
+      year: "numeric"
+    }).format(currentMonth);
+  }, [calendarView, currentMonth, locale, visibleYears.length, yearPageStart]);
+  var isPreviousDisabled = Boolean(calendarView === "days" ? minDate && !isMonthBefore(startOfMonth(minDate), currentMonth) : calendarView === "months" ? yearBounds.min >= currentMonth.getFullYear() : yearPageStart <= yearBounds.min);
+  var isNextDisabled = Boolean(calendarView === "days" ? maxDate && !isMonthBefore(addMonths(currentMonth, monthsToShow - 1), startOfMonth(maxDate)) : calendarView === "months" ? yearBounds.max <= currentMonth.getFullYear() : yearPageStart + visibleYears.length - 1 >= yearBounds.max);
+  var headerLabel = calendarView === "days" ? monthLabel : yearLabel;
+  var canDrillUp = calendarView !== "years";
+  var renderPeriodGrid = function renderPeriodGrid() {
+    if (calendarView === "months") {
+      return /*#__PURE__*/React__default.default.createElement("div", {
+        className: styles__default.default["period-grid"]
+      }, monthNames.map(function (monthName, monthIndex) {
+        var selected = monthIndex === currentMonth.getMonth();
+        return /*#__PURE__*/React__default.default.createElement("button", {
+          key: monthName,
+          type: "button",
+          className: cx(styles__default.default["period-button"], selected && styles__default.default["period-button-selected"]),
+          disabled: isVisibleMonthDisabled(currentMonth.getFullYear(), monthIndex),
+          onClick: function onClick() {
+            return handleMonthSelect(monthIndex);
+          }
+        }, monthName);
+      }));
+    }
+    if (calendarView === "years") {
+      return /*#__PURE__*/React__default.default.createElement("div", {
+        className: styles__default.default["period-grid"]
+      }, visibleYears.map(function (year) {
+        var selected = year === currentMonth.getFullYear();
+        return /*#__PURE__*/React__default.default.createElement("button", {
+          key: year,
+          type: "button",
+          className: cx(styles__default.default["period-button"], selected && styles__default.default["period-button-selected"]),
+          disabled: isVisibleYearDisabled(year),
+          onClick: function onClick() {
+            return handleYearSelect(year);
+          }
+        }, year);
+      }));
+    }
+    return null;
+  };
+  var selectDate = function selectDate(date) {
+    if (selectionMode === "single") {
+      onChange(date);
+      return;
+    }
+    var _rangeValue = _slicedToArray__default.default(rangeValue, 2),
+      start = _rangeValue[0],
+      end = _rangeValue[1];
+    var changeRange = onChange;
+    if (!start || end) {
+      changeRange([date, null]);
+    } else if (isBefore(date, start)) {
+      changeRange([date, start]);
+    } else {
+      changeRange([start, date]);
+    }
+  };
+  var focusDay = function focusDay(date) {
+    setFocusedDate(date);
+    var firstVisible = currentMonth;
+    var lastVisible = addMonths(currentMonth, monthsToShow);
+    if (isBefore(date, firstVisible)) {
+      setMonth(startOfMonth(date));
+    } else if (!isBefore(date, lastVisible)) {
+      setMonth(addMonths(startOfMonth(date), 1 - monthsToShow));
+    }
+    window.requestAnimationFrame(function () {
+      var _a, _b;
+      (_b = (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.querySelector("[data-day=\"".concat(dayKey(date), "\"]"))) === null || _b === void 0 ? void 0 : _b.focus();
+    });
+  };
+  var handleDayKeyDown = function handleDayKeyDown(event, date) {
+    var offsets = {
+      ArrowLeft: -1,
+      ArrowRight: 1,
+      ArrowUp: -7,
+      ArrowDown: 7
+    };
+    if (event.key in offsets) {
+      event.preventDefault();
+      focusDay(addDays(date, offsets[event.key]));
+    } else if (event.key === "Home" || event.key === "End") {
+      event.preventDefault();
+      var weekdayOffset = (date.getDay() - weekStartsOn + 7) % 7;
+      focusDay(addDays(date, event.key === "Home" ? -weekdayOffset : 6 - weekdayOffset));
+    } else if (event.key === "PageUp" || event.key === "PageDown") {
+      event.preventDefault();
+      focusDay(addMonths(date, event.key === "PageUp" ? -1 : 1));
+    }
+  };
+  var weekdayNames = React.useMemo(function () {
+    var sunday = new Date(2024, 0, 7);
+    return Array.from({
+      length: 7
+    }, function (_, index) {
+      var day = addDays(sunday, (index + weekStartsOn) % 7);
+      return {
+        isWeekend: day.getDay() === 0 || day.getDay() === 6,
+        name: new Intl.DateTimeFormat(locale, {
+          weekday: "short"
+        }).format(day).replace(".", "")
+      };
+    });
+  }, [locale, weekStartsOn]);
+  var eventMap = React.useMemo(function () {
+    var map = new Map();
+    events.forEach(function (event) {
+      var _a;
+      return map.set(dayKey(event.date), [].concat(_toConsumableArray__default.default((_a = map.get(dayKey(event.date))) !== null && _a !== void 0 ? _a : []), [event]));
+    });
+    return map;
+  }, [events]);
+  var rangePreviewEnd = rangeValue[0] && !rangeValue[1] ? hoveredDate : null;
+  var rangeStart = rangeValue[0];
+  var rangeEnd = (_b = rangeValue[1]) !== null && _b !== void 0 ? _b : rangePreviewEnd;
+  var rangeLower = rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart) ? rangeEnd : rangeStart;
+  var rangeUpper = rangeStart && rangeEnd && isBefore(rangeEnd, rangeStart) ? rangeStart : rangeEnd;
+  return /*#__PURE__*/React__default.default.createElement("div", Object.assign({}, rest, {
+    ref: rootRef,
+    className: cx(styles__default.default.root, styles__default.default[size], monthsToShow === 2 && styles__default.default["double"], className)
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.header
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["header-side"]
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: "outline",
+    size: buttonSize,
+    type: "button",
+    className: cx(styles__default.default["title-button"], !canDrillUp && styles__default.default["title-button-static"]),
+    "aria-label": headerLabel,
+    "aria-expanded": calendarView !== "days",
+    "aria-disabled": !canDrillUp,
+    tabIndex: canDrillUp ? undefined : -1,
+    onClick: canDrillUp ? handleHeaderClick : undefined,
+    iconEnd: canDrillUp ? (/*#__PURE__*/React__default.default.createElement(Chevron.default, {
+      className: styles__default.default["title-icon"],
+      "aria-hidden": "true"
+    })) : undefined
+  }, headerTitle)), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default["header-side"]
+  }, /*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: "outline",
+    size: buttonSize,
+    type: "button",
+    className: styles__default.default["nav-button"],
+    "aria-label": previousMonthLabel,
+    onClick: handlePreviousClick,
+    disabled: isPreviousDisabled,
+    icon: /*#__PURE__*/React__default.default.createElement(PreviousIcon, {
+      className: styles__default.default["nav-icon"],
+      "aria-hidden": "true"
+    })
+  }), /*#__PURE__*/React__default.default.createElement(index.default, {
+    variant: "outline",
+    size: buttonSize,
+    type: "button",
+    className: styles__default.default["nav-button"],
+    "aria-label": nextMonthLabel,
+    onClick: handleNextClick,
+    disabled: isNextDisabled,
+    icon: /*#__PURE__*/React__default.default.createElement(NextIcon, {
+      className: styles__default.default["nav-icon"],
+      "aria-hidden": "true"
+    })
+  }))), /*#__PURE__*/React__default.default.createElement("div", {
+    className: styles__default.default.content
+  }, calendarView !== "days" && renderPeriodGrid(), /*#__PURE__*/React__default.default.createElement("div", {
+    className: cx(styles__default.default.calendars, calendarView !== "days" && styles__default.default.hidden)
+  }, Array.from({
+    length: monthsToShow
+  }, function (_, monthIndex) {
+    var month = addMonths(currentMonth, monthIndex);
+    var days = getMonthDays(month, weekStartsOn);
+    var heading = new Intl.DateTimeFormat(locale, {
+      month: "long",
+      year: "numeric"
+    }).format(month);
+    return /*#__PURE__*/React__default.default.createElement("section", {
+      className: styles__default.default.month,
+      key: dayKey(month),
+      "aria-label": heading
+    }, monthsToShow === 2 && (/*#__PURE__*/React__default.default.createElement("h2", {
+      className: styles__default.default.heading
+    }, heading)), /*#__PURE__*/React__default.default.createElement("div", {
+      className: styles__default.default.weekdays,
+      "aria-hidden": "true"
+    }, weekdayNames.map(function (name) {
+      return /*#__PURE__*/React__default.default.createElement("span", {
+        key: name.name,
+        className: cx(name.isWeekend && styles__default.default.weekend)
+      }, name.name);
+    })), /*#__PURE__*/React__default.default.createElement("div", {
+      className: styles__default.default.days
+    }, days.map(function (date) {
+      var _a;
+      var outside = date.getMonth() !== month.getMonth();
+      var disabled = isDateDisabled(date, minDate, maxDate, disabledDates);
+      var selected = isSameDay(singleValue, date) || isSameDay(rangeStart, date) || isSameDay(rangeValue[1], date);
+      var inRange = Boolean(rangeLower && rangeUpper && !isBefore(date, rangeLower) && !isBefore(rangeUpper, date));
+      var dateEvents = (_a = eventMap.get(dayKey(date))) !== null && _a !== void 0 ? _a : [];
+      var dateLabel = new Intl.DateTimeFormat(locale, {
+        dateStyle: "full"
+      }).format(date);
+      return /*#__PURE__*/React__default.default.createElement("button", {
+        type: "button",
+        key: dayKey(date),
+        "data-day": dayKey(date),
+        className: cx(styles__default.default.day, outside && styles__default.default.outside, isSameDay(today, date) && styles__default.default.today, inRange && styles__default.default["in-range"], selected && styles__default.default.selected, isSameDay(rangeStart, date) && styles__default.default["range-start"], isSameDay(rangeValue[1], date) && styles__default.default["range-end"]),
+        disabled: disabled || outside && !showOutsideDays,
+        "aria-label": dateLabel,
+        "aria-pressed": selected,
+        tabIndex: isSameDay(focusedDate, date) ? 0 : -1,
+        onClick: function onClick() {
+          selectDate(date);
+          if (outside) setMonth(startOfMonth(date));
+        },
+        onFocus: function onFocus() {
+          return setFocusedDate(date);
+        },
+        onMouseEnter: function onMouseEnter() {
+          return setHoveredDate(date);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return setHoveredDate(null);
+        },
+        onKeyDown: function onKeyDown(event) {
+          return handleDayKeyDown(event, date);
+        }
+      }, /*#__PURE__*/React__default.default.createElement("span", null, outside && !showOutsideDays ? "" : date.getDate()), dateEvents.length > 0 && (/*#__PURE__*/React__default.default.createElement("span", {
+        className: styles__default.default.events,
+        title: dateEvents.map(function (item) {
+          var _a;
+          return String((_a = item.label) !== null && _a !== void 0 ? _a : "");
+        }).join(", ")
+      }, dateEvents.slice(0, 3).map(function (item, index) {
+        return /*#__PURE__*/React__default.default.createElement("i", {
+          key: index,
+          style: {
+            backgroundColor: item.color
+          }
+        });
+      }))));
+    })));
+  }))));
+};
+
+exports.default = Calendar;