@mirai/ui 1.0.86 → 1.0.87

package/README.md

@@ -400,6 +400,7 @@ const MyComponent = (props) => {
 --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
 --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
 --mirai-ui-button-secondary-background: var(--mirai-ui-base);
+--mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
 --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
 --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
 --mirai-ui-button-radius: var(--mirai-ui-border-radius);

package/build/components/Button/Button.js

@@ -37,11 +37,16 @@ var Button = function Button(_ref) {
   return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, _objectSpread(_objectSpread({}, others), {}, {
     disabled: disabled || busy,
     tag: tag,
-    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && _ButtonModule.default.secondary, secondary && (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
-    onPress: !disabled && !busy ? onPress : undefined
-  }), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, busy !== undefined && /*#__PURE__*/_react.default.createElement(_primitives.View, {
-    className: (0, _helpers.styles)(_ButtonModule.default.busyProgress, busy && _ButtonModule.default.active)
-  }), children));
+    className: (0, _helpers.styles)(_ButtonModule.default.button, busy && !disabled && _ButtonModule.default.busy, large && _ButtonModule.default.large, small && _ButtonModule.default.small, rounded && _ButtonModule.default.rounded, squared && _ButtonModule.default.squared, secondary && !disabled && _ButtonModule.default.secondary, (disabled || busy) && _ButtonModule.default.disabled, wide && _ButtonModule.default.wide, others.className),
+    onPress: onPress
+  }), busy === undefined ? children : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: (0, _helpers.styles)(_ButtonModule.default.busyContainer, busy && _ButtonModule.default.active)
+  }, /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    className: _ButtonModule.default.spinner
+  })), /*#__PURE__*/_react.default.createElement(_primitives.View, {
+    row: true,
+    className: _ButtonModule.default.children
+  }, children)));
 };
 exports.Button = Button;
 Button.displayName = 'Component:Button';

