@elliemae/ds-circular-progress-indicator 2.3.0-next.4 → 2.3.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/cjs/v2/DSCircularIndeterminateIndicator.js +85 -106
  2. package/cjs/v2/constants.js +37 -0
  3. package/cjs/v2/react-desc-prop-types.js +31 -9
  4. package/cjs/v2/styled.js +51 -0
  5. package/esm/v2/DSCircularIndeterminateIndicator.js +84 -104
  6. package/esm/v2/constants.js +30 -0
  7. package/esm/v2/react-desc-prop-types.js +21 -4
  8. package/esm/v2/styled.js +39 -0
  9. package/package.json +11 -3
  10. package/types/v2/DSCircularIndeterminateIndicator.d.ts +1 -6
  11. package/types/v2/constants.d.ts +28 -0
  12. package/types/v2/react-desc-prop-types.d.ts +3 -21
  13. package/types/v2/styled.d.ts +12 -0
package/cjs/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -2,132 +2,111 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
5
11
  var _jsx = require('@babel/runtime/helpers/jsx');
6
- var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
7
- require('react');
12
+ var react = require('react');
8
13
  var dsGrid = require('@elliemae/ds-grid');
9
14
  var DSTooltip = require('@elliemae/ds-tooltip');
10
- var reactDesc = require('react-desc');
11
- var styled = require('styled-components');
12
- var dsSystem = require('@elliemae/ds-system');
15
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
13
16
  var uid = require('uid');
14
17
  var reactDescPropTypes = require('./react-desc-prop-types.js');
18
+ var constants = require('./constants.js');
19
+ var styled = require('./styled.js');
15
20
  var jsxRuntime = require('react/jsx-runtime');
16
21
 
17
22
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
18
23
 
24
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
19
25
  var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
20
- var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
21
- var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
22
26
 
