@nobak/design-system 1.0.0

package/lib/shared/components/Calendar/CalendarDay.js

@@ -0,0 +1,251 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+import { useCalendar } from '@h6s/calendar';
+import React from 'react';
+import { format } from 'date-fns';
+import { timesOfDay } from "./constants";
+import clsx from 'clsx';
+// import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
+import { configResponsive, useResponsive } from 'ahooks';
+import { DateTime } from 'luxon';
+import { CalendarHeader } from "./CalendarHeader";
+configResponsive({
+  sm: 0,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  '2xl': 1536
+});
+var SubHeaderMobileDay = function SubHeaderMobileDay(_ref) {
+  var containerNav = _ref.containerNav,
+    headers = _ref.headers,
+    navigation = _ref.navigation,
+    cursorDate = _ref.cursorDate;
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerNav,
+    className: "sticky top-0 z-10 grid flex-none grid-cols-7 bg-neutral-800 text-xs text-neutral-500 shadow ring-1 ring-black ring-opacity-5 md:hidden"
+  }, headers.weekDays.map(function (_ref2) {
+    var key = _ref2.key,
+      value = _ref2.value;
+    var isToday = format(value, 'Y-MM-dd') === format(+new Date(), 'Y-MM-dd');
+    var isSelected = format(cursorDate, 'Y-MM-dd') === format(value, 'Y-MM-dd') ? true : false;
+    var buttonStyle = clsx('mt-3 flex h-8 w-8 items-center justify-center rounded-full text-base font-semibold rounded-full', isToday && isSelected && 'bg-secondary-400 text-white', isToday && !isSelected && 'text-secondary-400', isSelected && 'bg-neutral-900 text-white', !isSelected && 'text-neutral-900');
+    return /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "flex flex-col items-center pt-3 pb-1.5",
+      onClick: function onClick() {
+        return navigation.setDate(value);
+      },
+      key: key
+    }, /*#__PURE__*/React.createElement("span", null, format(value, 'EEEEE')), /*#__PURE__*/React.createElement("span", {
+      className: buttonStyle
+    }, format(value, 'd')));
+  }));
+};
+export var DayView = function DayView(_ref3) {
+  var headers = _ref3.headers,
+    body = _ref3.body,
+    navigation = _ref3.navigation,
+    cursorDate = _ref3.cursorDate,
+    activeView = _ref3.activeView,
+    events = _ref3.events,
+    view = _ref3.view;
+  var container = React.useRef(null);
+  var containerNav = React.useRef(null);
+  var containerOffset = React.useRef(null);
+  var responsive = useResponsive();
+  var sm = responsive.sm,
+    md = responsive.md;
+  React.useEffect(function () {
+    var _container$current, _containerNav$current, _containerOffset$curr;
+    var currentMinute = new Date().getHours() * 60;
+    if (typeof ((_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.scrollHeight) === 'number' && typeof ((_containerNav$current = containerNav.current) === null || _containerNav$current === void 0 ? void 0 : _containerNav$current.offsetHeight) === 'number' && typeof ((_containerOffset$curr = containerOffset.current) === null || _containerOffset$curr === void 0 ? void 0 : _containerOffset$curr.offsetHeight) === 'number') {
+      var x = container.current.scrollHeight - containerNav.current.offsetHeight - containerOffset.current.offsetHeight;
+      window.scrollTo(0, x * currentMinute / 1440);
+    }
+  }, []);
+  var eventsOnDate = events.filter(function (event) {
+    return format(cursorDate, 'DDD') === format(new Date(event.timestamp * 1000), 'DDD') ? true : false;
+  });
+  React.useEffect(function () {
+    if (sm && !md) {
+      view.showWeekView();
+    } else if (md) {
+      view.showMonthView();
+    }
+  }, [responsive]);
+  React.useEffect(function () {
+    window.scrollTo(0, 0);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-auto overflow-hidden bg-neutral-50"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: container,
+    className: "flex flex-auto flex-col overflow-auto"
+  }, /*#__PURE__*/React.createElement(SubHeaderMobileDay, {
+    containerNav: containerNav,
+    headers: headers,
+    navigation: navigation,
+    cursorDate: cursorDate
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-auto"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "w-14 flex-none bg-neutral-50 ring-1 ring-neutral-100"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "grid flex-auto grid-cols-1 grid-rows-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-start-1 col-end-2 row-start-1 grid divide-y divide-neutral-100",
+    style: {
+      gridTemplateRows: 'repeat(48, minmax(3.5rem, 1fr))'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerOffset,
+    className: "row-end-1 h-7"
+  }), timesOfDay.map(function (_ref4) {
+    var time = _ref4.time;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: Math.random()
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+      className: "sticky left-0 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs leading-5 text-neutral-400"
+    }, time)), /*#__PURE__*/React.createElement("div", null));
+  }), /*#__PURE__*/React.createElement("div", null)), /*#__PURE__*/React.createElement("ol", {
+    className: "col-start-1 col-end-2 row-start-1 grid grid-cols-1",
+    style: {
+      gridTemplateRows: '1.75rem repeat(288, minmax(0, 1fr)) auto'
+    }
+  }, eventsOnDate.length > 0 && eventsOnDate.map(function (event) {
+    var start = DateTime.fromSeconds(parseInt(event.timestamp)),
+      end = DateTime.fromSeconds(parseInt(event.timestamp) + parseInt(event.duration));
+    var start_time = (parseInt(start.toFormat('HH')) * 60 + parseInt(start.toFormat('mm'))) / 5 + 2;
+    var startTime = start.toFormat('HH:mm'),
+      endTime = end.toFormat('HH:mm');
+    return /*#__PURE__*/React.createElement("li", {
+      className: "relative mt-px flex",
+      style: {
+        gridRow: "".concat(start_time, " / span ").concat(event.duration / 60 / 5)
+      },
+      key: event.name
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      className: "group absolute inset-1 flex flex-col overflow-y-auto rounded-lg bg-blue-50 p-2 text-xs leading-5 hover:bg-blue-100"
+    }, /*#__PURE__*/React.createElement("p", {
+      className: "order-1 font-semibold text-blue-700"
+    }, event.name), /*#__PURE__*/React.createElement("p", {
+      className: "text-blue-500 group-hover:text-blue-700"
+    }, /*#__PURE__*/React.createElement("time", {
+      dateTime: "2022-01-22T06:00"
+    }))));
+  }))))), /*#__PURE__*/React.createElement("div", {
+    className: "hidden w-1/2 max-w-md flex-none border-l border-neutral-100 py-10 px-8 md:block"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center text-center text-neutral-900"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return navigation.toPrev();
+    },
+    className: "-m-1.5 flex flex-none items-center justify-center p-1.5 text-neutral-400 hover:text-neutral-500"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Previous month")), /*#__PURE__*/React.createElement("div", {
+    className: "flex-auto font-semibold"
+  }, format(cursorDate, 'MMMM Y')), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: function onClick() {
+      return navigation.toNext();
+    },
+    className: "-m-1.5 flex flex-none items-center justify-center p-1.5 text-neutral-400 hover:text-neutral-500"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Next month"))), /*#__PURE__*/React.createElement("div", {
+    className: "mt-6 grid grid-cols-7 text-center text-xs leading-6 text-neutral-500"
+  }, headers.weekDays.map(function (_ref5) {
+    var key = _ref5.key,
+      value = _ref5.value;
+    return /*#__PURE__*/React.createElement("div", {
+      key: key
+    }, format(value, 'EEEEE'));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-neutral-200 text-sm shadow ring-1 ring-neutral-200"
+  }, body.value.map(function (_ref6) {
+    var key = _ref6.key,
+      weeks = _ref6.value;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: key
+    }, weeks.map(function (_ref7) {
+      var key = _ref7.key,
+        day = _ref7.value,
+        date = _ref7.date,
+        isCurrentDate = _ref7.isCurrentDate,
+        isCurrentMonth = _ref7.isCurrentMonth;
+      var isSelected = format(cursorDate, 'Y-MM-dd') === format(day, 'Y-MM-dd') ? true : false;
+      var dayStyle = clsx('flex flex-col items-center pt-[10px] pb-[10px]', 'hover:bg-primary-400 hover:transition-opacity duration-300 ease-out focus:z-10', isCurrentMonth ? 'bg-neutral-100' : 'bg-neutral-50', (isSelected || isCurrentDate) && 'font-semibold', isSelected && 'text-neutral-50', !isSelected && isCurrentMonth && !isCurrentDate && 'text-neutral-900', !isSelected && !isCurrentMonth && !isCurrentDate && 'text-neutral-400', isCurrentDate && !isSelected && 'text-primary-400', body.value[0]['value'][0]['value'] === day && 'rounded-tl-lg', body.value[0]['value'][6]['value'] === day && 'rounded-tr-lg', body.value[body.value.length - 1]['value'][0]['value'] === day && 'rounded-bl-lg', body.value[body.value.length - 1]['value'][6]['value'] === day && 'rounded-br-lg');
+      var buttonStyle = clsx('flex h-[32px] w-[32px] p-2 items-center justify-center rounded-full', isSelected && isCurrentDate && 'bg-primary-400', isSelected && !isCurrentDate && 'bg-neutral-900 transition-opacity duration-100');
+      return /*#__PURE__*/React.createElement("button", {
+        key: key,
+        type: "button",
+        className: dayStyle,
+        onClick: function onClick() {
+          return navigation.setDate(day);
+        }
+      }, /*#__PURE__*/React.createElement("time", {
+        dateTime: format(day, 'dd'),
+        className: buttonStyle
+      }, format(day, 'dd')));
+    }));
+  })))));
+};
+export var CalendarDay = function CalendarDay(_ref8) {
+  var _ref8$events = _ref8.events,
+    events = _ref8$events === void 0 ? [] : _ref8$events,
+    CTA = _ref8.CTA;
+  var _React$useState = React.useState('month'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    activeView = _React$useState2[0],
+    changeView = _React$useState2[1];
+  var _useCalendar = useCalendar(),
+    cursorDate = _useCalendar.cursorDate,
+    headers = _useCalendar.headers,
+    body = _useCalendar.body,
+    view = _useCalendar.view,
+    navigation = _useCalendar.navigation;
+  var setView = function setView(option) {
+    changeView(option);
+    switch (option) {
+      case 'month':
+        return view.showMonthView();
+      case 'day':
+        return view.showMonthView();
+      case 'week':
+        return view.showWeekView();
+    }
+  };
+
+  // React.useEffect, populate events, watch [view]
+  var eventsOnDate = events.filter(function (event) {
+    return format(cursorDate, 'DDD') === format(new Date(event.timestamp * 1000), 'DDD') ? true : false;
+  });
+  var bodyStyle = clsx(activeView === 'month' && 'flex flex-col', (activeView === 'week' || activeView === 'day') && 'flex flex-col h-screen');
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: bodyStyle
+  }, /*#__PURE__*/React.createElement(CalendarHeader, {
+    activeView: activeView,
+    setView: setView,
+    view: view,
+    CTA: CTA,
+    cursorDate: cursorDate,
+    navigation: navigation
+  }), /*#__PURE__*/React.createElement(DayView, {
+    headers: headers,
+    body: body,
+    events: events,
+    activeView: activeView,
+    navigation: navigation,
+    cursorDate: cursorDate,
+    view: view
+  })));
+};

