@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Calendar/Calendar.js

@@ -0,0 +1,376 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _dateFns = require("date-fns");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _system = require("../system");
+
+var _Group = _interopRequireDefault(require("../Group"));
+
+var _HeadingUppercase = _interopRequireDefault(require("../HeadingUppercase"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _hooks = require("../hooks");
+
+var _Day = _interopRequireDefault(require("./Day"));
+
+var _utils = require("./utils");
+
+var sizes = {
+  sm: {
+    buttonSize: 'sm',
+    cellSize: 4,
+    fontSize: 4,
+    headerFontSize: 4,
+    statusOffset: '12.5%',
+    trimWeekdays: 2
+  },
+  md: {
+    buttonSize: 'sm',
+    cellSize: 5,
+    fontSize: 4,
+    headerFontSize: 2,
+    trimWeekdays: 3
+  },
+  lg: {
+    buttonSize: 'sm',
+    cellSize: 7,
+    fontSize: 3,
+    headerFontSize: 2,
+    trimWeekdays: 3
+  }
+};
+var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, calendarRef) {
+  var date = _ref.date,
+      initialDate = _ref.initialDate,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate,
+      onDateChange = _ref.onDateChange,
+      onDateSelect = _ref.onDateSelect,
+      renderDay = _ref.renderDay,
+      selected = _ref.selected,
+      size = _ref.size,
+      weekStartsOn = _ref.weekStartsOn,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["date", "initialDate", "maxDate", "minDate", "onDateChange", "onDateSelect", "renderDay", "selected", "size", "weekStartsOn"]);
+  var calendarTheme = (0, _system.useThemeValue)('calendar');
+  var lastDate = (0, _react.useRef)(date);
+
+  var _useHover = (0, _hooks.useHover)(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useState = (0, _react.useState)(date || initialDate),
+      currentDate = _useState[0],
+      setCurrentDate = _useState[1];
+
+  var _useState2 = (0, _react.useState)('calendar'),
+      currentView = _useState2[0],
+      setCurrentView = _useState2[1];
+
+  var isCalendarView = currentView === 'calendar';
+  var isYearsView = currentView === 'years';
+  var isMonthsView = currentView === 'months';
+  var currentMonth = (0, _dateFns.getMonth)(currentDate);
+  var currentYear = (0, _dateFns.getYear)(currentDate);
+  var currentYears = (0, _utils.getYears)(currentYear);
+
+  var minMonth = (0, _dateFns.getMonth)(minDate) || _utils.MIN_MONTH_DEFAULT;
+
+  var maxMonth = (0, _dateFns.getMonth)(maxDate) || _utils.MAX_MONTH_DEFAULT;
+
+  var minYear = (0, _dateFns.getYear)(minDate) || _utils.MIN_YEAR_DEFAULT;
+
+  var maxYear = (0, _dateFns.getYear)(maxDate) || _utils.MAX_YEAR_DEFAULT;
+
+  var _sizes$size = sizes[size],
+      buttonSize = _sizes$size.buttonSize,
+      cellSize = _sizes$size.cellSize,
+      fontSize = _sizes$size.fontSize,
+      headerFontSize = _sizes$size.headerFontSize,
+      statusOffset = _sizes$size.statusOffset,
+      trimWeekdays = _sizes$size.trimWeekdays;
+  var weekdays = (0, _utils.getMonthWeekDays)({
+    trimWeekdays: trimWeekdays,
+    weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0
+  });
+  var weeks = (0, _utils.getMonthWeeks)(currentDate, {
+    forceSixWeeks: true,
+    weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0
+  });
+
+  var setDate = function setDate(nextDate, moveToCalendarView) {
+    var nextView = moveToCalendarView ? 'calendar' : currentView;
+
+    if (Calendar.isBeforeDay(nextDate, minDate)) {
+      nextDate = minDate;
+    } else if (Calendar.isAfterDay(nextDate, maxDate)) {
+      nextDate = maxDate;
+    }
+
+    if (date === null) {
+      setCurrentDate(nextDate);
+      setCurrentView(nextView);
+    } else {
+      setCurrentView(nextView);
+    }
+
+    if (onDateChange) {
+      onDateChange(nextDate);
+    }
+  };
+
+  var navigateCalendar = function navigateCalendar(direction) {
+    var isYearsView = currentView === 'years';
+    var add = isYearsView ? _dateFns.addYears : _dateFns.addMonths;
+    setDate(add(currentDate, direction));
+  };
+
+  (0, _react.useEffect)(function () {
+    if (date !== null && !(0, _dateFns.isSameDay)(lastDate.current, date)) {
+      setCurrentDate(date);
+    }
+
+    lastDate.current = date;
+  }, [date]);
+  (0, _react.useImperativeHandle)(calendarRef, function () {
+    return {
+      setDate: setDate,
+      navigateCalendar: navigateCalendar
+    };
+  });
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    innerRef: calendarRef
+  }, hoverProps, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: "space-between",
+    padding: 0.5,
+    paddingBottom: 0
+  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    spacing: 0.5
+  }, /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    as: "button",
+    "aria-label": isMonthsView ? 'Choose dates' : 'Choose month',
+    padding: 0.25,
+    fontSize: headerFontSize,
+    lineHeight: 3,
+    radius: 3,
+    cursor: "pointer",
+    backgroundColor: hover ? 'highlight' : 'transparent',
+    hover: {
+      backgroundColor: 'highlightSecondary'
+    },
+    onClick: function onClick() {
+      setCurrentView(isMonthsView ? 'calendar' : 'months');
+    }
+  }, (0, _dateFns.format)(currentDate, 'MMMM')), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    as: "button",
+    "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
+    padding: 0.25,
+    fontSize: headerFontSize,
+    lineHeight: 3,
+    radius: 3,
+    cursor: "pointer",
+    backgroundColor: hover ? 'highlight' : 'transparent',
+    hover: {
+      backgroundColor: 'highlightSecondary'
+    },
+    onClick: function onClick() {
+      setCurrentView(isYearsView ? 'calendar' : 'years');
+    }
+  }, currentYear)), /*#__PURE__*/_react["default"].createElement(_Group["default"], {
+    marginRight: 0.5,
+    childProps: {
+      variant: 'outline',
+      size: buttonSize
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    title: "Previous month",
+    icon: {
+      name: 'caret-left'
+    },
+    disabled: isYearsView ? currentYear <= minYear : (0, _dateFns.isSameMonth)(currentDate, minDate),
+    onClick: function onClick() {
+      return navigateCalendar(-1);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    tooltip: {
+      title: 'Today'
+    },
+    icon: {
+      name: 'radio-1'
+    },
+    onClick: function onClick() {
+      return setDate(_utils.TODAY, true);
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    title: "Next month",
+    icon: {
+      name: 'caret-right'
+    },
+    disabled: isYearsView ? currentYear >= maxYear : (0, _dateFns.isSameMonth)(currentDate, maxDate),
+    onClick: function onClick() {
+      return navigateCalendar(1);
+    }
+  }))), isMonthsView && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    width: cellSize * 7,
+    height: cellSize * 6 + 3.5,
+    marginTop: 0.5,
+    wrap: true
+  }, _utils.MONTHS.map(function (month, monthIndex) {
+    var monthDisabled = !Calendar.isWithinRange(new Date(currentYear, monthIndex, 1), {
+      start: new Date(minYear, minMonth, 1),
+      end: new Date(maxYear, maxMonth, 1)
+    });
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      key: month,
+      as: "button",
+      basis: cellSize * 7 / 3,
+      alignment: "center",
+      distribution: "center",
+      fontWeight: 700,
+      cursor: monthDisabled ? 'not-allowed' : 'pointer',
+      backgroundColor: currentMonth === monthIndex ? 'surfaceSecondary' : 'transparent',
+      opacity: monthDisabled ? 0.6 : undefined,
+      hover: {
+        backgroundColor: monthDisabled ? undefined : 'highlight'
+      },
+      disabled: monthDisabled,
+      onClick: function onClick() {
+        var monthDifference = monthIndex - currentMonth;
+        setDate((0, _dateFns.addMonths)(currentDate, monthDifference), true);
+      },
+      children: /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], {
+        cursor: "inherit"
+      }, month.substring(0, 3))
+    });
+  })), isYearsView && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    width: cellSize * 7,
+    height: cellSize * 6 + 3.5,
+    marginTop: 0.5,
+    wrap: true
+  }, currentYears.map(function (year) {
+    var yearDisabled = !(year >= minYear && year <= maxYear);
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      key: year,
+      as: "button",
+      basis: cellSize * 7 / 3,
+      alignment: "center",
+      distribution: "center",
+      fontWeight: 700,
+      cursor: yearDisabled ? 'not-allowed' : 'pointer',
+      backgroundColor: currentYear === year ? 'surfaceTertiary' : 'transparent',
+      opacity: yearDisabled ? 0.6 : undefined,
+      hover: {
+        backgroundColor: yearDisabled ? undefined : 'highlight'
+      },
+      disabled: yearDisabled,
+      onClick: function onClick() {
+        var yearDifference = year - currentYear;
+        setDate((0, _dateFns.addYears)(currentDate, yearDifference), true);
+      },
+      children: /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], {
+        cursor: "inherit"
+      }, year)
+    });
+  })), isCalendarView && /*#__PURE__*/_react["default"].createElement(_StackView["default"], null, /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal"
+  }, weekdays.map(function (weekday) {
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      key: weekday.full,
+      alignment: "center",
+      distribution: "center",
+      width: cellSize,
+      height: 4
+    }, /*#__PURE__*/_react["default"].createElement(_HeadingUppercase["default"], {
+      fontSize: 6
+    }, weekday.trimmed));
+  })), weeks.map(function (week, index) {
+    return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+      key: index,
+      axis: "horizontal"
+    }, _react.Children.toArray(week.map(function (date) {
+      var inSameMonth = (0, _dateFns.isSameMonth)(date, currentDate);
+      var isMinDate = (0, _dateFns.isBefore)(date, minDate);
+      var isMaxDate = (0, _dateFns.isAfter)(date, maxDate);
+      var isSelected = (0, _dateFns.isSameDay)(date, selected);
+      var isToday = (0, _dateFns.isSameDay)(date, _utils.TODAY);
+      var backgroundColor = isMinDate || isMaxDate ? 'surfaceSecondary' : 'inherit';
+      var color = isSelected ? 'white' : inSameMonth ? 'inherit' : 'foregroundTertiary';
+      return renderDay({
+        backgroundColor: backgroundColor,
+        cellSize: cellSize,
+        color: color,
+        date: date,
+        fontSize: fontSize,
+        inSameMonth: inSameMonth,
+        isMinDate: isMinDate,
+        isMaxDate: isMaxDate,
+        isSelected: isSelected,
+        isToday: isToday,
+        selectDate: onDateSelect,
+        statusOffset: statusOffset
+      });
+    })));
+  })));
+});
+Calendar.defaultProps = {
+  date: null,
+  initialDate: _utils.TODAY,
+  minDate: null,
+  maxDate: null,
+  renderDay: function renderDay(props) {
+    return /*#__PURE__*/_react["default"].createElement(_Day["default"], props);
+  },
+  size: 'md'
+};
+Calendar.TODAY = _utils.TODAY;
+Calendar.Day = _Day["default"];
+Calendar.getNextOccurrenceOfDay = _utils.getNextOccurrenceOfDay;
+
+Calendar.isAfterDay = function (date, dateToCompare) {
+  return date && dateToCompare && (0, _dateFns.isAfter)(date, dateToCompare);
+};
+
+Calendar.isBeforeDay = function (date, dateToCompare) {
+  return date && dateToCompare && (0, _dateFns.isBefore)(date, dateToCompare);
+};
+
+Calendar.isSameDay = function (dateLeft, dateRight) {
+  return dateLeft && dateRight && (0, _dateFns.isSameDay)(dateLeft, dateRight);
+};
+
+Calendar.isWithinRange = function (date, _ref2) {
+  var start = _ref2.start,
+      end = _ref2.end;
+
+  if (date && start && end && (0, _dateFns.isAfter)(end, start)) {
+    return (0, _dateFns.isWithinInterval)(date, {
+      start: start,
+      end: end
+    });
+  }
+};
+
+var _default = Calendar;
+exports["default"] = _default;