23
- var _templateObject, _templateObject2, _circle;
24
- const r = dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["to { transform: rotate(2turn) }"])));
25
- const s = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["0%, 39% { stroke-dasharray: 942px 2826px }"])));
26
- const StyledSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
27
- componentId: "sc-3syz25-0"
28
- })(["#gg{transform:rotate(45deg);stroke:url(#", ");mask:url(#", ");}mask use{stroke:#fff;stroke-linecap:round;stroke-dasharray:942px 2826px;animation:", " ", "s cubic-bezier(0.5,-0.43,0.5,1.43) infinite,", " ", "s ease-in-out infinite alternate;}"], props => props.linearGradientUid, props => props.maskUid, r, props => props.duration, s, props => props.duration / 2);
29
- const sizeToPx = {
30
- xs: '16px',
31
- s: '24px',
32
- m: '32px',
33
- l: '48px',
34
- xl: '56px',
35
- xxl: '64px'
36
- };
37
- const sizeToWeight = {
38
- xs: '10%',
39
- s: '9%',
40
- m: '8%',
41
- l: '6%',
42
- xl: '5%',
43
- xxl: '4%'
44
- };
45
- const colorToHex = {
46
- light: '#FFFFFF',
47
- dark: '#0F364A'
48
- };
49
- const sizeToTextSize = {
50
- xs: '12px',
51
- s: '12px',
52
- m: '12px',
53
- l: '13px',
54
- xl: '14px',
55
- xxl: '16px'
56
- };
57
- const DSCircularIndeterminateIndicator = _ref => {
58
- let {
59
- size = 'm',
60
- color = 'dark',
61
- text = '',
62
- showText = true,
63
- withTooltip = false,
64
- tooltipStartPlacementPreference = 'bottom',
65
- __duration = 1.5
66
- } = _ref;
67
- const Wrapper = withTooltip ? DSTooltip.DSTooltipV3 : _ref2 => {
27
+ 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; }
28
+
29
+ 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) { _defineProperty__default["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; }
30
+ const DSCircularIndeterminateIndicator = props => {
31
+ const propsWithDefault = dsPropsHelpers.useMemoMergePropsWithDefault(props, reactDescPropTypes.defaultProps);
32
+ const globalAttributes = dsPropsHelpers.useGetGlobalAttributes(propsWithDefault);
33
+ const {
34
+ size,
35
+ color,
36
+ text,
37
+ showText,
38
+ withTooltip,
39
+ tooltipStartPlacementPreference,
40
+ __duration
41
+ } = propsWithDefault;
42
+ const Wrapper = react.useMemo(() => withTooltip ? DSTooltip.DSTooltipV3 : _ref => {
68
43
  let {
69
44
  children
70
- } = _ref2;
45
+ } = _ref;
71
46
  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
72
47
  children: children
73
48
  });
74
- };
75
- const linearGradientUid = uid.uid(16);
76
- const maskUid = uid.uid(16);
77
- const circleUid = uid.uid(16);
78
- return /*#__PURE__*/_jsx__default["default"](dsGrid.Grid, {
49
+ }, [withTooltip]);
50
+ const uniqueId = react.useMemo(() => uid.uid(16), []);
51
+ const circleRadius = react.useMemo(() => (constants.sizeToPx[size] - Number.parseInt(constants.sizeToWeight[size], 10)) / 2, [size]);
52
+ return /*#__PURE__*/jsxRuntime.jsx(dsGrid.Grid, _objectSpread(_objectSpread({
79
53
  gutter: "xs",
80
54
  justifyContent: "center",
81
55
  role: "status"
82
- }, void 0, /*#__PURE__*/_jsx__default["default"](Wrapper, {
83
- text: text,
84
- textAlign: "center",
85
- startPlacementPreference: tooltipStartPlacementPreference
86
- }, void 0, /*#__PURE__*/_jsx__default["default"](StyledSvg, {
87
- viewBox: "-1950 -975 3900 1950",
88
- fill: "none",
89
- stroke: "transparent",
90
- strokeWidth: sizeToWeight[size],
91
- width: sizeToPx[size],
92
- height: sizeToPx[size],
93
- style: {
94
- display: 'block',
95
- margin: 'auto'
96
- },
97
- linearGradientUid: linearGradientUid,
98
- maskUid: maskUid,
99
- duration: __duration
100
- }, void 0, /*#__PURE__*/_jsx__default["default"]("g", {
101
- transform: "scale(2.298)"
102
- }, void 0, /*#__PURE__*/_jsx__default["default"]("linearGradient", {
103
- id: linearGradientUid
104
- }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
105
- stopColor: color === 'dark' ? '#48a3ff' : '#ccd6ff'
106
- }), /*#__PURE__*/_jsx__default["default"]("stop", {
107
- stopColor: color === 'dark' ? '#49d0ff' : '#ebf6ff',
108
- offset: "1"
109
- })), /*#__PURE__*/_jsx__default["default"]("mask", {
110
- id: maskUid
111
- }, void 0, _circle || (_circle = /*#__PURE__*/_jsx__default["default"]("circle", {
112
- r: "1200",
113
- fill: "#000"
114
- })), /*#__PURE__*/_jsx__default["default"]("use", {
115
- xlinkHref: "#".concat(circleUid)
116
- })), /*#__PURE__*/_jsx__default["default"]("circle", {
117
- id: circleUid,
118
- r: "600"
119
- }), /*#__PURE__*/_jsx__default["default"]("g", {
120
- id: "gg"
121
- }, void 0, /*#__PURE__*/_jsx__default["default"]("use", {
122
- xlinkHref: "#".concat(circleUid)
123
- })))), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
124
- style: {
125
- color: colorToHex[color],
126
- fontSize: sizeToTextSize[size]
127
- }
128
- }, void 0, text)));
56
+ }, globalAttributes), {}, {
57
+ children: /*#__PURE__*/_jsx__default["default"](Wrapper, {
58
+ text: text,
59
+ textAlign: "center",
60
+ startPlacementPreference: tooltipStartPlacementPreference
61
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledSvg, {
62
+ width: constants.sizeToPx[size],
63
+ height: constants.sizeToPx[size]
64
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("defs", {}, void 0, /*#__PURE__*/_jsx__default["default"]("clipPath", {
65
+ id: "not-gradient-clip-".concat(uniqueId)
66
+ }, void 0, /*#__PURE__*/_jsx__default["default"](styled.StyledRect, {
67
+ x: "0%",
68
+ y: "0%",
69
+ width: "52%",
70
+ height: "100%",
71
+ __duration: __duration
72
+ })), /*#__PURE__*/_jsx__default["default"]("linearGradient", {
73
+ id: "gradient-color-".concat(uniqueId),
74
+ x1: "0%",
75
+ x2: "0%",
76
+ y1: "0%",
77
+ y2: "100%"
78
+ }, void 0, /*#__PURE__*/_jsx__default["default"]("stop", {
79
+ offset: "10%",
80
+ stopColor: "".concat(constants.colorToHex[color], "00")
81
+ }), /*#__PURE__*/_jsx__default["default"]("stop", {
82
+ offset: "90%",
83
+ stopColor: "".concat(constants.colorToHex[color], "FF")
84
+ }))), /*#__PURE__*/_jsx__default["default"](styled.StyledCircle, {
85
+ cx: "50%",
86
+ cy: "50%",
87
+ r: circleRadius,
88
+ strokeWidth: constants.sizeToWeight[size],
89
+ stroke: constants.colorToHex[color],
90
+ strokeLinecap: "round",
91
+ clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
92
+ __duration: __duration
93
+ }), /*#__PURE__*/_jsx__default["default"](styled.StyledPath, {
94
+ d: "M ".concat(constants.sizeToPx[size] / 2, " ").concat(constants.sizeToPx[size] / 2, "\n m ").concat(circleRadius, ", 0\n a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
95
+ strokeWidth: constants.sizeToWeight[size],
96
+ fill: "transparent",
97
+ stroke: "url(#gradient-color-".concat(uniqueId, ")"),
98
+ strokeLinecap: "round",
99
+ r: circleRadius,
100
+ __duration: __duration
101
+ })), text !== '' && showText && /*#__PURE__*/_jsx__default["default"]("span", {
102
+ style: {
103
+ color: color === 'light' ? '#FFFFFF' : '#25292F99',
104
+ fontSize: constants.sizeToTextSize[size]
105
+ }
106
+ }, void 0, text))
107
+ }));
129
108
  };
