@nutui/nutui-react 3.0.0-beta.11 → 3.0.0-beta.13

package/dist/cjs/packages/nutui.react.scss.d.ts

@@ -1,104 +1,105 @@
-import "./button/button.scss";
-import "./cell/cell.scss";
-import "./cellgroup/cellgroup.scss";
-import "./configprovider/configprovider.scss";
-import "./image/image.scss";
-import "./overlay/overlay.scss";
-import "./col/col.scss";
-import "./divider/divider.scss";
-import "./grid/grid.scss";
-import "./griditem/griditem.scss";
-import "./layout/layout.scss";
-import "./row/row.scss";
-import "./space/space.scss";
-import "./sticky/sticky.scss";
-import "./safearea/safearea.scss";
-import "./backtop/backtop.scss";
-import "./elevator/elevator.scss";
-import "./fixednav/fixednav.scss";
-import "./hoverbutton/hoverbutton.scss";
-import "./hoverbuttonitem/hoverbuttonitem.scss";
-import "./navbar/navbar.scss";
-import "./sidenavbar/sidenavbar.scss";
-import "./sidebar/sidebar.scss";
-import "./sidenavbaritem/sidenavbaritem.scss";
-import "./subsidenavbar/subsidenavbar.scss";
-import "./tabbar/tabbar.scss";
-import "./tabbaritem/tabbaritem.scss";
-import "./tabpane/tabpane.scss";
-import "./tabs/tabs.scss";
-import "./address/address.scss";
-import "./calendar/calendar.scss";
-import "./calendaritem/calendaritem.scss";
-import "./calendarcard/calendarcard.scss";
-import "./cascader/cascader.scss";
-import "./checkbox/checkbox.scss";
-import "./checkboxgroup/checkboxgroup.scss";
-import "./datepicker/datepicker.scss";
-import "./form/form.scss";
-import "./formitem/formitem.scss";
-import "./input/input.scss";
-import "./inputnumber/inputnumber.scss";
-import "./menu/menu.scss";
-import "./menuitem/menuitem.scss";
-import "./numberkeyboard/numberkeyboard.scss";
-import "./picker/picker.scss";
-import "./radio/radio.scss";
-import "./radiogroup/radiogroup.scss";
-import "./range/range.scss";
-import "./rate/rate.scss";
-import "./searchbar/searchbar.scss";
-import "./shortpassword/shortpassword.scss";
-import "./signature/signature.scss";
-import "./switch/switch.scss";
-import "./textarea/textarea.scss";
-import "./uploader/uploader.scss";
-import "./actionsheet/actionsheet.scss";
-import "./badge/badge.scss";
-import "./dialog/dialog.scss";
-import "./drag/drag.scss";
-import "./empty/empty.scss";
-import "./resultpage/resultpage.scss";
-import "./infiniteloading/infiniteloading.scss";
-import "./loading/loading.scss";
-import "./noticebar/noticebar.scss";
-import "./notify/notify.scss";
-import "./popover/popover.scss";
-import "./popup/popup.scss";
-import "./pulltorefresh/pulltorefresh.scss";
-import "./skeleton/skeleton.scss";
-import "./swipe/swipe.scss";
-import "./toast/toast.scss";
-import "./animate/animate.scss";
-import "./animatingnumbers/animatingnumbers.scss";
-import "./audio/audio.scss";
-import "./avatar/avatar.scss";
-import "./avatargroup/avatargroup.scss";
-import "./circleprogress/circleprogress.scss";
-import "./collapse/collapse.scss";
-import "./collapseitem/collapseitem.scss";
-import "./countdown/countdown.scss";
-import "./ellipsis/ellipsis.scss";
-import "./imagepreview/imagepreview.scss";
-import "./indicator/indicator.scss";
-import "./lottie/lottie.scss";
-import "./pagination/pagination.scss";
-import "./segmented/segmented.scss";
-import "./price/price.scss";
-import "./progress/progress.scss";
-import "./step/step.scss";
-import "./steps/steps.scss";
-import "./swiper/swiper.scss";
-import "./swiperitem/swiperitem.scss";
-import "./table/table.scss";
-import "./tag/tag.scss";
-import "./tour/tour.scss";
-import "./video/video.scss";
-import "./virtuallist/virtuallist.scss";
-import "./barrage/barrage.scss";
-import "./card/card.scss";
-import "./timedetail/timedetail.scss";
-import "./timeselect/timeselect.scss";
-import "./trendarrow/trendarrow.scss";
-import "./watermark/watermark.scss";
-import "./avatarcropper/avatarcropper.scss";
+import "../../../src/packages/button/button.scss";
+import "../../../src/packages/cell/cell.scss";
+import "../../../src/packages/cellgroup/cellgroup.scss";
+import "../../../src/packages/configprovider/configprovider.scss";
+import "../../../src/packages/image/image.scss";
+import "../../../src/packages/overlay/overlay.scss";
+import "../../../src/packages/col/col.scss";
+import "../../../src/packages/divider/divider.scss";
+import "../../../src/packages/grid/grid.scss";
+import "../../../src/packages/griditem/griditem.scss";
+import "../../../src/packages/layout/layout.scss";
+import "../../../src/packages/row/row.scss";
+import "../../../src/packages/space/space.scss";
+import "../../../src/packages/sticky/sticky.scss";
+import "../../../src/packages/safearea/safearea.scss";
+import "../../../src/packages/backtop/backtop.scss";
+import "../../../src/packages/elevator/elevator.scss";
+import "../../../src/packages/fixednav/fixednav.scss";
+import "../../../src/packages/hoverbutton/hoverbutton.scss";
+import "../../../src/packages/hoverbuttonitem/hoverbuttonitem.scss";
+import "../../../src/packages/navbar/navbar.scss";
+import "../../../src/packages/sidenavbar/sidenavbar.scss";
+import "../../../src/packages/sidebar/sidebar.scss";
+import "../../../src/packages/sidenavbaritem/sidenavbaritem.scss";
+import "../../../src/packages/subsidenavbar/subsidenavbar.scss";
+import "../../../src/packages/tabbar/tabbar.scss";
+import "../../../src/packages/tabbaritem/tabbaritem.scss";
+import "../../../src/packages/tabpane/tabpane.scss";
+import "../../../src/packages/tabs/tabs.scss";
+import "../../../src/packages/address/address.scss";
+import "../../../src/packages/calendar/calendar.scss";
+import "../../../src/packages/calendaritem/calendaritem.scss";
+import "../../../src/packages/calendarcard/calendarcard.scss";
+import "../../../src/packages/cascader/cascader.scss";
+import "../../../src/packages/checkbox/checkbox.scss";
+import "../../../src/packages/checkboxgroup/checkboxgroup.scss";
+import "../../../src/packages/datepicker/datepicker.scss";
+import "../../../src/packages/form/form.scss";
+import "../../../src/packages/formitem/formitem.scss";
+import "../../../src/packages/input/input.scss";
+import "../../../src/packages/inputnumber/inputnumber.scss";
+import "../../../src/packages/menu/menu.scss";
+import "../../../src/packages/menuitem/menuitem.scss";
+import "../../../src/packages/numberkeyboard/numberkeyboard.scss";
+import "../../../src/packages/picker/picker.scss";
+import "../../../src/packages/pickerview/pickerview.scss";
+import "../../../src/packages/radio/radio.scss";
+import "../../../src/packages/radiogroup/radiogroup.scss";
+import "../../../src/packages/range/range.scss";
+import "../../../src/packages/rate/rate.scss";
+import "../../../src/packages/searchbar/searchbar.scss";
+import "../../../src/packages/shortpassword/shortpassword.scss";
+import "../../../src/packages/signature/signature.scss";
+import "../../../src/packages/switch/switch.scss";
+import "../../../src/packages/textarea/textarea.scss";
+import "../../../src/packages/uploader/uploader.scss";
+import "../../../src/packages/actionsheet/actionsheet.scss";
+import "../../../src/packages/badge/badge.scss";
+import "../../../src/packages/dialog/dialog.scss";
+import "../../../src/packages/drag/drag.scss";
+import "../../../src/packages/empty/empty.scss";
+import "../../../src/packages/resultpage/resultpage.scss";
+import "../../../src/packages/infiniteloading/infiniteloading.scss";
+import "../../../src/packages/loading/loading.scss";
+import "../../../src/packages/noticebar/noticebar.scss";
+import "../../../src/packages/notify/notify.scss";
+import "../../../src/packages/popover/popover.scss";
+import "../../../src/packages/popup/popup.scss";
+import "../../../src/packages/pulltorefresh/pulltorefresh.scss";
+import "../../../src/packages/skeleton/skeleton.scss";
+import "../../../src/packages/swipe/swipe.scss";
+import "../../../src/packages/toast/toast.scss";
+import "../../../src/packages/animate/animate.scss";
+import "../../../src/packages/animatingnumbers/animatingnumbers.scss";
+import "../../../src/packages/audio/audio.scss";
+import "../../../src/packages/avatar/avatar.scss";
+import "../../../src/packages/avatargroup/avatargroup.scss";
+import "../../../src/packages/circleprogress/circleprogress.scss";
+import "../../../src/packages/collapse/collapse.scss";
+import "../../../src/packages/collapseitem/collapseitem.scss";
+import "../../../src/packages/countdown/countdown.scss";
+import "../../../src/packages/ellipsis/ellipsis.scss";
+import "../../../src/packages/imagepreview/imagepreview.scss";
+import "../../../src/packages/indicator/indicator.scss";
+import "../../../src/packages/lottie/lottie.scss";
+import "../../../src/packages/pagination/pagination.scss";
+import "../../../src/packages/segmented/segmented.scss";
+import "../../../src/packages/price/price.scss";
+import "../../../src/packages/progress/progress.scss";
+import "../../../src/packages/step/step.scss";
+import "../../../src/packages/steps/steps.scss";
+import "../../../src/packages/swiper/swiper.scss";
+import "../../../src/packages/swiperitem/swiperitem.scss";
+import "../../../src/packages/table/table.scss";
+import "../../../src/packages/tag/tag.scss";
+import "../../../src/packages/tour/tour.scss";
+import "../../../src/packages/video/video.scss";
+import "../../../src/packages/virtuallist/virtuallist.scss";
+import "../../../src/packages/barrage/barrage.scss";
+import "../../../src/packages/card/card.scss";
+import "../../../src/packages/timedetail/timedetail.scss";
+import "../../../src/packages/timeselect/timeselect.scss";
+import "../../../src/packages/trendarrow/trendarrow.scss";
+import "../../../src/packages/watermark/watermark.scss";
+import "../../../src/packages/avatarcropper/avatarcropper.scss";

