musae 0.3.14-beta.4 → 0.4.0

package/dist/components/breadcrumb/breadcrumb.cjs

@@ -38,7 +38,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       color: theme$1.colors["on-surface-variant"]
     })),
     navigations: {
-      className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"
+      className: "musaex-p8vts musaex-j8pfrn musaex-3ct3a4 musaex-78zum5 musaex-1a02dak"
     }
   };
   return /*#__PURE__*/React.createElement("nav", {

package/dist/components/breadcrumb/breadcrumb.mjs

@@ -36,7 +36,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       color: theme.colors["on-surface-variant"]
     })),
     navigations: {
-      className: "musaex-e8uvvx musaex-78zum5 musaex-1a02dak"
+      className: "musaex-p8vts musaex-j8pfrn musaex-3ct3a4 musaex-78zum5 musaex-1a02dak"
     }
   };
   return /*#__PURE__*/React.createElement("nav", {

package/dist/components/button/button.cjs

@@ -17,21 +17,36 @@ var color = require('@aiszlab/fuzzy/color');
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
   button: {
-    position: "musaex-1n2onr6",
-    overflow: "musaex-b3r6kr",
-    overflowX: null,
-    overflowY: null,
     display: "musaex-3nfvp2",
     alignItems: "musaex-6s0dn4",
     justifyContent: "musaex-l56j7k",
     gap: "musaex-1lsrmdg",
     rowGap: null,
     columnGap: null,
-    whiteSpace: "musaex-uxw1ft",
     transitionProperty: "musaex-fagghw",
     transitionDuration: "musaex-1d8287x",
     willChange: "musaex-19v51jg",
-    flexShrink: "musaex-2lah0s",
+    borderWidth: "musaex-1628nlo",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    backgroundColor: "musaex-jbqb8w",
+    overflow: "musaex-b3r6kr",
+    overflowX: null,
+    overflowY: null,
+    whiteSpace: "musaex-uxw1ft",
+    textOverflow: "musaex-lyipyv",
+    cursor: "musaex-1ypdohk",
+    fontFamily: "musaex-jb2p0i",
+    $$css: true
+  },
+  ripple: {
+    position: "musaex-1n2onr6",
     $$css: true
   },
   small: {
@@ -111,8 +126,7 @@ var styles = {
   },
   filled: function filled(props) {
     return [{
-      border: "musaex-1gs6z28",
-      borderWidth: null,
+      borderWidth: "musaex-1628nlo",
       borderInlineWidth: null,
       borderInlineStartWidth: null,
       borderLeftWidth: null,
@@ -121,27 +135,9 @@ var styles = {
       borderBlockWidth: null,
       borderTopWidth: null,
       borderBottomWidth: null,
-      borderStyle: null,
-      borderInlineStyle: null,
-      borderInlineStartStyle: null,
-      borderLeftStyle: null,
-      borderInlineEndStyle: null,
-      borderRightStyle: null,
-      borderBlockStyle: null,
-      borderTopStyle: null,
-      borderBottomStyle: null,
-      borderColor: null,
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
       backgroundColor: "musaex-q1mx2j",
       color: "musaex-19dipnz",
-      boxShadow: "musaex-1nadr2t",
+      ":hover_boxShadow": "musaex-1nadr2t",
       $$css: true
     }, {
       "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
@@ -178,22 +174,22 @@ var styles = {
       borderTopColor: null,
       borderBottomColor: null,
       color: "musaex-19dipnz",
-      backgroundColor: "musaex-rl4t6d",
+      ":hover_backgroundColor": "musaex-1vkaft9",
       $$css: true
     }, {
       "--borderColor": props.color != null ? props.color : "initial",
       "--color": props.color != null ? props.color : "initial",
-      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
+      "--b6ve2z": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
     }];
   },
   text: function text(props) {
     return [{
       color: "musaex-19dipnz",
-      backgroundColor: "musaex-rl4t6d",
+      ":hover_backgroundColor": "musaex-1vkaft9",
       $$css: true
     }, {
       "--color": props.color != null ? props.color : "initial",
-      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
+      "--b6ve2z": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
     }];
   },
   disabled: function disabled(props) {
@@ -257,7 +253,7 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     clear = _useButton.clear,
     ripples = _useButton.ripples;
   var styled = {
-    button: stylex.default.props(styles.button, theme.typography.label[size],
+    button: stylex.default.props(styles.button, ripple$1 && styles.ripple, theme.typography.label[size],
     // size
     styles[size],
     // variant
@@ -266,18 +262,18 @@ var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       color: theme$1.colors["on-".concat(color$1)]
     }), variant === "outlined" && styles.outlined({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, true)
     }), variant === "text" && styles.text({
       color: theme$1.colors[color$1],
-      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin)
+      hoveredBackgroundColor: color.hexToRgba(theme$1.colors.primary, tokens_stylex.OPACITY.thin, true)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium) : "transparent",
-      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker),
-      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.medium, true) : "transparent",
+      color: color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true),
+      outlineColor: variant === "outlined" ? color.hexToRgba(theme$1.colors["on-surface"], tokens_stylex.OPACITY.thicker, true) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/button/button.mjs

@@ -15,21 +15,36 @@ import { hexToRgba } from '@aiszlab/fuzzy/color';
 var _excluded = ["children", "className", "style", "color", "size", "variant", "shape", "disabled", "ripple", "type", "onClick", "prefix", "suffix"];
 var styles = {
   button: {
-    position: "musaex-1n2onr6",
-    overflow: "musaex-b3r6kr",
-    overflowX: null,
-    overflowY: null,
     display: "musaex-3nfvp2",
     alignItems: "musaex-6s0dn4",
     justifyContent: "musaex-l56j7k",
     gap: "musaex-1lsrmdg",
     rowGap: null,
     columnGap: null,
-    whiteSpace: "musaex-uxw1ft",
     transitionProperty: "musaex-fagghw",
     transitionDuration: "musaex-1d8287x",
     willChange: "musaex-19v51jg",
-    flexShrink: "musaex-2lah0s",
+    borderWidth: "musaex-1628nlo",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    backgroundColor: "musaex-jbqb8w",
+    overflow: "musaex-b3r6kr",
+    overflowX: null,
+    overflowY: null,
+    whiteSpace: "musaex-uxw1ft",
+    textOverflow: "musaex-lyipyv",
+    cursor: "musaex-1ypdohk",
+    fontFamily: "musaex-jb2p0i",
+    $$css: true
+  },
+  ripple: {
+    position: "musaex-1n2onr6",
     $$css: true
   },
   small: {
@@ -109,8 +124,7 @@ var styles = {
   },
   filled: function filled(props) {
     return [{
-      border: "musaex-1gs6z28",
-      borderWidth: null,
+      borderWidth: "musaex-1628nlo",
       borderInlineWidth: null,
       borderInlineStartWidth: null,
       borderLeftWidth: null,
@@ -119,27 +133,9 @@ var styles = {
       borderBlockWidth: null,
       borderTopWidth: null,
       borderBottomWidth: null,
-      borderStyle: null,
-      borderInlineStyle: null,
-      borderInlineStartStyle: null,
-      borderLeftStyle: null,
-      borderInlineEndStyle: null,
-      borderRightStyle: null,
-      borderBlockStyle: null,
-      borderTopStyle: null,
-      borderBottomStyle: null,
-      borderColor: null,
-      borderInlineColor: null,
-      borderInlineStartColor: null,
-      borderLeftColor: null,
-      borderInlineEndColor: null,
-      borderRightColor: null,
-      borderBlockColor: null,
-      borderTopColor: null,
-      borderBottomColor: null,
       backgroundColor: "musaex-q1mx2j",
       color: "musaex-19dipnz",
-      boxShadow: "musaex-1nadr2t",
+      ":hover_boxShadow": "musaex-1nadr2t",
       $$css: true
     }, {
       "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
@@ -176,22 +172,22 @@ var styles = {
       borderTopColor: null,
       borderBottomColor: null,
       color: "musaex-19dipnz",
-      backgroundColor: "musaex-rl4t6d",
+      ":hover_backgroundColor": "musaex-1vkaft9",
       $$css: true
     }, {
       "--borderColor": props.color != null ? props.color : "initial",
       "--color": props.color != null ? props.color : "initial",
-      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
+      "--b6ve2z": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
     }];
   },
   text: function text(props) {
     return [{
       color: "musaex-19dipnz",
-      backgroundColor: "musaex-rl4t6d",
+      ":hover_backgroundColor": "musaex-1vkaft9",
       $$css: true
     }, {
       "--color": props.color != null ? props.color : "initial",
-      "--1e2mv7m": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
+      "--b6ve2z": props.hoveredBackgroundColor != null ? props.hoveredBackgroundColor : "initial"
     }];
   },
   disabled: function disabled(props) {
@@ -255,7 +251,7 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clear = _useButton.clear,
     ripples = _useButton.ripples;
   var styled = {
-    button: _stylex.props(styles.button, typography.label[size],
+    button: _stylex.props(styles.button, ripple && styles.ripple, typography.label[size],
     // size
     styles[size],
     // variant
@@ -264,18 +260,18 @@ var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: theme.colors["on-".concat(color)]
     }), variant === "outlined" && styles.outlined({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, true)
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin)
+      hoveredBackgroundColor: hexToRgba(theme.colors.primary, OPACITY.thin, true)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium) : "transparent",
-      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker),
-      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker) : null
+      backgroundColor: variant === "filled" ? hexToRgba(theme.colors["on-surface"], OPACITY.medium, true) : "transparent",
+      color: hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true),
+      outlineColor: variant === "outlined" ? hexToRgba(theme.colors["on-surface"], OPACITY.thicker, true) : null
     }))
   };
   return /*#__PURE__*/React.createElement("button", _objectSpread({

package/dist/components/calendar/calendar.cjs

@@ -70,6 +70,9 @@ var Calendar = function Calendar(_ref) {
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"
+    },
+    body: {
+      className: "musaex-1mwwwfo"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -101,7 +104,10 @@ var Calendar = function Calendar(_ref) {
     prefix: /*#__PURE__*/React.createElement(keyboardDoubleArrowRight.default, null),
     onClick: toNextYear,
     shape: "circular"
-  })), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headCells)), /*#__PURE__*/React.createElement("tbody", null, dateCells)));
+  })), /*#__PURE__*/React.createElement("table", {
+    className: styled.body.className,
+    style: styled.body.style
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headCells)), /*#__PURE__*/React.createElement("tbody", null, dateCells)));
 };
 
 exports.default = Calendar;

