@sheinx/base 3.0.0-alpha.1

package/cjs/spin/spin.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _spins = _interopRequireDefault(require("./spins"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Spin = function Spin() {
+  var _jssStyle$spin, _classNames;
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var jssStyle = props.jssStyle,
+    className = props.className,
+    children = props.children,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? true : _props$loading,
+    _props$name = props.name,
+    name = _props$name === void 0 ? 'default' : _props$name,
+    tip = props.tip,
+    color = props.color,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'vertical' : _props$mode;
+  var spinStyle = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin = jssStyle.spin) === null || _jssStyle$spin === void 0 ? void 0 : _jssStyle$spin.call(jssStyle)) || {};
+  var contentClass = (0, _classnames.default)(className, spinStyle.content, (_classNames = {}, (0, _defineProperty2.default)(_classNames, spinStyle.vertical, mode === 'vertical'), (0, _defineProperty2.default)(_classNames, spinStyle.horizontal, mode === 'horizontal'), _classNames));
+  var renderSpin = function renderSpin() {
+    if (_spins.default[name]) {
+      return _spins.default[name](props);
+    }
+    return null;
+  };
+  var renderTip = function renderTip() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _classnames.default)(className, spinStyle.tip),
+      style: {
+        color: color
+      },
+      children: typeof tip === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        children: tip
+      }) : tip
+    });
+  };
+  var renderContent = function renderContent() {
+    if ('tip' in props) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: contentClass,
+        children: [renderSpin(), tip && renderTip()]
+      });
+    }
+    return renderSpin();
+  };
+  var renderContainer = function renderContainer() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: spinStyle.container,
+      children: [children, loading && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: spinStyle.loading,
+        children: renderContent()
+      })]
+    });
+  };
+  if (children) {
+    return renderContainer();
+  }
+  return renderContent();
+};
+var _default = Spin;
+exports.default = _default;

package/cjs/spin/spin.type.d.ts

@@ -0,0 +1,68 @@
+/// <reference types="react" />
+import { CommonType } from '../common/type';
+export declare type SpinModeType = 'vertical' | 'horizontal';
+export declare type SpinNameType = 'default' | 'chasing-dots' | 'cube-grid' | 'double-bounce' | 'fading-circle' | 'four-dots' | 'plane' | 'pulse' | 'ring' | 'scale-circle' | 'three-bounce' | 'wave' | 'chasing-ring';
+interface SpinStyle {
+    spin?: () => SpinClasses;
+}
+export interface SpinClasses {
+    spin: string;
+    default: string;
+    chasingDots: string;
+    cubeGrid: string;
+    doubleBounce: string;
+    fadingCircle: string;
+    scaleCircle: string;
+    fade: string;
+    fourDots: string;
+    plane: string;
+    pulse: string;
+    ring: string;
+    threeBounce: string;
+    wave: string;
+    chasingRing: string;
+    dots: string;
+    item: string;
+    content: string;
+    container: string;
+    loading: string;
+    tip: string;
+    vertical: string;
+    horizontal: string;
+}
+export interface renderItemProps {
+    jssStyle: SpinStyle;
+    index: number;
+    color?: string;
+    size?: number | string;
+    itemSize?: number | string;
+    style?: React.CSSProperties;
+    itemClass?: string;
+    itemStyle?: React.CSSProperties;
+}
+export interface BaseSpinProps {
+    wrapperClass?: string;
+    wrapperStyle?: React.CSSProperties;
+    size?: number | string;
+    color?: string;
+    jssStyle?: SpinStyle;
+    render?: any;
+    style?: React.CSSProperties;
+    count?: number;
+    itemStyle?: React.CSSProperties;
+    itemClass?: string;
+    itemSize?: number | string;
+    className?: string;
+}
+export interface SpinProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: SpinStyle;
+    children?: React.ReactNode;
+    tip?: string | React.ReactNode;
+    size?: number | string;
+    name?: SpinNameType;
+    color?: string;
+    mode?: SpinModeType;
+    loading?: boolean;
+}
+export {};
+//# sourceMappingURL=spin.type.d.ts.map