package/dist/cjs/Calendar/Day.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var DayStatus = function DayStatus(_ref) {
+  var color = _ref.color,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color"]);
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, (0, _extends2["default"])({
+    size: "5px",
+    color: color
+  }, restProps));
+};
+
+var Day = function Day(_ref2) {
+  var backgroundColor = _ref2.backgroundColor,
+      cellSize = _ref2.cellSize,
+      children = _ref2.children,
+      color = _ref2.color,
+      date = _ref2.date,
+      disabled = _ref2.disabled,
+      fontSize = _ref2.fontSize,
+      fontWeight = _ref2.fontWeight,
+      inSameMonth = _ref2.inSameMonth,
+      isMinDate = _ref2.isMinDate,
+      isMaxDate = _ref2.isMaxDate,
+      isSelected = _ref2.isSelected,
+      isToday = _ref2.isToday,
+      selectDate = _ref2.selectDate,
+      _ref2$selectedColor = _ref2.selectedColor,
+      selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
+      _ref2$statusColor = _ref2.statusColor,
+      statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
+      statuses = _ref2.statuses,
+      _ref2$statusOffset = _ref2.statusOffset,
+      statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
+  var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    width: cellSize,
+    height: cellSize,
+    position: "relative",
+    userSelect: "none",
+    backgroundColor: backgroundColor,
+    color: color,
+    cursor: affordance ? 'pointer' : 'default',
+    onClick: function onClick() {
+      return selectDate && !disabled && !isMinDate && !isMaxDate && selectDate(date);
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    width: "100%",
+    height: "100%",
+    alignment: "center",
+    distribution: "center",
+    pointerEvents: (disabled || isMinDate || isMaxDate) && 'none',
+    hover: affordance && {
+      backgroundColor: 'highlight'
+    }
+  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/_react["default"].createElement(_Icon["default"].Status, {
+    size: cellSize,
+    color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  }), /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    as: "span",
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: 2,
+    position: "relative"
+  }, date.getDate()), statuses && /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    axis: "horizontal",
+    distribution: "center",
+    position: "absolute",
+    bottom: statusOffset,
+    left: 0,
+    right: 0,
+    spacing: 0.25
+  }, statuses.map(function (color, index) {
+    return /*#__PURE__*/_react["default"].createElement(DayStatus, {
+      key: index,
+      color: isSelected ? 'white' : color
+    });
+  }))));
+};
+
+var _default = Day;
+exports["default"] = _default;

