musae 0.3.3 → 0.3.6

package/dist/components/avatar/avatar.cjs

@@ -12,6 +12,7 @@ var className = require('../../utils/class-name.cjs');
 var theme = require('../theme/theme.cjs');
 var relax = require('@aiszlab/relax');
 var componentToken = require('../../utils/component-token.cjs');
+var skeleton = require('../skeleton/skeleton.cjs');
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style"];
 var styles = {
@@ -161,19 +162,26 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme$1.colors[colors.ColorToken.OnPrimary]
     })),
+    loading: stylex.default.props(styles[shape], styles[size]),
     image: stylex.default.props(styles.image, styles[size])
   };
+  if (loadStatus === "loading") {
+    return /*#__PURE__*/React.createElement(skeleton.default, {
+      className: styled.loading.className,
+      style: styled.loading.style
+    });
+  }
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
     className: relax.clsx(classNames[className.AvatarClassToken.Avatar], className$1, styled.avatar.className),
     style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
     ref: ref
-  }), loadStatus === "loaded" ? (/*#__PURE__*/React.createElement("img", {
+  }), loadStatus === "loaded" && (/*#__PURE__*/React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  })) : alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase());
+  })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 
 exports.default = Avatar;

package/dist/components/avatar/avatar.mjs

@@ -10,6 +10,7 @@ import { AvatarClassToken } from '../../utils/class-name.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useImageLoader, clsx } from '@aiszlab/relax';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import Skeleton from '../skeleton/skeleton.mjs';
 
 var _excluded = ["src", "alt", "shape", "size", "className", "style"];
 var styles = {
@@ -159,19 +160,26 @@ var Avatar = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), styles[size], styles[shape], isInGroup && styles.overlapping({
       outlineColor: theme.colors[ColorToken.OnPrimary]
     })),
+    loading: _stylex.props(styles[shape], styles[size]),
     image: _stylex.props(styles.image, styles[size])
   };
+  if (loadStatus === "loading") {
+    return /*#__PURE__*/React.createElement(Skeleton, {
+      className: styled.loading.className,
+      style: styled.loading.style
+    });
+  }
   return /*#__PURE__*/React.createElement("span", _objectSpread(_objectSpread({}, props), {}, {
     className: clsx(classNames[AvatarClassToken.Avatar], className, styled.avatar.className),
     style: _objectSpread(_objectSpread({}, styled.avatar.style), style),
     ref: ref
-  }), loadStatus === "loaded" ? (/*#__PURE__*/React.createElement("img", {
+  }), loadStatus === "loaded" && (/*#__PURE__*/React.createElement("img", {
     draggable: false,
     src: src,
     alt: alt,
     className: styled.image.className,
     style: styled.image.style
-  })) : alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase());
+  })), loadStatus !== "loaded" && (alt === null || alt === void 0 ? void 0 : alt.slice(0, 2).toUpperCase()));
 });
 
 export { Avatar as default };

package/dist/components/button/button.cjs

@@ -14,6 +14,7 @@ var theme = require('../theme/theme.cjs');
 var colors = require('../../utils/colors.cjs');
 var useClassNames = require('../../hooks/use-class-names.cjs');
 var componentToken = require('../../utils/component-token.cjs');
+var color = require('@aiszlab/fuzzy/color');
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
@@ -232,7 +233,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className$1 = _ref.className,
     style = _ref.style,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? "primary" : _ref$color,
+    color$1 = _ref$color === void 0 ? "primary" : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$variant = _ref.variant,
@@ -263,22 +264,22 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     styles[size],
     // variant
     variant === "filled" && styles.filled({
-      backgroundColor: theme$1.colors[color],
-      color: theme$1.colors["on-".concat(color)]
+      backgroundColor: theme$1.colors[color$1],
+      color: theme$1.colors["on-".concat(color$1)]
     }), variant === "outlined" && styles.outlined({
-      color: theme$1.colors[color],
-      hoveredBackgroundColor: colors.toRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      color: theme$1.colors[color$1],
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
     }), variant === "text" && styles.text({
-      color: theme$1.colors[color],
-      hoveredBackgroundColor: colors.toRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
+      color: theme$1.colors[color$1],
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors[colors.ColorToken.Primary], tokens_stylex.OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? colors.toRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium) : "transparent",
-      color: colors.toRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
-      outlineColor: variant === "outlined" ? colors.toRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.medium) : "transparent",
+      color: color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker),
+      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors[colors.ColorToken.OnSurface], tokens_stylex.OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/button/button.mjs

