@arco-design/mobile-react 2.22.3 → 2.23.0

package/umd/stepper/demo/style/css/mobile.css

@@ -0,0 +1,4 @@
+#demo-stepper .arcodesign-mobile-demo-content {
+  padding: 0;
+  background: transparent;
+}

package/umd/stepper/demo/style/mobile.less

@@ -0,0 +1,10 @@
+@import "../../../../style/mixin.less";
+
+#demo-stepper {
+
+    .arcodesign-mobile-demo-content {
+        padding: 0;
+        background: transparent;
+    }
+
+}

package/umd/stepper/hooks/useButtonClick.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useButtonClick(params: Required<Pick<StepperProps, 'min' | 'max' | 'step' | 'disabled' | 'digits' | 'digits' | 'equalLimitDisabled'>> & Pick<StepperProps, 'onAddButtonClick' | 'onMinusButtonClick'> & {
+    actualInputValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    minusButtonDisable: boolean;
+    addButtonDisable: boolean;
+    handleMinusButtonClick: (e: React.MouseEvent) => void;
+    handleAddButtonClick: (e: React.MouseEvent) => void;
+};

package/umd/stepper/hooks/useButtonClick.js

@@ -0,0 +1,86 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.useButtonClick = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  _exports.__esModule = true;
+  _exports.default = useButtonClick;
+
+  function correctCalculation(leftNumber, rightNumber, operator) {
+    var magnification = 1e17;
+    var left = leftNumber * magnification;
+    var right = rightNumber * magnification;
+    return operator === '-' ? (left - right) / magnification : (left + right) / magnification;
+  }
+
+  function useButtonClick(params) {
+    var actualInputValue = params.actualInputValue,
+        min = params.min,
+        max = params.max,
+        step = params.step,
+        disabled = params.disabled,
+        equalLimitDisabled = params.equalLimitDisabled,
+        updateValue = params.updateValue,
+        onAddButtonClick = params.onAddButtonClick,
+        onMinusButtonClick = params.onMinusButtonClick;
+
+    var _useState = (0, _react.useState)(function () {
+      return actualInputValue === min || disabled;
+    }),
+        minusButtonDisable = _useState[0],
+        setMinusButtonDisable = _useState[1];
+
+    var _useState2 = (0, _react.useState)(function () {
+      return actualInputValue === max || disabled;
+    }),
+        addButtonDisable = _useState2[0],
+        setAddButtonDisable = _useState2[1];
+
+    var handleMinusButtonClick = function handleMinusButtonClick(e) {
+      if (minusButtonDisable) {
+        return;
+      }
+
+      updateValue(function (oldValue) {
+        var result = correctCalculation(oldValue, step, '-');
+        return result < min ? equalLimitDisabled ? oldValue : min : result;
+      });
+      onMinusButtonClick && onMinusButtonClick(e);
+    };
+
+    var handleAddButtonClick = function handleAddButtonClick(e) {
+      if (addButtonDisable) {
+        return;
+      }
+
+      updateValue(function (oldValue) {
+        var result = correctCalculation(Number(oldValue), step, '+');
+        return result > max ? equalLimitDisabled ? oldValue : max : result;
+      });
+      onAddButtonClick && onAddButtonClick(e);
+    }; // 当前值改变时，更新按钮状态
+    // Changes button status when value changed
+
+
+    (0, _react.useEffect)(function () {
+      setMinusButtonDisable(actualInputValue <= min);
+      setAddButtonDisable(actualInputValue >= max);
+    }, [actualInputValue]);
+    return {
+      minusButtonDisable: minusButtonDisable,
+      addButtonDisable: addButtonDisable,
+      handleMinusButtonClick: handleMinusButtonClick,
+      handleAddButtonClick: handleAddButtonClick
+    };
+  }
+});

package/umd/stepper/hooks/useInputEvent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { StepperProps } from '../type';
+export default function useInputEvent(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits' | 'allowEmpty'>> & Pick<StepperProps, 'onBlur' | 'onChange' | 'onInput'> & {
+    actualInputValue: number;
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+}): {
+    handleInput: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+};

