@nutui/nutui-react 2.0.0-beta.0 → 2.0.0-beta.2

package/dist/esm/Animate/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Animate/style/index.js

@@ -0,0 +1,2 @@
+
+import '../../../packages/animate/animate.scss'

package/dist/esm/Animate/style/style.css

@@ -0,0 +1 @@
+.nut-animate .nut-ani-container{display:inline-block}.nut-animate [class*=nut-animate-]{animation-duration:.5s;animation-timing-function:ease-out;animation-fill-mode:both}.nut-animate .nut-animate-slide-right{animation-name:slide-right}@keyframes slide-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}.nut-animate .nut-animate-slide-left{animation-name:slide-left}@keyframes slide-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.nut-animate .nut-animate-slide-top{animation-name:slide-top}@keyframes slide-top{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}.nut-animate .nut-animate-slide-bottom{animation-name:slide-bottom}@keyframes slide-bottom{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.nut-animate .nut-animate-shake{animation-name:shake}@keyframes shake{0%,to{transform:translate(0)}10%{transform:translate(-9px)}20%{transform:translate(8px)}30%{transform:translate(-7px)}40%{transform:translate(6px)}50%{transform:translate(-5px)}60%{transform:translate(4px)}70%{transform:translate(-3px)}80%{transform:translate(2px)}90%{transform:translate(-1px)}}.nut-animate .nut-animate-ripple{animation-name:ripple}@keyframes ripple{0%{transform:scale(1)}50%{transform:scale(1.1)}}.nut-animate .nut-animate-breath{animation-name:breath;animation-duration:2.7s;animation-timing-function:ease-in-out;animation-direction:alternate}@keyframes breath{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.nut-animate .nut-animate-twinkle{position:relative}.nut-animate .nut-animate-twinkle:after,.nut-animate .nut-animate-twinkle:before{width:60px;height:60px;content:"";box-sizing:border-box;border:4px solid rgba(255,255,255,.6);position:absolute;border-radius:30px;right:50%;margin-top:-15px;margin-right:-30px;z-index:1;transform:scale(0);animation:twinkle 2s ease-out infinite}.nut-animate .nut-animate-twinkle:after{animation-delay:.4s}@keyframes twinkle{0%{transform:scale(0)}20%{opacity:1}50%,to{transform:scale(1.4);opacity:0}}.nut-animate .nut-animate-flicker{position:relative;overflow:hidden}.nut-animate .nut-animate-flicker:after{width:100px;height:60px;position:absolute;left:0;top:0;opacity:.73;content:"";background-image:linear-gradient(106deg,rgba(232,224,255,0) 24%,#e8e0ff 91%);animation:flicker 1.5s linear infinite;transform:skew(-20deg);filter:blur(3px)}@keyframes flicker{0%{transform:translate(-100px) skew(-20deg)}40%,to{transform:translate(150px) skew(-20deg)}}.nut-animate .nut-animate-jump{transform-origin:center center;animation:jump .7s linear}@keyframes jump{0%{animation-timing-function:ease-in;transform:rotate(0) translateY(0)}25%{animation-timing-function:ease-out;transform:rotate(10deg) translateY(20px)}50%{animation-timing-function:ease-in;transform:rotate(0) translateY(-10px)}75%{animation-timing-function:ease-out;transform:rotate(-10deg) translateY(20px)}to{animation-timing-function:ease-in;transform:rotate(0) translateY(0)}}.nut-animate .nut-animate-float{position:relative;animation-name:float-pop}@keyframes float-pop{0%{top:0px}25%{top:1px}50%{top:4px}75%{top:1px}to{top:0px}}.nut-animate .loop{animation-iteration-count:infinite}

package/dist/esm/Animate.js

@@ -0,0 +1,65 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "type", "action", "loop", "onClick", "children"];
+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), true).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;
+}
+import React__default, { useState } from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  type: "shake",
+  action: "initial",
+  loop: false,
+  onClick: function onClick(event) {
+  }
+});
+var classPrefix = "nut-animate";
+var Animate = function Animate2(props) {
+  var _classNames;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, type = _defaultProps$props.type, action = _defaultProps$props.action, loop = _defaultProps$props.loop, onClick2 = _defaultProps$props.onClick, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), clicked = _useState2[0], setClicked = _useState2[1];
+  var classes = classNames((_classNames = {
+    "nut-ani-container": true
+  }, _defineProperty(_classNames, "".concat(classPrefix, "-").concat(type), action === "initial" || clicked ? type : false), _defineProperty(_classNames, "loop", loop), _classNames));
+  var cls = classNames(classes, className);
+  var handleClick = function handleClick2(event) {
+    setClicked(true);
+    if (!loop) {
+      setTimeout(function() {
+        setClicked(false);
+      }, 1e3);
+    }
+    onClick2 && onClick2(event);
+  };
+  return React__default.createElement("div", {
+    className: "nut-animate"
+  }, React__default.createElement("div", _objectSpread({
+    className: cls,
+    onClick: handleClick
+  }, rest), children));
+};
+Animate.defaultProps = defaultProps;
+Animate.displayName = "NutAnimate";
+export {
+  Animate as default
+};

