@sheinx/base 3.0.0-alpha.1

package/esm/popover/popover.js

@@ -0,0 +1,162 @@
+"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 _hooks = require("@sheinx/hooks");
+var _absoluteList = _interopRequireDefault(require("../absolute-list"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+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; }
+var Popover = function Popover(props) {
+  var _jssStyle$popover;
+  var children = props.children,
+    jssStyle = props.jssStyle,
+    className = props.className,
+    style = props.style,
+    priorityDirection = props.priorityDirection,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'hover' : _props$trigger,
+    type = props.type,
+    destroy = props.destroy,
+    _props$showArrow = props.showArrow,
+    showArrow = _props$showArrow === void 0 ? true : _props$showArrow,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 1060 : _props$zIndex;
+  var _React$useRef = _react.default.useRef({
+      rendered: false
+    }),
+    context = _React$useRef.current;
+  var popoverStyle = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$popover = jssStyle.popover) === null || _jssStyle$popover === void 0 ? void 0 : _jssStyle$popover.call(jssStyle);
+  var render = (0, _hooks.useRender)();
+  var onVisibleChange = (0, _hooks.usePersistFn)(function (v) {
+    var _props$onVisibleChang;
+    (_props$onVisibleChang = props.onVisibleChange) === null || _props$onVisibleChang === void 0 ? void 0 : _props$onVisibleChang.call(props, v);
+    if (v) {
+      var _props$onOpen;
+      (_props$onOpen = props.onOpen) === null || _props$onOpen === void 0 ? void 0 : _props$onOpen.call(props);
+    } else {
+      var _props$onClose;
+      (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
+    }
+  });
+  var _usePopup = (0, _hooks.usePopup)({
+      open: props.visible,
+      defaultOpen: props.defaultVisible,
+      onCollapse: onVisibleChange,
+      position: props.position,
+      trigger: trigger,
+      autoMode: 'popover',
+      priorityDirection: priorityDirection,
+      mouseEnterDelay: props.mouseEnterDelay,
+      mouseLeaveDelay: props.mouseLeaveDelay
+    }),
+    open = _usePopup.open,
+    position = _usePopup.position,
+    getTargetProps = _usePopup.getTargetProps,
+    targetRef = _usePopup.targetRef,
+    popupRef = _usePopup.popupRef,
+    closePop = _usePopup.closePop,
+    Provider = _usePopup.Provider,
+    providerValue = _usePopup.providerValue;
+  var events = getTargetProps();
+  var bindEvents = function bindEvents() {
+    var targetEl = targetRef.current;
+    if (!targetEl) return;
+    if (events.onMouseEnter) targetEl.addEventListener('mouseenter', events.onMouseEnter);
+    if (events.onMouseLeave) targetEl.addEventListener('mouseleave', events.onMouseLeave);
+    if (events.onClick) targetEl.addEventListener('click', events.onClick);
+    // clickToCancelDelay
+    if (trigger === 'hover' && props.clickToCancelDelay && props.mouseEnterDelay) {
+      targetEl.addEventListener('click', closePop);
+    }
+  };
+  var unbindEvents = function unbindEvents() {
+    var targetEl = targetRef.current;
+    if (!targetEl) return;
+    var events = getTargetProps();
+    if (events.onMouseEnter) targetEl.removeEventListener('mouseenter', events.onMouseEnter);
+    if (events.onMouseLeave) targetEl.removeEventListener('mouseleave', events.onMouseLeave);
+    if (events.onClick) targetEl.removeEventListener('click', events.onClick);
+    targetEl.removeEventListener('click', closePop);
+  };
+  (0, _react.useEffect)(function () {
+    bindEvents();
+    return function () {
+      unbindEvents();
+    };
+  }, []);
+
+  // scrollDismiss
+  (0, _react.useEffect)(function () {
+    var scrollDismiss = props.scrollDismiss;
+    var target = document;
+    if (scrollDismiss) {
+      if (typeof scrollDismiss === 'function') target = scrollDismiss() || document;
+      target.addEventListener('scroll', closePop);
+    }
+    return function () {
+      if (scrollDismiss) {
+        target.removeEventListener('scroll', closePop);
+      }
+    };
+  });
+  var noRender = !open && !context.rendered;
+  if (!targetRef.current || !children || noRender) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("noscript", {
+      ref: function ref(el) {
+        if (!el) return;
+        var targetEl = el.parentElement;
+        if (targetRef.current === targetEl) return;
+        targetRef.current = targetEl;
+        bindEvents();
+        render();
+      }
+    });
+  }
+  context.rendered = true;
+  var childrened = _hooks.util.isFunc(children) ? children(closePop) : children;
+  var colorStyle = {
+    borderColor: props.border,
+    backgroundColor: props.background
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_absoluteList.default, {
+    focus: open,
+    parentElement: targetRef.current,
+    popupEl: popupRef.current,
+    absolute: typeof props.getPopupContainer === 'function' ? props.getPopupContainer : true,
+    position: position,
+    fixedWidth: false,
+    popupGap: 0,
+    destroy: destroy,
+    zIndex: zIndex,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(className, popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapper, open && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.wrapperOpen)),
+      style: colorStyle,
+      "data-soui-position": position,
+      "data-soui-type": type,
+      ref: popupRef,
+      onMouseLeave: events.onMouseLeave,
+      children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.arrow
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        style: style,
+        className: (0, _classnames.default)(popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.content, (typeof childrened === 'string' || props.useTextStyle) && (popoverStyle === null || popoverStyle === void 0 ? void 0 : popoverStyle.text)),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Provider, {
+          value: providerValue,
+          children: childrened
+        })
+      })]
+    })
+  });
+};
+var _default = Popover;
+exports.default = _default;