package/umd/stepper/hooks/useInputEvent.js

@@ -0,0 +1,71 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "../../_helpers"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("../../_helpers"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global._helpers);
+    global.useInputEvent = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _helpers) {
+  "use strict";
+
+  _exports.__esModule = true;
+  _exports.default = useInputEvent;
+
+  function useInputEvent(params) {
+    var defaultValue = params.defaultValue,
+        min = params.min,
+        max = params.max,
+        digits = params.digits,
+        actualInputValue = params.actualInputValue,
+        allowEmpty = params.allowEmpty,
+        updateValue = params.updateValue,
+        onBlur = params.onBlur,
+        onChange = params.onChange,
+        onInput = params.onInput;
+
+    var handleInput = function handleInput(e) {
+      var targetValue = e.target.value;
+      var numberValue = Number(targetValue);
+      var pointIndex = targetValue.indexOf('.');
+
+      if (digits > 0 && pointIndex !== -1) {
+        var decimalLength = targetValue.slice(pointIndex + 1).length;
+        updateValue(decimalLength > digits ? actualInputValue : numberValue);
+      } else if (allowEmpty && targetValue === '') {
+        updateValue(Number.MIN_VALUE);
+      } else {
+        updateValue(numberValue);
+      }
+
+      onInput && onInput(e);
+    };
+
+    var handleBlur = function handleBlur(e) {
+      var targetValue = e.target.value;
+      var numberValue = Number(targetValue);
+
+      if (allowEmpty && targetValue === '') {
+        updateValue(Number.MIN_VALUE);
+      } else if (!allowEmpty && targetValue === '') {
+        updateValue(defaultValue);
+      } else {
+        updateValue(Math.max(min, Math.min(max, numberValue)));
+      }
+
+      onBlur && onBlur(e);
+    };
+
+    (0, _helpers.useUpdateEffect)(function () {
+      onChange && onChange(actualInputValue);
+    }, [actualInputValue]);
+    return {
+      handleInput: handleInput,
+      handleBlur: handleBlur
+    };
+  }
+});

package/umd/stepper/hooks/useValue.d.ts

@@ -0,0 +1,6 @@
+import { StepperProps } from '..';
+export default function useValue(params: Required<Pick<StepperProps, 'defaultValue' | 'min' | 'max' | 'digits'>> & Pick<StepperProps, 'formatter' | 'value'>): {
+    updateValue: (updater: number | ((oldValue: number) => number)) => void;
+    actualInputValue: number;
+    showValue: string | number;
+};

package/umd/stepper/hooks/useValue.js

@@ -0,0 +1,56 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "react"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("react"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.react);
+    global.useValue = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _react) {
+  "use strict";
+
+  _exports.__esModule = true;
+  _exports.default = useValue;
+
+  function useValue(params) {
+    var defaultValue = params.defaultValue,
+        formatter = params.formatter,
+        max = params.max,
+        min = params.min,
+        value = params.value,
+        digits = params.digits;
+
+    var _useState = (0, _react.useState)(defaultValue),
+        innerValue = _useState[0],
+        setInnerValue = _useState[1];
+
+    var updateValue = function updateValue(updater) {
+      var tempValue = typeof updater === 'function' ? updater(innerValue) : updater;
+
+      if (formatter) {
+        new Promise(function (resolve) {
+          resolve(formatter(Number(tempValue)));
+        }).then(function (result) {
+          var res = Math.max(min, Math.min(max, result));
+          setInnerValue(res);
+        });
+      } else {
+        setInnerValue(tempValue);
+      }
+    };
+
+    var actualInputValue = value !== undefined ? value : innerValue; // 将actualInputValue等于Number.MIN_VALUE的情况视为空值
+    // @en If actualInputValue equal Number.MIN_VALUE, actualInputValue equal ''
+
+    var showValue = actualInputValue === Number.MIN_VALUE ? '' : digits > 0 ? parseFloat(String(actualInputValue)).toFixed(digits) : actualInputValue;
+    return {
+      updateValue: updateValue,
+      actualInputValue: actualInputValue,
+      showValue: showValue
+    };
+  }
+});