package/cjs/spin/spin.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spin.type.d.ts","sourceRoot":"","sources":["spin.type.ts"],"names":[],"mappings":"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"}

package/cjs/spin/spin.type.js

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

package/cjs/spin/spins.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { SpinProps } from './spin.type';
+declare const _default: {
+    plane: (props: SpinProps) => JSX.Element;
+    pulse: (props: SpinProps) => JSX.Element;
+    ring: (props: SpinProps) => JSX.Element;
+    wave: (props: SpinProps) => JSX.Element;
+    default: (props: SpinProps) => JSX.Element;
+    'chasing-ring': (props: SpinProps) => JSX.Element;
+    'chasing-dots': (props: SpinProps) => JSX.Element;
+    'cube-grid': (props: SpinProps) => JSX.Element;
+    'double-bounce': (props: SpinProps) => JSX.Element;
+    'fading-circle': (props: SpinProps) => JSX.Element;
+    'four-dots': (props: SpinProps) => JSX.Element;
+    'scale-circle': (props: SpinProps) => JSX.Element;
+    'three-bounce': (props: SpinProps) => JSX.Element;
+};
+export default _default;
+//# sourceMappingURL=spins.d.ts.map

package/cjs/spin/spins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"spins.d.ts","sourceRoot":"","sources":["spins.tsx"],"names":[],"mappings":";AACA,OAAO,EAAgC,SAAS,EAAE,MAAM,aAAa,CAAC;;;;;;;;;;;;;;;;AAuQtE,wBAcE"}

package/cjs/spin/spins.js