package/build/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","button","undefined","busyProgress","active","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  rounded,\n  secondary,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        secondary && style.secondary,\n        secondary && (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress: !disabled && !busy ? onPress : undefined,\n    },\n    <>\n      {busy !== undefined && <View className={styles(style.busyProgress, busy && style.active)} />}\n      {children}\n    </>,\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  rounded: PropTypes.bool,\n  secondary: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,gBACfC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTT,QAAQ,EAAEA,QAAQ,IAAIF,IAAI;IAC1BQ,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZlB,IAAI,IAAIiB,qBAAK,CAACjB,IAAI,EAClBG,KAAK,IAAIc,qBAAK,CAACd,KAAK,EACpBG,KAAK,IAAIW,qBAAK,CAACX,KAAK,EACpBF,OAAO,IAAIa,qBAAK,CAACb,OAAO,EACxBG,OAAO,IAAIU,qBAAK,CAACV,OAAO,EACxBF,SAAS,IAAIY,qBAAK,CAACZ,SAAS,EAC5BA,SAAS,KAAKH,QAAQ,IAAIF,IAAI,CAAC,IAAIiB,qBAAK,CAACf,QAAQ,EACjDO,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAE,CAACR,QAAQ,IAAI,CAACF,IAAI,GAAGU,OAAO,GAAGS;EAAS,iBAEnD,4DACGnB,IAAI,KAAKmB,SAAS,iBAAI,6BAAC,gBAAI;IAAC,SAAS,EAAE,IAAAH,eAAM,EAACC,qBAAK,CAACG,YAAY,EAAEpB,IAAI,IAAIiB,qBAAK,CAACI,MAAM;EAAE,EAAG,EAC3FpB,QAAQ,CACR,CACJ;AAAA;AAAC;AAEJF,MAAM,CAACuB,WAAW,GAAG,kBAAkB;AAEvCvB,MAAM,CAACwB,SAAS,GAAG;EACjBvB,IAAI,EAAEwB,kBAAS,CAACC,IAAI;EACpBxB,QAAQ,EAAEuB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE1B,QAAQ,EAAEsB,kBAAS,CAACC,IAAI;EACxBtB,KAAK,EAAEqB,kBAAS,CAACC,IAAI;EACrBrB,OAAO,EAAEoB,kBAAS,CAACC,IAAI;EACvBpB,SAAS,EAAEmB,kBAAS,CAACC,IAAI;EACzBnB,KAAK,EAAEkB,kBAAS,CAACC,IAAI;EACrBlB,OAAO,EAAEiB,kBAAS,CAACC,IAAI;EACvBjB,GAAG,EAAEgB,kBAAS,CAACG,MAAM;EACrBlB,IAAI,EAAEe,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBpB,OAAO,EAAEc,kBAAS,CAACM;AACrB,CAAC"}
+{"version":3,"file":"Button.js","names":["Button","busy","children","disabled","large","rounded","secondary","small","squared","tag","wide","onPress","others","React","createElement","Pressable","className","styles","style","button","undefined","busyContainer","active","spinner","displayName","propTypes","PropTypes","bool","oneOfType","string","node","onEnter","func","onLeave"],"sources":["../../../src/components/Button/Button.jsx"],"sourcesContent":["import PropTypes from 'prop-types';\nimport React from 'react';\n\nimport { styles } from '../../helpers';\nimport { Pressable, View } from '../../primitives';\nimport style from './Button.module.css';\n\nconst Button = ({\n  busy,\n  children,\n  disabled,\n  large,\n  rounded,\n  secondary,\n  small,\n  squared = false,\n  tag = 'button',\n  wide,\n  onPress,\n  ...others\n}) =>\n  React.createElement(\n    Pressable,\n    {\n      ...others,\n      disabled: disabled || busy,\n      tag,\n      className: styles(\n        style.button,\n        busy && !disabled && style.busy,\n        large && style.large,\n        small && style.small,\n        rounded && style.rounded,\n        squared && style.squared,\n        secondary && !disabled && style.secondary,\n        (disabled || busy) && style.disabled,\n        wide && style.wide,\n        others.className,\n      ),\n      onPress,\n    },\n    busy === undefined ? (\n      children\n    ) : (\n      <>\n        <View className={styles(style.busyContainer, busy && style.active)}>\n          <View className={style.spinner} />\n        </View>\n        <View row className={style.children}>\n          {children}\n        </View>\n      </>\n    ),\n  );\n\nButton.displayName = 'Component:Button';\n\nButton.propTypes = {\n  busy: PropTypes.bool,\n  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n  disabled: PropTypes.bool,\n  large: PropTypes.bool,\n  rounded: PropTypes.bool,\n  secondary: PropTypes.bool,\n  small: PropTypes.bool,\n  squared: PropTypes.bool,\n  tag: PropTypes.string,\n  wide: PropTypes.bool,\n  onEnter: PropTypes.func,\n  onLeave: PropTypes.func,\n  onPress: PropTypes.func,\n};\n\nexport { Button };\n"],"mappings":";;;;;;;AAAA;AACA;AAEA;AACA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAExC,IAAMA,MAAM,GAAG,SAATA,MAAM;EAAA,IACVC,IAAI,QAAJA,IAAI;IACJC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,KAAK,QAALA,KAAK;IACLC,OAAO,QAAPA,OAAO;IACPC,SAAS,QAATA,SAAS;IACTC,KAAK,QAALA,KAAK;IAAA,oBACLC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IAAA,gBACfC,GAAG;IAAHA,GAAG,yBAAG,QAAQ;IACdC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACJC,MAAM;EAAA,oBAETC,cAAK,CAACC,aAAa,CACjBC,qBAAS,kCAEJH,MAAM;IACTT,QAAQ,EAAEA,QAAQ,IAAIF,IAAI;IAC1BQ,GAAG,EAAHA,GAAG;IACHO,SAAS,EAAE,IAAAC,eAAM,EACfC,qBAAK,CAACC,MAAM,EACZlB,IAAI,IAAI,CAACE,QAAQ,IAAIe,qBAAK,CAACjB,IAAI,EAC/BG,KAAK,IAAIc,qBAAK,CAACd,KAAK,EACpBG,KAAK,IAAIW,qBAAK,CAACX,KAAK,EACpBF,OAAO,IAAIa,qBAAK,CAACb,OAAO,EACxBG,OAAO,IAAIU,qBAAK,CAACV,OAAO,EACxBF,SAAS,IAAI,CAACH,QAAQ,IAAIe,qBAAK,CAACZ,SAAS,EACzC,CAACH,QAAQ,IAAIF,IAAI,KAAKiB,qBAAK,CAACf,QAAQ,EACpCO,IAAI,IAAIQ,qBAAK,CAACR,IAAI,EAClBE,MAAM,CAACI,SAAS,CACjB;IACDL,OAAO,EAAPA;EAAO,IAETV,IAAI,KAAKmB,SAAS,GAChBlB,QAAQ,gBAER,yEACE,6BAAC,gBAAI;IAAC,SAAS,EAAE,IAAAe,eAAM,EAACC,qBAAK,CAACG,aAAa,EAAEpB,IAAI,IAAIiB,qBAAK,CAACI,MAAM;EAAE,gBACjE,6BAAC,gBAAI;IAAC,SAAS,EAAEJ,qBAAK,CAACK;EAAQ,EAAG,CAC7B,eACP,6BAAC,gBAAI;IAAC,GAAG;IAAC,SAAS,EAAEL,qBAAK,CAAChB;EAAS,GACjCA,QAAQ,CACJ,CAEV,CACF;AAAA;AAAC;AAEJF,MAAM,CAACwB,WAAW,GAAG,kBAAkB;AAEvCxB,MAAM,CAACyB,SAAS,GAAG;EACjBxB,IAAI,EAAEyB,kBAAS,CAACC,IAAI;EACpBzB,QAAQ,EAAEwB,kBAAS,CAACE,SAAS,CAAC,CAACF,kBAAS,CAACG,MAAM,EAAEH,kBAAS,CAACI,IAAI,CAAC,CAAC;EACjE3B,QAAQ,EAAEuB,kBAAS,CAACC,IAAI;EACxBvB,KAAK,EAAEsB,kBAAS,CAACC,IAAI;EACrBtB,OAAO,EAAEqB,kBAAS,CAACC,IAAI;EACvBrB,SAAS,EAAEoB,kBAAS,CAACC,IAAI;EACzBpB,KAAK,EAAEmB,kBAAS,CAACC,IAAI;EACrBnB,OAAO,EAAEkB,kBAAS,CAACC,IAAI;EACvBlB,GAAG,EAAEiB,kBAAS,CAACG,MAAM;EACrBnB,IAAI,EAAEgB,kBAAS,CAACC,IAAI;EACpBI,OAAO,EAAEL,kBAAS,CAACM,IAAI;EACvBC,OAAO,EAAEP,kBAAS,CAACM,IAAI;EACvBrB,OAAO,EAAEe,kBAAS,CAACM;AACrB,CAAC"}