130
- const DSCircularIndeterminateIndicatorWithSchema = reactDesc.describe(DSCircularIndeterminateIndicator);
109
+ const DSCircularIndeterminateIndicatorWithSchema = dsPropsHelpers.describe(DSCircularIndeterminateIndicator);
131
110
  DSCircularIndeterminateIndicatorWithSchema.propTypes = reactDescPropTypes.CircularIndeterminateIndicatorPropTypes;
132
111
 
133
112
  exports.DSCircularIndeterminateIndicator = DSCircularIndeterminateIndicator;
package/cjs/v2/constants.js ADDED
@@ -0,0 +1,37 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const sizeToPx = {
6
+ xs: 16,
7
+ s: 24,
8
+ m: 32,
9
+ l: 48,
10
+ xl: 56,
11
+ xxl: 64
12
+ };
13
+ const sizeToWeight = {
14
+ xs: '3px',
15
+ s: '3px',
16
+ m: '3px',
17
+ l: '4px',
18
+ xl: '5px',
19
+ xxl: '6px'
20
+ };
21
+ const colorToHex = {
22
+ light: '#EBF6FF',
23
+ dark: '#1394E5'
24
+ };
25
+ const sizeToTextSize = {
26
+ xs: '12px',
27
+ s: '12px',
28
+ m: '12px',
29
+ l: '13px',
30
+ xl: '14px',
31
+ xxl: '16px'
32
+ };
33
+
34
+ exports.colorToHex = colorToHex;
35
+ exports.sizeToPx = sizeToPx;
36
+ exports.sizeToTextSize = sizeToTextSize;
37
+ exports.sizeToWeight = sizeToWeight;
package/cjs/v2/react-desc-prop-types.js CHANGED
@@ -2,16 +2,38 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- var reactDesc = require('react-desc');
5
+ require('core-js/modules/esnext.async-iterator.filter.js');
6
+ require('core-js/modules/esnext.iterator.constructor.js');
7
+ require('core-js/modules/esnext.iterator.filter.js');
8
+ require('core-js/modules/esnext.async-iterator.for-each.js');
9
+ require('core-js/modules/esnext.iterator.for-each.js');
10
+ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
11
+ var dsPropsHelpers = require('@elliemae/ds-props-helpers');
6
12
 