package/esm/popover/popover.type.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { CommonType } from '../common/type';
+import { BasePopupProps } from '@sheinx/hooks';
+import { AlertClasses } from '../alert/alert.type';
+import { ButtonClasses } from '../button/button.type';
+export interface PopoverClasses {
+    /**
+     * 最外层class
+     */
+    wrapper: string;
+    wrapperOpen: string;
+    content: string;
+    arrow: string;
+    text: string;
+    /**
+     * confirm
+     */
+    confirm: string;
+    mention: string;
+    footer: string;
+}
+export interface PopoverJssStyle {
+    popover?: () => PopoverClasses;
+    alert?: () => AlertClasses;
+    button?: () => ButtonClasses;
+}
+export interface PopoverProps extends Pick<CommonType, 'className' | 'style'> {
+    jssStyle?: {
+        popover?: () => PopoverClasses;
+        alert?: () => AlertClasses;
+        button?: () => ButtonClasses;
+    };
+    position?: BasePopupProps['position'];
+    priorityDirection?: BasePopupProps['priorityDirection'];
+    mouseEnterDelay?: BasePopupProps['mouseEnterDelay'];
+    mouseLeaveDelay?: BasePopupProps['mouseLeaveDelay'];
+    /**
+     * @cn 触发方式
+     * @en Trigger mode
+     * @default 'hover'
+     */
+    trigger?: 'click' | 'hover';
+    destroy?: boolean;
+    visible?: BasePopupProps['open'];
+    onVisibleChange?: BasePopupProps['onCollapse'];
+    onOpen?: () => void;
+    onClose?: () => void;
+    children?: React.ReactNode | ((close: () => void) => React.ReactNode);
+    getPopupContainer?: () => HTMLElement | null;
+    useTextStyle?: boolean;
+    type?: 'info' | 'success' | 'warning' | 'danger' | 'error';
+    border?: string;
+    background?: string;
+    zIndex?: number;
+    showArrow?: boolean;
+    defaultVisible?: boolean;
+    clickToCancelDelay?: number;
+    scrollDismiss?: boolean | (() => HTMLElement | null);
+}
+//# sourceMappingURL=popover.type.d.ts.map

package/esm/popover/popover.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.type.d.ts","sourceRoot":"","sources":["popover.type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IAGb;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,MAAM,cAAc,CAAC;IAC/B,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;CAC9B;AACD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,UAAU,EAAE,WAAW,GAAG,OAAO,CAAC;IAC3E,QAAQ,CAAC,EAAE;QACT,OAAO,CAAC,EAAE,MAAM,cAAc,CAAC;QAC/B,KAAK,CAAC,EAAE,MAAM,YAAY,CAAC;QAC3B,MAAM,CAAC,EAAE,MAAM,aAAa,CAAC;KAC9B,CAAC;IACF,QAAQ,CAAC,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IACtC,iBAAiB,CAAC,EAAE,cAAc,CAAC,mBAAmB,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpD,eAAe,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACpD;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC/C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,IAAI,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACtE,iBAAiB,CAAC,EAAE,MAAM,WAAW,GAAG,IAAI,CAAC;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC3D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,GAAG,CAAC,MAAM,WAAW,GAAG,IAAI,CAAC,CAAC;CACtD"}

package/esm/popover/popover.type.js

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

package/esm/progress/__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/esm/progress/__example__/01-base.d.ts.map

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

package/esm/progress/__example__/01-base.js