package/build/components/Button/Button.module.css

@@ -18,35 +18,6 @@
   color: var(--mirai-ui-button-disabled-color);
 }
 
-@keyframes mirai-button-busy {
-  from {
-    width: var(--mirai-ui-button-busy-width);
-  }
-  to {
-    width: 100%;
-  }
-}
-
-.secondary .busyProgress {
-  background-color: var(--mirai-ui-button-background);
-}
-
-.busyProgress {
-  background-color: var(--mirai-ui-button-color);
-  opacity: 0.2;
-  height: 100%;
-  left: 0;
-  position: absolute;
-  width: 0%;
-}
-
-.busyProgress.active {
-  animation-duration: var(--mirai-ui-button-busy-motion);
-  animation-iteration-count: infinite;
-  animation-name: mirai-button-busy;
-  animation-timing-function: var(--mirai-ui-motion-easing);
-}
-
 .button:not(.secondary):not(:disabled):active {
   box-shadow: inset 0 0 var(--mirai-ui-space-XL) var(--mirai-ui-space-XL) var(--mirai-ui-button-color-active);
 }
@@ -93,6 +64,136 @@
   width: 100%;
 }
 
+/* busy:bool */
+
+.button .children,
+.button .spinner {
+  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing),
+    transform var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+}
+
+.button.busy .children {
+  opacity: 0;
+  transform: translateY(var(--mirai-ui-space-XL));
+}
+
+.button .spinner {
+  opacity: 0;
+  transform: translateY(calc(var(--mirai-ui-space-XL) * -1));
+}
+
+.button.busy .spinner {
+  opacity: 1;
+  transform: translateY(0%);
+}
+
+.busyContainer {
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  width: 100%;
+}
+
+.busyContainer:before {
+  background-color: var(--mirai-ui-base);
+  content: '';
+  display: inline-block;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: block;
+  transition: opacity var(--mirai-ui-motion-expand) var(--mirai-ui-motion-easing);
+}
+
+.secondary:not(:disabled) .busyContainer:before {
+  background-color: var(--mirai-ui-button-background);
+}
+
+.busyContainer.active:before {
+  opacity: 0.2;
+}
+
+.spinner,
+.spinner::before,
+.spinner::after {
+  animation: mirai-button-busy calc(var(--mirai-ui-motion-expand) * 3) infinite var(--mirai-ui-motion-easing) alternate;
+  background-color: var(--mirai-ui-button-color-active);
+  border-radius: calc(var(--mirai-ui-space-XS) / 2);
+  height: var(--mirai-ui-space-XS);
+  width: var(--mirai-ui-space-XS);
+}
+
+.squared .spinner,
+.squared .spinner::before,
+.squared .spinner::after {
+  height: calc(var(--mirai-ui-space-XS) / 1.5);
+  width: calc(var(--mirai-ui-space-XS) / 1.5);
+}
+
+.secondary .spinner,
+.secondary .spinner::before,
+.secondary .spinner::after {
+  animation-name: mirai-button-secondary-busy;
+  background-color: var(--mirai-ui-button-secondary-color-active);
+}
+
+.spinner::before,
+.spinner::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+}
+
+.spinner::before {
+  animation-delay: 0s;
+  left: calc(var(--mirai-ui-space-S) * -1);
+}
+
+.squared .spinner::before {
+  left: calc(var(--mirai-ui-space-S) * -0.75);
+}
+
+.spinner {
+  animation-delay: calc(var(--mirai-ui-motion-expand) * 2);
+}
+
+.spinner::after {
+  animation-delay: calc(var(--mirai-ui-motion-expand) * 3);
+  left: var(--mirai-ui-space-S);
+}
+
+.squared .spinner::after {
+  left: calc(var(--mirai-ui-space-S) * 0.75);
+}
+
+@keyframes mirai-button-busy {
+  0% {
+    background-color: var(--mirai-ui-base);
+  }
+  50%,
+  100% {
+    background-color: var(--mirai-ui-button-color-active);
+    background-color: var();
+  }
+}
+
+@keyframes mirai-button-secondary-busy {
+  0% {
+    background-color: var(--mirai-ui-button-background);
+  }
+  50%,
+  100% {
+    background-color: var(--mirai-ui-button-secondary-color-active);
+  }
+}
+
 @media only screen and (min-width: 600px) {
   .button:not(:disabled).secondary:hover:not(:active) {
     box-shadow: inset 0 0 0 var(--mirai-ui-border-width) var(--mirai-ui-button-color-hover);

package/build/components/Button/Button.stories.js

@@ -5,15 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Story = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _ = require("../../");
 var _Button = require("./Button");
 var _Story$args;
-var _excluded = ["icon"];
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _excluded = ["busy", "icon"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var _default = {
@@ -21,11 +30,24 @@ var _default = {
 };
 exports.default = _default;
 var Story = function Story(_ref) {
-  var icon = _ref.icon,
+  var busyProp = _ref.busy,
+    icon = _ref.icon,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, props), /*#__PURE__*/_react.default.createElement(_Button.Button, props, /*#__PURE__*/_react.default.createElement(_.Icon, {
+  var _useState = (0, _react.useState)(busyProp),
+    _useState2 = _slicedToArray(_useState, 2),
+    busy = _useState2[0],
+    setBusy = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
+    busy: busy
+  })), /*#__PURE__*/_react.default.createElement(_Button.Button, _objectSpread(_objectSpread({}, props), {}, {
+    busy: busy
+  }), /*#__PURE__*/_react.default.createElement(_.Icon, {
     value: _.ICON[icon]
-  })));
+  })), /*#__PURE__*/_react.default.createElement("view", {
+    onClick: function onClick() {
+      return setBusy(!busy);
+    }
+  }, "Switch busy"));
 };
 exports.Story = Story;
 Story.storyName = 'Button';