package/umd/stepper/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StepperProps, StepperRef } from './type';
+export * from './type';
+/**
+ * 步进器组件，支持受控模式
+ * @en Stepper component, provide controlled mode
+ * @type 数据录入
+ * @type_en Data Entry
+ * @name 步进器
+ * @name_en Stepper
+ */
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<StepperRef>>;
+export default Stepper;

package/umd/stepper/index.js

@@ -0,0 +1,185 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "@arco-design/mobile-utils", "react", "../context-provider", "./hooks/useButtonClick", "./hooks/useInputEvent", "../icon", "./hooks/useValue", "./type"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("@arco-design/mobile-utils"), require("react"), require("../context-provider"), require("./hooks/useButtonClick"), require("./hooks/useInputEvent"), require("../icon"), require("./hooks/useValue"), require("./type"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.mobileUtils, global.react, global.contextProvider, global.useButtonClick, global.useInputEvent, global.icon, global.useValue, global.type);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports, _mobileUtils, _react, _contextProvider, _useButtonClick2, _useInputEvent2, _icon, _useValue2, _type) {
+  "use strict";
+
+  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+  _exports.__esModule = true;
+  var _exportNames = {};
+  _exports.default = void 0;
+  _react = _interopRequireWildcard(_react);
+  _useButtonClick2 = _interopRequireDefault(_useButtonClick2);
+  _useInputEvent2 = _interopRequireDefault(_useInputEvent2);
+  _useValue2 = _interopRequireDefault(_useValue2);
+  Object.keys(_type).forEach(function (key) {
+    if (key === "default" || key === "__esModule") return;
+    if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+    if (key in _exports && _exports[key] === _type[key]) return;
+    _exports[key] = _type[key];
+  });
+
+  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+  /**
+   * 步进器组件，支持受控模式
+   * @en Stepper component, provide controlled mode
+   * @type 数据录入
+   * @type_en Data Entry
+   * @name 步进器
+   * @name_en Stepper
+   */
+  var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+    var _props$className = props.className,
+        className = _props$className === void 0 ? '' : _props$className,
+        style = props.style,
+        inputStyle = props.inputStyle,
+        _props$inputClass = props.inputClass,
+        inputClass = _props$inputClass === void 0 ? '' : _props$inputClass,
+        value = props.value,
+        _props$defaultValue = props.defaultValue,
+        defaultValue = _props$defaultValue === void 0 ? 1 : _props$defaultValue,
+        _props$allowEmpty = props.allowEmpty,
+        allowEmpty = _props$allowEmpty === void 0 ? false : _props$allowEmpty,
+        _props$digits = props.digits,
+        digits = _props$digits === void 0 ? 0 : _props$digits,
+        _props$disabled = props.disabled,
+        disabled = _props$disabled === void 0 ? false : _props$disabled,
+        _props$inputReadonly = props.inputReadonly,
+        inputReadonly = _props$inputReadonly === void 0 ? false : _props$inputReadonly,
+        _props$max = props.max,
+        max = _props$max === void 0 ? Infinity : _props$max,
+        _props$min = props.min,
+        min = _props$min === void 0 ? 1 : _props$min,
+        _props$equalLimitDisa = props.equalLimitDisabled,
+        equalLimitDisabled = _props$equalLimitDisa === void 0 ? false : _props$equalLimitDisa,
+        _props$step = props.step,
+        step = _props$step === void 0 ? 1 : _props$step,
+        _props$theme = props.theme,
+        theme = _props$theme === void 0 ? 'default' : _props$theme,
+        formatter = props.formatter,
+        addButton = props.addButton,
+        minusButton = props.minusButton,
+        renderContent = props.renderContent,
+        onBlur = props.onBlur,
+        onChange = props.onChange,
+        onFocus = props.onFocus,
+        onAddButtonClick = props.onAddButtonClick,
+        onMinusButtonClick = props.onMinusButtonClick,
+        onClick = props.onClick,
+        onInput = props.onInput; // 值的相关逻辑
+    // @en The logic is that handle value
+
+    var _useValue = (0, _useValue2.default)({
+      defaultValue: defaultValue,
+      formatter: formatter,
+      min: min,
+      max: max,
+      value: value,
+      digits: digits
+    }),
+        updateValue = _useValue.updateValue,
+        actualInputValue = _useValue.actualInputValue,
+        showValue = _useValue.showValue; // 按钮点击的相关逻辑
+    // @en The logic is that handle button click
+
+
+    var _useButtonClick = (0, _useButtonClick2.default)({
+      actualInputValue: actualInputValue,
+      min: min,
+      max: max,
+      step: step,
+      disabled: disabled,
+      digits: digits,
+      equalLimitDisabled: equalLimitDisabled,
+      updateValue: updateValue,
+      onAddButtonClick: onAddButtonClick,
+      onMinusButtonClick: onMinusButtonClick
+    }),
+        minusButtonDisable = _useButtonClick.minusButtonDisable,
+        addButtonDisable = _useButtonClick.addButtonDisable,
+        handleAddButtonClick = _useButtonClick.handleAddButtonClick,
+        handleMinusButtonClick = _useButtonClick.handleMinusButtonClick; // 输入框操作的相关逻辑
+    // @en The logic is that handle input operation
+
+
+    var _useInputEvent = (0, _useInputEvent2.default)({
+      defaultValue: defaultValue,
+      min: min,
+      max: max,
+      digits: digits,
+      actualInputValue: actualInputValue,
+      allowEmpty: allowEmpty,
+      updateValue: updateValue,
+      onBlur: onBlur,
+      onChange: onChange,
+      onInput: onInput
+    }),
+        handleInput = _useInputEvent.handleInput,
+        handleBlur = _useInputEvent.handleBlur;
+
+    var domRef = (0, _react.useRef)(null);
+    var inputRef = (0, _react.useRef)(null);
+    (0, _react.useImperativeHandle)(ref, function () {
+      return {
+        dom: domRef.current,
+        input: inputRef.current,
+        changeValue: function changeValue(newValue) {
+          var tempValue = newValue != null ? newValue : defaultValue;
+          tempValue = Math.min(max, Math.max(tempValue, min));
+          updateValue(tempValue);
+        }
+      };
+    });
+    return /*#__PURE__*/_react.default.createElement(_contextProvider.ContextLayout, null, function (_ref) {
+      var prefixCls = _ref.prefixCls;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper", prefixCls + "-" + theme, className),
+        style: style,
+        ref: domRef,
+        onClick: onClick
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        onClick: handleMinusButtonClick
+      }, minusButton || /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button")
+      }, /*#__PURE__*/_react.default.createElement(_icon.IconMinus, {
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper-minus-button-icon", {
+          disabled: minusButtonDisable
+        })
+      }))), renderContent ? renderContent(actualInputValue) : /*#__PURE__*/_react.default.createElement("input", {
+        style: inputStyle,
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper-input", inputClass),
+        onFocus: onFocus,
+        onInput: handleInput,
+        onBlur: handleBlur,
+        disabled: disabled,
+        value: showValue,
+        readOnly: inputReadonly,
+        ref: inputRef,
+        type: "number"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        onClick: handleAddButtonClick
+      }, addButton || /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button")
+      }, /*#__PURE__*/_react.default.createElement(_icon.IconAdd, {
+        className: (0, _mobileUtils.cls)(prefixCls + "-stepper-add-button-icon", {
+          disabled: addButtonDisable
+        })
+      }))));
+    });
+  });
+  var _default = Stepper;
+  _exports.default = _default;
+});