@@ -0,0 +1,319 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _base = _interopRequireDefault(require("./base"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2.default)(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; }
+var renderItem = function renderItem(props) {
+  var _jssStyle$spin;
+  var jssStyle = props.jssStyle,
+    index = props.index,
+    color = props.color,
+    itemStyle = props.itemStyle;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin = jssStyle.spin) === null || _jssStyle$spin === void 0 ? void 0 : _jssStyle$spin.call(jssStyle)) || {};
+  var style = Object.assign({
+    backgroundColor: color
+  }, itemStyle);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(spinStyles === null || spinStyles === void 0 ? void 0 : spinStyles.item),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: style
+    })
+  }, index);
+};
+var renderSvgItem = function renderSvgItem(props) {
+  var _jssStyle$spin2;
+  var jssStyle = props.jssStyle,
+    index = props.index,
+    color = props.color,
+    itemClass = props.itemClass,
+    itemSize = props.itemSize;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin2 = jssStyle.spin) === null || _jssStyle$spin2 === void 0 ? void 0 : _jssStyle$spin2.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)(spinStyles.item, itemClass),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      width: itemSize,
+      height: itemSize,
+      viewBox: "0 0 100 100",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        fill: color,
+        cx: 50,
+        cy: 50,
+        r: 50
+      })
+    })
+  }, index);
+};
+var renderSimpleItem = function renderSimpleItem(props) {
+  var _jssStyle$spin3;
+  var jssStyle = props.jssStyle,
+    index = props.index,
+    color = props.color,
+    itemStyle = props.itemStyle;
+  var style = Object.assign({
+    backgroundColor: color
+  }, itemStyle);
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin3 = jssStyle.spin) === null || _jssStyle$spin3 === void 0 ? void 0 : _jssStyle$spin3.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    className: spinStyles.item
+  }, index);
+};
+var Default = function Default(props) {
+  var _jssStyle$spin4;
+  var jssStyle = props.jssStyle,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'default' : _props$size,
+    className = props.className;
+  var _formatSize = (0, _utils.formatSize)(size),
+    value = _formatSize.value,
+    unit = _formatSize.unit;
+  var sizeSet = Math.ceil(value / 12.5) + unit;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin4 = jssStyle.spin) === null || _jssStyle$spin4 === void 0 ? void 0 : _jssStyle$spin4.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    className: (0, _classnames.default)(className, spinStyles.default),
+    count: 12,
+    itemStyle: {
+      width: sizeSet,
+      borderRadius: sizeSet
+    },
+    render: renderItem
+  }));
+};
+var ChasingDots = function ChasingDots(props) {
+  var _jssStyle$spin5;
+  var jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin5 = jssStyle.spin) === null || _jssStyle$spin5 === void 0 ? void 0 : _jssStyle$spin5.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 2,
+    className: (0, _classnames.default)(className, spinStyles.chasingDots),
+    render: renderSvgItem
+  }));
+};
+var CubeGrid = function CubeGrid(props) {
+  var _jssStyle$spin6;
+  var jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin6 = jssStyle.spin) === null || _jssStyle$spin6 === void 0 ? void 0 : _jssStyle$spin6.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 9,
+    className: (0, _classnames.default)(className, spinStyles.cubeGrid),
+    render: renderSimpleItem
+  }));
+};
+var DoubleBounce = function DoubleBounce(props) {
+  var _jssStyle$spin7;
+  var jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin7 = jssStyle.spin) === null || _jssStyle$spin7 === void 0 ? void 0 : _jssStyle$spin7.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 2,
+    className: (0, _classnames.default)(className, spinStyles.doubleBounce),
+    render: renderSimpleItem
+  }));
+};
+var FadingCircle = function FadingCircle(props) {
+  var _jssStyle$spin8;
+  var _props$size2 = props.size,
+    size = _props$size2 === void 0 ? 40 : _props$size2,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var _formatSize2 = (0, _utils.formatSize)(size),
+    value = _formatSize2.value,
+    unit = _formatSize2.unit;
+  var itemSize = (value / 7).toFixed(3) + unit;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin8 = jssStyle.spin) === null || _jssStyle$spin8 === void 0 ? void 0 : _jssStyle$spin8.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 12,
+    className: (0, _classnames.default)(className, spinStyles.fadingCircle),
+    itemSize: itemSize,
+    itemClass: (0, _classnames.default)(spinStyles.fade),
+    render: renderSvgItem
+  }));
+};
+var ScaleCircle = function ScaleCircle(props) {
+  var _jssStyle$spin9;
+  var _props$size3 = props.size,
+    size = _props$size3 === void 0 ? 40 : _props$size3,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var _formatSize3 = (0, _utils.formatSize)(size),
+    value = _formatSize3.value,
+    unit = _formatSize3.unit;
+  var itemSize = (value / 7).toFixed(3) + unit;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin9 = jssStyle.spin) === null || _jssStyle$spin9 === void 0 ? void 0 : _jssStyle$spin9.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 12,
+    className: (0, _classnames.default)(className, spinStyles.fadingCircle),
+    itemSize: itemSize,
+    itemClass: (0, _classnames.default)(spinStyles.scaleCircle),
+    render: renderSvgItem
+  }));
+};
+var FourDots = function FourDots(props) {
+  var _jssStyle$spin10;
+  var jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin10 = jssStyle.spin) === null || _jssStyle$spin10 === void 0 ? void 0 : _jssStyle$spin10.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 4,
+    className: (0, _classnames.default)(className, spinStyles.fourDots),
+    render: renderSvgItem
+  }));
+};
+var Plane = function Plane(props) {
+  var _jssStyle$spin11;
+  var color = props.color,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var style = {
+    backgroundColor: color
+  };
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin11 = jssStyle.spin) === null || _jssStyle$spin11 === void 0 ? void 0 : _jssStyle$spin11.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 0,
+    style: style,
+    className: (0, _classnames.default)(className, spinStyles.plane)
+  }));
+};
+var Pulse = function Pulse(props) {
+  var _jssStyle$spin12;
+  var color = props.color,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var style = {
+    backgroundColor: color
+  };
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin12 = jssStyle.spin) === null || _jssStyle$spin12 === void 0 ? void 0 : _jssStyle$spin12.call(jssStyle)) || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 0,
+    style: style,
+    className: (0, _classnames.default)(className, spinStyles.pulse)
+  }));
+};
+var Ring = function Ring(props) {
+  var _jssStyle$spin13;
+  var _props$size4 = props.size,
+    size = _props$size4 === void 0 ? 40 : _props$size4,
+    color = props.color,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin13 = jssStyle.spin) === null || _jssStyle$spin13 === void 0 ? void 0 : _jssStyle$spin13.call(jssStyle)) || {};
+  var _formatSize4 = (0, _utils.formatSize)(size),
+    value = _formatSize4.value,
+    unit = _formatSize4.unit;
+  var style = {
+    borderWidth: value / 10 + unit,
+    borderLeftColor: color,
+    borderRightColor: color,
+    borderBottomColor: color,
+    fontSize: value / 10 + unit
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 0,
+    style: style,
+    className: (0, _classnames.default)(className, spinStyles.ring)
+  }));
+};
+var ThreeBounce = function ThreeBounce(props) {
+  var _jssStyle$spin14;
+  var _props$size5 = props.size,
+    size = _props$size5 === void 0 ? 40 : _props$size5,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin14 = jssStyle.spin) === null || _jssStyle$spin14 === void 0 ? void 0 : _jssStyle$spin14.call(jssStyle)) || {};
+  var _formatSize5 = (0, _utils.formatSize)(size),
+    value = _formatSize5.value,
+    unit = _formatSize5.unit;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 3,
+    itemSize: value / 2 + unit,
+    style: {
+      width: value * 2 + unit,
+      height: 'auto'
+    },
+    className: (0, _classnames.default)(className, spinStyles.threeBounce),
+    render: renderSvgItem
+  }));
+};
+var Wave = function Wave(props) {
+  var _jssStyle$spin15;
+  var _props$size6 = props.size,
+    size = _props$size6 === void 0 ? 40 : _props$size6,
+    jssStyle = props.jssStyle,
+    className = props.className;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin15 = jssStyle.spin) === null || _jssStyle$spin15 === void 0 ? void 0 : _jssStyle$spin15.call(jssStyle)) || {};
+  var _formatSize6 = (0, _utils.formatSize)(size),
+    value = _formatSize6.value,
+    unit = _formatSize6.unit;
+  var width = value / 7;
+  var margin = value / 20;
+  if (unit === 'px') {
+    width = Math.floor(width);
+    margin = Math.ceil(margin) + unit;
+  } else {
+    margin = '2px';
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    itemStyle: {
+      width: width + unit,
+      marginRight: margin
+    },
+    count: 5,
+    className: (0, _classnames.default)(className, spinStyles.wave),
+    render: renderSimpleItem
+  }));
+};
+var ChasingRing = function ChasingRing(props) {
+  var _jssStyle$spin16;
+  var _props$size7 = props.size,
+    size = _props$size7 === void 0 ? 40 : _props$size7,
+    color = props.color,
+    className = props.className,
+    jssStyle = props.jssStyle;
+  var spinStyles = (jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$spin16 = jssStyle.spin) === null || _jssStyle$spin16 === void 0 ? void 0 : _jssStyle$spin16.call(jssStyle)) || {};
+  var _formatSize7 = (0, _utils.formatSize)(size),
+    value = _formatSize7.value,
+    unit = _formatSize7.unit;
+  var borderWidth = "".concat(value / 10).concat(unit);
+  var style = {
+    borderWidth: borderWidth,
+    borderTopColor: color,
+    backgroundColor: 'transparent'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, _objectSpread(_objectSpread({}, props), {}, {
+    count: 4,
+    itemStyle: style,
+    className: (0, _classnames.default)(className, spinStyles.chasingRing),
+    render: renderSimpleItem
+  }));
+};
+var _default = {
+  plane: Plane,
+  pulse: Pulse,
+  ring: Ring,
+  wave: Wave,
+  default: Default,
+  'chasing-ring': ChasingRing,
+  'chasing-dots': ChasingDots,
+  'cube-grid': CubeGrid,
+  'double-bounce': DoubleBounce,
+  'fading-circle': FadingCircle,
+  'four-dots': FourDots,
+  'scale-circle': ScaleCircle,
+  'three-bounce': ThreeBounce
+};
+exports.default = _default;