7
- /* eslint-disable max-lines */
8
- const CircularIndeterminateIndicatorPropTypes = {
9
- size: reactDesc.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
10
- color: reactDesc.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
11
- text: reactDesc.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
12
- showText: reactDesc.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
13
- withTooltip: reactDesc.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
14
- tooltipStartPlacementPreference: reactDesc.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
13
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+
15
+ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
16
+
17
+ 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; }
18
+
19
+ 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) { _defineProperty__default["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; }
20
+ const CircularIndeterminateIndicatorPropTypes = _objectSpread(_objectSpread({}, dsPropsHelpers.globalAttributesPropTypes), {}, {
21
+ size: dsPropsHelpers.PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
22
+ color: dsPropsHelpers.PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
23
+ text: dsPropsHelpers.PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
24
+ showText: dsPropsHelpers.PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
25
+ withTooltip: dsPropsHelpers.PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
26
+ tooltipStartPlacementPreference: dsPropsHelpers.PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
27
+ });
28
+ const defaultProps = {
29
+ size: 'm',
30
+ color: 'dark',
31
+ text: '',
32
+ showText: true,
33
+ withTooltip: false,
34
+ tooltipStartPlacementPreference: 'bottom',
35
+ __duration: 4
15
36
  };
16
37
 
17
38
  exports.CircularIndeterminateIndicatorPropTypes = CircularIndeterminateIndicatorPropTypes;
39
+ exports.defaultProps = defaultProps;
package/cjs/v2/styled.js ADDED
@@ -0,0 +1,51 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
6
+ var styled = require('styled-components');
7
+ var dsSystem = require('@elliemae/ds-system');
8
+
9
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
10
+
11
+ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefaultLegacy(_taggedTemplateLiteral);
12
+ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
13
+
14
+ var _templateObject, _templateObject2, _templateObject3;
15
+ const {
16
+ PI
17
+ } = Math;
18
+
19
+ const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
20
+
21
+ const strokeTailAnimation = r => {
22
+ const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
23
+ const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
24
+ return dsSystem.kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n 0% {\n stroke-dasharray: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n }\n"])), miniDash, fullDash, miniDash);
25
+ };
26
+
27
+ const rotateAnimation = dsSystem.kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n"])));
28
+
29
+ const dashAnimation = r => {
30
+ const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
31
+ const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
32
+ return dsSystem.kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n 0% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 37.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 62.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 75% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 87.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n"])), miniDash, fullDash, miniDash, getArcLength(-75, r), fullDash, getArcLength(-75, r), miniDash, getArcLength(-150, r), fullDash, getArcLength(-150, r), miniDash, getArcLength(-225, r), fullDash, getArcLength(-225, r), miniDash, getArcLength(-300, r));
33
+ };
34
+
35
+ const StyledSvg = /*#__PURE__*/styled__default["default"].svg.withConfig({
36
+ componentId: "sc-bvvh5i-0"
37
+ })(["display:block;margin:auto;transform-origin:center center;transform:rotate(-90deg);"]);
38
+ const StyledPath = /*#__PURE__*/styled__default["default"].path.withConfig({
39
+ componentId: "sc-bvvh5i-1"
40
+ })(["transform-origin:center center;animation:", " ", "s linear infinite,", " ", "s linear infinite;"], rotateAnimation, props => props.__duration, props => strokeTailAnimation(props.r), props => props.__duration / 4);
41
+ const StyledRect = /*#__PURE__*/styled__default["default"].rect.withConfig({
42
+ componentId: "sc-bvvh5i-2"
43
+ })(["transform-origin:center center;animation:", " ", "s linear infinite;"], rotateAnimation, props => props.__duration);
44
+ const StyledCircle = /*#__PURE__*/styled__default["default"].circle.withConfig({
45
+ componentId: "sc-bvvh5i-3"
46
+ })(["stroke-dashoffset:0;fill:none;animation:", " ", "s linear infinite;clip-path:", ";-webkit-clip-path:", ";"], props => dashAnimation(props.r), props => props.__duration, props => props.clipPath, props => props.clipPath);
47
+
48
+ exports.StyledCircle = StyledCircle;
49
+ exports.StyledPath = StyledPath;
50
+ exports.StyledRect = StyledRect;
51
+ exports.StyledSvg = StyledSvg;
package/esm/v2/DSCircularIndeterminateIndicator.js CHANGED
@@ -1,121 +1,101 @@
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
1
7
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
3
- import 'react';
8
+ import { useMemo } from 'react';
4
9
  import { Grid } from '@elliemae/ds-grid';
5
10
  import { DSTooltipV3 } from '@elliemae/ds-tooltip';
6
- import { describe } from 'react-desc';
7
- import styled from 'styled-components';
8
- import { kfrm } from '@elliemae/ds-system';
11
+ import { describe, useMemoMergePropsWithDefault, useGetGlobalAttributes } from '@elliemae/ds-props-helpers';
9
12
  import { uid } from 'uid';
10
- import { CircularIndeterminateIndicatorPropTypes } from './react-desc-prop-types.js';
13
+ import { CircularIndeterminateIndicatorPropTypes, defaultProps } from './react-desc-prop-types.js';
14
+ import { sizeToPx, sizeToWeight, colorToHex, sizeToTextSize } from './constants.js';
15
+ import { StyledSvg, StyledRect, StyledCircle, StyledPath } from './styled.js';
11
16
  import { jsx, Fragment } from 'react/jsx-runtime';
12
17
 
13
- var _templateObject, _templateObject2, _circle;
14
- const r = kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["to { transform: rotate(2turn) }"])));
15
- const s = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["0%, 39% { stroke-dasharray: 942px 2826px }"])));
16
- const StyledSvg = /*#__PURE__*/styled.svg.withConfig({
17
- componentId: "sc-3syz25-0"
18
- })(["#gg{transform:rotate(45deg);stroke:url(#", ");mask:url(#", ");}mask use{stroke:#fff;stroke-linecap:round;stroke-dasharray:942px 2826px;animation:", " ", "s cubic-bezier(0.5,-0.43,0.5,1.43) infinite,", " ", "s ease-in-out infinite alternate;}"], props => props.linearGradientUid, props => props.maskUid, r, props => props.duration, s, props => props.duration / 2);
19
- const sizeToPx = {
20
- xs: '16px',
21
- s: '24px',
22
- m: '32px',
23
- l: '48px',
24
- xl: '56px',
25
- xxl: '64px'
26
- };
27
- const sizeToWeight = {
28
- xs: '10%',
29
- s: '9%',
30
- m: '8%',
31
- l: '6%',
32
- xl: '5%',
33
- xxl: '4%'
34
- };
35
- const colorToHex = {
36
- light: '#FFFFFF',
37
- dark: '#0F364A'
38
- };
39
- const sizeToTextSize = {
40
- xs: '12px',
41
- s: '12px',
42
- m: '12px',
43
- l: '13px',
44
- xl: '14px',
45
- xxl: '16px'
46
- };
47
- const DSCircularIndeterminateIndicator = _ref => {
48
- let {
49
- size = 'm',
50
- color = 'dark',
51
- text = '',
52
- showText = true,
53
- withTooltip = false,
54
- tooltipStartPlacementPreference = 'bottom',
55
- __duration = 1.5
56
- } = _ref;
57
- const Wrapper = withTooltip ? DSTooltipV3 : _ref2 => {
18
+ 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; }
19
+
20
+ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
+ const DSCircularIndeterminateIndicator = props => {
22
+ const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
23
+ const globalAttributes = useGetGlobalAttributes(propsWithDefault);
24
+ const {
25
+ size,
26
+ color,
27
+ text,
28
+ showText,
29
+ withTooltip,
30
+ tooltipStartPlacementPreference,
31
+ __duration
32
+ } = propsWithDefault;
33
+ const Wrapper = useMemo(() => withTooltip ? DSTooltipV3 : _ref => {
58
34
  let {
59
35
  children
60
- } = _ref2;
36
+ } = _ref;
61
37
  return /*#__PURE__*/jsx(Fragment, {
62
38
  children: children
63
39
  });
64
- };
65
- const linearGradientUid = uid(16);
66
- const maskUid = uid(16);
67
- const circleUid = uid(16);
68
- return /*#__PURE__*/_jsx(Grid, {
40
+ }, [withTooltip]);
41
+ const uniqueId = useMemo(() => uid(16), []);
42
+ const circleRadius = useMemo(() => (sizeToPx[size] - Number.parseInt(sizeToWeight[size], 10)) / 2, [size]);
43
+ return /*#__PURE__*/jsx(Grid, _objectSpread(_objectSpread({
69
44
  gutter: "xs",
70
45
  justifyContent: "center",
71
46
  role: "status"
72
- }, void 0, /*#__PURE__*/_jsx(Wrapper, {
73
- text: text,
74
- textAlign: "center",
75
- startPlacementPreference: tooltipStartPlacementPreference
76
- }, void 0, /*#__PURE__*/_jsx(StyledSvg, {
77
- viewBox: "-1950 -975 3900 1950",
78
- fill: "none",
79
- stroke: "transparent",
80
- strokeWidth: sizeToWeight[size],
81
- width: sizeToPx[size],
82
- height: sizeToPx[size],
83
- style: {
84
- display: 'block',
85
- margin: 'auto'
86
- },
87
- linearGradientUid: linearGradientUid,
88
- maskUid: maskUid,
89
- duration: __duration
90
- }, void 0, /*#__PURE__*/_jsx("g", {
91
- transform: "scale(2.298)"
92
- }, void 0, /*#__PURE__*/_jsx("linearGradient", {
93
- id: linearGradientUid
94
- }, void 0, /*#__PURE__*/_jsx("stop", {
95
- stopColor: color === 'dark' ? '#48a3ff' : '#ccd6ff'
96
- }), /*#__PURE__*/_jsx("stop", {
97
- stopColor: color === 'dark' ? '#49d0ff' : '#ebf6ff',
98
- offset: "1"
99
- })), /*#__PURE__*/_jsx("mask", {
100
- id: maskUid
101
- }, void 0, _circle || (_circle = /*#__PURE__*/_jsx("circle", {
102
- r: "1200",
103
- fill: "#000"
104
- })), /*#__PURE__*/_jsx("use", {
105
- xlinkHref: "#".concat(circleUid)
106
- })), /*#__PURE__*/_jsx("circle", {
107
- id: circleUid,
108
- r: "600"
109
- }), /*#__PURE__*/_jsx("g", {
110
- id: "gg"
111
- }, void 0, /*#__PURE__*/_jsx("use", {
112
- xlinkHref: "#".concat(circleUid)
113
- })))), text !== '' && showText && /*#__PURE__*/_jsx("span", {
114
- style: {
115
- color: colorToHex[color],
116
- fontSize: sizeToTextSize[size]
117
- }
118
- }, void 0, text)));
47
+ }, globalAttributes), {}, {
48
+ children: /*#__PURE__*/_jsx(Wrapper, {
49
+ text: text,
50
+ textAlign: "center",
51
+ startPlacementPreference: tooltipStartPlacementPreference
52
+ }, void 0, /*#__PURE__*/_jsx(StyledSvg, {
53
+ width: sizeToPx[size],
54
+ height: sizeToPx[size]
55
+ }, void 0, /*#__PURE__*/_jsx("defs", {}, void 0, /*#__PURE__*/_jsx("clipPath", {
56
+ id: "not-gradient-clip-".concat(uniqueId)
57
+ }, void 0, /*#__PURE__*/_jsx(StyledRect, {
58
+ x: "0%",
59
+ y: "0%",
60
+ width: "52%",
61
+ height: "100%",
62
+ __duration: __duration
63
+ })), /*#__PURE__*/_jsx("linearGradient", {
64
+ id: "gradient-color-".concat(uniqueId),
65
+ x1: "0%",
66
+ x2: "0%",
67
+ y1: "0%",
68
+ y2: "100%"
69
+ }, void 0, /*#__PURE__*/_jsx("stop", {
70
+ offset: "10%",
71
+ stopColor: "".concat(colorToHex[color], "00")
72
+ }), /*#__PURE__*/_jsx("stop", {
73
+ offset: "90%",
74
+ stopColor: "".concat(colorToHex[color], "FF")
75
+ }))), /*#__PURE__*/_jsx(StyledCircle, {
76
+ cx: "50%",
77
+ cy: "50%",
78
+ r: circleRadius,
79
+ strokeWidth: sizeToWeight[size],
80
+ stroke: colorToHex[color],
81
+ strokeLinecap: "round",
82
+ clipPath: "url(#not-gradient-clip-".concat(uniqueId, ")"),
83
+ __duration: __duration
84
+ }), /*#__PURE__*/_jsx(StyledPath, {
85
+ d: "M ".concat(sizeToPx[size] / 2, " ").concat(sizeToPx[size] / 2, "\n m ").concat(circleRadius, ", 0\n a ").concat(circleRadius, ", ").concat(circleRadius, " 0 0, 1 -").concat(circleRadius, ", ").concat(circleRadius),
86
+ strokeWidth: sizeToWeight[size],
87
+ fill: "transparent",
88
+ stroke: "url(#gradient-color-".concat(uniqueId, ")"),
89
+ strokeLinecap: "round",
90
+ r: circleRadius,
91
+ __duration: __duration
92
+ })), text !== '' && showText && /*#__PURE__*/_jsx("span", {
93
+ style: {
94
+ color: color === 'light' ? '#FFFFFF' : '#25292F99',
95
+ fontSize: sizeToTextSize[size]
96
+ }
97
+ }, void 0, text))
98
+ }));
119
99
  };
