musae 0.3.2 → 0.3.5

package/dist/components/avatar/context.d.ts

@@ -1,4 +1,4 @@
-import { type ContextValue } from "./types";
+import type { ContextValue } from "musae/types/avatar";
 /**
  * @description
  * context

package/dist/components/avatar/group.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type AvatarGroupProps } from "./types";
+import type { AvatarGroupProps } from "musae/types/avatar";
 declare const Group: ({ children: _children, shape, size, max, }: AvatarGroupProps) => React.JSX.Element;
 export default Group;

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

@@ -1,3 +1,3 @@
-import type { TypedAvatar } from "./types";
+import type { TypedAvatar } from "musae/types/avatar";
 declare const Avatar: TypedAvatar;
 export { Avatar };

package/dist/components/badge/badge.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { BadgeProps } from "./types";
+import type { BadgeProps } from "musae/types/badge";
 declare const Badge: ({ className, style, children, content, invisible, placement, }: BadgeProps) => React.JSX.Element;
 export default Badge;

package/dist/components/bench/bench.cjs

@@ -138,24 +138,22 @@ var Bench = function Bench(_ref) {
   }))), /*#__PURE__*/React.createElement("span", {
     className: styled.title.className,
     style: styled.title.style
-  }, title), /*#__PURE__*/React.createElement(menu.default, _objectSpread({
+  }, title), /*#__PURE__*/React.createElement(menu.default, {
     items: topMenuItems,
     onClick: navigate,
     mode: "horizontal",
     className: styled.headerNavigation.className,
-    style: styled.headerNavigation.style
-  }, !!selectedKeys[0] && {
-    selectedKeys: [selectedKeys[0]]
-  })), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
+    style: styled.headerNavigation.style,
+    selectedKeys: selectedKeys[0]
+  }), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
     className: styled.sider.className,
     style: styled.sider.style
-  }, /*#__PURE__*/React.createElement(menu.default, _objectSpread({
+  }, /*#__PURE__*/React.createElement(menu.default, {
     items: sideMenuItems,
     onClick: navigate,
-    defaultExpandedKeys: defaultExpandedKeys
-  }, !!selectedKeys[1] && {
-    selectedKeys: [selectedKeys[1]]
-  })))), /*#__PURE__*/React.createElement(Main, {
+    defaultExpandedKeys: defaultExpandedKeys,
+    selectedKeys: selectedKeys[1]
+  }))), /*#__PURE__*/React.createElement(Main, {
     className: relax.clsx(mainClassName, styled.main.className),
     style: styled.main.style
   }, children));

package/dist/components/bench/bench.mjs

@@ -136,24 +136,22 @@ var Bench = function Bench(_ref) {
   }))), /*#__PURE__*/React.createElement("span", {
     className: styled.title.className,
     style: styled.title.style
-  }, title), /*#__PURE__*/React.createElement(Menu, _objectSpread({
+  }, title), /*#__PURE__*/React.createElement(Menu, {
     items: topMenuItems,
     onClick: navigate,
     mode: "horizontal",
     className: styled.headerNavigation.className,
-    style: styled.headerNavigation.style
-  }, !!selectedKeys[0] && {
-    selectedKeys: [selectedKeys[0]]
-  })), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
+    style: styled.headerNavigation.style,
+    selectedKeys: selectedKeys[0]
+  }), trailing), sideMenuItems.length > 0 && (/*#__PURE__*/React.createElement(Sider, {
     className: styled.sider.className,
     style: styled.sider.style
-  }, /*#__PURE__*/React.createElement(Menu, _objectSpread({
+  }, /*#__PURE__*/React.createElement(Menu, {
     items: sideMenuItems,
     onClick: navigate,
-    defaultExpandedKeys: defaultExpandedKeys
-  }, !!selectedKeys[1] && {
-    selectedKeys: [selectedKeys[1]]
-  })))), /*#__PURE__*/React.createElement(Main, {
+    defaultExpandedKeys: defaultExpandedKeys,
+    selectedKeys: selectedKeys[1]
+  }))), /*#__PURE__*/React.createElement(Main, {
     className: clsx(mainClassName, styled.main.className),
     style: styled.main.style
   }, children));

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type { BreadcrumbProps } from "./types";
+import type { BreadcrumbProps } from "musae/types/breadcrumb";
 declare const Breadcrumb: ({ items, className, separator, style }: BreadcrumbProps) => React.JSX.Element | null;
 export default Breadcrumb;

