musae 0.2.26 → 0.3.0

package/dist/components/collapse/collapse.cjs

@@ -0,0 +1,102 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var item = require('./item.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var hooks = require('./hooks.cjs');
+var context = require('./context.cjs');
+var hooks$1 = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+
+var styles = {
+  collapse: function collapse(props) {
+    return [{
+      borderWidth: "musaex-bupo1m",
+      borderInlineWidth: null,
+      borderInlineStartWidth: null,
+      borderLeftWidth: null,
+      borderInlineEndWidth: null,
+      borderRightWidth: null,
+      borderBlockWidth: null,
+      borderTopWidth: null,
+      borderBottomWidth: null,
+      borderStyle: "musaex-1y0btm7",
+      borderInlineStyle: null,
+      borderInlineStartStyle: null,
+      borderLeftStyle: null,
+      borderInlineEndStyle: null,
+      borderRightStyle: null,
+      borderBlockStyle: null,
+      borderTopStyle: null,
+      borderBottomStyle: null,
+      borderColor: "musaex-eqt46j",
+      borderInlineColor: null,
+      borderInlineStartColor: null,
+      borderLeftColor: null,
+      borderInlineEndColor: null,
+      borderRightColor: null,
+      borderBlockColor: null,
+      borderTopColor: null,
+      borderBottomColor: null,
+      borderRadius: "musaex-qwu505",
+      borderStartStartRadius: null,
+      borderStartEndRadius: null,
+      borderEndStartRadius: null,
+      borderEndEndRadius: null,
+      borderTopLeftRadius: null,
+      borderTopRightRadius: null,
+      borderBottomLeftRadius: null,
+      borderBottomRightRadius: null,
+      $$css: true
+    }, {
+      "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+    }];
+  }
+};
+var Collapse = function Collapse(_ref) {
+  var items = _ref.items,
+    className$1 = _ref.className,
+    defaultActiveKey = _ref.defaultActiveKey,
+    activeKey = _ref.activeKey,
+    onChange = _ref.onChange,
+    style = _ref.style,
+    _ref$accordion = _ref.accordion,
+    accordion = _ref$accordion === void 0 ? false : _ref$accordion;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Collapse);
+  var _useActiveKeys = hooks.useActiveKeys({
+      defaultActiveKey: defaultActiveKey,
+      activeKey: activeKey,
+      onChange: onChange,
+      accordion: accordion
+    }),
+    _useActiveKeys2 = _slicedToArray(_useActiveKeys, 2),
+    activeKeys = _useActiveKeys2[0],
+    toggle = _useActiveKeys2[1];
+  var theme = hooks$1.useTheme();
+  // no need to render when items is empty
+  if (items.length === 0) return null;
+  var styled = stylex.default.props(styles.collapse({
+    outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+  }));
+  return /*#__PURE__*/React.createElement(context.Context.Provider, {
+    value: {
+      activeKeys: activeKeys,
+      toggle: toggle
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.CollapseClassToken.Collapse], className$1, styled.className),
+    style: _objectSpread(_objectSpread({}, styled.style), style)
+  }, items.map(function (item$1) {
+    return /*#__PURE__*/React.createElement(item.default, _objectSpread(_objectSpread({}, item$1), {}, {
+      value: item$1.key
+    }));
+  })));
+};
+
+exports.default = Collapse;

package/dist/components/collapse/{collapse.js → collapse.mjs}

@@ -1,16 +1,16 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { CollapseClassToken } from '../../utils/class-name.js';
-import CollapseItem from './item.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CollapseClassToken } from '../../utils/class-name.mjs';
+import CollapseItem from './item.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { clsx } from '@aiszlab/relax';
-import { useActiveKeys } from './hooks.js';
-import { Context } from './context.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
+import { useActiveKeys } from './hooks.mjs';
+import { Context } from './context.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
 
 var styles = {
   collapse: function collapse(props) {
@@ -96,6 +96,5 @@ var Collapse = function Collapse(_ref) {
     }));
   })));
 };
-var Collapse$1 = Collapse;
 
-export { Collapse$1 as default };
+export { Collapse as default };

package/dist/components/collapse/context.cjs