package/dist/cjs/Calendar/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+
+var _default = _Calendar["default"];
+exports["default"] = _default;

package/dist/cjs/Calendar/utils.js

@@ -0,0 +1,104 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getMonthWeekDays = getMonthWeekDays;
+exports.getMonthWeeks = getMonthWeeks;
+exports.getNextOccurrenceOfDay = getNextOccurrenceOfDay;
+exports.getYears = getYears;
+exports.WEEKDAYS = exports.MONTHS = exports.MAX_YEAR_DEFAULT = exports.MIN_YEAR_DEFAULT = exports.MAX_MONTH_DEFAULT = exports.MIN_MONTH_DEFAULT = exports.DAYS_IN_SIX_WEEKS = exports.DAYS_IN_WEEK = exports.YEARS_PER_PAGE = exports.TODAY = void 0;
+
+var _dateFns = require("date-fns");
+
+var TODAY = (0, _dateFns.startOfDay)(new Date());
+exports.TODAY = TODAY;
+var YEARS_PER_PAGE = 12;
+exports.YEARS_PER_PAGE = YEARS_PER_PAGE;
+var DAYS_IN_WEEK = 7;
+exports.DAYS_IN_WEEK = DAYS_IN_WEEK;
+var DAYS_IN_SIX_WEEKS = 42;
+exports.DAYS_IN_SIX_WEEKS = DAYS_IN_SIX_WEEKS;
+var MIN_MONTH_DEFAULT = 0;
+exports.MIN_MONTH_DEFAULT = MIN_MONTH_DEFAULT;
+var MAX_MONTH_DEFAULT = 11;
+exports.MAX_MONTH_DEFAULT = MAX_MONTH_DEFAULT;
+var MIN_YEAR_DEFAULT = 1900;
+exports.MIN_YEAR_DEFAULT = MIN_YEAR_DEFAULT;
+var MAX_YEAR_DEFAULT = 3000;
+exports.MAX_YEAR_DEFAULT = MAX_YEAR_DEFAULT;
+var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+exports.MONTHS = MONTHS;
+var WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+exports.WEEKDAYS = WEEKDAYS;
+
+function getMonthWeekDays(_ref) {
+  var trimWeekdays = _ref.trimWeekdays,
+      weekStartsOn = _ref.weekStartsOn;
+  var weekdays = [].concat(WEEKDAYS);
+  var sortedWeekdays = weekdays.concat(weekdays.splice(0, weekStartsOn));
+  return sortedWeekdays.map(function (weekday, index) {
+    return {
+      full: weekday,
+      trimmed: trimWeekdays ? weekday.substring(0, parseInt(trimWeekdays, 10)) : weekday
+    };
+  });
+}
+
+function getMonthWeeks(date, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp,
+      _ref2$forceSixWeeks = _ref2.forceSixWeeks,
+      forceSixWeeks = _ref2$forceSixWeeks === void 0 ? true : _ref2$forceSixWeeks,
+      _ref2$weekStartsOn = _ref2.weekStartsOn,
+      weekStartsOn = _ref2$weekStartsOn === void 0 ? 0 : _ref2$weekStartsOn,
+      locale = _ref2.locale;
+
+  var weekOptions = {
+    weekStartsOn: weekStartsOn,
+    locale: locale
+  };
+  var monthFirstDate = (0, _dateFns.startOfMonth)(date);
+  var monthLastDate = (0, _dateFns.endOfMonth)(date);
+  var monthFirstWeekdayDate = (0, _dateFns.startOfWeek)(monthFirstDate, weekOptions);
+  var monthLastWeekdayDate = (0, _dateFns.lastDayOfWeek)(monthLastDate, weekOptions);
+  var currentEndOfWeek = (0, _dateFns.endOfWeek)(monthFirstWeekdayDate, weekOptions);
+  var days = (0, _dateFns.eachDayOfInterval)({
+    start: monthFirstWeekdayDate,
+    end: monthLastWeekdayDate
+  });
+  var week = [];
+
+  if (forceSixWeeks && days.length < DAYS_IN_SIX_WEEKS) {
+    days = (0, _dateFns.eachDayOfInterval)({
+      start: monthFirstWeekdayDate,
+      end: (0, _dateFns.addWeeks)(monthLastWeekdayDate, DAYS_IN_SIX_WEEKS % days.length / DAYS_IN_WEEK)
+    });
+  }
+
+  return days.reduce(function (weeks, day) {
+    week.push(day);
+
+    if ((0, _dateFns.isSameDay)(day, currentEndOfWeek)) {
+      weeks.push(week);
+      week = [];
+    } else {
+      currentEndOfWeek = (0, _dateFns.endOfWeek)(day, weekOptions);
+    }
+
+    return weeks;
+  }, []);
+}
+
+function getNextOccurrenceOfDay(dayOfWeek) {
+  var date = (0, _dateFns.setISODay)(TODAY, dayOfWeek);
+  return (0, _dateFns.getISODay)(TODAY) <= dayOfWeek ? date : (0, _dateFns.addWeeks)(date, 1);
+}
+
+function getYears(activeYear) {
+  var activeOffset = activeYear % YEARS_PER_PAGE;
+  var years = [];
+
+  for (var index = 0; index < YEARS_PER_PAGE; index++) {
+    years.push(activeYear - activeOffset + index);
+  }
+
+  return years;
+}

