@nutui/nutui-react 2.0.0-alpha.1 → 2.0.0-alpha.11

package/dist/esm/Swiper.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "direction", "className", "pageContent", "onChange", "initPage", "paginationColor", "paginationVisible", "touchable", "isPreventDefault", "isStopPropagation", "autoPlay", "isCenter", "paginationBgColor"];
+var _excluded = ["children", "direction", "className", "onChange", "defaultValue", "indicator", "touchable", "preventDefault", "stopPropagation", "autoPlay", "center"];
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
   if (Object.getOwnPropertySymbols) {
@@ -26,35 +26,32 @@ function _objectSpread(target) {
 }
 import React__default, { useRef, useState, useMemo, useEffect } from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext3.js";
-import { c as cn } from "./bem.js";
+import { D as DataContext } from "./context3.js";
 import { g as getRect } from "./use-client-rect.js";
-import "@bem-react/classname";
+import Indicator from "./Indicator.js";
 var defaultProps = {
   width: (typeof window === "undefined" ? "undefined" : _typeof(window)) === "object" ? window.innerWidth : 375,
   height: 0,
   duration: 500,
-  initPage: 0,
+  defaultValue: 0,
   autoPlay: 0,
   direction: "horizontal",
-  paginationColor: "#fff",
-  paginationBgColor: "#ddd",
-  paginationVisible: false,
-  loop: true,
+  indicator: false,
+  loop: false,
   touchable: true,
-  isPreventDefault: true,
-  isStopPropagation: true,
-  isCenter: false,
+  preventDefault: true,
+  stopPropagation: true,
+  center: false,
   className: ""
 };
 var DISTANCE = 5;
 var Swiper = React__default.forwardRef(function(props, ref) {
-  var _classNames, _classNames2;
+  var _classNames;
   var propSwiper = _objectSpread(_objectSpread({}, defaultProps), props);
-  var children = propSwiper.children, direction = propSwiper.direction, className = propSwiper.className, pageContent = propSwiper.pageContent, onChange = propSwiper.onChange, initPage = propSwiper.initPage, paginationColor = propSwiper.paginationColor, paginationVisible = propSwiper.paginationVisible, touchable = propSwiper.touchable, isPreventDefault = propSwiper.isPreventDefault, isStopPropagation = propSwiper.isStopPropagation, autoPlay = propSwiper.autoPlay, isCenter = propSwiper.isCenter, paginationBgColor = propSwiper.paginationBgColor, rest = _objectWithoutProperties(propSwiper, _excluded);
+  var children = propSwiper.children, direction = propSwiper.direction, className = propSwiper.className, onChange = propSwiper.onChange, defaultValue = propSwiper.defaultValue, indicator = propSwiper.indicator, touchable = propSwiper.touchable, preventDefault = propSwiper.preventDefault, stopPropagation = propSwiper.stopPropagation, autoPlay = propSwiper.autoPlay, center = propSwiper.center, rest = _objectWithoutProperties(propSwiper, _excluded);
   var container = useRef(null);
   var innerRef = useRef(null);
-  var _swiper = useRef({
+  var swiperRef = useRef({
     moving: false,
     autoplayTimer: null,
     width: 0,
@@ -81,7 +78,7 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     stateDirection: "",
     delta: 0,
     touchTime: 0
-  }), _useState16 = _slicedToArray(_useState15, 2), touch = _useState16[0], setTouch = _useState16[1];
+  }), _useState16 = _slicedToArray(_useState15, 1), touch = _useState16[0];
   var _useMemo = useMemo(function() {
     var childCount2 = 0;
     var childs2 = React__default.Children.map(props.children, function(child) {
@@ -108,20 +105,20 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     return 0;
   }();
   var stopAutoPlay = function stopAutoPlay2() {
-    clearTimeout(_swiper.current.autoplayTimer);
-    _swiper.current.autoplayTimer = null;
+    clearTimeout(swiperRef.current.autoplayTimer);
+    swiperRef.current.autoplayTimer = null;
   };
-  var autoplay = function autoplay2() {
+  var startPlay = function startPlay2() {
     if (propSwiper.autoPlay <= 0 || childCount <= 1)
       return;
     stopAutoPlay();
-    _swiper.current.autoplayTimer = setTimeout(function() {
+    swiperRef.current.autoplayTimer = setTimeout(function() {
       next();
-      autoplay2();
+      startPlay2();
     }, Number(propSwiper.autoPlay));
   };
-  var resettPosition = function resettPosition2() {
-    _swiper.current.moving = true;
+  var resetPosition = function resetPosition2() {
+    swiperRef.current.moving = true;
     if (active <= -1) {
       move({
         pace: childCount
@@ -134,11 +131,11 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     }
   };
   var prev = function prev2() {
-    resettPosition();
-    touchReset();
+    resetPosition();
+    resetTouchDetails();
     requestFrame(function() {
       requestFrame(function() {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         move({
           pace: -1,
           isEmit: true
@@ -147,11 +144,11 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     });
   };
   var next = function next2() {
-    resettPosition();
-    touchReset();
+    resetPosition();
+    resetTouchDetails();
     requestFrame(function() {
       requestFrame(function() {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         move({
           pace: 1,
           isEmit: true
@@ -160,11 +157,11 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     });
   };
   var to = function to2(index) {
-    resettPosition();
-    touchReset();
+    resetPosition();
+    resetTouchDetails();
     requestFrame(function() {
       requestFrame(function() {
-        _swiper.current.moving = false;
+        swiperRef.current.moving = false;
         var targetIndex;
         if (props.loop && childCount === index) {
           targetIndex = active === 0 ? 0 : index;
@@ -241,7 +238,7 @@ var Swiper = React__default.forwardRef(function(props, ref) {
       return "vertical";
     return "";
   };
-  var touchReset = function touchReset2() {
+  var resetTouchDetails = function resetTouchDetails2() {
     touch.startX = 0;
     touch.startY = 0;
     touch.deltaX = 0;
@@ -253,11 +250,11 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     touch.touchTime = 0;
   };
   var touchStart = function touchStart2(e) {
-    touchReset();
+    resetTouchDetails();
     touch.startX = e.touches[0].clientX;
     touch.startY = e.touches[0].clientY;
   };
-  var touchMove = function touchMove2(e) {
+  var handleTouchMove = function handleTouchMove2(e) {
     touch.deltaX = e.touches[0].clientX - touch.startX;
     touch.deltaY = e.touches[0].clientY - touch.startY;
     touch.offsetX = Math.abs(touch.deltaX);
@@ -267,40 +264,39 @@ var Swiper = React__default.forwardRef(function(props, ref) {
       touch.stateDirection = getDirection(touch.offsetX, touch.offsetY);
     }
   };
-  var b = cn("swiper");
-  var classes = classNames(b(""));
-  var contentClass = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(b("inner")), true), _defineProperty(_classNames, "".concat(b("vertical")), isVertical), _classNames));
+  var classPrefix = "nut-swiper";
+  var contentClass = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(classPrefix, "__inner"), true), _defineProperty(_classNames, "".concat(classPrefix, "__vertical"), isVertical), _classNames));
   var getStyle = function getStyle2() {
     var moveOffset = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : offset;
     var target = innerRef.current;
     var _offset = 0;
-    if (!isCenter) {
+    if (!center) {
       _offset = moveOffset;
     } else {
       var _size = isVertical ? height : width;
       var val = isVertical ? rect.height - _size : rect.width - _size;
       _offset = moveOffset + (active === childCount - 1 && !props.loop ? -val / 2 : val / 2);
     }
-    target.style.transitionDuration = "".concat(_swiper.current.moving ? 0 : props.duration, "ms");
+    target.style.transitionDuration = "".concat(swiperRef.current.moving ? 0 : props.duration, "ms");
     target.style[isVertical ? "height" : "width"] = "".concat(Number(size) * childCount, "px");
     target.style[isVertical ? "width" : "height"] = "".concat(isVertical ? width : height, "px");
     target.style.transform = "translate3D".concat(!isVertical ? "(".concat(_offset, "px,0,0)") : "(0,".concat(_offset, "px,0)"));
   };
   var onTouchStart = function onTouchStart2(e) {
-    if (props.isPreventDefault)
+    if (props.preventDefault)
       e.preventDefault();
-    if (props.isStopPropagation)
+    if (props.stopPropagation)
       e.stopPropagation();
     if (!props.touchable)
       return;
     touchStart(e);
     touch.touchTime = Date.now();
     stopAutoPlay();
-    resettPosition();
+    resetPosition();
   };
   var onTouchMove = function onTouchMove2(e) {
-    if (props.touchable && _swiper.current.moving) {
-      touchMove(e);
+    if (props.touchable && swiperRef.current.moving) {
+      handleTouchMove(e);
       if (touch.stateDirection === props.direction) {
         move({
           offset: touch.delta
@@ -309,12 +305,12 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     }
   };
   var onTouchEnd = function onTouchEnd2(e) {
-    if (!props.touchable || !_swiper.current.moving)
+    if (!props.touchable || !swiperRef.current.moving)
       return;
     var speed = touch.delta / (Date.now() - touch.touchTime);
-    var isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta) > +(size / 2).toFixed(2);
+    var isShouldMove = Math.abs(speed) > 0.3 || Math.abs(touch.delta) > Number((size / 2).toFixed(2));
     var pace = 0;
-    _swiper.current.moving = false;
+    swiperRef.current.moving = false;
     if (isShouldMove && touch.stateDirection === props.direction) {
       var offset2 = isVertical ? touch.offsetY : touch.offsetX;
       if (props.loop) {
@@ -337,28 +333,28 @@ var Swiper = React__default.forwardRef(function(props, ref) {
     } else {
       getStyle();
     }
-    autoplay();
+    startPlay();
   };
   useEffect(function() {
-    _swiper.current.activePagination = (active + childCount) % childCount;
+    swiperRef.current.activeIndicator = (active + childCount) % childCount;
   }, [active]);
   var init = function init2() {
-    var active2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +propSwiper.initPage;
+    var active2 = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : +propSwiper.defaultValue;
     var rect2 = getRect(container === null || container === void 0 ? void 0 : container.current);
-    var _active = Math.max(Math.min(childCount - 1, active2), 0);
-    var _width = propSwiper.width ? +propSwiper.width : rect2.width;
-    var _height = propSwiper.height ? +propSwiper.height : rect2.height;
-    size = isVertical ? _height : _width;
+    var currentIndex = Math.max(Math.min(childCount - 1, active2), 0);
+    var width2 = +propSwiper.width || rect2.width;
+    var height2 = +propSwiper.height || rect2.height;
+    size = isVertical ? height2 : width2;
     trackSize = childCount * Number(size);
-    var targetOffset = getOffset(_active);
-    _swiper.current.moving = true;
+    var targetOffset = getOffset(currentIndex);
+    swiperRef.current.moving = true;
     if (ready) {
-      _swiper.current.moving = false;
+      swiperRef.current.moving = false;
     }
     setRect(rect2);
-    setActive(_active);
-    setWidth(_width);
-    setHeight(_height);
+    setActive(currentIndex);
+    setWidth(width2);
+    setHeight(height2);
     setOffset(targetOffset);
     setReady(true);
   };
@@ -370,19 +366,19 @@ var Swiper = React__default.forwardRef(function(props, ref) {
   useEffect(function() {
     if (ready) {
       stopAutoPlay();
-      autoplay();
+      startPlay();
     }
     return function() {
-      setReady(false);
+      return setReady(false);
     };
   }, [ready]);
   useEffect(function() {
     stopAutoPlay();
-    autoplay();
+    startPlay();
   }, [children]);
   useEffect(function() {
-    init();
-  }, [propSwiper.initPage]);
+    return init();
+  }, [propSwiper.defaultValue]);
   useEffect(function() {
     var target = container.current;
     target.addEventListener("touchstart", onTouchStart, false);
@@ -396,19 +392,17 @@ var Swiper = React__default.forwardRef(function(props, ref) {
   });
   useEffect(function() {
     return function() {
-      stopAutoPlay();
+      return stopAutoPlay();
     };
   }, []);
-  var itemStyle = function itemStyle2(index) {
+  var getItemStyle = function getItemStyle2(index) {
     var style = {};
-    var _direction = propSwiper.direction || direction;
-    var _size = size;
-    if (_size) {
-      style[_direction === "horizontal" ? "width" : "height"] = "".concat(_size, "px");
+    if (size) {
+      style[direction === "horizontal" ? "width" : "height"] = "".concat(size, "px");
     }
     var offset2 = childOffset[index];
     if (offset2) {
-      style.transform = "translate3D".concat(_direction === "horizontal" ? "(".concat(offset2, "px,0,0)") : "(0,".concat(offset2, "px,0)"));
+      style.transform = "translate3D".concat(direction === "horizontal" ? "(".concat(offset2, "px,0,0)") : "(0,".concat(offset2, "px,0)"));
     }
     return style;
   };
@@ -420,35 +414,36 @@ var Swiper = React__default.forwardRef(function(props, ref) {
       resize
     };
   });
+  var renderIndicator = function renderIndicator2() {
+    if (React__default.isValidElement(indicator))
+      return indicator;
+    if (indicator === true) {
+      var _classNames2;
+      return React__default.createElement("div", {
+        className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(classPrefix, "__indicator"), true), _defineProperty(_classNames2, "".concat(classPrefix, "__indicator-vertical"), isVertical), _classNames2))
+      }, React__default.createElement(Indicator, {
+        current: (active + childCount) % childCount,
+        total: childs === null || childs === void 0 ? void 0 : childs.length,
+        direction
+      }));
+    }
+    return null;
+  };
   return React__default.createElement(DataContext.Provider, {
     value: parent
   }, React__default.createElement("div", _objectSpread({
-    className: "".concat(classes, " ").concat(className),
+    className: classNames(classPrefix, className),
     ref: container
   }, rest), React__default.createElement("div", {
     className: contentClass,
     ref: innerRef
   }, React__default.Children.map(childs, function(child, index) {
     return React__default.createElement("div", {
-      className: b("item-wrapper"),
-      style: itemStyle(index),
+      className: "".concat(classPrefix, "__item-wrapper"),
+      style: getItemStyle(index),
       key: index
     }, child);
-  })), propSwiper.paginationVisible && !("pageContent" in propSwiper) ? React__default.createElement("div", {
-    className: classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(b("pagination")), true), _defineProperty(_classNames2, "".concat(b("pagination-vertical")), isVertical), _classNames2))
-  }, React__default.Children.map(childs, function(item, index) {
-    return React__default.createElement("i", {
-      style: (active + childCount) % childCount === index ? {
-        backgroundColor: propSwiper.paginationColor
-      } : {
-        backgroundColor: propSwiper.paginationBgColor
-      },
-      className: classNames({
-        active: (active + childCount) % childCount === index
-      }),
-      key: index
-    });
-  })) : React__default.createElement("div", null, pageContent)));
+  })), renderIndicator()));
 });
 Swiper.defaultProps = defaultProps;
 Swiper.displayName = "NutSwiper";

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

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

package/dist/esm/SwiperItem/style/style.css

@@ -0,0 +1 @@
+.nut-swiper-item{height:100%}

package/dist/esm/SwiperItem.js

@@ -22,7 +22,7 @@ function _objectSpread(target) {
 }
 import React__default, { useContext } from "react";
 import classNames from "classnames";
-import { D as DataContext } from "./UserContext3.js";
+import { D as DataContext } from "./context3.js";
 import { c as cn } from "./bem.js";
 import "@bem-react/classname";
 var defaultProps = {

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

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

package/dist/esm/Switch/style/style.css

@@ -0,0 +1 @@
+.nut-switch{cursor:pointer;display:flex;align-items:center;background-color:var(--nutui-switch-open-background-color, var(--nutui-brand-color, #fa2c19));border-radius:var(--nutui-switch-border-radius, 21px);background-size:100% 100%;background-repeat:no-repeat;background-position:center center;flex:0 0 auto}.nut-switch.switch-close{background-color:var(--nutui-switch-close-background-color, #ebebeb)}.nut-switch.switch-close .close-line{background:var(--nutui-switch-close-line-bg-color, #f0f0f0);border-radius:2px}.nut-switch .switch-button{display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--nutui-brand-text-color, #ffffff);transition:transform .3s}.nut-switch__label{color:var(--nutui-brand-text-color, #ffffff);font-size:var(--nutui-font-size-1, 12px)}.nut-switch__label.open{transform:translate(-16px)}.nut-switch__label.close{transform:translate(16px)}.nut-switch-disabled{opacity:.6}.nut-switch-base{width:var(--nutui-switch-width, 36px);height:var(--nutui-switch-height, 21px);line-height:var(--nutui-switch-line-height, 21px)}.nut-switch-base .switch-button{height:var(--nutui-switch-inside-height, 13px);width:var(--nutui-switch-inside-width, 13px);transform:var(--nutui-switch-inside-close-transform, translateX(30%))}.nut-switch-base.switch-open .switch-button{transform:var(--nutui-switch-inside-open-transform, translateX(146%))}.nut-switch-base.switch-close .close-line{width:8px;height:2px}

package/dist/esm/Switch.js

@@ -21,58 +21,44 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
+import React__default from "react";
 import { C as ComponentDefaults } from "./typings.js";
-import "@bem-react/classname";
+import { u as usePropsValue } from "./use-props-value.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
-  isAsync: false,
-  checked: false,
-  disable: false,
-  activeColor: "",
-  inactiveColor: "",
+  disabled: false,
   activeText: "",
-  inactiveText: "",
-  className: ""
+  inactiveText: ""
 });
 var Switch = function Switch2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), isAsync = _defaultProps$props.isAsync, checked = _defaultProps$props.checked, disable = _defaultProps$props.disable, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, activeText = _defaultProps$props.activeText, inactiveText = _defaultProps$props.inactiveText, onChange = _defaultProps$props.onChange, className = _defaultProps$props.className, style = _defaultProps$props.style;
-  var _useState = useState(false), _useState2 = _slicedToArray(_useState, 2), value = _useState2[0], setValue = _useState2[1];
-  var b = cn("switch");
-  useEffect(function() {
-    setValue(checked);
-  }, [checked]);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), checked = _defaultProps$props.checked, defaultChecked = _defaultProps$props.defaultChecked, disabled = _defaultProps$props.disabled, activeText = _defaultProps$props.activeText, inactiveText = _defaultProps$props.inactiveText, className = _defaultProps$props.className, style = _defaultProps$props.style, onChange = _defaultProps$props.onChange;
+  var classPrefix = "nut-switch";
+  var _usePropsValue = usePropsValue({
+    value: checked,
+    defaultValue: defaultChecked
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), value = _usePropsValue2[0], setValue = _usePropsValue2[1];
   var classes = function classes2() {
-    return "".concat(b(), " ").concat(value ? "switch-open" : "switch-close", " ").concat(disable ? "".concat(b(), "-disable") : "", " ", "".concat(b(), "-base"), " ").concat(className);
-  };
-  var styles = function styles2() {
-    var myStyle = _objectSpread({
-      backgroundColor: value ? activeColor : inactiveColor
-    }, style || {});
-    return myStyle;
+    return "".concat(classPrefix, " ").concat(value ? "switch-open" : "switch-close", " ").concat(disabled ? "".concat(classPrefix, "-disabled") : "", " ", "".concat(classPrefix, "-base"), " ").concat(className);
   };
   var _onClick = function onClick(event) {
-    if (disable)
+    if (disabled)
       return;
-    if (!isAsync) {
-      setValue(!value);
-    }
     onChange && onChange(!value, event);
+    setValue(!value);
   };
   return React__default.createElement("div", {
     className: classes(),
     onClick: function onClick(e) {
       return _onClick(e);
     },
-    style: styles()
+    style
   }, React__default.createElement("div", {
     className: "switch-button"
   }, !value && React__default.createElement("div", {
     className: "close-line"
   }), activeText && React__default.createElement(React__default.Fragment, null, value ? React__default.createElement("div", {
-    className: "".concat(b("label"), " open")
+    className: "".concat(classPrefix, "__label open")
   }, activeText) : React__default.createElement("div", {
-    className: "".concat(b("label"), " close")
+    className: "".concat(classPrefix, "__label close")
   }, inactiveText))));
 };
 Switch.defaultProps = defaultProps;

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

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

package/dist/esm/TabPane/style/style.css

@@ -0,0 +1 @@
+.nut-theme-dark .nut-tabpane{background:#0a0a0a}.nut-tabpane{width:100%;flex-shrink:0;display:block;background-color:var(--nutui-gray-6, #ffffff);color:var(--nutui-gray-1, #1a1a1a);padding:24px 20px;box-sizing:border-box;overflow:auto}.nut-tabpane.inactive{overflow:visible;height:0}

package/dist/esm/TabPane.js

@@ -1,8 +1,42 @@
-import { T as TabPane } from "./tabpane2.js";
-import "react";
-import "classnames";
-import "./bem.js";
-import "@bem-react/classname";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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 from "react";
+import classNames from "classnames";
+var defaultProps = {
+  title: "",
+  value: "",
+  disabled: false
+};
+var TabPane = function TabPane2(props) {
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, autoHeightClassName = _defaultProps$props.autoHeightClassName, className = _defaultProps$props.className, disabled = _defaultProps$props.disabled;
+  var classPrefix = "nut-tabpane";
+  var classes = classNames({
+    active: !disabled && props.active
+  }, classPrefix, autoHeightClassName, className);
+  return children ? React__default.createElement("div", {
+    className: classes
+  }, !disabled && children) : null;
+};
 export {
   TabPane as default
 };

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

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

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

@@ -1,2 +1,2 @@
-
+import '../../TabbarItem/style'
 import '../../../packages/tabbar/tabbar.scss'

package/dist/esm/Tabbar/style/style.css

@@ -0,0 +1 @@
+.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-1, #1a1a1a));height:100%}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-brand-color, #fa2c19))}.nut-tabbar-item__icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item__icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-0, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item__icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-3, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px)}.nut-tabbar{border:0px;box-shadow:var(--nutui-tabbar-box-shadow, none);border-bottom:var(--nutui-tabbar-border-bottom, 1px solid #eee);border-top:var(--nutui-tabbar-border-top, 1px solid #eee);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;box-sizing:border-box;background:var(--nutui-gray-6, #ffffff)}.nut-tabbar__wrap{width:100%;height:var(--nutui-tabbar-height, 50px);display:flex;flex-direction:row;justify-content:center;align-items:center}.nut-tabbar:last-child{border-right:0}.nut-tabbar__fixed{position:fixed;bottom:0px;left:0px}.nut-tabbar__safe-area{display:block;width:100%;padding-bottom:constant(safe-area-inset-bottom);padding-bottom:env(safe-area-inset-bottom)}

package/dist/esm/Tabbar.js

@@ -21,38 +21,35 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useEffect } from "react";
-import { c as cn } from "./bem.js";
-import "@bem-react/classname";
-var defaultProps = {
-  visible: 0,
-  bottom: false,
-  size: 20,
-  unactiveColor: "",
+import React__default from "react";
+import classNames from "classnames";
+import { C as ComponentDefaults } from "./typings.js";
+import { u as usePropsValue } from "./use-props-value.js";
+import { T as TabbarItem } from "./tabbaritem2.js";
+import "./badge2.js";
+var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
+  defaultValue: 0,
+  fixed: false,
+  inactiveColor: "",
   activeColor: "",
-  safeAreaInsetBottom: false,
-  className: "",
-  style: {},
-  onSwitch: function onSwitch(child, activeVisible) {
+  safeArea: false,
+  onSwitch: function onSwitch(value) {
   }
-};
+});
 var Tabbar = function Tabbar2(props) {
-  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, visible = _defaultProps$props.visible, activeVisible = _defaultProps$props.activeVisible, bottom = _defaultProps$props.bottom, size = _defaultProps$props.size, activeColor = _defaultProps$props.activeColor, unactiveColor = _defaultProps$props.unactiveColor, safeAreaInsetBottom = _defaultProps$props.safeAreaInsetBottom, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
-  var b = cn("tabbar");
-  var _useState = useState(activeVisible || visible), _useState2 = _slicedToArray(_useState, 2), selectIndex = _useState2[0], setSelectIndex = _useState2[1];
-  var _handleClick = function handleClick(idx) {
-    if (!("activeVisible" in props)) {
-      setSelectIndex(idx);
-    }
-  };
-  useEffect(function() {
-    if (activeVisible !== void 0) {
-      setSelectIndex(activeVisible);
-    }
-  }, [activeVisible]);
+  var _defaultProps$props = _objectSpread(_objectSpread({}, defaultProps), props), children = _defaultProps$props.children, defaultValue = _defaultProps$props.defaultValue, value = _defaultProps$props.value, fixed = _defaultProps$props.fixed, activeColor = _defaultProps$props.activeColor, inactiveColor = _defaultProps$props.inactiveColor, safeArea = _defaultProps$props.safeArea, className = _defaultProps$props.className, style = _defaultProps$props.style, onSwitch2 = _defaultProps$props.onSwitch;
+  var classPrefix = "nut-tabbar";
+  var _usePropsValue = usePropsValue({
+    value,
+    defaultValue,
+    finalValue: 0,
+    onChange: onSwitch2
+  }), _usePropsValue2 = _slicedToArray(_usePropsValue, 2), selectIndex = _usePropsValue2[0], setSelectIndex = _usePropsValue2[1];
   return React__default.createElement("div", {
-    className: ["".concat(b()), bottom ? "".concat(b("bottom")) : "", safeAreaInsetBottom ? "".concat(b("bottom"), " ").concat(b("safebottom")) : "", className].join(" "),
+    className: classNames(classPrefix, className, _defineProperty({}, "".concat(classPrefix, "__fixed"), fixed)),
     style
+  }, React__default.createElement("div", {
+    className: "".concat(classPrefix, "__wrap")
   }, React__default.Children.map(children, function(child, idx) {
     if (!React__default.isValidElement(child)) {
       return null;
@@ -60,19 +57,18 @@ var Tabbar = function Tabbar2(props) {
     var childProps = _objectSpread(_objectSpread({}, child.props), {}, {
       active: idx === selectIndex,
       index: idx,
-      unactiveColor,
+      inactiveColor,
       activeColor,
-      size,
-      handleClick: function handleClick() {
-        _handleClick(idx);
-        onSwitch2(child, idx);
-      }
+      handleClick: setSelectIndex
     });
     return React__default.cloneElement(child, childProps);
+  })), (fixed || safeArea) && React__default.createElement("div", {
+    className: "".concat(classPrefix, "__safe-area")
   }));
 };
 Tabbar.defaultProps = defaultProps;
 Tabbar.displayName = "NutTabbar";
+Tabbar.Item = TabbarItem;
 export {
   Tabbar as default
 };

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

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

package/dist/esm/TabbarItem/style/style.css

@@ -0,0 +1 @@
+.nut-tabbar-item{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;text-align:center;text-decoration:none;color:var(--nutui-tabbar-inactive-color, var(--nutui-gray-1, #1a1a1a));height:100%}.nut-tabbar-item-active{color:var(--nutui-tabbar-active-color, var(--nutui-brand-color, #fa2c19))}.nut-tabbar-item__icon-box{padding:0;display:flex;flex-direction:column;align-items:center;position:relative}.nut-tabbar-item__icon-box-nav{display:block;font-size:var(--nutui-tabbar-text-font-size, var(--nutui-font-size-0, 10px));margin-top:var(--nutui-tabbar-text-margin-top, 3px)}.nut-tabbar-item__icon-box-large{font-size:var(--nutui-tabbar-text-large-font-size, var(--nutui-font-size-3, 16px));margin-top:0;line-height:var(--nutui-tabbar-text-line-height, 20px)}