@@ -9,9 +9,10 @@ import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
-import { toRgba, ColorToken } from '../../utils/colors.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { ComponentToken } from '../../utils/component-token.mjs';
+import { hexToRgba } from '@aiszlab/fuzzy/color';
 
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
@@ -265,18 +266,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: theme.colors["on-".concat(color)]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: toRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: toRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? toRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium) : "transparent",
-      color: toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
-      outlineColor: variant === "outlined" ? toRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.medium) : "transparent",
+      color: hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker),
+      outlineColor: variant === "outlined" ? hexToRgba(theme.colors[ColorToken.OnSurface], OPACITY.thicker) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/calendar/contribution.cjs

@@ -0,0 +1,251 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var dayjs = require('dayjs');
+var React = require('react');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var hooks = require('../theme/hooks.cjs');
+var theme = require('../theme/theme.cjs');
+var tooltip = require('../tooltip/tooltip.cjs');
+var relax = require('@aiszlab/relax');
+var date = require('../../utils/date.cjs');
+
+var styles = {
+  calendar: {
+    variables: function variables(props) {
+      return [{
+        "--cell-size": "musaex-1erll0c",
+        "--cell-color": "musaex-1utc1yc",
+        $$css: true
+      }, {
+        "----cell-color": props.color != null ? props.color : "initial"
+      }];
+    },
+    "default": {
+      borderCollapse: "musaex-1vathgz",
+      borderSpacing: "musaex-g5hwcv",
+      $$css: true
+    },
+    scrollable: {
+      maxWidth: "musaex-193iq5w",
+      overflow: "musaex-ysyzu8",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }
+  },
+  cell: {
+    "default": {
+      minWidth: "musaex-1q6qbx2",
+      minHeight: "musaex-189dakb",
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      borderRadius: "musaex-llun4g",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      cursor: "musaex-1ypdohk",
+      backgroundColor: "musaex-1204rnj",
+      $$css: true
+    }
+  },
+  weekday: {
+    cell: {
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      $$css: true
+    },
+    "default": {
+      height: "musaex-sahybl",
+      overflow: "musaex-1rea2x4",
+      overflowX: null,
+      overflowY: null,
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    }
+  },
+  month: {
+    cell: {
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      position: "musaex-1n2onr6",
+      $$css: true
+    },
+    leading: {
+      visibility: "musaex-lshs6z",
+      $$css: true
+    },
+    "default": {
+      position: "musaex-10l6tqk",
+      top: "musaex-13vifvy",
+      insetInlineStart: "musaex-1o0tod",
+      left: null,
+      right: null,
+      $$css: true
+    }
+  }
+};
+/**
+ * @description
+ * contribution calendar
+ * inspired by github
+ */
+var ContributionCalendar = function ContributionCalendar(_ref) {
+  var year = _ref.year;
+    _ref.gaps;
+    var _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource;
+  var theme$1 = hooks.useTheme();
+  var _useMemo = React.useMemo(function () {
+      var _to = relax.min([dayjs().subtract(1, "day"), dayjs("".concat(year, "-12-31"))], function (_value) {
+        return _value.valueOf();
+      });
+      var _from = _to.subtract(1, "year").add(1, "day");
+      return [_from, _to];
+    }, [year]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    from = _useMemo2[0],
+    to = _useMemo2[1];
+  var _useMemo3 = React.useMemo(function () {
+      return [from.startOf("week"), to.endOf("week")];
+    }, [from, to]),
+    _useMemo4 = _slicedToArray(_useMemo3, 2),
+    start = _useMemo4[0],
+    end = _useMemo4[1];
+  var columns = React.useMemo(function () {
+    return end.diff(start, "week") + 1;
+  }, [start, end]);
+  var months = React.useMemo(function () {
+    return Array.from({
+      length: 13
+    }).reduce(function (prev, _, monthAt) {
+      var _month = from.clone().add(monthAt, "month");
+      var _from = monthAt > 0 ? date.firstSundayInMonth(_month) : _month.startOf("month");
+      var _to = _from.clone().endOf("month");
+      prev.push({
+        start: Math.max(_from.diff(start, "week"), 0),
+        end: Math.min(_to.diff(start, "week") + 1, columns),
+        month: _from.format("MMM")
+      });
+      return prev;
+    }, []);
+  }, [from, start, columns]);
+  var heats = React.useMemo(function () {
+    return dataSource.reduce(function (prev, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        date = _ref3[0],
+        count = _ref3[1];
+      return prev.set(date, count);
+    }, new Map());
+  }, [dataSource]);
+  var styled = {
+    scrollable: stylex.default.props(styles.calendar.scrollable),
+    calendar: stylex.default.props(styles.calendar.variables({
+      color: theme$1.colors.primary
+    }), styles.calendar["default"]),
+    cell: stylex.default.props(styles.cell["default"]),
+    weekday: {
+      cell: stylex.default.props(styles.weekday.cell, theme.typography.body.small),
+      "default": stylex.default.props(styles.weekday["default"])
+    },
+    month: {
+      cell: stylex.default.props(styles.month.cell, theme.typography.body.small),
+      "default": stylex.default.props(styles.month["default"]),
+      leading: stylex.default.props(styles.month.cell, theme.typography.body.small, styles.month.leading)
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.scrollable.className,
+    style: styled.scrollable.style
+  }, /*#__PURE__*/React.createElement("table", {
+    className: styled.calendar.className,
+    style: styled.calendar.style
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    className: styled.month.leading.className,
+    style: styled.month.leading.style
+  }, "W/M"), months.map(function (_ref4, _key, _months) {
+    var start = _ref4.start,
+      end = _ref4.end,
+      month = _ref4.month;
+    var colSpan = end - start;
+    if (colSpan === 0) return null;
+    // render headers
+    // if col span is less than 2, skip render label
+    // ISSUE: if leading month has rendered, the trailing month will be rendered twice
+    var skip = colSpan < 2 || _months.length - 1 === _key && _months[0].end - _months[0].start >= 2;
+    return /*#__PURE__*/React.createElement("th", {
+      key: _key,
+      colSpan: colSpan,
+      className: styled.month.cell.className,
+      style: styled.month.cell.style
+    }, !skip && (/*#__PURE__*/React.createElement("div", {
+      className: styled.month["default"].className,
+      style: styled.month["default"].style
+    }, month)));
+  }))), /*#__PURE__*/React.createElement("tbody", null, Array.from({
+    length: 7
+  }).map(function (_, weekday) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: weekday
+    }, /*#__PURE__*/React.createElement("td", {
+      className: styled.weekday.cell.className,
+      style: styled.weekday.cell.style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styled.weekday["default"].className,
+      style: styled.weekday["default"].style
+    }, [1, 3, 5].includes(weekday) && (/*#__PURE__*/React.createElement("span", null, dayjs().day(weekday).format("ddd"))))), Array.from({
+      length: columns
+    }).map(function (_, column) {
+      var gap = column * 7 + weekday;
+      var _at = start.add(gap, "day");
+      if (column === 0 && !_at.isAfter(from)) {
+        return /*#__PURE__*/React.createElement("td", {
+          key: column
+        });
+      }
+      if (column === columns - 1 && _at.isAfter(to)) {
+        return /*#__PURE__*/React.createElement("td", {
+          key: column
+        });
+      }
+      var date = _at.format("YYYY-MM-DD");
+      var count = heats.get(date);
+      return /*#__PURE__*/React.createElement(tooltip.default, {
+        key: column,
+        title: "".concat(count, " contributions at ").concat(_at.format("YYYY-MM-DD"))
+      }, /*#__PURE__*/React.createElement("td", {
+        className: styled.cell.className,
+        style: styled.cell.style
+      }));
+    }));
+  }))));
+};
+
+exports.default = ContributionCalendar;