package/build/components/Button/Button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.stories.js","names":["title","Story","icon","props","ICON","storyName","args","busy","children","disabled","undefined","large","rounded","secondary","small","squared","tag","wide","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React from 'react';\n\nimport { Icon, ICON } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ icon, ...props }) => (\n  <>\n    <Button {...props} />\n    <Button {...props}>\n      <Icon value={ICON[icon]} />\n    </Button>\n  </>\n);\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  icon: undefined,\n  large: false,\n  rounded: false,\n  secondary: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n  icon: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK;EAAA,IAAMC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EAAA,oBACpC,yEACE,6BAAC,cAAM,EAAKA,KAAK,CAAI,eACrB,6BAAC,cAAM,EAAKA,KAAK,eACf,6BAAC,MAAI;IAAC,KAAK,EAAEC,MAAI,CAACF,IAAI;EAAE,EAAG,CACpB,CACR;AAAA,CACJ;AAAC;AAEFD,KAAK,CAACI,SAAS,GAAG,QAAQ;AAE1BJ,KAAK,CAACK,IAAI;EACRC,IAAI,EAAE,KAAK;EACXC,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfP,IAAI,EAAEQ,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB;EAAEC,YAAY,EAAE;AAA0B,CAAC,eACnD;AAEDjB,KAAK,CAACkB,QAAQ,GAAG;EACfjB,IAAI,EAAE;IACJkB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAAClB,MAAI,CAAC;IAC1BmB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAAClB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDsB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}
+{"version":3,"file":"Button.stories.js","names":["title","Story","busyProp","busy","icon","props","useState","setBusy","ICON","storyName","args","children","disabled","undefined","large","rounded","secondary","small","squared","tag","wide","marginBottom","argTypes","options","Object","keys","control","type","defaultValue","onEnter","action","onLeave","onPress"],"sources":["../../../src/components/Button/Button.stories.jsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useState } from 'react';\n\nimport { Icon, ICON } from '../../';\nimport { Button } from './Button';\n\nexport default { title: 'Components' };\n\nexport const Story = ({ busy: busyProp, icon, ...props }) => {\n  const [busy, setBusy] = useState(busyProp);\n\n  return (\n    <>\n      <Button {...{ ...props, busy }} />\n      <Button {...{ ...props, busy }}>\n        <Icon value={ICON[icon]} />\n      </Button>\n\n      <view onClick={() => setBusy(!busy)}>Switch busy</view>\n    </>\n  );\n};\n\nStory.storyName = 'Button';\n\nStory.args = {\n  busy: false,\n  children: 'children',\n  disabled: false,\n  icon: undefined,\n  large: false,\n  rounded: false,\n  secondary: false,\n  small: false,\n  squared: false,\n  tag: 'button',\n  wide: false,\n  // inherited properties\n  ['data-testid']: 'test-story',\n  style: { marginBottom: 'var(--mirai-ui-space-M)' },\n};\n\nStory.argTypes = {\n  icon: {\n    options: Object.keys(ICON),\n    control: { type: 'select' },\n    defaultValue: Object.keys(ICON)[0],\n  },\n  onEnter: { action: 'onEnter' },\n  onLeave: { action: 'onLeave' },\n  onPress: { action: 'onPress' },\n};\n"],"mappings":";;;;;;;AACA;AAEA;AACA;AAAkC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAEnB;EAAEA,KAAK,EAAE;AAAa,CAAC;AAAA;AAE/B,IAAMC,KAAK,GAAG,SAARA,KAAK,OAA2C;EAAA,IAA/BC,QAAQ,QAAdC,IAAI;IAAYC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACpD,gBAAwB,IAAAC,eAAQ,EAACJ,QAAQ,CAAC;IAAA;IAAnCC,IAAI;IAAEI,OAAO;EAEpB,oBACE,yEACE,6BAAC,cAAM,kCAAUF,KAAK;IAAEF,IAAI,EAAJA;EAAI,GAAM,eAClC,6BAAC,cAAM,kCAAUE,KAAK;IAAEF,IAAI,EAAJA;EAAI,iBAC1B,6BAAC,MAAI;IAAC,KAAK,EAAEK,MAAI,CAACJ,IAAI;EAAE,EAAG,CACpB,eAET;IAAM,OAAO,EAAE;MAAA,OAAMG,OAAO,CAAC,CAACJ,IAAI,CAAC;IAAA;EAAC,iBAAmB,CACtD;AAEP,CAAC;AAAC;AAEFF,KAAK,CAACQ,SAAS,GAAG,QAAQ;AAE1BR,KAAK,CAACS,IAAI;EACRP,IAAI,EAAE,KAAK;EACXQ,QAAQ,EAAE,UAAU;EACpBC,QAAQ,EAAE,KAAK;EACfR,IAAI,EAAES,SAAS;EACfC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,SAAS,EAAE,KAAK;EAChBC,KAAK,EAAE,KAAK;EACZC,OAAO,EAAE,KAAK;EACdC,GAAG,EAAE,QAAQ;EACbC,IAAI,EAAE;AAAK,gCAEV,aAAa,EAAG,YAAY,yCACtB;EAAEC,YAAY,EAAE;AAA0B,CAAC,eACnD;AAEDpB,KAAK,CAACqB,QAAQ,GAAG;EACflB,IAAI,EAAE;IACJmB,OAAO,EAAEC,MAAM,CAACC,IAAI,CAACjB,MAAI,CAAC;IAC1BkB,OAAO,EAAE;MAAEC,IAAI,EAAE;IAAS,CAAC;IAC3BC,YAAY,EAAEJ,MAAM,CAACC,IAAI,CAACjB,MAAI,CAAC,CAAC,CAAC;EACnC,CAAC;EACDqB,OAAO,EAAE;IAAEC,MAAM,EAAE;EAAU,CAAC;EAC9BC,OAAO,EAAE;IAAED,MAAM,EAAE;EAAU,CAAC;EAC9BE,OAAO,EAAE;IAAEF,MAAM,EAAE;EAAU;AAC/B,CAAC"}