package/dist/components/calendar/calendar.mjs

@@ -68,6 +68,9 @@ var Calendar = function Calendar(_ref) {
     })),
     heading: {
       className: "musaex-98rzlu musaex-78zum5 musaex-l56j7k"
+    },
+    body: {
+      className: "musaex-1mwwwfo"
     }
   };
   return /*#__PURE__*/React.createElement("div", {
@@ -99,7 +102,10 @@ var Calendar = function Calendar(_ref) {
     prefix: /*#__PURE__*/React.createElement(KeyboardDoubleArrowRight, null),
     onClick: toNextYear,
     shape: "circular"
-  })), /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headCells)), /*#__PURE__*/React.createElement("tbody", null, dateCells)));
+  })), /*#__PURE__*/React.createElement("table", {
+    className: styled.body.className,
+    style: styled.body.style
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, headCells)), /*#__PURE__*/React.createElement("tbody", null, dateCells)));
 };
 
 export { Calendar as default };

package/dist/components/calendar/contribution.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var dayjs = require('dayjs');
 var React = require('react');
@@ -9,7 +10,10 @@ var theme = require('../theme/theme.cjs');
 var tooltip = require('../tooltip/tooltip.cjs');
 var relax = require('@aiszlab/relax');
 var date = require('../../utils/date.cjs');