package/umd/stepper/style/css/index.css

@@ -0,0 +1,76 @@
+.arco-stepper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  font-size:  0.28rem ;
+}
+.arco-stepper.arco-square {
+  border:  1PX solid #f2f3f5 ;
+  border-radius:  0.04rem ;
+}
+.arco-stepper.arco-square .arco-stepper-add-button,
+.arco-stepper.arco-square .arco-stepper-minus-button,
+.arco-stepper.arco-square .arco-stepper-input {
+  background:  #ffffff ;
+}
+.arco-stepper.arco-square .arco-stepper-input {
+  border-left:  1PX solid #f2f3f5 ;
+  border-right:  1PX solid #f2f3f5 ;
+}
+.arco-stepper.arco-round .arco-stepper-minus-button,
+.arco-stepper.arco-round .arco-stepper-add-button {
+  border-radius:  50% ;
+}
+.arco-stepper.arco-round .arco-stepper-input {
+  background:  transparent ;
+}
+.arco-stepper-minus-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  font-size:  0.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-minus-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-minus-button-icon.disabled {
+  color:  #c9cdd4 ;
+}
+.arco-stepper-input {
+  text-align: center;
+  width:  0.8rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+  color:  #1d2129 ;
+  margin:  0 1PX ;
+}
+.arco-stepper-add-button {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-align: center;
+  -webkit-align-items: center;
+          align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+          justify-content: center;
+  font-size:  0.2rem ;
+  width:  0.56rem ;
+  height:  0.56rem ;
+  background:  #f7f8fa ;
+}
+.arco-stepper-add-button-icon {
+  color:  #1d2129 ;
+}
+.arco-stepper-add-button-icon.disabled {
+  color:  #c9cdd4 ;
+}