package/dist/components/breadcrumb/item.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import { type BreadcrumbItemProps } from "./types";
+import type { BreadcrumbItemProps } from "musae/types/breadcrumb";
 declare const Item: ({ href, label, max, separator }: BreadcrumbItemProps) => React.JSX.Element;
 export default Item;

package/dist/components/button/button.cjs

@@ -6,14 +6,15 @@ var React = require('react');
 var className = require('../../utils/class-name.cjs');
 var relax = require('@aiszlab/relax');
 var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var tokens_stylex = require('../theme/tokens.stylex.cjs');
 var hooks = require('../theme/hooks.cjs');
 var hooks$1 = require('./hooks.cjs');
 var ripple = require('../ripple/ripple.cjs');
 var theme = require('../theme/theme.cjs');
 var colors = require('../../utils/colors.cjs');
-var layer = require('../../utils/layer.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: layer.layer(theme$1.colors[colors.ColorToken.Primary], "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: layer.layer(theme$1.colors[colors.ColorToken.Primary], "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" ? layer.layer(theme$1.colors[colors.ColorToken.OnSurface], "medium") : "transparent",
-      color: layer.layer(theme$1.colors[colors.ColorToken.OnSurface], "thicker"),
-      outlineColor: variant === "outlined" ? layer.layer(theme$1.colors[colors.ColorToken.OnSurface], "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.d.ts

@@ -1,4 +1,4 @@
-import type { ButtonProps } from "./types";
+import type { ButtonProps } from "musae/types/button";
 import React from "react";
 /**
  * @author murukal

package/dist/components/button/button.mjs

@@ -4,14 +4,15 @@ import React, { forwardRef } from 'react';
 import { ButtonClassToken } from '../../utils/class-name.mjs';
 import { clsx } from '@aiszlab/relax';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
+import { OPACITY } from '../theme/tokens.stylex.mjs';
 import { useTheme } from '../theme/hooks.mjs';
 import { useButton } from './hooks.mjs';
 import Ripple from '../ripple/ripple.mjs';
 import { typography } from '../theme/theme.mjs';
 import { ColorToken } from '../../utils/colors.mjs';
-import { layer } from '../../utils/layer.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: layer(theme.colors[ColorToken.Primary], "thin")
+      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
     }), variant === "text" && styles.text({
       color: theme.colors[color],
-      hoveredBackgroundColor: layer(theme.colors[ColorToken.Primary], "thin")
+      hoveredBackgroundColor: hexToRgba(theme.colors[ColorToken.Primary], OPACITY.thin)
     }),
     // shape
     styles[shape],
     // disabled
     disabled && styles.disabled({
-      backgroundColor: variant === "filled" ? layer(theme.colors[ColorToken.OnSurface], "medium") : "transparent",
-      color: layer(theme.colors[ColorToken.OnSurface], "thicker"),
-      outlineColor: variant === "outlined" ? layer(theme.colors[ColorToken.OnSurface], "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/button/hooks.d.ts

@@ -1,11 +1,11 @@
 import { type MouseEvent } from "react";
-import type { ButtonProps } from "./types";
+import type { ButtonProps } from "musae/types/button";
 /**
  * @description
  * hooks for button component
  */
 export declare const useButton: (props: Pick<ButtonProps, "onClick">) => {
-    ripples: import("../ripple/types").Ripple[];
+    ripples: import("../../types/ripple").Ripple[];
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     clear: (key: import("react").Key) => void;
 };

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

@@ -1,4 +1,4 @@
 import React from "react";
-import type { CalendarProps } from "./types";
+import type { CalendarProps } from "musae/types/calendar";
 declare const Calendar: ({ className, style, value, onClick: _onClick, focusedAt: _focusedAt, }: CalendarProps) => React.JSX.Element;
 export default Calendar;

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;