120
100
  const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
121
101
  DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
package/esm/v2/constants.js ADDED
@@ -0,0 +1,30 @@
1
+ const sizeToPx = {
2
+ xs: 16,
3
+ s: 24,
4
+ m: 32,
5
+ l: 48,
6
+ xl: 56,
7
+ xxl: 64
8
+ };
9
+ const sizeToWeight = {
10
+ xs: '3px',
11
+ s: '3px',
12
+ m: '3px',
13
+ l: '4px',
14
+ xl: '5px',
15
+ xxl: '6px'
16
+ };
17
+ const colorToHex = {
18
+ light: '#EBF6FF',
19
+ dark: '#1394E5'
20
+ };
21
+ const sizeToTextSize = {
22
+ xs: '12px',
23
+ s: '12px',
24
+ m: '12px',
25
+ l: '13px',
26
+ xl: '14px',
27
+ xxl: '16px'
28
+ };
29
+
30
+ export { colorToHex, sizeToPx, sizeToTextSize, sizeToWeight };
package/esm/v2/react-desc-prop-types.js CHANGED
@@ -1,13 +1,30 @@
1
- import { PropTypes } from 'react-desc';
1
+ import 'core-js/modules/esnext.async-iterator.filter.js';
2
+ import 'core-js/modules/esnext.iterator.constructor.js';
3
+ import 'core-js/modules/esnext.iterator.filter.js';
4
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
5
+ import 'core-js/modules/esnext.iterator.for-each.js';
6
+ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
7
+ import { PropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';
2
8
 
3
- /* eslint-disable max-lines */
4
- const CircularIndeterminateIndicatorPropTypes = {
9
+ 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; }
10
+
11
+ 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) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
12
+ const CircularIndeterminateIndicatorPropTypes = _objectSpread(_objectSpread({}, globalAttributesPropTypes), {}, {
5
13
  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),
6
14
  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),