package/umd/stepper/style/css/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../../style/css/public.css';
+import './index.css';

package/umd/stepper/style/css/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../../style/css/public.css", "./index.css"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../../style/css/public.css"), require("./index.css"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/stepper/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../../style/public.less';
+import './index.less';

package/umd/stepper/style/index.js

@@ -0,0 +1,15 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["../../../style/public.less", "./index.less"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(require("../../../style/public.less"), require("./index.less"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(global._public, global.index);
+    global.index = mod.exports;
+  }
+})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_public, _index) {
+  "use strict";
+});

package/umd/stepper/style/index.less

@@ -0,0 +1,80 @@
+@import '../../../style/mixin.less';
+
+.@{prefix}-stepper {
+    display: flex;
+    .use-var(font-size, stepper-font-size);
+
+    &.@{prefix}-square {
+        .use-var(border, stepper-square-border);
+        .use-var(border-radius, stepper-square-border-radius);
+
+        .@{prefix}-stepper {
+            &-add-button,
+            &-minus-button,
+            &-input {
+                .use-var(background, stepper-square-background-color);
+            }
+            &-input {
+                .use-var(border-left, stepper-square-border);
+                .use-var(border-right, stepper-square-border);
+            }
+        }
+    }
+
+    &.@{prefix}-round {
+        .@{prefix}-stepper {
+            &-minus-button,
+            &-add-button {
+                .use-var(border-radius, stepper-round-button-border-radius);
+            }
+            &-input {
+                .use-var(background, stepper-round-input-background-color);
+            }
+        }
+    }
+
+    &-minus-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+
+    &-input {
+        text-align: center;
+        .use-var(width, stepper-input-width);
+        .use-var(height, stepper-input-height);
+        .use-var(background, stepper-default-background-color);
+        .use-var(color, stepper-content-color);
+        .use-var(margin, stepper-input-margin);
+    }
+
+    &-add-button {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .use-var(font-size, stepper-button-icon-size);
+        .use-var(width, stepper-button-size);
+        .use-var(height, stepper-button-size);
+        .use-var(background, stepper-default-background-color);
+
+        &-icon {
+            .use-var(color, stepper-content-color);
+
+            &.disabled {
+                .use-var(color, stepper-disable-color);
+            }
+        }
+    }
+}