package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap

@@ -13,13 +13,21 @@ exports[`component:<Button> inherit:className 1`] = `
 exports[`component:<Button> prop:busy 1`] = `
 <DocumentFragment>
   <button
-    class="pressable disabled button busy"
+    class="pressable disabled button busy disabled"
     disabled=""
   >
     <div
-      class="view busyProgress active"
-    />
-    children
+      class="view busyContainer active"
+    >
+      <div
+        class="view spinner"
+      />
+    </div>
+    <div
+      class="view row children"
+    >
+      children
+    </div>
   </button>
 </DocumentFragment>
 `;
@@ -27,7 +35,7 @@ exports[`component:<Button> prop:busy 1`] = `
 exports[`component:<Button> prop:disabled 1`] = `
 <DocumentFragment>
   <button
-    class="pressable disabled button"
+    class="pressable disabled button disabled"
     disabled=""
   >
     children
@@ -52,9 +60,17 @@ exports[`component:<Button> prop:secondary && prop:busy 1`] = `
     disabled=""
   >
     <div
-      class="view busyProgress active"
-    />
-    children
+      class="view busyContainer active"
+    >
+      <div
+        class="view spinner"
+      />
+    </div>
+    <div
+      class="view row children"
+    >
+      children
+    </div>
   </button>
 </DocumentFragment>
 `;

package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap

@@ -9,7 +9,7 @@ exports[`component:<InputNumber> inherit:className 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -77,7 +77,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -108,7 +108,7 @@ exports[`component:<InputNumber> prop:disabled 1`] = `
       0
     </h3>
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -152,7 +152,7 @@ exports[`component:<InputNumber> prop:hint 1`] = `
       </span>
     </div>
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -226,7 +226,7 @@ exports[`component:<InputNumber> prop:label 1`] = `
       </h4>
     </div>
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -324,7 +324,7 @@ exports[`component:<InputNumber> prop:max 1`] = `
       10
     </h3>
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -362,7 +362,7 @@ exports[`component:<InputNumber> prop:min 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -564,7 +564,7 @@ exports[`component:<InputNumber> renders 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span
@@ -633,7 +633,7 @@ exports[`component:<InputNumber> testID 1`] = `
       class="view texts"
     />
     <button
-      class="pressable disabled button rounded squared secondary disabled"
+      class="pressable disabled button rounded squared disabled"
       disabled=""
     >
       <span

package/build/theme/default.theme.css

@@ -172,10 +172,10 @@
   --mirai-ui-button-disabled-color: var(--mirai-ui-content-light);
   --mirai-ui-button-font-weight: var(--mirai-ui-font-weight);
   --mirai-ui-button-secondary-background: var(--mirai-ui-base);
+  --mirai-ui-button-secondary-color-active: var(--mirai-ui-accent-border);
   --mirai-ui-button-padding-y: var(--mirai-ui-space-S);
   --mirai-ui-button-padding-x: var(--mirai-ui-space-L);
   --mirai-ui-button-radius: var(--mirai-ui-border-radius);
-  --mirai-ui-button-secondary-background: var(--mirai-ui-base);
   --mirai-ui-button-squared: calc(var(--mirai-ui-space-M) * 2);
 
   /* Calendar */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mirai/ui",
-  "version": "1.0.86",
+  "version": "1.0.87",
   "repository": "git@gitlab.com:miraicorp/dev/frontend/ui.git",
   "author": "JΛVI <hello@soyjavi.com>",
   "license": "MIT",