@peculiar/react-components 0.0.2-alpha.232 → 0.0.2-alpha.234

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 (8) hide show
  1. package/dist/cjs/CircularProgress/circular_progress.js +25 -27
  2. package/dist/cjs/CircularProgress/circular_progress.js.map +1 -1
  3. package/dist/esm/CircularProgress/circular_progress.js +25 -27
  4. package/dist/esm/CircularProgress/circular_progress.js.map +1 -1
  5. package/dist/esnext/CircularProgress/circular_progress.js +36 -25
  6. package/dist/esnext/CircularProgress/circular_progress.js.map +1 -1
  7. package/dist/types/CircularProgress/circular_progress.d.ts +3 -0
  8. package/package.json +3 -3
package/dist/cjs/CircularProgress/circular_progress.js CHANGED
@@ -32,13 +32,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
32
32
  exports.CircularProgress = void 0;
33
33
  var react_1 = __importDefault(require("react"));
34
34
  var styles_1 = require("../styles");
35
- var stylesKeyframeProgress = styles_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
35
+ /**
36
+ * Styles.
37
+ */
38
+ var SIZE = 44;
39
+ var THICKNESS = 4;
40
+ var circularRotateKeyframe = styles_1.keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
41
+ var circularDashKeyframe = styles_1.keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"], ["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"])));
36
42
  var stylesBase = function (color) { return styles_1.css({
37
43
  label: 'CircularProgress',
38
44
  overflow: 'hidden',
39
45
  position: 'relative',
40
46
  display: 'inline-block',
41
47
  color: "var(--pv-color-" + color + ")",
48
+ animation: circularRotateKeyframe + " 1.4s linear infinite",
42
49
  }); };