package/cjs/spin/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const formatSize: (size: string | number) => {
+    value: number;
+    unit: string;
+};
+//# sourceMappingURL=utils.d.ts.map

package/cjs/spin/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["utils.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,SAAU,MAAM,GAAG,MAAM;;;CAM/C,CAAC"}

package/cjs/spin/utils.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatSize = void 0;
+require("core-js/modules/es.regexp.exec.js");
+var formatSize = function formatSize(size) {
+  var ss = /^(\d+)([%|\w]*)$/.exec(String(size)) || [];
+  return {
+    value: parseFloat(ss[1]),
+    unit: ss[2] || 'px'
+  };
+};
+exports.formatSize = formatSize;

package/cjs/steps/__example__/01-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=01-base.d.ts.map

package/cjs/steps/__example__/01-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-base.d.ts","sourceRoot":"","sources":["01-base.tsx"],"names":[],"mappings":";;AAcA,wBAsDE"}

package/cjs/steps/__example__/01-base.js

@@ -0,0 +1,88 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+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; }
+/**
+ * cn - 基本用法
+ *    --
+ * en - Basic
+ *    --
+ */
+
+var jssStyle = {
+  steps: _shineoutStyle.useStepsStyle
+};
+var _default = function _default() {
+  var _useState = (0, _react.useState)(1),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    current = _useState2[0],
+    setCurrent = _useState2[1];
+  var handleClick = function handleClick() {
+    if (current + 1 > 4) {
+      setCurrent(0);
+      return;
+    }
+    setCurrent(current + 1);
+  };
+  var renderIcon = function renderIcon(index, status) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: '100%',
+        height: '100%',
+        background: status === 'finish' ? 'black' : 'orange',
+        color: '#fff',
+        borderRadius: '50%'
+      },
+      children: "\u54C8"
+    });
+  };
+  var description = '这是描述内容';
+  // const description =
+  //   '这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息这是描述信息';
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: handleClick,
+      children: "next"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_.Steps, {
+        type: "arrow",
+        jssStyle: jssStyle,
+        current: current,
+        onChange: function onChange(i) {
+          console.log(i);
+          setCurrent(i);
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Steps.Step, {
+          description: description,
+          title: "\u7B2C1\u6B65",
+          renderIcon: renderIcon
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Steps.Step, {
+          description: description,
+          title: "\u7B2C2\u6B65"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Steps.Step, {
+          description: description,
+          title: "\u7B2C3\u6B65"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Steps.Step, {
+          description: description,
+          title: "\u7B2C4\u6B65"
+        })]
+      })
+    })]
+  });
+};
+exports.default = _default;

package/cjs/steps/index.d.ts

@@ -0,0 +1,5 @@
+export { default, default as Steps } from './steps';
+export { default as Step } from './step';
+export type { StepProps } from './step.type';
+export type { StepsProps } from './steps.type';
+//# sourceMappingURL=index.d.ts.map

package/cjs/steps/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AAEzC,YAAY,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,YAAY,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/cjs/steps/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Step", {
+  enumerable: true,
+  get: function get() {
+    return _step.default;
+  }
+});
+Object.defineProperty(exports, "Steps", {
+  enumerable: true,
+  get: function get() {
+    return _steps.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _steps.default;
+  }
+});
+var _steps = _interopRequireDefault(require("./steps"));
+var _step = _interopRequireDefault(require("./step"));

package/cjs/steps/step.arrow.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StepStyleProps } from './steps.type';
+declare const ArrowStep: (props: StepStyleProps) => JSX.Element;
+export default ArrowStep;
+//# sourceMappingURL=step.arrow.d.ts.map

package/cjs/steps/step.arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"step.arrow.d.ts","sourceRoot":"","sources":["step.arrow.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,QAAA,MAAM,SAAS,UAAW,cAAc,gBA2BvC,CAAC;AAEF,eAAe,SAAS,CAAC"}