@@ -0,0 +1,97 @@
+"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 = {
+  progress: _shineoutStyle.useProgressStyle
+};
+var _default = function _default() {
+  var _useState = (0, _react.useState)('line-inner'),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    shape = _useState2[0],
+    setShape = _useState2[1];
+  var _useState3 = (0, _react.useState)(0),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  var _useState5 = (0, _react.useState)('success'),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    type = _useState6[0],
+    setType = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+    icon = _useState8[0],
+    setIcon = _useState8[1];
+  (0, _react.useEffect)(function () {
+    var interval = setInterval(function () {
+      setValue(function (v) {
+        if (v >= 100) {
+          return 0;
+        }
+        return v + 1;
+      });
+    }, 200);
+    return function () {
+      return clearInterval(interval);
+    };
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+      type: "button",
+      onClick: function onClick() {
+        setIcon(function (i) {
+          return !i;
+        });
+      },
+      children: icon ? '隐藏icon' : '展示icon'
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RadioGroup, {
+      jssStyle: {
+        radio: _shineoutStyle.useRadioStyle
+      },
+      data: ['line', 'line-pop', 'line-inner', 'circle'],
+      value: shape,
+      onChange: setShape,
+      keygen: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.RadioGroup, {
+      jssStyle: {
+        radio: _shineoutStyle.useRadioStyle
+      },
+      data: ['success', 'info', 'warning', 'danger'],
+      value: type,
+      onChange: setType,
+      keygen: true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Progress, {
+      iconSize: 30,
+      icon: icon,
+      type: type,
+      jssStyle: jssStyle,
+      value: value,
+      shape: shape,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+        children: [value, "%"]
+      })
+    })]
+  });
+};
+exports.default = _default;

package/esm/progress/analyzeColor.d.ts

@@ -0,0 +1,4 @@
+import { ColorStep } from './progress.type';
+declare const _default: (color: ColorStep) => ColorStep[];
+export default _default;
+//# sourceMappingURL=analyzeColor.d.ts.map

package/esm/progress/analyzeColor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"analyzeColor.d.ts","sourceRoot":"","sources":["analyzeColor.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;gCAErB,SAAS;AAAhC,wBAcE"}

package/esm/progress/analyzeColor.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.sort.js");
+var _default = function _default(color) {
+  if (color.from) {
+    return [{
+      pos: '0%',
+      color: color.from
+    }, {
+      pos: '100%',
+      color: color.to
+    }];
+  }
+  return Object.keys(color).sort(function (a, b) {
+    return window.parseInt(a) - window.parseInt(b);
+  }).reduce(function (p, v) {
+    p.push({
+      pos: v,
+      color: color[v]
+    });
+    return p;
+  }, []);
+};
+exports.default = _default;

package/esm/progress/circle.d.ts

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

package/esm/progress/circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circle.d.ts","sourceRoot":"","sources":["circle.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,QAAA,MAAM,MAAM,UAAW,aAAa,gBAmFnC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/progress/circle.js