7
15
  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),
8
16
  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),
9
17
  withTooltip: PropTypes.bool.description('Whether to include a tooltip that shows the optional text on hover').defaultValue(false),
10
18
  tooltipStartPlacementPreference: PropTypes.oneOf(['top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']).description('start placement preference for the tooltip').defaultValue('center')
19
+ });
20
+ const defaultProps = {
21
+ size: 'm',
22
+ color: 'dark',
23
+ text: '',
24
+ showText: true,
25
+ withTooltip: false,
26
+ tooltipStartPlacementPreference: 'bottom',
27
+ __duration: 4
11
28
  };
12
29
 
13
- export { CircularIndeterminateIndicatorPropTypes };
30
+ export { CircularIndeterminateIndicatorPropTypes, defaultProps };
package/esm/v2/styled.js ADDED
@@ -0,0 +1,39 @@
1
+ import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
+ import styled from 'styled-components';
3
+ import { kfrm } from '@elliemae/ds-system';
4
+
5
+ var _templateObject, _templateObject2, _templateObject3;
6
+ const {
7
+ PI
8
+ } = Math;
9
+
10
+ const getArcLength = (percentage, radius) => 2 * PI * radius / 100 * percentage;
11
+
12
+ const strokeTailAnimation = r => {
13
+ const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
14
+ const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
15
+ return kfrm(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n }\n"])), miniDash, fullDash, miniDash);
16
+ };
17
+
18
+ const rotateAnimation = kfrm(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n 0%, 12.5% {\n transform: rotate(0);\n }\n 25%, 37.5% {\n transform: rotate(270deg);\n }\n 50%, 62.5% {\n transform: rotate(540deg);\n }\n 75%, 87.5% {\n transform: rotate(810deg);\n }\n 100% {\n transform: rotate(1080deg);\n }\n"])));
19
+
20
+ const dashAnimation = r => {
21
+ const miniDash = "".concat(getArcLength(0, r), " ").concat(getArcLength(100, r));
22
+ const fullDash = "".concat(getArcLength(75, r), " ").concat(getArcLength(25, r));
23
+ return kfrm(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n 0% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 12.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: 0;\n }\n 25% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 37.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 50% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 62.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 75% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 87.5% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n 100% {\n stroke-dasharray: ", ";\n stroke-dashoffset: ", ";\n }\n"])), miniDash, fullDash, miniDash, getArcLength(-75, r), fullDash, getArcLength(-75, r), miniDash, getArcLength(-150, r), fullDash, getArcLength(-150, r), miniDash, getArcLength(-225, r), fullDash, getArcLength(-225, r), miniDash, getArcLength(-300, r));
24
+ };
25
+
26
+ const StyledSvg = /*#__PURE__*/styled.svg.withConfig({
27
+ componentId: "sc-bvvh5i-0"
28
+ })(["display:block;margin:auto;transform-origin:center center;transform:rotate(-90deg);"]);
29
+ const StyledPath = /*#__PURE__*/styled.path.withConfig({
30
+ componentId: "sc-bvvh5i-1"
31
+ })(["transform-origin:center center;animation:", " ", "s linear infinite,", " ", "s linear infinite;"], rotateAnimation, props => props.__duration, props => strokeTailAnimation(props.r), props => props.__duration / 4);
32
+ const StyledRect = /*#__PURE__*/styled.rect.withConfig({
33
+ componentId: "sc-bvvh5i-2"
34
+ })(["transform-origin:center center;animation:", " ", "s linear infinite;"], rotateAnimation, props => props.__duration);
35
+ const StyledCircle = /*#__PURE__*/styled.circle.withConfig({
36
+ componentId: "sc-bvvh5i-3"
37
+ })(["stroke-dashoffset:0;fill:none;animation:", " ", "s linear infinite;clip-path:", ";-webkit-clip-path:", ";"], props => dashAnimation(props.r), props => props.__duration, props => props.clipPath, props => props.clipPath);
38
+
39
+ export { StyledCircle, StyledPath, StyledRect, StyledSvg };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-circular-progress-indicator",
3
- "version": "2.3.0-next.4",
3
+ "version": "2.3.0-next.8",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Circular progress indicator",
6
6
  "module": "./esm/index.js",
@@ -11,6 +11,10 @@
11
11
  "import": "./esm/index.js",
12
12
  "require": "./cjs/index.js"
13
13
  },