package/dist/cjs/packages/nutui.react.scss.js

@@ -47,6 +47,7 @@ require("./menu/menu.scss");
 require("./menuitem/menuitem.scss");
 require("./numberkeyboard/numberkeyboard.scss");
 require("./picker/picker.scss");
+require("./pickerview/pickerview.scss");
 require("./radio/radio.scss");
 require("./radiogroup/radiogroup.scss");
 require("./range/range.scss");

package/dist/cjs/packages/overlay/index.d.ts

@@ -1,3 +1,3 @@
 import { Overlay } from './overlay';
-export type { OverlayProps } from './overlay';
+export type { OverlayProps } from './types';
 export default Overlay;

package/dist/cjs/packages/overlay/overlay.d.ts

@@ -1,14 +1,4 @@
-import React, { FunctionComponent, MouseEvent } from 'react';
-import { BasicComponent } from "../../utils/typings";
-export interface OverlayProps extends BasicComponent {
-    zIndex: number;
-    duration: number;
-    closeOnOverlayClick: boolean;
-    visible: boolean;
-    lockScroll: boolean | 'strict';
-    onClick: (event: MouseEvent) => void;
-    afterShow: () => void;
-    afterClose: () => void;
-}
+import React, { FunctionComponent } from 'react';
+import { OverlayProps } from './types';
 export declare const defaultOverlayProps: OverlayProps;
 export declare const Overlay: FunctionComponent<Partial<OverlayProps> & React.HTMLAttributes<HTMLDivElement>>;