package/lib/shared/components/Calendar/CalendarHeader.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import { format } from 'date-fns';
+// import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/solid';
+import { Dropdown } from "../Dropdown";
+export var CalendarHeader = function CalendarHeader(_ref) {
+  var activeView = _ref.activeView,
+    setView = _ref.setView,
+    view = _ref.view,
+    cursorDate = _ref.cursorDate,
+    CTA = _ref.CTA,
+    navigation = _ref.navigation;
+  var userNavigation = [{
+    text: 'Month',
+    type: 'button',
+    action: function action() {
+      return setView('month');
+    }
+  }, {
+    text: 'Day',
+    type: 'button',
+    action: function action() {
+      return setView('day');
+    }
+  }, {
+    text: 'Week',
+    type: 'button',
+    action: function action() {
+      return setView('week');
+    }
+  }];
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("header", {
+    className: "relative flex items-center justify-between pt-[16px] pb-[24px] sm:px-6 lg:px-8 lg:flex-none"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "text-lg font-semibold text-neutral-900"
+  }, activeView === 'day' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h1", {
+    className: "text-lg font-semibold leading-6 text-neutral-900"
+  }, /*#__PURE__*/React.createElement("time", {
+    dateTime: "2022-01-22",
+    className: "sm:hidden"
+  }, format(cursorDate, 'MMM d, Y')), /*#__PURE__*/React.createElement("time", {
+    dateTime: "2022-01-22",
+    className: "hidden sm:inline"
+  }, format(cursorDate, 'MMMM d, Y'))), /*#__PURE__*/React.createElement("p", {
+    className: "mt-1 text-sm text-neutral-500"
+  }, format(cursorDate, 'eeee'))) : /*#__PURE__*/React.createElement("time", {
+    dateTime: format(cursorDate, 'Y-MMMM')
+  }, format(cursorDate, 'MMMM Y'))), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center space-x-[16px]"
+  }, /*#__PURE__*/React.createElement("div", null, CTA), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center rounded-md shadow-sm md:items-stretch text-button-tiny h-[28px]"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "flex items-center justify-center rounded-l-md border border-r-0 border-neutral-400 bg-neutral-50 py-2 pl-3 pr-4 text-neutral-400 hover:text-neutral-500 focus:relative md:w-9 md:px-2 md:hover:bg-neutral-50",
+    onClick: function onClick() {
+      return navigation.toPrev();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Previous month")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "hidden border-t border-b border-neutral-400 bg-neutral-50 px-3.5 text-sm font-medium text-neutral-700 hover:bg-neutral-50 hover:text-neutral-400 focus:relative md:block",
+    onClick: function onClick() {
+      return navigation.setToday();
+    }
+  }, "Today"), /*#__PURE__*/React.createElement("span", {
+    className: "relative -mx-px h-5 w-px bg-neutral-300 md:hidden"
+  }), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "flex items-center justify-center rounded-r-md border border-l-0 border-neutral-400 bg-neutral-50 py-2 pl-4 pr-3 text-neutral-400 hover:text-neutral-500 focus:relative md:w-9 md:px-2 md:hover:bg-neutral-50",
+    onClick: function onClick() {
+      return navigation.toNext();
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "sr-only"
+  }, "Next month"))), /*#__PURE__*/React.createElement("div", {
+    className: "md:flex md:items-center"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "right-0 origin-top-right"
+  }, /*#__PURE__*/React.createElement(Dropdown, {
+    items: userNavigation,
+    button: {
+      icon: 'dots',
+      name: activeView,
+      size: 'tiny',
+      variant: 'outline'
+    }
+  }))))));
+};