14
+ "./v2/styled": {
15
+ "import": "./esm/v2/styled.js",
16
+ "require": "./cjs/v2/styled.js"
17
+ },
14
18
  "./v2/react-desc-prop-types": {
15
19
  "import": "./esm/v2/react-desc-prop-types.js",
16
20
  "require": "./cjs/v2/react-desc-prop-types.js"
@@ -23,6 +27,10 @@
23
27
  "import": "./esm/v2/DSCircularIndeterminateIndicator.js",
24
28
  "require": "./cjs/v2/DSCircularIndeterminateIndicator.js"
25
29
  },
30
+ "./v2/constants": {
31
+ "import": "./esm/v2/constants.js",
32
+ "require": "./cjs/v2/constants.js"
33
+ },
26
34
  "./DSCircularProgressIndicator": {
27
35
  "import": "./esm/DSCircularProgressIndicator.js",
28
36
  "require": "./cjs/DSCircularProgressIndicator.js"
@@ -48,8 +56,8 @@
48
56
  "build": "node ../../scripts/build/build.js"
49
57
  },
50
58
  "dependencies": {
51
- "@elliemae/ds-classnames": "2.3.0-next.4",
52
- "@elliemae/ds-tooltip": "2.3.0-next.4",
59
+ "@elliemae/ds-classnames": "2.3.0-next.8",
60
+ "@elliemae/ds-tooltip": "2.3.0-next.8",
53
61
  "react-desc": "~4.1.3"
54
62
  },