@@ -0,0 +1,12 @@
+var React = require('react');
+
+/**
+ * @description
+ * `Collapse` Context
+ */
+var Context = /*#__PURE__*/React.createContext({
+  activeKeys: new Set(),
+  toggle: function toggle() {}
+});
+
+exports.Context = Context;

package/dist/components/collapse/hooks.cjs

@@ -0,0 +1,51 @@
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var relax = require('@aiszlab/relax');
+var React = require('react');
+
+/**
+ * @description
+ * `Collapse` active key hook
+ */
+var useActiveKeys = function useActiveKeys(_ref) {
+  var defaultActiveKey = _ref.defaultActiveKey,
+    _activeKey = _ref.activeKey,
+    _onChange = _ref.onChange,
+    accordion = _ref.accordion;
+  var _useControlledState = relax.useControlledState(_activeKey, {
+      defaultState: defaultActiveKey
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    _activeKeys = _useControlledState2[0],
+    _setActiveKeys = _useControlledState2[1];
+  var activeKeys = React.useMemo(function () {
+    var keys = relax.exclude(relax.toArray(_activeKeys), [void 0]);
+    if (accordion) {
+      return new Set(keys.slice(0, 1));
+    }
+    return new Set(keys);
+  }, [_activeKeys, accordion]);
+  var toggle = relax.useEvent(function (key) {
+    var expandedKeys = new Set(activeKeys);
+    var isExpanded = expandedKeys.has(key);
+    // `accordion` mode, just toggle `key`
+    // otherwise, normally toggle `key`
+    if (accordion) {
+      expandedKeys.clear();
+      if (!isExpanded) {
+        expandedKeys.add(key);
+      }
+    } else {
+      if (isExpanded) {
+        expandedKeys["delete"](key);
+      } else {
+        expandedKeys.add(key);
+      }
+    }
+    var _expandedKeys = Array.from(expandedKeys);
+    _setActiveKeys(_expandedKeys);
+    _onChange === null || _onChange === void 0 || _onChange(_expandedKeys);
+  });
+  return [activeKeys, toggle];
+};
+
+exports.useActiveKeys = useActiveKeys;

package/dist/components/collapse/item.cjs

@@ -0,0 +1,170 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var className = require('../../utils/class-name.cjs');
+var stylex = require('../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.cjs');
+var relax = require('@aiszlab/relax');
+var framerMotion = require('framer-motion');
+var context = require('./context.cjs');
+var useExpandable = require('../../hooks/use-expandable.cjs');
+var hooks = require('../theme/hooks.cjs');
+var colors = require('../../utils/colors.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var keyboardArrowRight = require('../icon/icons/hardware/keyboard-arrow-right.cjs');
+
+var styles = {
+  item: {
+    "default": function _default(props) {
+      return [{
+        borderBottomWidth: "musaex-cql0v9",
+        borderBottomStyle: "musaex-1q0q8m5",
+        borderBottomColor: "musaex-43481e",
+        ":last-of-type_borderBottomWidth": "musaex-xt7lk8",
+        $$css: true
+      }, {
+        "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    }
+  },
+  header: {
+    "default": {
+      paddingInline: "musaex-y0sash",
+      paddingStart: null,
+      paddingLeft: null,
+      paddingEnd: null,
+      paddingRight: null,
+      paddingBlock: "musaex-qhkzqn",
+      paddingTop: null,
+      paddingBottom: null,
+      display: "musaex-78zum5",
+      flexDirection: "musaex-1q0g3np",
+      alignItems: "musaex-6s0dn4",
+      gap: "musaex-1lsrmdg",
+      rowGap: null,
+      columnGap: null,
+      cursor: "musaex-1ypdohk",
+      $$css: true
+    }
+  },
+  panel: {
+    "default": {
+      height: "musaex-t7dq6l",
+      $$css: true
+    },
+    hidden: {
+      display: "musaex-1s85apg",
+      $$css: true
+    }
+  },
+  content: {
+    "default": function _default(props) {
+      return [{
+        borderTopWidth: "musaex-1el86qz",
+        borderTopStyle: "musaex-13fuv20",
+        borderTopColor: "musaex-is9nib",
+        padding: "musaex-c1b1yc",
+        paddingInline: null,
+        paddingStart: null,
+        paddingLeft: null,
+        paddingEnd: null,
+        paddingRight: null,
+        paddingBlock: null,
+        paddingTop: null,
+        paddingBottom: null,
+        $$css: true
+      }, {
+        "--borderTopColor": props.outlineColor != null ? props.outlineColor : "initial"
+      }];
+    }
+  },
+  collapser: {
+    "default": {
+      willChange: "musaex-1so62im",
+      transitionProperty: "musaex-11xpdln",
+      transitionDuration: "musaex-13dflua",
+      $$css: true
+    },
+    expanded: {
+      transform: "musaex-1iffjtl",
+      $$css: true
+    }
+  }
+};
+var CollapseItem = function CollapseItem(_ref) {
+  var children = _ref.children,
+    label = _ref.label,
+    value = _ref.value;
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Collapse);
+  var _useContext = React.useContext(context.Context),
+    activeKeys = _useContext.activeKeys,
+    toggle = _useContext.toggle;
+  var isExpanded = activeKeys.has(value);
+  var _useAnimate = framerMotion.useAnimate(),
+    _useAnimate2 = _slicedToArray(_useAnimate, 2),
+    collapser = _useAnimate2[0],
+    animate = _useAnimate2[1];
+  var theme = hooks.useTheme();
+  var _useExpandable = useExpandable.useExpandable(),
+    expand = _useExpandable.expand,
+    collapse = _useExpandable.collapse;
+  relax.useUpdateEffect(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          if (!isExpanded) {
+            _context.next = 4;
+            break;
+          }
+          _context.next = 3;
+          return expand([collapser, animate]);
+        case 3:
+          return _context.abrupt("return");
+        case 4:
+          _context.next = 6;
+          return collapse([collapser, animate]);
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })), [isExpanded]);
+  var styled = {
+    item: stylex.default.props(styles.item["default"]({
+      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+    })),
+    header: stylex.default.props(styles.header["default"]),
+    panel: stylex.default.props(styles.panel["default"], !isExpanded && styles.panel.hidden),
+    content: stylex.default.props(styles.content["default"]({
+      outlineColor: theme.colors[colors.ColorToken.OutlineVariant]
+    })),
+    collapser: stylex.default.props(styles.collapser["default"], isExpanded && styles.collapser.expanded)
+  };
+  var onClick = relax.useEvent(function () {
+    toggle(value);
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.CollapseClassToken.Item], _defineProperty({}, classNames[className.CollapseClassToken.ItemActive], isExpanded), styled.item.className),
+    style: styled.item.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.CollapseClassToken.Header], styled.header.className),
+    style: styled.header.style,
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(keyboardArrowRight.default, {
+    className: relax.clsx(classNames[className.CollapseClassToken.Collapser], styled.collapser.className),
+    style: styled.collapser.style
+  }), label), /*#__PURE__*/React.createElement("div", {
+    ref: collapser,
+    className: relax.clsx(classNames[className.CollapseClassToken.Panel], _defineProperty({}, classNames[className.CollapseClassToken.PanelActive], isExpanded), styled.panel.className),
+    style: styled.panel.style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.CollapseClassToken.Content], styled.content.className),
+    style: styled.content.style
+  }, children)));
+};
+
+exports.default = CollapseItem;