package/dist/cjs/packages/overlay/overlay.js

@@ -26,14 +26,16 @@ var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _reacttransitiongroup = require("react-transition-group");
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _typings = require("../../utils/typings");
-var _uselockscroll = require("../../utils/use-lock-scroll");
+var _uselockscroll = require("../../hooks/use-lock-scroll");
 var defaultOverlayProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     zIndex: 1000,
     duration: 300,
     closeOnOverlayClick: true,
     visible: false,
     lockScroll: true,
-    onClick: function onClick(event) {}
+    onClick: function onClick() {},
+    afterShow: function afterShow() {},
+    afterClose: function afterClose() {}
 });
 var Overlay = function Overlay(props) {
     var _ref = (0, _object_spread._)({}, defaultOverlayProps, props), children = _ref.children, zIndex = _ref.zIndex, duration = _ref.duration, className = _ref.className, closeOnOverlayClick = _ref.closeOnOverlayClick, visible = _ref.visible, lockScroll = _ref.lockScroll, style = _ref.style, afterShow = _ref.afterShow, afterClose = _ref.afterClose, onClick = _ref.onClick, rest = (0, _object_without_properties._)(_ref, [
@@ -49,41 +51,33 @@ var Overlay = function Overlay(props) {
         "afterClose",
         "onClick"
     ]);
-    var classPrefix = "nut-overlay";
+    var classPrefix = 'nut-overlay';
     var _useState = (0, _sliced_to_array._)((0, _react.useState)(visible), 2), innerVisible = _useState[0], setInnerVisible = _useState[1];
     var nodeRef = (0, _react.useRef)(null);
     (0, _react.useEffect)(function() {
-        if (visible) {
-            setInnerVisible(true);
-        } else {
-            setInnerVisible(false);
-        }
+        setInnerVisible(visible);
     }, [
         visible
     ]);
     var shouldLockScroll = !innerVisible ? false : lockScroll;
     (0, _uselockscroll.useLockScroll)(nodeRef, shouldLockScroll);
     var classes = (0, _classnames.default)(classPrefix, className);
-    var styles = (0, _object_spread._)({}, style);
+    var styles = (0, _object_spread_props._)((0, _object_spread._)({}, style), {
+        zIndex: zIndex
+    });
     var handleClick = function handleClick(e) {
         if (closeOnOverlayClick) {
             onClick && onClick(e);
         }
     };
-    var onHandleOpened = function onHandleOpened(e) {
-        afterShow && afterShow();
-    };
-    var onHandleClosed = function onHandleClosed(e) {
-        afterClose && afterClose();
-    };
     return /*#__PURE__*/ _react.default.createElement(_reacttransitiongroup.CSSTransition, {
         nodeRef: nodeRef,
         classNames: "".concat(classPrefix, "-slide"),
         unmountOnExit: true,
         timeout: duration,
         in: innerVisible,
-        onEntered: onHandleOpened,
-        onExited: onHandleClosed
+        onEntered: afterShow,
+        onExited: afterClose
     }, /*#__PURE__*/ _react.default.createElement("div", (0, _object_spread_props._)((0, _object_spread._)({
         ref: nodeRef,
         className: classes,

package/dist/cjs/packages/overlay/style/overlay.scss

@@ -1,10 +1,5 @@
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;

package/dist/cjs/packages/overlay/style/style.css

@@ -3,19 +3,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 

package/dist/cjs/packages/overlay/types.d.ts

@@ -0,0 +1,11 @@
+import { BasicComponent } from "../../../../src/utils/typings";
+export interface OverlayProps extends BasicComponent {
+    zIndex: number;
+    duration: number;
+    closeOnOverlayClick: boolean;
+    visible: boolean;
+    lockScroll: boolean;
+    onClick: (event: React.MouseEvent) => void;
+    afterShow: () => void;
+    afterClose: () => void;
+}

package/dist/cjs/packages/overlay/types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/packages/pagination/pagination.d.ts

@@ -1,5 +1,5 @@
 import React, { FunctionComponent, ReactNode } from 'react';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export interface PaginationProps extends BasicComponent {
     defaultValue: number;
     value: number;

package/dist/cjs/packages/pagination/pagination.js

@@ -18,7 +18,7 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
 var _configprovider = require("../configprovider");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     defaultValue: 1,

package/dist/cjs/packages/pagination/style/style.css

@@ -6,7 +6,7 @@
   display: flex;
   flex-direction: row;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-prev,
@@ -20,10 +20,10 @@
   align-items: center;
   justify-content: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
   background: #ffffff;
   border-radius: var(--nutui-pagination-item-border-radius, 2px);
-  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-black-3));
+  border: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   cursor: pointer;
 }
 
@@ -45,13 +45,13 @@
 .nut-pagination-item-active {
   color: #ffffff;
   border-width: 0;
-  background-color: var(--nutui-brand-6);
+  background-color: var(--nutui-color-primary, #ff0f23);
 }
 
 .nut-pagination-item-disabled,
 .nut-pagination-next-disabled,
 .nut-pagination-prev-disabled {
-  color: var(--nutui-pagination-disable-color, var(--nutui-gray-4));
+  color: var(--nutui-pagination-disable-color, var(--nutui-color-text-disabled, #c2c4cc));
   background-color: var(--nutui-pagination-disable-background-color, #f7f8fa);
   cursor: not-allowed;
 }
@@ -62,11 +62,11 @@
   line-height: 39px;
   text-align: center;
   font-size: var(--nutui-pagination-font-size, var(--nutui-font-size-base, 14px));
-  color: var(--nutui-pagination-color, var(--nutui-brand-6));
+  color: var(--nutui-pagination-color, var(--nutui-color-primary, #ff0f23));
 }
 
 .nut-pagination-simple-border {
-  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-black-3));
+  border-right: var(--nutui-pagination-item-border-width, 1px) solid var(--nutui-pagination-item-border-color, var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
 }
 
 .nut-pagination-lite {

package/dist/cjs/packages/picker/picker.d.ts

@@ -1,7 +1,7 @@
 import React, { RefObject } from 'react';
-import { PopupProps } from "../popup/popup";
+import { PopupProps } from "../../../../src/packages/popup/index";
 import { PickerOption } from './types';
-import { BasicComponent } from "../../utils/typings";
+import { BasicComponent } from "../../../../src/utils/typings";
 export type PickerActions = {
     open: () => void;
     close: () => void;

package/dist/cjs/packages/picker/picker.js

@@ -17,12 +17,12 @@ var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 var _classnames = /*#__PURE__*/ _interop_require_default._(require("classnames"));
-var _popup = require("../popup/popup");
+var _index = /*#__PURE__*/ _interop_require_default._(require("../popup/index"));
 var _safearea = require("../safearea/safearea");
 var _pickerpanel = /*#__PURE__*/ _interop_require_default._(require("./pickerpanel"));
-var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../utils/use-refs"));
+var _userefs = /*#__PURE__*/ _interop_require_default._(require("../../hooks/use-refs"));
 var _configprovider = require("../configprovider");
-var _usepropsvalue = require("../../utils/use-props-value");
+var _usepropsvalue = require("../../hooks/use-props-value");
 var _typings = require("../../utils/typings");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     title: '',
@@ -261,7 +261,7 @@ var InternalPicker = function InternalPicker(props, ref) {
             }
         }, locale.confirm));
     };
-    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, typeof children === 'function' && children(selectedValue), /*#__PURE__*/ _react.default.createElement(_popup.Popup, (0, _object_spread_props._)((0, _object_spread._)({}, popupProps), {
+    return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, typeof children === 'function' && children(selectedValue), /*#__PURE__*/ _react.default.createElement(_index.default, (0, _object_spread_props._)((0, _object_spread._)({}, popupProps), {
         visible: innerVisible,
         position: "bottom",
         onOverlayClick: function onOverlayClick() {

package/dist/cjs/packages/picker/pickerpanel.js

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "default", {
 var _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
 var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
 var _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-var _usetouch = require("../../utils/use-touch");
+var _usetouch = require("../../hooks/use-touch");
 var _supportspassive = require("../../utils/supports-passive");
 var InternalPickerPanel = function InternalPickerPanel(props, ref) {
     var _props_keyIndex = props.keyIndex, keyIndex = _props_keyIndex === void 0 ? 0 : _props_keyIndex, defaultValue = props.defaultValue, _props_options = props.options, options = _props_options === void 0 ? [] : _props_options, _props_threeDimensional = props.threeDimensional, threeDimensional = _props_threeDimensional === void 0 ? true : _props_threeDimensional, _props_duration = props.duration, duration = _props_duration === void 0 ? 1000 : _props_duration, chooseItem = props.chooseItem;

package/dist/cjs/packages/picker/style/style.css

@@ -4,19 +4,14 @@
 /* #ifndef harmony */
 /* #endif */
 .nut-overlay {
-  /* #ifdef rn */
-  position: absolute;
-  /* #endif */
-  /* #ifndef rn */
   position: fixed;
-  /* #endif */
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
-  background-color: var(--nutui-overlay-bg-color, var(--nutui-black-10));
+  background-color: var(--nutui-overlay-bg-color, var(--nutui-color-mask, rgba(0, 0, 0, 0.7)));
   z-index: var(--nutui-overlay-zIndex, 1000);
 }
 
@@ -67,7 +62,7 @@
   position: fixed;
   min-height: 46%;
   max-height: 100%;
-  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-gray-1));
+  background-color: var(--nutui-overlay-content-bg-color, var(--nutui-color-background-overlay, #ffffff));
   -webkit-overflow-scrolling: touch;
   font-size: var(--nutui-font-size-base, 14px);
 }
@@ -87,13 +82,13 @@
   align-items: center;
 }
 .nut-popup-title-title {
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-weight: var(--nutui-font-weight-bold, 600);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   line-height: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
 }
 .nut-popup-title-description {
-  color: var(--nutui-gray-6);
+  color: var(--nutui-color-text, #505259);
   font-size: var(--nutui-popup-description-font-size, var(--nutui-font-size-base, 14px));
   font-weight: var(--nutui-font-weight, 400);
 }
@@ -112,7 +107,7 @@
   z-index: 1;
   width: var(--nutui-popup-icon-size, 20px);
   height: var(--nutui-popup-icon-size, 20px);
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   cursor: pointer;
 }
 .nut-popup-title-right:active {
@@ -377,7 +372,7 @@
 }
 
 .nut-picker {
-  background-color: var(--nutui-gray-1);
+  background-color: var(--nutui-color-background-overlay, #ffffff);
   width: 100%;
 }
 .nut-picker-control {
@@ -389,11 +384,11 @@
   padding: var(--nutui-popup-title-padding, 16px);
 }
 .nut-picker-cancel-btn {
-  color: var(--nutui-picker-title-cancel-color, var(--nutui-gray-6));
+  color: var(--nutui-picker-title-cancel-color, var(--nutui-color-text, #505259));
   font-size: var(--nutui-picker-title-cancel-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-picker-confirm-btn {
-  color: var(--nutui-picker-title-ok-color, var(--nutui-brand-6));
+  color: var(--nutui-picker-title-ok-color, var(--nutui-color-primary, #ff0f23));
   font-size: var(--nutui-picker-title-ok-font-size, var(--nutui-font-size-base, 14px));
 }
 .nut-picker-title {
@@ -402,7 +397,7 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   text-align: center;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-popup-title-font-size, var(--nutui-font-size-l, 16px));
   font-weight: var(--nutui-popup-title-font-weight, var(--nutui-font-weight-bold, 600));
 }
@@ -415,10 +410,10 @@
   top: 108px;
   height: var(--nutui-picker-item-height, 36px);
   width: 100%;
-  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-black-3));
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   border-left: 0;
   border-right: 0;
-  color: var(--nutui-picker-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
   z-index: 3;
 }
@@ -427,14 +422,14 @@
   border: 0;
 }
 .nut-picker-indicator-taro::before, .nut-picker-indicator-taro::after {
-  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-black-3));
+  border: var(--nutui-picker-item-active-line-border, 1px solid var(--nutui-color-border, rgba(0, 0, 0, 0.06)));
   border-left: 0;
   border-right: 0;
 }
 .nut-picker-list {
   flex: 1;
   position: relative;
-  height: var(--nutui-picker-list-height, 252px);
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
   overflow: hidden;
   text-align: center;
 }
@@ -455,7 +450,7 @@
   z-index: 3;
 }
 .nut-picker-view-panel {
-  height: var(--nutui-picker-list-height, 252px);
+  height: calc(var(--nutui-picker-item-height, 36px) * 7);
   flex-grow: 1;
 }
 .nut-picker-content, .nut-picker-roller {
@@ -475,7 +470,7 @@
   text-overflow: ellipsis;
   height: var(--nutui-picker-item-height, 36px);
   line-height: var(--nutui-picker-item-height, 36px);
-  color: var(--nutui-picker-item-text-color, var(--nutui-gray-7));
+  color: var(--nutui-picker-item-text-color, var(--nutui-color-title, #1a1a1a));
   font-size: var(--nutui-picker-item-text-font-size, var(--nutui-font-size-base, 14px));
   text-align: center;
 }
@@ -501,7 +496,7 @@
   height: var(--nutui-picker-item-height, 36px);
   line-height: var(--nutui-picker-item-height, 36px);
   text-align: center;
-  color: var(--nutui-gray-7);
+  color: var(--nutui-color-title, #1a1a1a);
   font-size: var(--nutui-font-size-base, 14px);
 }
 .nut-picker-roller-item-hidden {

package/dist/cjs/packages/pickerview/index.d.ts

@@ -0,0 +1,3 @@
+import PickerView from './pickerview';
+export type { PickerViewProps, PickerOptionItem, PickerRollerProps, PickerValue, PickerOptions, PickerOnChangeCallbackParameter, } from './types';
+export default PickerView;