55
63
  "devDependencies": {
package/types/v2/DSCircularIndeterminateIndicator.d.ts CHANGED
@@ -1,9 +1,4 @@
1
- /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
2
1
  import React from 'react';
3
2
  import { DSCircularIndeterminateIndicatorT } from './react-desc-prop-types';
4
3
  export declare const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props>;
5
- export declare const DSCircularIndeterminateIndicatorWithSchema: {
6
- (props?: unknown): JSX.Element;
7
- propTypes: unknown;
8
- toTypescript: () => import("react-desc").TypescriptSchema;
9
- };
4
+ export declare const DSCircularIndeterminateIndicatorWithSchema: import("@elliemae/ds-props-helpers/types/propTypes/types").DocumentedReactComponent<DSCircularIndeterminateIndicatorT.Props>;
package/types/v2/constants.d.ts ADDED
@@ -0,0 +1,28 @@
1
+ export declare const sizeToPx: {
2
+ xs: number;
3
+ s: number;
4
+ m: number;
5
+ l: number;
6
+ xl: number;
7
+ xxl: number;
8
+ };
9
+ export declare const sizeToWeight: {
10
+ xs: string;
11
+ s: string;
12
+ m: string;
13
+ l: string;
14
+ xl: string;
15
+ xxl: string;
16
+ };
17
+ export declare const colorToHex: {
18
+ light: string;
19
+ dark: string;
20
+ };
21
+ export declare const sizeToTextSize: {
22
+ xs: string;
23
+ s: string;
24
+ m: string;
25
+ l: string;
26
+ xl: string;
27
+ xxl: string;
28
+ };
package/types/v2/react-desc-prop-types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- /// <reference path="../../../../../shared/typings/react-desc.d.ts" />
1
+ import { WeakValidationMap } from 'react';
2
2
  export declare namespace DSCircularIndeterminateIndicatorT {
3
3
  interface Props {
4
4
  size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';
@@ -10,23 +10,5 @@ export declare namespace DSCircularIndeterminateIndicatorT {
10
10
  __duration: number;
11
11
  }
12
12
  }
13
- export declare const CircularIndeterminateIndicatorPropTypes: {
14
- size: {
15
- deprecated: import("react-desc").PropTypesDescValidator;
16
- };
17
- color: {
18
- deprecated: import("react-desc").PropTypesDescValidator;
19
- };
20
- text: {
21
- deprecated: import("react-desc").PropTypesDescValidator;
22
- };
23
- showText: {
24
- deprecated: import("react-desc").PropTypesDescValidator;
25
- };
26
- withTooltip: {
27
- deprecated: import("react-desc").PropTypesDescValidator;
28
- };
29
- tooltipStartPlacementPreference: {
30
- deprecated: import("react-desc").PropTypesDescValidator;
31
- };
32
- };
13
+ export declare const CircularIndeterminateIndicatorPropTypes: WeakValidationMap<unknown>;
14
+ export declare const defaultProps: DSCircularIndeterminateIndicatorT.Props;
package/types/v2/styled.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ export declare const StyledSvg: import("styled-components").StyledComponent<"svg", import("styled-components").DefaultTheme, {}, never>;
2
+ export declare const StyledPath: import("styled-components").StyledComponent<"path", import("styled-components").DefaultTheme, {
3
+ __duration: number;
4
+ r: number;
5
+ }, never>;
6
+ export declare const StyledRect: import("styled-components").StyledComponent<"rect", import("styled-components").DefaultTheme, {
7
+ __duration: number;
8
+ }, never>;
9
+ export declare const StyledCircle: import("styled-components").StyledComponent<"circle", import("styled-components").DefaultTheme, {
10
+ r: number;
11
+ __duration: number;
12
+ }, never>;