@@ -0,0 +1,101 @@
+"use strict";
+
+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");
+require("core-js/modules/es.array.map.js");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icons = _interopRequireDefault(require("../icons"));
+var _analyzeColor = _interopRequireDefault(require("./analyzeColor"));
+var _jsxRuntime = require("react/jsx-runtime");
+var Circle = function Circle(props) {
+  var _props$jssStyle;
+  var _props$value = props.value,
+    value = _props$value === void 0 ? 0 : _props$value,
+    _props$type = props.type,
+    type = _props$type === void 0 ? 'info' : _props$type,
+    color = props.color,
+    _props$strokeWidth = props.strokeWidth,
+    strokeWidth = _props$strokeWidth === void 0 ? 4 : _props$strokeWidth,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 64 : _props$size,
+    _props$strokeLinecap = props.strokeLinecap,
+    strokeLinecap = _props$strokeLinecap === void 0 ? 'round' : _props$strokeLinecap,
+    iconSize = props.iconSize;
+  var progressClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : _props$jssStyle.progress();
+  var iconStyle = {
+    width: iconSize,
+    height: iconSize
+  };
+  var cx = size / 2;
+  var cy = size / 2;
+  var r = size / 2 - strokeWidth / 2;
+  var showIcon = !!props.icon;
+  var p = Math.PI * 2 * r;
+  var dasharray = [p * (value / 100), p * (1 - value / 100)];
+  var style = Object.assign({
+    width: size,
+    height: size
+  }, props.style);
+  var width = value === 0 && strokeLinecap === 'round' ? 0 : strokeWidth;
+  var objColor = color && (0, _typeof2.default)(color) === 'object';
+  var mc = (0, _classnames.default)(props.className, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.circle, progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapper, type === 'success' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperSuccess), type === 'info' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperInfo), type === 'warning' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperWarning), type === 'danger' && (progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.wrapperDanger));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: mc,
+    style: style,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      viewBox: "0 0 ".concat(size, " ").concat(size),
+      children: [objColor ? /*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("linearGradient", {
+          id: "progress-linear",
+          x1: "50%",
+          x2: "50%",
+          y1: "0%",
+          y2: "100%",
+          children: (0, _analyzeColor.default)(color).map(function (c) {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)("stop", {
+              offset: c.pos,
+              stopColor: c.color
+            }, c.pos);
+          })
+        })
+      }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.circleBg,
+        cx: cx,
+        cy: cy,
+        r: r,
+        strokeWidth: strokeWidth,
+        fill: "transparent",
+        style: {
+          stroke: props.background
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+        className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.circleFront,
+        cx: cx,
+        cy: cy,
+        r: r,
+        fill: "transparent",
+        style: {
+          stroke: objColor ? "url('#progress-linear')" : color
+        },
+        strokeDasharray: dasharray,
+        strokeLinecap: strokeLinecap,
+        strokeWidth: width
+      })]
+    }), !showIcon && props.children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.content,
+      children: props.children
+    }), showIcon && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.icon,
+      style: iconStyle,
+      children: [type === 'info' && _icons.default.Warning, type === 'warning' && _icons.default.Warning, type === 'success' && _icons.default.Check, type === 'danger' && _icons.default.Close]
+    })]
+  });
+};
+var _default = Circle;
+exports.default = _default;

package/esm/progress/index.d.ts

@@ -0,0 +1,3 @@
+export { default, default as Progress } from './progress';
+export type { ProgressProps } from './progress.type';
+//# sourceMappingURL=index.d.ts.map

package/esm/progress/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,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/progress/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function get() {
+    return _progress.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _progress.default;
+  }
+});
+var _progress = _interopRequireDefault(require("./progress"));

package/esm/progress/line-popup.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ProgressProps } from './progress.type';
+declare const LinePopUp: (props: {
+    value: number;
+    children?: React.ReactNode;
+    jssStyle?: ProgressProps['jssStyle'];
+}) => JSX.Element;
+export default LinePopUp;
+//# sourceMappingURL=line-popup.d.ts.map

package/esm/progress/line-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line-popup.d.ts","sourceRoot":"","sources":["line-popup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAKhD,QAAA,MAAM,SAAS,UAAW;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,gBAsBA,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/esm/progress/line-popup.js

@@ -0,0 +1,39 @@
+"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"));
+require("core-js/modules/es.array.concat.js");
+var _react = _interopRequireDefault(require("react"));
+var _config = require("../config");
+var _jsxRuntime = require("react/jsx-runtime");
+var ROTATE_MAX_ANGLE = 15;
+var PROGRESS_CENTER = 60;
+var LinePopUp = function LinePopUp(props) {
+  var _props$jssStyle, _props$jssStyle$progr;
+  var config = (0, _config.useConfig)();
+  var isRtl = config.direction === 'rtl';
+  var progressClasses = (_props$jssStyle = props.jssStyle) === null || _props$jssStyle === void 0 ? void 0 : (_props$jssStyle$progr = _props$jssStyle.progress) === null || _props$jssStyle$progr === void 0 ? void 0 : _props$jssStyle$progr.call(_props$jssStyle);
+  var getStyle = function getStyle() {
+    var _ref;
+    var value = props.value;
+    var rotate = 0;
+    if (value <= PROGRESS_CENTER) rotate = ROTATE_MAX_ANGLE * (value / PROGRESS_CENTER);else rotate = (1 - value / 100) * ROTATE_MAX_ANGLE;
+    return _ref = {}, (0, _defineProperty2.default)(_ref, isRtl ? 'right' : 'left', "".concat(value, "%")), (0, _defineProperty2.default)(_ref, "transform", "translateX(".concat(isRtl ? '50%' : '-50%', ") rotate(").concat(rotate, "deg)")), _ref;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.linePopWrapper,
+    style: getStyle(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.linePopValue,
+      children: props.children
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: progressClasses === null || progressClasses === void 0 ? void 0 : progressClasses.linePopArrow
+    })]
+  });
+};
+var _default = LinePopUp;
+exports.default = _default;

package/esm/progress/line.d.ts

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

package/esm/progress/line.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"line.d.ts","sourceRoot":"","sources":["line.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAMhD,QAAA,MAAM,IAAI,UAAW,aAAa,gBA6EjC,CAAC;AAEF,eAAe,IAAI,CAAC"}