package/dist/cjs/Card/Card.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Card = Card;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _system = require("../system");
+
+var _StackView = require("../StackView");
+
+var _utils = require("../utils");
+
+function Section(_ref) {
+  var subdued = _ref.subdued,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["subdued"]);
+  return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
+    width: "100%",
+    padding: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : undefined
+  }, restProps));
+}
+
+function Card(_ref2) {
+  var children = _ref2.children,
+      subdued = _ref2.subdued,
+      _ref2$radius = _ref2.radius,
+      radius = _ref2$radius === void 0 ? 3 : _ref2$radius,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children", "subdued", "radius"]);
+  var cardTheme = (0, _system.useThemeValue)('card');
+  return /*#__PURE__*/React.createElement(_StackView.StackView, (0, _extends2["default"])({
+    width: "100%",
+    lineHeight: 2.5,
+    borderColor: "separatorTertiary",
+    borderStyle: "solid",
+    borderWidth: 1,
+    backgroundColor: subdued ? 'surfaceSecondary' : 'surface',
+    color: "foreground",
+    radius: radius
+  }, cardTheme, restProps), radius > 0 ? (0, _utils.cloneChildren)(children, function (child, _ref3) {
+    var _ref4, _ref5;
+
+    var firstChild = _ref3.firstChild,
+        lastChild = _ref3.lastChild;
+    return child.props.radius === undefined ? firstChild ? (_ref4 = {}, _ref4["radius" + (restProps.axis === 'horizontal' ? 'Left' : 'Top')] = radius - 1, _ref4) : lastChild ? (_ref5 = {}, _ref5["radius" + (restProps.axis === 'horizontal' ? 'Right' : 'Bottom')] = radius - 1, _ref5) : {} : {};
+  }) : children);
+}
+
+Card.Section = Section;

package/dist/cjs/Card/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Card = require("./Card");
+
+exports["default"] = _Card.Card;
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  exports[key] = _Card[key];
+});