43
50
  var stylesBaseSmall = function () { return styles_1.css({
44
51
  label: 'small',
@@ -50,45 +57,36 @@ var stylesBaseLarge = function () { return styles_1.css({
50
57
  height: 'var(--pv-size-base-6)',
51
58
  width: 'var(--pv-size-base-6)',
52
59
  }); };
53
- var stylesProgress = function () { return styles_1.css({
54
- label: 'CircularProgress-progress',
55
- top: 0,
56
- left: 0,
57
- bottom: 0,
58
- right: 0,
59
- position: 'absolute',
60
- borderRadius: '50%',
61
- borderColor: 'currentColor transparent transparent',
62
- borderStyle: 'solid',
63
- animation: stylesKeyframeProgress + " 1.3s cubic-bezier(0.53, 0.21, 0.29, 0.67) 0s infinite",
60
+ var stylesProgressSvg = function () { return styles_1.css({
61
+ label: 'CircularProgress-svg',
62
+ display: 'block',
64
63
  }); };
65
- var stylesProgressSmall = function () { return styles_1.css({
66
- label: 'small',
67
- borderWidth: '2px',
68
- }); };
69
- var stylesProgressLarge = function () { return styles_1.css({
70
- label: 'large',
71
- borderWidth: '4px',
64
+ var stylesProgressCircle = function () { return styles_1.css({
65
+ label: 'CircularProgress-circle',
66
+ stroke: 'currentcolor',
67
+ strokeDasharray: '80px, 200px',
68
+ strokeDashoffset: 0,
69
+ animation: circularDashKeyframe + " 1.4s ease-in-out infinite",
72
70
  }); };
71
+ /**
72
+ *
73
+ */
73
74
  exports.CircularProgress = react_1.default.forwardRef(function (props, ref) {
74
- var _a, _b;
75
+ var _a;
75
76
  var color = props.color, className = props.className, size = props.size, other = __rest(props, ["color", "className", "size"]);
76
77
  return (react_1.default.createElement("div", __assign({}, other, { ref: ref, className: styles_1.cx((_a = {},
77
78
  _a[stylesBase(color)] = true,
78
79
  _a[stylesBaseSmall()] = size === 'small',
79
80
  _a[stylesBaseLarge()] = size === 'large',
80
81
  _a[className] = !!className,
81
- _a)) }),
82
- react_1.default.createElement("div", { className: styles_1.cx((_b = {},
83
- _b[stylesProgress()] = true,
84
- _b[stylesProgressSmall()] = size === 'small',
85
- _b[stylesProgressLarge()] = size === 'large',
86
- _b)) })));
82
+ _a)), role: "progressbar" }),
83
+ react_1.default.createElement("svg", { viewBox: SIZE / 2 + " " + SIZE / 2 + " " + SIZE + " " + SIZE, className: stylesProgressSvg() },
84
+ react_1.default.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
87
85
  });
88
86
  exports.CircularProgress.displayName = 'CircularProgress';
89
87
  exports.CircularProgress.defaultProps = {
90
88
  color: 'primary',
91
89
  size: 'large',
92
90
  };
93
- var templateObject_1;
91
+ var templateObject_1, templateObject_2;
94
92
  //# sourceMappingURL=circular_progress.js.map
package/dist/cjs/CircularProgress/circular_progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAA+C;AAmB/C,IAAM,sBAAsB,GAAG,kBAAS,iKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAgC,IAAK,OAAA,YAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,oBAAkB,KAAK,MAAG;CAClC,CAAC,EANuD,CAMvD,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,YAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,YAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,cAAc,GAAG,cAAM,OAAA,YAAG,CAAC;IAC/B,KAAK,EAAE,2BAA2B;IAClC,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,sCAAsC;IACnD,WAAW,EAAE,OAAO;IACpB,SAAS,EAAK,sBAAsB,2DAAwD;CAC7F,CAAC,EAX2B,CAW3B,CAAC;AAEH,IAAM,mBAAmB,GAAG,cAAM,OAAA,YAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,EAHgC,CAGhC,CAAC;AAEH,IAAM,mBAAmB,GAAG,cAAM,OAAA,YAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,EAHgC,CAGhC,CAAC;AAEU,QAAA,gBAAgB,GAAG,eAAK,CAAC,UAAU,CAC9C,UAAC,KAAK,EAAE,GAAG;;IAEP,IAAA,KAAK,GAIH,KAAK,MAJF,EACL,SAAS,GAGP,KAAK,UAHE,EACT,IAAI,GAEF,KAAK,KAFH,EACD,KAAK,UACN,KAAK,EALH,8BAKL,CADS,CACA;IAEV,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAE;YACX,GAAC,UAAU,CAAC,KAAK,CAAC,IAAG,IAAI;YACzB,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB;QAEF,uCACE,SAAS,EAAE,WAAE;gBACX,GAAC,cAAc,EAAE,IAAG,IAAI;gBACxB,GAAC,mBAAmB,EAAE,IAAG,IAAI,KAAK,OAAO;gBACzC,GAAC,mBAAmB,EAAE,IAAG,IAAI,KAAK,OAAO;oBACzC,GACF,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,wBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
1
+ {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAA+C;AAmB/C;;GAEG;AACH,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,IAAM,sBAAsB,GAAG,kBAAS,iKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,oBAAoB,GAAG,kBAAS,wTAAA,qPAarC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAgC,IAAK,OAAA,YAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,oBAAkB,KAAK,MAAG;IACjC,SAAS,EAAK,sBAAsB,0BAAuB;CAC5D,CAAC,EAPuD,CAOvD,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,YAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,YAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,iBAAiB,GAAG,cAAM,OAAA,YAAG,CAAC;IAClC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC,EAH8B,CAG9B,CAAC;AAEH,IAAM,oBAAoB,GAAG,cAAM,OAAA,YAAG,CAAC;IACrC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,SAAS,EAAK,oBAAoB,+BAA4B;CAC/D,CAAC,EANiC,CAMjC,CAAC;AACH;;GAEG;AAEU,QAAA,gBAAgB,GAAG,eAAK,CAAC,UAAU,CAC9C,UAAC,KAAK,EAAE,GAAG;;IAEP,IAAA,KAAK,GAIH,KAAK,MAJF,EACL,SAAS,GAGP,KAAK,UAHE,EACT,IAAI,GAEF,KAAK,KAFH,EACD,KAAK,UACN,KAAK,EALH,8BAKL,CADS,CACA;IAEV,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,WAAE;YACX,GAAC,UAAU,CAAC,KAAK,CAAC,IAAG,IAAI;YACzB,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB,EACF,IAAI,EAAC,aAAa;QAElB,uCACE,OAAO,EAAK,IAAI,GAAG,CAAC,SAAI,IAAI,GAAG,CAAC,SAAI,IAAI,SAAI,IAAM,EAClD,SAAS,EAAE,iBAAiB,EAAE;YAE9B,0CACE,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EACzB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,oBAAoB,EAAE,GACjC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,wBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,wBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
package/dist/esm/CircularProgress/circular_progress.js CHANGED
@@ -26,13 +26,20 @@ var __rest = (this && this.__rest) || function (s, e) {
26
26
  };
27
27
  import React from 'react';
28
28
  import { css, cx, keyframes } from '../styles';
29
- var stylesKeyframeProgress = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
29
+ /**
30
+ * Styles.
31
+ */
32
+ var SIZE = 44;
33
+ var THICKNESS = 4;
34
+ var circularRotateKeyframe = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"], ["\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n"])));
35
+ var circularDashKeyframe = keyframes(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"], ["\n 0% {\n stroke-dasharray: 1px, 200px;\n stroke-dashoffset: 0;\n }\n 50% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -15px;\n }\n 100% {\n stroke-dasharray: 100px, 200px;\n stroke-dashoffset: -125px;\n }\n"])));
30
36
  var stylesBase = function (color) { return css({
31
37
  label: 'CircularProgress',
32
38
  overflow: 'hidden',
33
39
  position: 'relative',
34
40
  display: 'inline-block',
35
41
  color: "var(--pv-color-" + color + ")",
42
+ animation: circularRotateKeyframe + " 1.4s linear infinite",
36
43
  }); };
37
44
  var stylesBaseSmall = function () { return css({
38
45
  label: 'small',
@@ -44,45 +51,36 @@ var stylesBaseLarge = function () { return css({
44
51
  height: 'var(--pv-size-base-6)',
45
52
  width: 'var(--pv-size-base-6)',
46
53
  }); };
47
- var stylesProgress = function () { return css({
48
- label: 'CircularProgress-progress',
49
- top: 0,
50
- left: 0,
51
- bottom: 0,
52
- right: 0,
53
- position: 'absolute',
54
- borderRadius: '50%',
55
- borderColor: 'currentColor transparent transparent',
56
- borderStyle: 'solid',
57
- animation: stylesKeyframeProgress + " 1.3s cubic-bezier(0.53, 0.21, 0.29, 0.67) 0s infinite",
54
+ var stylesProgressSvg = function () { return css({
55
+ label: 'CircularProgress-svg',
56
+ display: 'block',
58
57
  }); };
59
- var stylesProgressSmall = function () { return css({
60
- label: 'small',
61
- borderWidth: '2px',
62
- }); };
63
- var stylesProgressLarge = function () { return css({
64
- label: 'large',
65
- borderWidth: '4px',
58
+ var stylesProgressCircle = function () { return css({
59
+ label: 'CircularProgress-circle',
60
+ stroke: 'currentcolor',
61
+ strokeDasharray: '80px, 200px',
62
+ strokeDashoffset: 0,
63
+ animation: circularDashKeyframe + " 1.4s ease-in-out infinite",
66
64
  }); };
65
+ /**
66
+ *
67
+ */
67
68
  export var CircularProgress = React.forwardRef(function (props, ref) {
68
- var _a, _b;
69
+ var _a;
69
70
  var color = props.color, className = props.className, size = props.size, other = __rest(props, ["color", "className", "size"]);
70
71
  return (React.createElement("div", __assign({}, other, { ref: ref, className: cx((_a = {},
71
72
  _a[stylesBase(color)] = true,
72
73
  _a[stylesBaseSmall()] = size === 'small',
73
74
  _a[stylesBaseLarge()] = size === 'large',
74
75
  _a[className] = !!className,
75
- _a)) }),
76
- React.createElement("div", { className: cx((_b = {},
77
- _b[stylesProgress()] = true,
78
- _b[stylesProgressSmall()] = size === 'small',
79
- _b[stylesProgressLarge()] = size === 'large',
80
- _b)) })));
76
+ _a)), role: "progressbar" }),
77
+ React.createElement("svg", { viewBox: SIZE / 2 + " " + SIZE / 2 + " " + SIZE + " " + SIZE, className: stylesProgressSvg() },
78
+ React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
81
79
  });
82
80
  CircularProgress.displayName = 'CircularProgress';
83
81
  CircularProgress.defaultProps = {
84
82
  color: 'primary',
85
83
  size: 'large',
86
84
  };
87
- var templateObject_1;
85
+ var templateObject_1, templateObject_2;
88
86
  //# sourceMappingURL=circular_progress.js.map
package/dist/esm/CircularProgress/circular_progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAmB/C,IAAM,sBAAsB,GAAG,SAAS,iKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAgC,IAAK,OAAA,GAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,oBAAkB,KAAK,MAAG;CAClC,CAAC,EANuD,CAMvD,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,cAAc,GAAG,cAAM,OAAA,GAAG,CAAC;IAC/B,KAAK,EAAE,2BAA2B;IAClC,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,sCAAsC;IACnD,WAAW,EAAE,OAAO;IACpB,SAAS,EAAK,sBAAsB,2DAAwD;CAC7F,CAAC,EAX2B,CAW3B,CAAC;AAEH,IAAM,mBAAmB,GAAG,cAAM,OAAA,GAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,EAHgC,CAGhC,CAAC;AAEH,IAAM,mBAAmB,GAAG,cAAM,OAAA,GAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,EAHgC,CAGhC,CAAC;AAEH,MAAM,CAAC,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,UAAC,KAAK,EAAE,GAAG;;IAEP,IAAA,KAAK,GAIH,KAAK,MAJF,EACL,SAAS,GAGP,KAAK,UAHE,EACT,IAAI,GAEF,KAAK,KAFH,EACD,KAAK,UACN,KAAK,EALH,8BAKL,CADS,CACA;IAEV,OAAO,CACL,wCACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE;YACX,GAAC,UAAU,CAAC,KAAK,CAAC,IAAG,IAAI;YACzB,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB;QAEF,6BACE,SAAS,EAAE,EAAE;gBACX,GAAC,cAAc,EAAE,IAAG,IAAI;gBACxB,GAAC,mBAAmB,EAAE,IAAG,IAAI,KAAK,OAAO;gBACzC,GAAC,mBAAmB,EAAE,IAAG,IAAI,KAAK,OAAO;oBACzC,GACF,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
1
+ {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAmB/C;;GAEG;AACH,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,IAAM,sBAAsB,GAAG,SAAS,iKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,oBAAoB,GAAG,SAAS,wTAAA,qPAarC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAgC,IAAK,OAAA,GAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,oBAAkB,KAAK,MAAG;IACjC,SAAS,EAAK,sBAAsB,0BAAuB;CAC5D,CAAC,EAPuD,CAOvD,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,EAJ4B,CAI5B,CAAC;AAEH,IAAM,iBAAiB,GAAG,cAAM,OAAA,GAAG,CAAC;IAClC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC,EAH8B,CAG9B,CAAC;AAEH,IAAM,oBAAoB,GAAG,cAAM,OAAA,GAAG,CAAC;IACrC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,SAAS,EAAK,oBAAoB,+BAA4B;CAC/D,CAAC,EANiC,CAMjC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,IAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,UAAC,KAAK,EAAE,GAAG;;IAEP,IAAA,KAAK,GAIH,KAAK,MAJF,EACL,SAAS,GAGP,KAAK,UAHE,EACT,IAAI,GAEF,KAAK,KAFH,EACD,KAAK,UACN,KAAK,EALH,8BAKL,CADS,CACA;IAEV,OAAO,CACL,wCACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE;YACX,GAAC,UAAU,CAAC,KAAK,CAAC,IAAG,IAAI;YACzB,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,eAAe,EAAE,IAAG,IAAI,KAAK,OAAO;YACrC,GAAC,SAAS,IAAG,CAAC,CAAC,SAAS;gBACxB,EACF,IAAI,EAAC,aAAa;QAElB,6BACE,OAAO,EAAK,IAAI,GAAG,CAAC,SAAI,IAAI,GAAG,CAAC,SAAI,IAAI,SAAI,IAAM,EAClD,SAAS,EAAE,iBAAiB,EAAE;YAE9B,gCACE,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EACzB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,oBAAoB,EAAE,GACjC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
package/dist/esnext/CircularProgress/circular_progress.js CHANGED
@@ -1,6 +1,11 @@
1
1
  import React from 'react';
2
2
  import { css, cx, keyframes } from '../styles';
3
- const stylesKeyframeProgress = keyframes `
3
+ /**
4
+ * Styles.
5
+ */
6
+ const SIZE = 44;
7
+ const THICKNESS = 4;
8
+ const circularRotateKeyframe = keyframes `
4
9
  0% {
5
10
  transform: rotate(0deg);
6
11
  }
@@ -8,12 +13,27 @@ const stylesKeyframeProgress = keyframes `
8
13
  transform: rotate(360deg);
9
14
  }
10
15
  `;
16
+ const circularDashKeyframe = keyframes `
17
+ 0% {
18
+ stroke-dasharray: 1px, 200px;
19
+ stroke-dashoffset: 0;
20
+ }
21
+ 50% {
22
+ stroke-dasharray: 100px, 200px;
23
+ stroke-dashoffset: -15px;
24
+ }
25
+ 100% {
26
+ stroke-dasharray: 100px, 200px;
27
+ stroke-dashoffset: -125px;
28
+ }
29
+ `;
11
30
  const stylesBase = (color) => css({
12
31
  label: 'CircularProgress',
13
32
  overflow: 'hidden',
14
33
  position: 'relative',
15
34
  display: 'inline-block',
16
35
  color: `var(--pv-color-${color})`,
36
+ animation: `${circularRotateKeyframe} 1.4s linear infinite`,
17
37
  });
18
38
  const stylesBaseSmall = () => css({
19
39
  label: 'small',
@@ -25,26 +45,20 @@ const stylesBaseLarge = () => css({
25
45
  height: 'var(--pv-size-base-6)',
26
46
  width: 'var(--pv-size-base-6)',
27
47
  });
28
- const stylesProgress = () => css({
29
- label: 'CircularProgress-progress',
30
- top: 0,
31
- left: 0,
32
- bottom: 0,
33
- right: 0,
34
- position: 'absolute',
35
- borderRadius: '50%',
36
- borderColor: 'currentColor transparent transparent',
37
- borderStyle: 'solid',
38
- animation: `${stylesKeyframeProgress} 1.3s cubic-bezier(0.53, 0.21, 0.29, 0.67) 0s infinite`,
39
- });
40
- const stylesProgressSmall = () => css({
41
- label: 'small',
42
- borderWidth: '2px',
48
+ const stylesProgressSvg = () => css({
49
+ label: 'CircularProgress-svg',
50
+ display: 'block',
43
51
  });
44
- const stylesProgressLarge = () => css({
45
- label: 'large',
46
- borderWidth: '4px',
52
+ const stylesProgressCircle = () => css({
53
+ label: 'CircularProgress-circle',
54
+ stroke: 'currentcolor',
55
+ strokeDasharray: '80px, 200px',
56
+ strokeDashoffset: 0,
57
+ animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
47
58
  });
59
+ /**
60
+ *
61
+ */
48
62
  export const CircularProgress = React.forwardRef((props, ref) => {
49
63
  const { color, className, size, ...other } = props;
50
64
  return (React.createElement("div", Object.assign({}, other, { ref: ref, className: cx({
@@ -52,12 +66,9 @@ export const CircularProgress = React.forwardRef((props, ref) => {
52
66
  [stylesBaseSmall()]: size === 'small',
53
67
  [stylesBaseLarge()]: size === 'large',
54
68
  [className]: !!className,
55
- }) }),
56
- React.createElement("div", { className: cx({
57
- [stylesProgress()]: true,
58
- [stylesProgressSmall()]: size === 'small',
59
- [stylesProgressLarge()]: size === 'large',
60
- }) })));
69
+ }), role: "progressbar" }),
70
+ React.createElement("svg", { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`, className: stylesProgressSvg() },
71
+ React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
61
72
  });
62
73
  CircularProgress.displayName = 'CircularProgress';
63
74
  CircularProgress.defaultProps = {
package/dist/esnext/CircularProgress/circular_progress.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAmB/C,MAAM,sBAAsB,GAAG,SAAS,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAgC,EAAE,EAAE,CAAC,GAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,kBAAkB,KAAK,GAAG;CAClC,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,CAAC;AAEH,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAC/B,KAAK,EAAE,2BAA2B;IAClC,GAAG,EAAE,CAAC;IACN,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,UAAU;IACpB,YAAY,EAAE,KAAK;IACnB,WAAW,EAAE,sCAAsC;IACnD,WAAW,EAAE,OAAO;IACpB,SAAS,EAAE,GAAG,sBAAsB,wDAAwD;CAC7F,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,CAAC;AAEH,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IACpC,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,KAAK;CACnB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,6CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI;YACzB,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;YACrC,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;YACrC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC;QAEF,6BACE,SAAS,EAAE,EAAE,CAAC;gBACZ,CAAC,cAAc,EAAE,CAAC,EAAE,IAAI;gBACxB,CAAC,mBAAmB,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;gBACzC,CAAC,mBAAmB,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;aAC1C,CAAC,GACF,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
1
+ {"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,GAAG,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAmB/C;;GAEG;AACH,MAAM,IAAI,GAAG,EAAE,CAAC;AAChB,MAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,MAAM,sBAAsB,GAAG,SAAS,CAAA;;;;;;;CAOvC,CAAC;AAEF,MAAM,oBAAoB,GAAG,SAAS,CAAA;;;;;;;;;;;;;CAarC,CAAC;AAEF,MAAM,UAAU,GAAG,CAAC,KAAgC,EAAE,EAAE,CAAC,GAAG,CAAC;IAC3D,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,kBAAkB,KAAK,GAAG;IACjC,SAAS,EAAE,GAAG,sBAAsB,uBAAuB;CAC5D,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,CAAC;AAEH,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAChC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,uBAAuB;CAC/B,CAAC,CAAC;AAEH,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IAClC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC,CAAC;AAEH,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC;IACrC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,SAAS,EAAE,GAAG,oBAAoB,4BAA4B;CAC/D,CAAC,CAAC;AACH;;GAEG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAC9C,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,KAAK,EACL,SAAS,EACT,IAAI,EACJ,GAAG,KAAK,EACT,GAAG,KAAK,CAAC;IAEV,OAAO,CACL,6CACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC;YACZ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI;YACzB,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;YACrC,CAAC,eAAe,EAAE,CAAC,EAAE,IAAI,KAAK,OAAO;YACrC,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS;SACzB,CAAC,EACF,IAAI,EAAC,aAAa;QAElB,6BACE,OAAO,EAAE,GAAG,IAAI,GAAG,CAAC,IAAI,IAAI,GAAG,CAAC,IAAI,IAAI,IAAI,IAAI,EAAE,EAClD,SAAS,EAAE,iBAAiB,EAAE;YAE9B,gCACE,EAAE,EAAE,IAAI,EACR,EAAE,EAAE,IAAI,EACR,CAAC,EAAE,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,EACzB,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,SAAS,EACtB,SAAS,EAAE,oBAAoB,EAAE,GACjC,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,GAAG,kBAAkB,CAAC;AAElD,gBAAgB,CAAC,YAAY,GAAG;IAC9B,KAAK,EAAE,SAAS;IAChB,IAAI,EAAE,OAAO;CACd,CAAC"}
package/dist/types/CircularProgress/circular_progress.d.ts CHANGED
@@ -13,5 +13,8 @@ declare type BaseProps = {
13
13
  */
14
14
  size?: ('small' | 'large');
15
15
  };
16
+ /**
17
+ *
18
+ */
16
19
  export declare const CircularProgress: React.ForwardRefExoticComponent<BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & React.RefAttributes<HTMLDivElement>>;
17
20
  export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@peculiar/react-components",
3
3
  "private": false,
4
- "version": "0.0.2-alpha.232+9b6898e",
4
+ "version": "0.0.2-alpha.234+5cdb40e",
5
5
  "author": "PeculiarVentures Team",
6
6
  "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
7
7
  "keywords": [
@@ -39,7 +39,7 @@
39
39
  },
40
40
  "dependencies": {
41
41
  "@emotion/css": "^11.1.3",
42
- "@peculiar/color": "^0.0.2-alpha.232+9b6898e",
42
+ "@peculiar/color": "^0.0.2-alpha.234+5cdb40e",
43
43
  "@popperjs/core": "^2.9.3",
44
44
  "@types/react-transition-group": "^4.4.2",
45
45
  "copy-to-clipboard": "^3.3.1",
@@ -79,5 +79,5 @@
79
79
  "node": ">=12.x"
80
80
  },
81
81
  "license": "MIT",
82
- "gitHead": "9b6898eff24c77afb05f3061abc4d667dff81401"
82
+ "gitHead": "5cdb40e657f804f9b261ff48a693eface1283d9b"
83
83
  }