package/dist/components/collapse/{item.js → item.mjs}

@@ -3,17 +3,17 @@ import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useContext } from 'react';
-import { useClassNames } from '../../hooks/use-class-names.js';
-import { CollapseClassToken } from '../../utils/class-name.js';
-import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { CollapseClassToken } from '../../utils/class-name.mjs';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useUpdateEffect, useEvent, clsx } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
-import { Context } from './context.js';
-import { useExpandable } from '../../hooks/use-expandable.js';
-import { useTheme } from '../theme/hooks.js';
-import { ColorToken } from '../../utils/colors.js';
-import { ComponentToken } from '../../utils/component-token.js';
-import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
+import { Context } from './context.mjs';
+import { useExpandable } from '../../hooks/use-expandable.mjs';
+import { useTheme } from '../theme/hooks.mjs';
+import { ColorToken } from '../../utils/colors.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.mjs';
 
 var styles = {
   item: {

package/dist/components/collapse/types.d.ts

@@ -1,5 +1,5 @@
 import type { Key, ReactNode } from "react";
-import type { ComponentProps } from "../../types/element";
+import type { ComponentProps } from "musae/types/element";
 export type Value = Key | Key[];
 /**
  * @description

package/dist/components/config/context.cjs

@@ -0,0 +1,11 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var className = require('../../utils/class-name.cjs');
+
+var Context = /*#__PURE__*/React.createContext({
+  notifier: null,
+  classNames: className.DEFAULT_CLASS_NAMES
+});
+
+exports.default = Context;

package/dist/components/config/{context.js → context.mjs}

@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import { DEFAULT_CLASS_NAMES } from '../../utils/class-name.js';
+import { DEFAULT_CLASS_NAMES } from '../../utils/class-name.mjs';
 
 var Context = /*#__PURE__*/createContext({
   notifier: null,

package/dist/components/config/hooks.cjs

@@ -0,0 +1,12 @@
+var React = require('react');
+var context = require('./context.cjs');
+
+/**
+ * @description
+ * configuration
+ */
+var useConfiguration = function useConfiguration() {
+  return React.useContext(context.default);
+};
+
+exports.useConfiguration = useConfiguration;

package/dist/components/config/{hooks.js → hooks.mjs}

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import Context from './context.js';
+import Context from './context.mjs';
 
 /**
  * @description

package/dist/components/config/provider.cjs

@@ -0,0 +1,35 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('./context.cjs');
+var holder = require('../notification/holder.cjs');
+var className = require('../../utils/class-name.cjs');
+var context$1 = require('../../locale/context.cjs');
+var zh_CN = require('../../locale/locales/zh_CN.cjs');
+var deepmerge = require('deepmerge');
+
+var ConfigProvider = function ConfigProvider(_ref) {
+  var children = _ref.children,
+    prefix = _ref.prefix,
+    _locale = _ref.locale;
+  var notifierRef = React.useRef(null);
+  var classNames = React.useMemo(function () {
+    if (!prefix) return className.DEFAULT_CLASS_NAMES;
+    return className.addPrefix(className.CLASS_NAMES, prefix);
+  }, [prefix]);
+  var locale = React.useMemo(function () {
+    return deepmerge(zh_CN.default, _locale !== null && _locale !== void 0 ? _locale : {});
+  }, [_locale]);
+  return /*#__PURE__*/React.createElement(context.default.Provider, {
+    value: {
+      notifier: notifierRef,
+      classNames: classNames
+    }
+  }, /*#__PURE__*/React.createElement(context$1.LocaleContext.Provider, {
+    value: locale
+  }, children, /*#__PURE__*/React.createElement(holder.default, {
+    ref: notifierRef
+  })));
+};
+
+exports.default = ConfigProvider;

package/dist/components/config/{provider.js → provider.mjs}

@@ -1,9 +1,9 @@
 import React, { useRef, useMemo } from 'react';
-import Context from './context.js';
-import Holder from '../notification/holder.js';
-import { DEFAULT_CLASS_NAMES, addPrefix, CLASS_NAMES } from '../../utils/class-name.js';
-import { LocaleContext } from '../../locale/context.js';
-import DEFAULT_LOCALE from '../../locale/locales/zh_CN.js';
+import Context from './context.mjs';
+import Holder from '../notification/holder.mjs';
+import { DEFAULT_CLASS_NAMES, addPrefix, CLASS_NAMES } from '../../utils/class-name.mjs';
+import { LocaleContext } from '../../locale/context.mjs';
+import zh_CN from '../../locale/locales/zh_CN.mjs';
 import deepmerge from 'deepmerge';
 
 var ConfigProvider = function ConfigProvider(_ref) {
@@ -16,7 +16,7 @@ var ConfigProvider = function ConfigProvider(_ref) {
     return addPrefix(CLASS_NAMES, prefix);
   }, [prefix]);
   var locale = useMemo(function () {
-    return deepmerge(DEFAULT_LOCALE, _locale !== null && _locale !== void 0 ? _locale : {});
+    return deepmerge(zh_CN, _locale !== null && _locale !== void 0 ? _locale : {});
   }, [_locale]);
   return /*#__PURE__*/React.createElement(Context.Provider, {
     value: {
@@ -29,6 +29,5 @@ var ConfigProvider = function ConfigProvider(_ref) {
     ref: notifierRef
   })));
 };
-var ConfigProvider$1 = ConfigProvider;
 
-export { ConfigProvider$1 as default };
+export { ConfigProvider as default };

package/dist/components/config/types.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode, RefObject } from "react";
 import type { CLASS_NAMES } from "../../utils/class-name";
 import type { HolderRef } from "../notification/types";
-import type { Locale } from "../../locale";
+import type { Locale } from "musae/types/locale";
 export type ClassNames = typeof CLASS_NAMES;
 /**
  * @description

package/dist/components/countdown/countdown.cjs

@@ -0,0 +1,85 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
+var button = require('../button/button.cjs');
+var rxjs = require('rxjs');
+var relax = require('@aiszlab/relax');
+
+var Countdown = function Countdown(_ref) {
+  var _ref$count = _ref.count,
+    count = _ref$count === void 0 ? 60 : _ref$count,
+    children = _ref.children,
+    _ref$interval = _ref.interval,
+    _interval = _ref$interval === void 0 ? 1000 : _ref$interval,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? "filled" : _ref$variant,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? "primary" : _ref$color,
+    _ref$shape = _ref.shape,
+    shape = _ref$shape === void 0 ? "rounded" : _ref$shape,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "medium" : _ref$size,
+    _ref$ripple = _ref.ripple,
+    ripple = _ref$ripple === void 0 ? true : _ref$ripple,
+    className = _ref.className,
+    style = _ref.style;
+  var trigger = React.useRef(null);
+  var counter = React.useRef(null);
+  var stopper = React.useRef(null);
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    counted = _useState2[0],
+    setCounted = _useState2[1];
+  var isCounting = counted > 0;
+  var stop = relax.useEvent(function () {
+    var _stopper$current;
+    (_stopper$current = stopper.current) === null || _stopper$current === void 0 || _stopper$current.unsubscribe();
+  });
+  relax.useMounted(function () {
+    counter.current = new rxjs.Observable(function (subscribe) {
+      trigger.current = subscribe;
+    }).pipe(rxjs.map(function () {
+      return rxjs.interval(_interval);
+    })).pipe(rxjs.switchAll());
+    return function () {
+      var _trigger$current;
+      stop();
+      (_trigger$current = trigger.current) === null || _trigger$current === void 0 || _trigger$current.complete();
+      counter.current = null;
+      stopper.current = null;
+      trigger.current = null;
+    };
+  });
+  var countdown = relax.useEvent(function () {
+    var _counter$current$subs, _counter$current;
+    setCounted(count);
+    stopper.current = (_counter$current$subs = (_counter$current = counter.current) === null || _counter$current === void 0 ? void 0 : _counter$current.subscribe(function (value) {
+      var _counted = Math.max(count - value - 1, 0);
+      setCounted(_counted);
+      if (_counted === 0) {
+        stop();
+      }
+    })) !== null && _counter$current$subs !== void 0 ? _counter$current$subs : null;
+  });
+  var start = relax.useEvent(function (e) {
+    var _trigger$current2;
+    countdown();
+    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
+  });
+  return /*#__PURE__*/React.createElement(button.Button, {
+    onClick: start,
+    disabled: disabled || isCounting,
+    variant: variant,
+    color: color,
+    size: size,
+    shape: shape,
+    className: className,
+    style: style,
+    ripple: ripple
+  }, isCounting ? counted : children);
+};
+
+exports.default = Countdown;

package/dist/components/countdown/{countdown.js → countdown.mjs}

@@ -1,6 +1,6 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
-import Button from '../button/button.js';
+import { Button } from '../button/button.mjs';
 import { Observable, map, interval, switchAll } from 'rxjs';
 import { useEvent, useMounted } from '@aiszlab/relax';
 
@@ -79,6 +79,5 @@ var Countdown = function Countdown(_ref) {
     ripple: ripple
   }, isCounting ? counted : children);
 };
-var Countdown$1 = Countdown;
 
-export { Countdown$1 as default };
+export { Countdown as default };

package/dist/components/countdown/types.d.ts

@@ -1,4 +1,4 @@
-import { ComponentProps } from "../../types/element";
+import { ComponentProps } from "musae/types/element";
 import { ButtonProps } from "../button/types";
 /**
  * @description