package/lib/shared/components/Calendar/CalendarMonth.js

@@ -0,0 +1,106 @@
+import React from 'react';
+import { format } from 'date-fns';
+import { DateTime } from 'luxon';
+import clsx from 'clsx';
+export var MonthDesktop = function MonthDesktop(_ref) {
+  var weeks = _ref.weeks,
+    events = _ref.events,
+    body = _ref.body,
+    activeDate = _ref.activeDate,
+    openModal = _ref.openModal,
+    navigation = _ref.navigation;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, weeks.map(function (_ref2) {
+    var key = _ref2.key,
+      day = _ref2.value,
+      date = _ref2.date,
+      isCurrentDate = _ref2.isCurrentDate,
+      isCurrentMonth = _ref2.isCurrentMonth;
+    var eventsOnDate = events.filter(function (event) {
+      return format(day, 'DDD') === format(new Date(event.timestamp * 1000), 'DDD') ? true : false;
+    });
+    var isSelected = format(activeDate, 'Y-MM-dd') === format(day, 'Y-MM-dd') ? true : false;
+    var buttonStyle = clsx('flex h-6 w-6 items-center justify-center rounded-full font-semibold', isCurrentDate && isSelected && 'bg-secondary-400 text-neutral-800', isCurrentDate && !isSelected && 'text-secondary-400', isSelected && 'bg-primary-400 text-neutral-800');
+    var topLeft = body.value[0]['value'][0]['value'] === day;
+    var topRight = body.value[0]['value'][6]['value'] === day;
+    var botLeft = body.value[body.value.length - 1]['value'][0]['value'] === day;
+    var botRight = body.value[body.value.length - 1]['value'][6]['value'] === day;
+    return /*#__PURE__*/React.createElement("div", {
+      key: format(day, 'Y-MM-dd'),
+      className: clsx(isCurrentMonth ? 'bg-neutral-100' : 'bg-neutral-50 text-neutral-500', topLeft && 'rounded-tl-[20px]', topRight && 'rounded-tr-[20px]', botLeft && 'rounded-bl-[20px]', botRight && 'rounded-br-[20px]', 'relative py-2 px-3')
+    }, /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return navigation.setDate(day);
+      }
+    }, /*#__PURE__*/React.createElement("time", {
+      dateTime: format(day, 'y-M-d'),
+      className: buttonStyle
+    }, format(day, 'dd'))), eventsOnDate.length > 0 && /*#__PURE__*/React.createElement("ol", {
+      className: "mt-2"
+    }, eventsOnDate.slice(0, 2).map(function (event) {
+      var dt = DateTime.fromSeconds(Number(event.timestamp));
+      return /*#__PURE__*/React.createElement("li", {
+        key: event.id,
+        onClick: function onClick() {
+          return openModal({
+            type: 'event',
+            content: event,
+            padding: 'none',
+            overflow: true
+          });
+        },
+        className: "cursor-pointer"
+      }, /*#__PURE__*/React.createElement("a", {
+        href: event.href,
+        className: "group flex"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "flex-auto truncate font-medium text-neutral-900 group-hover:text-secondary-400"
+      }, event.name), /*#__PURE__*/React.createElement("time", {
+        dateTime: "".concat(('0' + dt.hour).slice(-2), ":").concat(('0' + dt.minute).slice(-2)),
+        className: "ml-3 hidden flex-none text-neutral-500 group-hover:text-secondary-400 md:block"
+      }, "".concat(('0' + dt.hour).slice(-2), ":").concat(('0' + dt.minute).slice(-2)))));
+    }), eventsOnDate.length > 2 && /*#__PURE__*/React.createElement("li", {
+      className: "text-neutral-500"
+    }, "+ ", eventsOnDate.length - 2, " more")));
+  }));
+};
+export var MonthMobile = function MonthMobile(_ref3) {
+  var weeks = _ref3.weeks,
+    events = _ref3.events,
+    activeDate = _ref3.activeDate,
+    openModal = _ref3.openModal,
+    navigation = _ref3.navigation;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, weeks.map(function (_ref4) {
+    var key = _ref4.key,
+      day = _ref4.value,
+      date = _ref4.date,
+      isCurrentDate = _ref4.isCurrentDate,
+      isCurrentMonth = _ref4.isCurrentMonth;
+    var eventsOnDate = events.filter(function (event) {
+      var eventTime = new Date(event.timestamp * 1000);
+      return format(day, 'DDD') === format(eventTime, 'DDD') ? true : false;
+    });
+    var isSelected = format(activeDate, 'Y-MM-dd') === format(day, 'Y-MM-dd') ? true : false;
+    var dayStyle = clsx(isCurrentMonth ? 'bg-neutral-100' : 'bg-neutral-50', (isSelected || isCurrentDate) && 'font-semibold', isSelected && 'text-neutral-800', !isSelected && isCurrentDate && 'text-primary-400', !isSelected && isCurrentMonth && !isCurrentDate && 'text-neutral-900', !isSelected && !isCurrentMonth && !isCurrentDate && 'text-neutral-500', 'flex h-14 flex-col py-2 px-3 hover:bg-neutral-100 focus:z-20');
+    var eventStyle = clsx(isSelected && 'flex h-6 w-6 items-center justify-center rounded-full', isSelected && isCurrentDate && 'bg-primary-400', isSelected && !isCurrentDate && 'bg-secondary-400', 'ml-auto');
+    return /*#__PURE__*/React.createElement("button", {
+      key: date,
+      type: "button",
+      onClick: function onClick() {
+        return navigation.setDate(day);
+      },
+      className: dayStyle
+    }, /*#__PURE__*/React.createElement("time", {
+      dateTime: format(day, 'd'),
+      className: eventStyle
+    }, format(day, 'dd')), /*#__PURE__*/React.createElement("p", {
+      className: "sr-only"
+    }, eventsOnDate.length, " events"), eventsOnDate.length > 0 && /*#__PURE__*/React.createElement("div", {
+      className: "-mx-0.5 mt-auto flex flex-wrap-reverse"
+    }, eventsOnDate.map(function (event) {
+      return /*#__PURE__*/React.createElement("div", {
+        key: event.id,
+        className: "mx-0.5 mb-1 h-1.5 w-1.5 rounded-full bg-neutral-400"
+      });
+    })));
+  }));
+};