package/dist/esm/AnimatingNumbers/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/AnimatingNumbers/style/index.js

@@ -1,3 +1,3 @@
-require('../../../packages/animatingnumbers/countup.scss')
+import'../../../packages/animatingnumbers/countup.scss';
 
-require('../../../packages/animatingnumbers/animatingnumbers.scss')
+import '../../../packages/animatingnumbers/animatingnumbers.scss'

package/dist/esm/AnimatingNumbers/style/style.css

@@ -0,0 +1 @@
+.nut-countup__list{display:inline-flex;height:var(--nutui-countup-height, 32px);overflow:hidden}.nut-countup__listitem{height:var(--nutui-countup-height, 32px);overflow:hidden;font-size:var(--nutui-countup-base-size, 18px);color:var(--nutui-gray-1, #1a1a1a);font-weight:700}.nut-countup__number,.nut-countup__separator{display:flex;flex-direction:column;align-items:center}.nut-countup__number span,.nut-countup__separator span{height:var(--nutui-countup-height, 32px);line-height:var(--nutui-countup-height, 32px)}

package/dist/esm/AnimatingNumbers.js

@@ -3,70 +3,94 @@ import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["maxLen", "endNumber", "delaySpeed", "easeSpeed", "className", "thousands"];
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-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; }
-
-import React__default, { useRef, useEffect, Component } from 'react';
-import { c as cn } from './bem-893ad28d.js';
-import '@bem-react/classname';
-var defaultProps$1 = {
-  maxLen: 0,
-  endNumber: '',
-  delaySpeed: 300,
-  easeSpeed: 1,
-  thousands: false,
-  className: ''
-};
-
-var CountUp = function CountUp(props) {
-  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props),
-      maxLen = _defaultProps$1$props.maxLen,
-      endNumber = _defaultProps$1$props.endNumber,
-      delaySpeed = _defaultProps$1$props.delaySpeed,
-      easeSpeed = _defaultProps$1$props.easeSpeed,
-      className = _defaultProps$1$props.className,
-      thousands = _defaultProps$1$props.thousands,
-      reset = _objectWithoutProperties(_defaultProps$1$props, _excluded);
-
-  var b = cn('countup');
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["length", "value", "delay", "duration", "className", "thousands", "style"];
+function _createSuper(Derived) {
+  var hasNativeReflectConstruct = _isNativeReflectConstruct();
+  return function _createSuperInternal() {
+    var Super = _getPrototypeOf(Derived), result;
+    if (hasNativeReflectConstruct) {
+      var NewTarget = _getPrototypeOf(this).constructor;
+      result = Reflect.construct(Super, arguments, NewTarget);
+    } else {
+      result = Super.apply(this, arguments);
+    }
+    return _possibleConstructorReturn(this, result);
+  };
+}
+function _isNativeReflectConstruct() {
+  if (typeof Reflect === "undefined" || !Reflect.construct)
+    return false;
+  if (Reflect.construct.sham)
+    return false;
+  if (typeof Proxy === "function")
+    return true;
+  try {
+    Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {
+    }));
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+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), true).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;
+}
+import React__default, { useRef, useMemo, useEffect, Component } from "react";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps$1 = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  length: 0,
+  value: "",
+  delay: 300,
+  duration: 1,
+  thousands: false
+});
+var CountUp = function CountUp2(props) {
+  var _defaultProps$1$props = _objectSpread(_objectSpread({}, defaultProps$1), props), length = _defaultProps$1$props.length, value = _defaultProps$1$props.value, delay = _defaultProps$1$props.delay, duration = _defaultProps$1$props.duration, className = _defaultProps$1$props.className, thousands = _defaultProps$1$props.thousands, style = _defaultProps$1$props.style, reset = _objectWithoutProperties(_defaultProps$1$props, _excluded);
+  var classPrefix = "nut-countup";
   var countupRef = useRef(null);
   var timerRef = useRef(0);
   var numbers = Array.from({
     length: 10
-  }, function (v, i) {
+  }, function(v, i) {
     return i;
   });
-
-  var getShowNumber = function getShowNumber() {
-    var splitArr = endNumber.split('.');
-    var intNumber = maxLen && splitArr[0].length < maxLen ? (Array(maxLen).join('0') + splitArr[0]).slice(-maxLen) : splitArr[0];
-    var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') : intNumber).concat(splitArr[1] ? '.' : '').concat(splitArr[1] || '');
-    return currNumber.split('');
+  var getShowNumber = function getShowNumber2() {
+    var splitArr = value.split(".");
+    var intNumber = length && splitArr[0].length < length ? (Array(length).join("0") + splitArr[0]).slice(-length) : splitArr[0];
+    var currNumber = "".concat(thousands ? intNumber.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,") : intNumber).concat(splitArr[1] ? "." : "").concat(splitArr[1] || "");
+    return currNumber.split("");
   };
-
-  var numerArr = getShowNumber();
-
-  var setNumberTransform = function setNumberTransform() {
+  var numerArr = useMemo(getShowNumber, [value, length, thousands]);
+  var setNumberTransform = function setNumberTransform2() {
     if (countupRef.current) {
-      var numberItems = countupRef.current.querySelectorAll('.nut-countup__number');
-      var numberFilterArr = numerArr.filter(function (item) {
+      var numberItems = countupRef.current.querySelectorAll(".nut-countup__number");
+      var numberFilterArr = numerArr.filter(function(item) {
         return !Number.isNaN(Number(item));
       });
-      Object.keys(numberItems).forEach(function (key) {
+      Object.keys(numberItems).forEach(function(key) {
         var elem = numberItems[Number(key)];
         var idx = Number(numberFilterArr[Number(key)]);
-
         if ((idx || idx === 0) && elem) {
-          // 计算规则：父元素和实际列表高度的百分比，分割成20等份
           var transform = "translate(0, -".concat((idx === 0 ? 10 : idx) * 5, "%)");
           elem.style.transform = transform;
           elem.style.webkitTransform = transform;
@@ -74,65 +98,52 @@ var CountUp = function CountUp(props) {
       });
     }
   };
-
   var numberEaseStyle = {
-    transition: "transform ".concat(easeSpeed, "s ease-in-out")
+    transition: "transform ".concat(duration, "s ease-in-out")
   };
-  useEffect(function () {
-    timerRef.current = window.setTimeout(function () {
+  useEffect(function() {
+    timerRef.current = window.setTimeout(function() {
       setNumberTransform();
-    }, delaySpeed);
-    return function () {
+    }, delay);
+    return function() {
       window.clearTimeout(timerRef.current);
     };
-  }, []);
-  useEffect(function () {
-    setNumberTransform();
   }, [numerArr]);
   return React__default.createElement("div", {
-    className: "".concat(b(), " ").concat(className),
+    className: "".concat(classPrefix, " ").concat(className),
     ref: countupRef
   }, React__default.createElement("ul", {
-    className: b('list')
-  }, numerArr.map(function (item, idx) {
+    className: "".concat(classPrefix, "__list")
+  }, numerArr.map(function(item, idx) {
     return React__default.createElement("li", {
-      className: "".concat(b('listitem', {
-        number: !Number.isNaN(Number(item))
-      })),
+      className: "".concat(classPrefix, "__listitem ").concat(!Number.isNaN(Number(item)) ? "".concat(classPrefix, "__listitem--number") : ""),
       key: idx
     }, !Number.isNaN(Number(item)) ? React__default.createElement("span", {
-      className: b('number'),
+      className: "".concat(classPrefix, "__number"),
       style: numberEaseStyle
-    }, [].concat(numbers, numbers).map(function (number, subidx) {
+    }, [].concat(numbers, numbers).map(function(number, subidx) {
       return React__default.createElement("span", {
         key: subidx
       }, number);
     })) : React__default.createElement("span", {
-      className: b('separator')
+      className: "".concat(classPrefix, "__separator")
     }, item));
   })));
 };
-
 CountUp.defaultProps = defaultProps$1;
-CountUp.displayName = 'NutCountUp';
+CountUp.displayName = "NutCountUp";
 var defaultProps = {};
-
-var AnimatingNumbers = /*#__PURE__*/function (_Component) {
-  _inherits(AnimatingNumbers, _Component);
-
-  var _super = _createSuper(AnimatingNumbers);
-
-  function AnimatingNumbers(props) {
+var AnimatingNumbers = /* @__PURE__ */ function(_Component) {
+  _inherits(AnimatingNumbers2, _Component);
+  var _super = _createSuper(AnimatingNumbers2);
+  function AnimatingNumbers2(props) {
     var _this;
-
-    _classCallCheck(this, AnimatingNumbers);
-
+    _classCallCheck(this, AnimatingNumbers2);
     _this = _super.call(this, props);
     _this.state = {};
     return _this;
   }
-
-  _createClass(AnimatingNumbers, [{
+  _createClass(AnimatingNumbers2, [{
     key: "render",
     value: function render() {
       return React__default.createElement("div", {
@@ -140,15 +151,12 @@ var AnimatingNumbers = /*#__PURE__*/function (_Component) {
       });
     }
   }]);
-
-  return AnimatingNumbers;
+  return AnimatingNumbers2;
 }(Component);
-
 _defineProperty(AnimatingNumbers, "defaultProps", defaultProps);
-
-_defineProperty(AnimatingNumbers, "displayName", 'NutAnimatingNumbers');
-
+_defineProperty(AnimatingNumbers, "displayName", "NutAnimatingNumbers");
 _defineProperty(AnimatingNumbers, "CountUp", CountUp);
-
 AnimatingNumbers.CountUp = CountUp;
-export { AnimatingNumbers as default };
+export {
+  AnimatingNumbers as default
+};

package/dist/esm/Audio/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Audio/style/index.js

@@ -0,0 +1,3 @@
+import '../../Button/style'
+import '../../Range/style'
+import '../../../packages/audio/audio.scss'

package/dist/esm/Audio/style/style.css

@@ -0,0 +1 @@
+.nut-button{position:relative;display:inline-block;flex-shrink:0;height:var(--nutui-button-default-height, 38px);box-sizing:border-box;margin:0;padding:0;line-height:var(--nutui-button-default-line-height, 36px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px));text-align:center;cursor:pointer;transition:opacity .2s;-webkit-appearance:none;user-select:none;touch-action:manipulation;color:var(--nutui-button-default-color, var(--nutui-gray-1, #1a1a1a));background:var(--nutui-button-default-bg-color, var(--nutui-gray-6, #ffffff));border:var(--nutui-button-border-width, 1px) solid var(--nutui-button-default-border-color, rgb(204, 204, 204))}.nut-button .nut-button-text{margin-left:var(--nutui-button-text-icon-margin-left, 5px)}.nut-button:before{position:absolute;top:50%;left:50%;width:100%;height:100%;background-color:var(--nutui-gray-0, #000000);border:inherit;border-color:var(--nutui-gray-0, #000000);border-radius:inherit;transform:translate(-50%,-50%);opacity:0;content:" "}.nut-button:after{border:none}.nut-button:active:before{opacity:.1}.nut-button__warp{height:100%;width:100%;display:flex;align-items:center;justify-content:center;background:initial}.nut-button--loading:before,.nut-button--disabled:before{display:none}.nut-button--solid{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--primary{color:var(--nutui-button-primary-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,var(--nutui-brand-color, #fa2c19) 0%,var(--nutui-brand-color-end, #fa2c19) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--primary.nut-button--outline{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));border-color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent}.nut-button--primary.nut-button--none{color:var(--nutui-button-primary-border-color, var(--nutui-brand-color, #fa2c19));background:transparent;border-color:transparent}.nut-button--info{color:var(--nutui-button-info-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(315deg,rgb(73,143,242) 0%,rgb(73,101,242) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--info.nut-button--outline{color:var(--nutui-button-info-border-color, #496af2);border-color:var(--nutui-button-info-border-color, #496af2);background:transparent}.nut-button--info.nut-button--none{color:var(--nutui-button-info-border-color, #496af2);background:transparent;border-color:transparent}.nut-button--success{color:var(--nutui-button-success-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(38,191,38) 0%,rgb(39,197,48) 45%,rgb(40,207,63) 83%,rgb(41,212,70) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--success.nut-button--outline{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));border-color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent}.nut-button--success.nut-button--none{color:var(--nutui-button-success-border-color, rgb(38, 191, 38));background:transparent;border-color:transparent}.nut-button--danger{color:var(--nutui-button-danger-color, var(--nutui-brand-text-color, #ffffff));background:var(--nutui-button-danger-background-color, rgb(250, 44, 25));border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--danger.nut-button--outline{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));border-color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent}.nut-button--danger.nut-button--none{color:var(--nutui-button-danger-border-color, rgb(250, 44, 25));background:transparent;border-color:transparent}.nut-button--warning{color:var(--nutui-button-warning-color, var(--nutui-brand-text-color, #ffffff));background:linear-gradient(135deg,rgb(255,158,13) 0%,rgb(255,167,13) 45%,rgb(255,182,13) 83%,rgb(255,190,13) 100%);border:var(--nutui-button-border-width, 1px) solid transparent}.nut-button--warning.nut-button--outline{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));border-color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent}.nut-button--warning.nut-button--none{color:var(--nutui-button-warning-border-color, rgb(255, 158, 13));background:transparent;border-color:transparent}.nut-button--large{width:100%;height:var(--nutui-button-large-height, 48px);line-height:var(--nutui-button-large-line-height, 46px)}.nut-button--large .text{margin-left:var(--nutui-button-text-icon-large-margin-left, 10px)}.nut-button--normal{padding:var(--nutui-button-default-padding, 0 18px);font-size:var(--nutui-button-default-font-size, var(--nutui-font-size-2, 14px))}.nut-button--small{height:var(--nutui-button-small-height, 28px);line-height:var(--nutui-button-small-line-height, 26px);padding:var(--nutui-button-small-padding, 0 12px);font-size:var(--nutui-button-small-font-size, var(--nutui-font-size-1, 12px))}.nut-button--small .text{margin-left:var(--nutui-button-text-icon-small-margin-left, 2px)}.nut-button--mini{height:var(--nutui-button-mini-height, 24px);line-height:var(--nutui-button-mini-line-height, 1.2);padding:var(--nutui-button-mini-padding, 0 12px);font-size:var(--nutui-button-mini-font-size, var(--nutui-font-size-1, 12px))}.nut-button--mini .text{margin-left:var(--nutui-button-text-icon-mini-margin-left, 1px)}.nut-button--block{display:block;width:100%}.nut-button--disabled{cursor:not-allowed;opacity:var(--nutui-button-disabled-opacity, .68)}.nut-button--loading{cursor:default;opacity:.9}.nut-button--round{border-radius:var(--nutui-button-border-radius, 25px)}.nut-button--square{border-radius:0}.nut-range-container{display:flex;position:relative;width:100%;height:var(--nutui-range-height, 4px);align-items:center}.nut-range-container .min,.nut-range-container .max{font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-color, var(--nutui-gray-1, #1a1a1a));user-select:none}.nut-range-container-vertical{height:100%;flex-direction:column;padding:0 15px}.nut-range-container-vertical .nut-range{width:var(--nutui-range-height, 4px);height:100%}.nut-range-container-vertical .nut-range-button-wrapper,.nut-range-container-vertical .nut-range-button-wrapper-right{position:absolute;top:initial;bottom:0px;left:50%;right:initial;transform:translate3d(-50%,50%,0)}.nut-range-container-vertical .nut-range-button-wrapper-left{top:0px;left:50%;right:initial;transform:translate3d(-50%,-50%,0)}.nut-range-container-vertical .nut-range .number{transform:translate3d(100%,0,0)}.nut-range-container-vertical .nut-range-vertical{margin:var(--nutui-range-margin, 15px) 0px}.nut-range-container-vertical .nut-range-mark{position:absolute;width:100%;right:50%;overflow:visible;font-size:12px;height:100%;top:initial;width:36px;padding:0}.nut-range-container-vertical .nut-range-mark-text{width:20px;position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translateY(-50%)}.nut-range-container-vertical .nut-range-tick{position:absolute;top:0px;left:30px;width:11px;height:11px;margin-left:0;border-radius:50%;background:var(--nutui-range-inactive-color, #fa958c)}.nut-range-container-vertical .nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19))}.nut-range{display:block;position:relative;width:100%;height:var(--nutui-range-height, 4px);margin:0 var(--nutui-range-margin, 15px);background-color:var(--nutui-range-inactive-color, #fa958c);border-radius:2px;cursor:pointer}.nut-range:before{position:absolute;top:-8px;right:0;bottom:-8px;left:0;content:""}.nut-range-bar{display:block;position:relative;width:100%;height:100%;background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19));border-radius:inherit;transition:all .2s}.nut-range-button{display:block;width:var(--nutui-range-button-width, 24px);height:var(--nutui-range-button-height, 24px);background:var(--nutui-range-button-background, var(--nutui-brand-text-color, #ffffff));border-radius:50%;box-shadow:0 1px 2px #00000026;border:var(--nutui-range-button-border, 1px solid var(--nutui-brand-color, #fa2c19));outline:none}.nut-range-button-wrapper,.nut-range-button-wrapper-right{touch-action:none;position:absolute;top:50%;right:0;transform:translate3d(50%,-50%,0);cursor:grab;outline:none}.nut-range-button-wrapper-left{position:absolute;top:50%;left:0;transform:translate3d(-50%,-50%,0);cursor:grab;outline:none;touch-action:none}.nut-range-button .number{width:100%;height:100%;display:flex;align-items:center;justify-content:center;user-select:none;font-size:var(--nutui-font-size-1, 12px);color:var(--nutui-range-font-color, var(--nutui-gray-1, #1a1a1a));transform:translate3d(0,-100%,0)}.nut-range-disabled{cursor:not-allowed;opacity:.54}.nut-range-disabled .nut-range-button-wrapper,.nut-range-disabled .nut-range-button-wrapper-left,.nut-range-disabled .nut-range-button-wrapper-right{cursor:not-allowed}.nut-range-mark{position:absolute;width:100%;overflow:visible;top:50%;font-size:12px;padding-top:14px}.nut-range-mark-text{position:absolute;display:inline-block;line-height:16px;color:#999;text-align:center;word-break:keep-all;user-select:none;transform:translate(-50%)}.nut-range-tick{position:absolute;top:-20px;width:11px;height:11px;left:0px;border-radius:50%;background:var(--nutui-range-inactive-color, #fa958c)}.nut-range-tick.active{background:var(--nutui-range-active-color, var(--nutui-brand-color, #fa2c19))}.nut-audio__icon{position:relative;display:inline-block}.nut-audio__icon-box{display:flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--nutui-gray-6, #ffffff);border-radius:50%;box-shadow:0 0 8px #75757580}.nut-audio__icon-box .nut-icon-am-rotate{transform:rotate(360);animation-timing-function:ease-in-out}.nut-audio__icon .nut-audio__icon-stop{position:relative}.nut-audio__icon .nut-audio__icon-stop:after{position:absolute;left:50%;top:50%;transform:translate(-50%);content:"";height:2px;width:30px;background:var(--nutui-gray-3, #bfbfbf);transform:rotate(45deg);transform-origin:8px -18px}.nut-audio__progress{display:flex;align-items:center;width:100%;margin:0 auto;padding:10px 0}.nut-audio__progress-bar-wrapper{flex:1;margin:0 10px}.nut-audio__progress .time{min-width:50px;font-size:12px;text-align:center}.nut-audio__progress .nut-range-button{width:8px;height:8px}.nut-audio .custom-button-group .nut-button--primary{margin:0 5px}.nut-audio .custom-button-group-disable .nut-button--primary{margin:0 5px;pointer-events:none}.nut-audio .disable{color:#00f}.nut-audio .nut-audio__none-container .nut-voice{border:1px solid var(--nutui-gray-1, #1a1a1a);align-items:center}

package/dist/esm/Audio.js

@@ -0,0 +1,257 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["className", "src", "style", "muted", "autoPlay", "loop", "preload", "type", "onBack", "onForward", "onPause", "onEnd", "onMute", "onCanPlay", "children"];
+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), true).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;
+}
+import React__default, { useState, useRef, useEffect } from "react";
+import { Service } from "@nutui/icons-react";
+import classNames from "classnames";
+import Range from "./Range.js";
+import Button from "./Button.js";
+import { useConfig } from "./ConfigProvider.js";
+import { C as ComponentDefaults } from "./typings.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  src: "",
+  muted: false,
+  autoPlay: false,
+  loop: false,
+  preload: "auto",
+  type: "progress",
+  onBack: function onBack(e) {
+  },
+  onForward: function onForward(e) {
+  },
+  onPause: function onPause(e) {
+  },
+  onEnd: function onEnd(e) {
+  },
+  onMute: function onMute(e) {
+  },
+  onCanPlay: function onCanPlay(e) {
+  }
+});
+var Audio = function Audio2(props) {
+  var _useConfig = useConfig(), locale = _useConfig.locale;
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), className = _defaultProps$props.className, src = _defaultProps$props.src, style = _defaultProps$props.style, muted = _defaultProps$props.muted, autoPlay = _defaultProps$props.autoPlay, loop = _defaultProps$props.loop, preload = _defaultProps$props.preload, type = _defaultProps$props.type, onBack2 = _defaultProps$props.onBack, onForward2 = _defaultProps$props.onForward, onPause2 = _defaultProps$props.onPause, onEnd2 = _defaultProps$props.onEnd, onMute2 = _defaultProps$props.onMute, onCanPlay2 = _defaultProps$props.onCanPlay, children = _defaultProps$props.children, rest = _objectWithoutProperties(_defaultProps$props, _excluded);
+  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), playing = _useState2[0], setPlaying = _useState2[1];
+  var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), percent = _useState4[0], setPercent = _useState4[1];
+  var _useState5 = useState(false), _useState6 = _slicedToArray(_useState5, 2), isCanPlay = _useState6[0], setIsCanPlay = _useState6[1];
+  var _useState7 = useState("00:00:00"), _useState8 = _slicedToArray(_useState7, 2), currentDuration = _useState8[0], setCurrentDuration = _useState8[1];
+  var AudioRef = useRef(null);
+  var statusRef = useRef({
+    currentTime: 0,
+    currentDuration: "00:00:00",
+    percent: 0,
+    duration: "00:00:00",
+    second: 0,
+    hanMuted: props.muted,
+    playing: props.autoPlay,
+    handPlaying: false
+  });
+  var classPrefix = "nut-audio";
+  var warn = console.warn;
+  var handleEnded = function handleEnded2(e) {
+    if (props.loop) {
+      warn(locale.audio.tips || "onPlayEnd事件在loop=false时才会触发");
+    } else {
+      props.onEnd && props.onEnd(e);
+    }
+  };
+  function watch() {
+    if (AudioRef && AudioRef.current) {
+      var current = AudioRef.current;
+      current.addEventListener("play", function() {
+        setPlaying(true);
+      });
+    }
+  }
+  useEffect(function() {
+    watch();
+  }, []);
+  useEffect(function() {
+  }, [currentDuration]);
+  var handleStatusChange = function handleStatusChange2() {
+    setPlaying(!playing);
+    if (playing) {
+      AudioRef && AudioRef.current && AudioRef.current.pause();
+    } else {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+  };
+  var renderIcon = function renderIcon2() {
+    return React__default.createElement("div", {
+      className: "".concat(classPrefix, "__icon")
+    }, React__default.createElement("div", {
+      className: classNames("".concat(classPrefix, "__icon-box"), playing ? "".concat(classPrefix, "__icon-play") : "".concat(classPrefix, "__icon-stop")),
+      onClick: handleStatusChange
+    }, React__default.createElement(Service, {
+      className: playing ? "nut-icon-loading" : ""
+    })));
+  };
+  var handleBack = function handleBack2() {
+    if (statusRef.current.currentTime > 0 && AudioRef.current) {
+      statusRef.current.currentTime--;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onBack && props.onBack(AudioRef.current);
+    }
+  };
+  var handleForward = function handleForward2() {
+    if (AudioRef.current) {
+      statusRef.current.currentTime++;
+      AudioRef.current.currentTime = statusRef.current.currentTime;
+      props.onForward && props.onForward(AudioRef.current);
+    }
+  };
+  var handleMute = function handleMute2() {
+    if (AudioRef.current) {
+      AudioRef.current.muted = !AudioRef.current.muted;
+      props.onMute && props.onMute(AudioRef.current);
+    }
+  };
+  var handlePause = function handlePause2(e) {
+    setPlaying(false);
+    props.onPause && props.onPause(e);
+  };
+  var formatSeconds = function formatSeconds2(value) {
+    if (!value) {
+      return "00:00:00";
+    }
+    var time = parseInt(value);
+    var hours = Math.floor(time / 3600);
+    var minutes = Math.floor((time - hours * 3600) / 60);
+    var seconds = time - hours * 3600 - minutes * 60;
+    var result = "";
+    result += "".concat("0".concat(hours.toString()).slice(-2), ":");
+    result += "".concat("0".concat(minutes.toString()).slice(-2), ":");
+    result += "0".concat(seconds.toString()).slice(-2);
+    return result;
+  };
+  var renderProgerss = function renderProgerss2() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: "".concat(classPrefix, "__progress")
+    }, React__default.createElement("div", {
+      className: "time"
+    }, currentDuration), React__default.createElement("div", {
+      className: "".concat(classPrefix, "__progress-bar-wrapper")
+    }, React__default.createElement(Range, {
+      value: percent,
+      onChange: function onChange(val) {
+        return setPercent(val);
+      },
+      currentDescription: null,
+      maxDescription: null,
+      minDescription: null,
+      "inactive-color": "#cccccc",
+      "active-color": "#fa2c19"
+    })), React__default.createElement("div", {
+      className: "time"
+    }, AudioRef.current ? formatSeconds("".concat(statusRef.current.second)) : "00:00:00")), React__default.createElement("div", {
+      className: isCanPlay ? "custom-button-group" : "custom-button-group-disable"
+    }, React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "back",
+      onClick: handleBack
+    }, locale.audio.back || "快退"), React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      className: "start",
+      onClick: handleStatusChange
+    }, playing ? "".concat(locale.audio.pause || "暂停") : "".concat(locale.audio.start || "开始")), React__default.createElement(Button, {
+      type: "primary",
+      size: "small",
+      onClick: handleForward
+    }, locale.audio.forward || "快进"), React__default.createElement(Button, {
+      type: AudioRef.current && AudioRef.current.muted ? "default" : "primary",
+      size: "small",
+      onClick: handleMute
+    }, locale.audio.mute || "静音")));
+  };
+  var renderNone = function renderNone2() {
+    return React__default.createElement("div", {
+      className: "".concat(classPrefix, "__none-container"),
+      onClick: handleStatusChange
+    }, children);
+  };
+  var renderAudio = function renderAudio2() {
+    switch (type) {
+      case "icon":
+        return renderIcon();
+      case "progress":
+        return renderProgerss();
+      case "none":
+        return renderNone();
+      default:
+        return null;
+    }
+  };
+  var handleCanplay = function handleCanplay2(e) {
+    setIsCanPlay(true);
+    if (props.autoPlay && !playing) {
+      AudioRef && AudioRef.current && AudioRef.current.play();
+    }
+    if (AudioRef.current) {
+      statusRef.current.second = AudioRef.current.duration || 0;
+      props.onCanPlay && props.onCanPlay(e);
+    }
+  };
+  var onTimeupdate = function onTimeupdate2(e) {
+    var time = parseInt(e.target.currentTime);
+    var formated = formatSeconds("".concat(time));
+    statusRef.current.currentDuration = formated;
+    setPercent(time / statusRef.current.second * 100);
+    setCurrentDuration(formated);
+    statusRef.current.currentTime = time;
+  };
+  return React__default.createElement("div", _objectSpread({
+    className: classNames(classPrefix, className),
+    style
+  }, rest), renderAudio(), React__default.createElement("audio", {
+    className: "audioMain",
+    controls: type === "controls",
+    ref: AudioRef,
+    src,
+    muted,
+    preload,
+    loop,
+    onPause: function onPause3(e) {
+      return handlePause(e);
+    },
+    onEnded: function onEnded(e) {
+      return handleEnded(e);
+    },
+    onCanPlay: function onCanPlay3(e) {
+      return handleCanplay(e);
+    },
+    onTimeUpdate: function onTimeUpdate(e) {
+      return onTimeupdate(e);
+    }
+  }, React__default.createElement("track", {
+    kind: "captions"
+  })));
+};
+Audio.defaultProps = defaultProps;
+Audio.displayName = "NutAudio";
+export {
+  Audio as default
+};

package/dist/esm/Avatar/style/css.js

@@ -0,0 +1 @@
+import './style.css'

package/dist/esm/Avatar/style/index.js

@@ -1,2 +1,2 @@
-require('../../AvatarGroup/style')
-require('../../../packages/avatar/avatar.scss')
+import '../../AvatarGroup/style'
+import '../../../packages/avatar/avatar.scss'