package/dist/components/calendar/contribution.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface Props {
+    year: number;
+    gaps?: number[];
+    dataSource?: [string, number][];
+}
+/**
+ * @description
+ * contribution calendar
+ * inspired by github
+ */
+declare const ContributionCalendar: ({ year, gaps, dataSource }: Props) => React.JSX.Element;
+export default ContributionCalendar;

package/dist/components/calendar/contribution.mjs

@@ -0,0 +1,249 @@
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import dayjs from 'dayjs';
+import React, { useMemo } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { typography } from '../theme/theme.mjs';
+import Tooltip from '../tooltip/tooltip.mjs';
+import { min } from '@aiszlab/relax';
+import { firstSundayInMonth } from '../../utils/date.mjs';
+
+var styles = {
+  calendar: {
+    variables: function variables(props) {
+      return [{
+        "--cell-size": "musaex-1erll0c",
+        "--cell-color": "musaex-1utc1yc",
+        $$css: true
+      }, {
+        "----cell-color": props.color != null ? props.color : "initial"
+      }];
+    },
+    "default": {
+      borderCollapse: "musaex-1vathgz",
+      borderSpacing: "musaex-g5hwcv",
+      $$css: true
+    },
+    scrollable: {
+      maxWidth: "musaex-193iq5w",
+      overflow: "musaex-ysyzu8",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    }
+  },
+  cell: {
+    "default": {
+      minWidth: "musaex-1q6qbx2",
+      minHeight: "musaex-189dakb",
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      borderRadius: "musaex-llun4g",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      cursor: "musaex-1ypdohk",
+      backgroundColor: "musaex-1204rnj",
+      $$css: true
+    }
+  },
+  weekday: {
+    cell: {
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      $$css: true
+    },
+    "default": {
+      height: "musaex-sahybl",
+      overflow: "musaex-1rea2x4",
+      overflowX: null,
+      overflowY: null,
+      display: "musaex-78zum5",
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    }
+  },
+  month: {
+    cell: {
+      padding: "musaex-1717udv",
+      paddingInline: null,
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: null,
+      paddingTop: null,
+      paddingBottom: null,
+      position: "musaex-1n2onr6",
+      $$css: true
+    },
+    leading: {
+      visibility: "musaex-lshs6z",
+      $$css: true
+    },
+    "default": {
+      position: "musaex-10l6tqk",
+      top: "musaex-13vifvy",
+      insetInlineStart: "musaex-1o0tod",
+      left: null,
+      right: null,
+      $$css: true
+    }
+  }
+};
+/**
+ * @description
+ * contribution calendar
+ * inspired by github
+ */
+var ContributionCalendar = function ContributionCalendar(_ref) {
+  var year = _ref.year;
+    _ref.gaps;
+    var _ref$dataSource = _ref.dataSource,
+    dataSource = _ref$dataSource === void 0 ? [] : _ref$dataSource;
+  var theme = useTheme();
+  var _useMemo = useMemo(function () {
+      var _to = min([dayjs().subtract(1, "day"), dayjs("".concat(year, "-12-31"))], function (_value) {
+        return _value.valueOf();
+      });
+      var _from = _to.subtract(1, "year").add(1, "day");
+      return [_from, _to];
+    }, [year]),
+    _useMemo2 = _slicedToArray(_useMemo, 2),
+    from = _useMemo2[0],
+    to = _useMemo2[1];
+  var _useMemo3 = useMemo(function () {
+      return [from.startOf("week"), to.endOf("week")];
+    }, [from, to]),
+    _useMemo4 = _slicedToArray(_useMemo3, 2),
+    start = _useMemo4[0],
+    end = _useMemo4[1];
+  var columns = useMemo(function () {
+    return end.diff(start, "week") + 1;
+  }, [start, end]);
+  var months = useMemo(function () {
+    return Array.from({
+      length: 13
+    }).reduce(function (prev, _, monthAt) {
+      var _month = from.clone().add(monthAt, "month");
+      var _from = monthAt > 0 ? firstSundayInMonth(_month) : _month.startOf("month");
+      var _to = _from.clone().endOf("month");
+      prev.push({
+        start: Math.max(_from.diff(start, "week"), 0),
+        end: Math.min(_to.diff(start, "week") + 1, columns),
+        month: _from.format("MMM")
+      });
+      return prev;
+    }, []);
+  }, [from, start, columns]);
+  var heats = useMemo(function () {
+    return dataSource.reduce(function (prev, _ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        date = _ref3[0],
+        count = _ref3[1];
+      return prev.set(date, count);
+    }, new Map());
+  }, [dataSource]);
+  var styled = {
+    scrollable: _stylex.props(styles.calendar.scrollable),
+    calendar: _stylex.props(styles.calendar.variables({
+      color: theme.colors.primary
+    }), styles.calendar["default"]),
+    cell: _stylex.props(styles.cell["default"]),
+    weekday: {
+      cell: _stylex.props(styles.weekday.cell, typography.body.small),
+      "default": _stylex.props(styles.weekday["default"])
+    },
+    month: {
+      cell: _stylex.props(styles.month.cell, typography.body.small),
+      "default": _stylex.props(styles.month["default"]),
+      leading: _stylex.props(styles.month.cell, typography.body.small, styles.month.leading)
+    }
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: styled.scrollable.className,
+    style: styled.scrollable.style
+  }, /*#__PURE__*/React.createElement("table", {
+    className: styled.calendar.className,
+    style: styled.calendar.style
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", {
+    className: styled.month.leading.className,
+    style: styled.month.leading.style
+  }, "W/M"), months.map(function (_ref4, _key, _months) {
+    var start = _ref4.start,
+      end = _ref4.end,
+      month = _ref4.month;
+    var colSpan = end - start;
+    if (colSpan === 0) return null;
+    // render headers
+    // if col span is less than 2, skip render label
+    // ISSUE: if leading month has rendered, the trailing month will be rendered twice
+    var skip = colSpan < 2 || _months.length - 1 === _key && _months[0].end - _months[0].start >= 2;
+    return /*#__PURE__*/React.createElement("th", {
+      key: _key,
+      colSpan: colSpan,
+      className: styled.month.cell.className,
+      style: styled.month.cell.style
+    }, !skip && (/*#__PURE__*/React.createElement("div", {
+      className: styled.month["default"].className,
+      style: styled.month["default"].style
+    }, month)));
+  }))), /*#__PURE__*/React.createElement("tbody", null, Array.from({
+    length: 7
+  }).map(function (_, weekday) {
+    return /*#__PURE__*/React.createElement("tr", {
+      key: weekday
+    }, /*#__PURE__*/React.createElement("td", {
+      className: styled.weekday.cell.className,
+      style: styled.weekday.cell.style
+    }, /*#__PURE__*/React.createElement("div", {
+      className: styled.weekday["default"].className,
+      style: styled.weekday["default"].style
+    }, [1, 3, 5].includes(weekday) && (/*#__PURE__*/React.createElement("span", null, dayjs().day(weekday).format("ddd"))))), Array.from({
+      length: columns
+    }).map(function (_, column) {
+      var gap = column * 7 + weekday;
+      var _at = start.add(gap, "day");
+      if (column === 0 && !_at.isAfter(from)) {
+        return /*#__PURE__*/React.createElement("td", {
+          key: column
+        });
+      }
+      if (column === columns - 1 && _at.isAfter(to)) {
+        return /*#__PURE__*/React.createElement("td", {
+          key: column
+        });
+      }
+      var date = _at.format("YYYY-MM-DD");
+      var count = heats.get(date);
+      return /*#__PURE__*/React.createElement(Tooltip, {
+        key: column,
+        title: "".concat(count, " contributions at ").concat(_at.format("YYYY-MM-DD"))
+      }, /*#__PURE__*/React.createElement("td", {
+        className: styled.cell.className,
+        style: styled.cell.style
+      }));
+    }));
+  }))));
+};
+
+export { ContributionCalendar as default };

package/dist/components/calendar/index.d.ts

@@ -1,2 +1,3 @@
 import Calendar from "./calendar";
-export { Calendar };
+import ContributionCalendar from "./contribution";
+export { Calendar, ContributionCalendar };