+var color = require('@aiszlab/fuzzy/color');
+var useLocale = require('../../locale/use-locale.cjs');
 
+var FORMAT = "YYYY-MM-DD";
 var styles = {
   calendar: {
     variables: function variables(props) {
@@ -27,7 +31,7 @@ var styles = {
       $$css: true
     },
     scrollable: {
-      maxWidth: "musaex-193iq5w",
+      maxWidth: "musaex-1t8xbu",
       overflow: "musaex-ysyzu8",
       overflowX: null,
       overflowY: null,
@@ -110,6 +114,45 @@ var styles = {
       right: null,
       $$css: true
     }
+  },
+  legend: {
+    "default": {
+      paddingBlock: "musaex-1i37kmv",
+      paddingTop: null,
+      paddingBottom: null,
+      paddingInline: "musaex-1mavw9y",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      display: "musaex-78zum5",
+      justifyContent: "musaex-13a6bvl",
+      $$css: true
+    }
+  },
+  levels: {
+    "default": {
+      display: "musaex-78zum5",
+      gap: "musaex-90xh4w",
+      rowGap: null,
+      columnGap: null,
+      alignItems: "musaex-6s0dn4",
+      $$css: true
+    },
+    level: {
+      width: "musaex-1mg4jku",
+      height: "musaex-sahybl",
+      borderRadius: "musaex-llun4g",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }
   }
 };
 /**
@@ -118,13 +161,19 @@ var styles = {
  * 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 year = _ref.year,
+    _ref$contributions = _ref.contributions,
+    contributions = _ref$contributions === void 0 ? [] : _ref$contributions,
+    _ref$levels = _ref.levels,
+    levels = _ref$levels === void 0 ? 5 : _ref$levels,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 5 : _ref$gap;
   var theme$1 = hooks.useTheme();
+  var _useLocale = useLocale.useLocale("contribution-calendar"),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _useMemo = React.useMemo(function () {
-      var _to = relax.min([dayjs().subtract(1, "day"), dayjs("".concat(year, "-12-31"))], function (_value) {
+      var _to = relax.min([dayjs().subtract(1, "days").startOf("days"), dayjs("".concat(year, "-12-31"))], function (_value) {
         return _value.valueOf();
       });
       var _from = _to.subtract(1, "year").add(1, "day");
@@ -157,19 +206,18 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       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);
+  var _contributions = React.useMemo(function () {
+    return contributions.reduce(function (prev, _ref2) {
+      var contributedAt = _ref2.contributedAt,
+        count = _ref2.count;
+      return prev.set(contributedAt.format(FORMAT), count);
     }, new Map());
-  }, [dataSource]);
+  }, [contributions]);
   var styled = {
-    scrollable: stylex.default.props(styles.calendar.scrollable),
-    calendar: stylex.default.props(styles.calendar.variables({
+    scrollable: stylex.default.props(styles.calendar.variables({
       color: theme$1.colors.primary
-    }), styles.calendar["default"]),
+    }), styles.calendar.scrollable),
+    calendar: stylex.default.props(styles.calendar["default"]),
     cell: stylex.default.props(styles.cell["default"]),
     weekday: {
       cell: stylex.default.props(styles.weekday.cell, theme.typography.body.small),
@@ -179,8 +227,27 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
       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)
-    }
+    },
+    legend: stylex.default.props(styles.legend["default"], theme.typography.label.medium),
+    levels: stylex.default.props(styles.levels["default"]),
+    level: stylex.default.props(styles.levels.level)
   };
+  // how to get different levels
+  // convert primary color into hsla color
+  // use `s` change to get different levels
+  var _hexToHsla = color.hexToHsla(theme$1.colors.primary),
+    h = _hexToHsla[0];
+  var _levels = Array.from({
+    length: levels - 1
+  }).map(function (_, index) {
+    return gap * index;
+  });
+  var heatStep = Math.floor(100 / Math.max(_levels.length, 1));
+  var _heats = Array.from({
+    length: levels
+  }).map(function (_, index) {
+    return "hsl(".concat([h, index * heatStep + "%", "80%"].join(","), ")");
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: styled.scrollable.className,
     style: styled.scrollable.style
@@ -190,10 +257,10 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
   }, /*#__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;
+  }, "W/M"), months.map(function (_ref3, _key, _months) {
+    var start = _ref3.start,
+      end = _ref3.end,
+      month = _ref3.month;
     var colSpan = end - start;
     if (colSpan === 0) return null;
     // render headers
@@ -223,9 +290,10 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
     }, [1, 3, 5].includes(weekday) && (/*#__PURE__*/React.createElement("span", null, dayjs().day(weekday).format("ddd"))))), Array.from({
       length: columns
     }).map(function (_, column) {
+      var _contributions$get;
       var gap = column * 7 + weekday;
       var _at = start.add(gap, "day");
-      if (column === 0 && !_at.isAfter(from)) {
+      if (column === 0 && _at.isBefore(from)) {
         return /*#__PURE__*/React.createElement("td", {
           key: column
         });
@@ -235,17 +303,34 @@ var ContributionCalendar = function ContributionCalendar(_ref) {
           key: column
         });
       }
-      var date = _at.format("YYYY-MM-DD");
-      var count = heats.get(date);
+      var date = _at.format(FORMAT);
+      var count = (_contributions$get = _contributions.get(date)) !== null && _contributions$get !== void 0 ? _contributions$get : 0;
+      var levelAt = relax.clamp(Math.ceil(count / gap), 0, levels);
       return /*#__PURE__*/React.createElement(tooltip.default, {
         key: column,
-        title: "".concat(count, " contributions at ").concat(_at.format("YYYY-MM-DD"))
+        title: relax.toFunction(locale.contribution)(count, date)
       }, /*#__PURE__*/React.createElement("td", {
         className: styled.cell.className,
-        style: styled.cell.style
+        style: _objectSpread(_objectSpread({}, styled.cell.style), {}, {
+          backgroundColor: _heats[levelAt]
+        })
       }));
     }));
-  }))));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: styled.legend.className,
+    style: styled.legend.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styled.levels.className,
+    style: styled.levels.style
+  }, /*#__PURE__*/React.createElement("span", null, locale.less), _heats.map(function (color) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: styled.level.className,
+      key: color,
+      style: _objectSpread(_objectSpread({}, styled.level.style), {}, {
+        backgroundColor: color
+      })
+    });
+  }), /*#__PURE__*/React.createElement("span", null, locale.more))));
 };
 
 exports.default = ContributionCalendar;

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

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