@peculiar/react-components 0.1.9 → 0.1.10

package/dist/cjs/CircularProgress/circular_progress.js

@@ -39,14 +39,11 @@ var SIZE = 44;
 var THICKNESS = 4;
 var circularRotateKeyframe = (0, 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"])));
 var circularDashKeyframe = (0, 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"])));
-var stylesBase = function (color) { return (0, styles_1.css)({
-    label: 'CircularProgress',
-    overflow: 'hidden',
-    position: 'relative',
-    display: 'inline-block',
-    color: "var(--pv-color-".concat(color, ")"),
+var stylesBase = function (color, variant) { return (0, styles_1.css)(__assign({ label: 'CircularProgress', overflow: 'hidden', position: 'relative', display: 'inline-block', color: "var(--pv-color-".concat(color, ")") }, (variant === 'indeterminate' ? {
     animation: "".concat(circularRotateKeyframe, " 1.4s linear infinite"),
-}); };
+} : {
+    transform: 'rotate(-90deg)',
+}))); };
 var stylesBaseSmall = function () { return (0, styles_1.css)({
     label: 'small',
     height: 'var(--pv-size-base-3)',
@@ -61,32 +58,36 @@ var stylesProgressSvg = function () { return (0, styles_1.css)({
     label: 'CircularProgress-svg',
     display: 'block',
 }); };
-var stylesProgressCircle = function () { return (0, styles_1.css)({
-    label: 'CircularProgress-circle',
-    stroke: 'currentcolor',
-    strokeDasharray: '80px, 200px',
-    strokeDashoffset: 0,
+var stylesProgressCircle = function (variant) { return (0, styles_1.css)(__assign({ label: 'CircularProgress-circle', stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (variant === 'indeterminate' && {
     animation: "".concat(circularDashKeyframe, " 1.4s ease-in-out infinite"),
-}); };
+}))); };
 /**
  *
  */
 exports.CircularProgress = react_1.default.forwardRef(function (props, ref) {
     var _a;
-    var color = props.color, className = props.className, size = props.size, other = __rest(props, ["color", "className", "size"]);
+    var color = props.color, className = props.className, size = props.size, _b = props.variant, variant = _b === void 0 ? 'indeterminate' : _b, _c = props.value, value = _c === void 0 ? 0 : _c, other = __rest(props, ["color", "className", "size", "variant", "value"]);
+    var circleStyle = {};
+    if (variant === 'determinate') {
+        var circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
+        circleStyle.strokeDasharray = circumference.toFixed(3);
+        circleStyle.strokeDashoffset = "".concat((((100 - value) / 100) * circumference).toFixed(3), "px");
+    }
     return (react_1.default.createElement("div", __assign({}, other, { ref: ref, className: (0, styles_1.cx)((_a = {},
-            _a[stylesBase(color)] = true,
+            _a[stylesBase(color, variant)] = true,
             _a[stylesBaseSmall()] = size === 'small',
             _a[stylesBaseLarge()] = size === 'large',
             _a[className] = !!className,
             _a)), role: "progressbar" }),
         react_1.default.createElement("svg", { viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE), className: stylesProgressSvg() },
-            react_1.default.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
+            react_1.default.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
 });
 exports.CircularProgress.displayName = 'CircularProgress';
 exports.CircularProgress.defaultProps = {
     color: 'primary',
     size: 'large',
+    variant: 'indeterminate',
+    value: 0,
 };
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=circular_progress.js.map

package/dist/cjs/CircularProgress/circular_progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAA+C;AAuB/C;;GAEG;AACH,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,IAAM,sBAAsB,OAAG,kBAAS,kKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,oBAAoB,OAAG,kBAAS,yTAAA,qPAarC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAyB,IAAK,OAAA,IAAA,YAAG,EAAC;IACpD,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,QAAQ;IAClB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,cAAc;IACvB,KAAK,EAAE,yBAAkB,KAAK,MAAG;IACjC,SAAS,EAAE,UAAG,sBAAsB,0BAAuB;CAC5D,CAAC,EAPgD,CAOhD,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,IAAA,YAAG,EAAC;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,IAAA,YAAG,EAAC;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,IAAA,YAAG,EAAC;IAClC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC,EAH8B,CAG9B,CAAC;AAEH,IAAM,oBAAoB,GAAG,cAAM,OAAA,IAAA,YAAG,EAAC;IACrC,KAAK,EAAE,yBAAyB;IAChC,MAAM,EAAE,cAAc;IACtB,eAAe,EAAE,aAAa;IAC9B,gBAAgB,EAAE,CAAC;IACnB,SAAS,EAAE,UAAG,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,IAAA,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,EAAE,UAAG,IAAI,GAAG,CAAC,cAAI,IAAI,GAAG,CAAC,cAAI,IAAI,cAAI,IAAI,CAAE,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"}
+{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAC1B,oCAA+C;AAiC/C;;GAEG;AACH,IAAM,IAAI,GAAG,EAAE,CAAC;AAChB,IAAM,SAAS,GAAG,CAAC,CAAC;AAEpB,IAAM,sBAAsB,OAAG,kBAAS,kKAAA,8FAOvC,IAAA,CAAC;AAEF,IAAM,oBAAoB,OAAG,kBAAS,yTAAA,qPAarC,IAAA,CAAC;AAEF,IAAM,UAAU,GAAG,UAAC,KAAyB,EAAE,OAA6B,IAAK,OAAA,IAAA,YAAG,aAClF,KAAK,EAAE,kBAAkB,EACzB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,yBAAkB,KAAK,MAAG,IAC9B,CAAC,OAAO,KAAK,eAAe,CAAC,CAAC,CAAC;IAChC,SAAS,EAAE,UAAG,sBAAsB,0BAAuB;CAC5D,CAAC,CAAC,CAAC;IACF,SAAS,EAAE,gBAAgB;CAC5B,CAAC,EACF,EAX+E,CAW/E,CAAC;AAEH,IAAM,eAAe,GAAG,cAAM,OAAA,IAAA,YAAG,EAAC;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,IAAA,YAAG,EAAC;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,IAAA,YAAG,EAAC;IAClC,KAAK,EAAE,sBAAsB;IAC7B,OAAO,EAAE,OAAO;CACjB,CAAC,EAH8B,CAG9B,CAAC;AAEH,IAAM,oBAAoB,GAAG,UAAC,OAA6B,IAAK,OAAA,IAAA,YAAG,aACjE,KAAK,EAAE,yBAAyB,EAChC,MAAM,EAAE,cAAc,EACtB,eAAe,EAAE,aAAa,EAC9B,gBAAgB,EAAE,CAAC,IAChB,CAAC,OAAO,KAAK,eAAe,IAAI;IACjC,SAAS,EAAE,UAAG,oBAAoB,+BAA4B;CAC/D,CAAC,EACF,EAR8D,CAQ9D,CAAC;AACH;;GAEG;AAEU,QAAA,gBAAgB,GAAG,eAAK,CAAC,UAAU,CAC9C,UAAC,KAAK,EAAE,GAAG;;IAEP,IAAA,KAAK,GAMH,KAAK,MANF,EACL,SAAS,GAKP,KAAK,UALE,EACT,IAAI,GAIF,KAAK,KAJH,EACJ,KAGE,KAAK,QAHkB,EAAzB,OAAO,mBAAG,eAAe,KAAA,EACzB,KAEE,KAAK,MAFE,EAAT,KAAK,mBAAG,CAAC,KAAA,EACN,KAAK,UACN,KAAK,EAPH,kDAOL,CADS,CACA;IACV,IAAM,WAAW,GAAwB,EAAE,CAAC;IAE5C,IAAI,OAAO,KAAK,aAAa,EAAE;QAC7B,IAAM,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;QAE7D,WAAW,CAAC,eAAe,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvD,WAAW,CAAC,gBAAgB,GAAG,UAAG,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAI,CAAC;KAC1F;IAED,OAAO,CACL,kDACM,KAAK,IACT,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAA,WAAE;YACX,GAAC,UAAU,CAAC,KAAK,EAAE,OAAO,CAAC,IAAG,IAAI;YAClC,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,EAAE,UAAG,IAAI,GAAG,CAAC,cAAI,IAAI,GAAG,CAAC,cAAI,IAAI,cAAI,IAAI,CAAE,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,CAAC,OAAO,CAAC,EACxC,KAAK,EAAE,WAAW,GAClB,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;IACb,OAAO,EAAE,eAAe;IACxB,KAAK,EAAE,CAAC;CACT,CAAC"}

package/dist/esm/CircularProgress/circular_progress.js

@@ -33,14 +33,11 @@ var SIZE = 44;
 var THICKNESS = 4;
 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"])));
 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"])));
-var stylesBase = function (color) { return css({
-    label: 'CircularProgress',
-    overflow: 'hidden',
-    position: 'relative',
-    display: 'inline-block',
-    color: "var(--pv-color-".concat(color, ")"),
+var stylesBase = function (color, variant) { return css(__assign({ label: 'CircularProgress', overflow: 'hidden', position: 'relative', display: 'inline-block', color: "var(--pv-color-".concat(color, ")") }, (variant === 'indeterminate' ? {
     animation: "".concat(circularRotateKeyframe, " 1.4s linear infinite"),
-}); };
+} : {
+    transform: 'rotate(-90deg)',
+}))); };
 var stylesBaseSmall = function () { return css({
     label: 'small',
     height: 'var(--pv-size-base-3)',
@@ -55,32 +52,36 @@ var stylesProgressSvg = function () { return css({
     label: 'CircularProgress-svg',
     display: 'block',
 }); };
-var stylesProgressCircle = function () { return css({
-    label: 'CircularProgress-circle',
-    stroke: 'currentcolor',
-    strokeDasharray: '80px, 200px',
-    strokeDashoffset: 0,
+var stylesProgressCircle = function (variant) { return css(__assign({ label: 'CircularProgress-circle', stroke: 'currentcolor', strokeDasharray: '80px, 200px', strokeDashoffset: 0 }, (variant === 'indeterminate' && {
     animation: "".concat(circularDashKeyframe, " 1.4s ease-in-out infinite"),
-}); };
+}))); };
 /**
  *
  */
 export var CircularProgress = React.forwardRef(function (props, ref) {
     var _a;
-    var color = props.color, className = props.className, size = props.size, other = __rest(props, ["color", "className", "size"]);
+    var color = props.color, className = props.className, size = props.size, _b = props.variant, variant = _b === void 0 ? 'indeterminate' : _b, _c = props.value, value = _c === void 0 ? 0 : _c, other = __rest(props, ["color", "className", "size", "variant", "value"]);
+    var circleStyle = {};
+    if (variant === 'determinate') {
+        var circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
+        circleStyle.strokeDasharray = circumference.toFixed(3);
+        circleStyle.strokeDashoffset = "".concat((((100 - value) / 100) * circumference).toFixed(3), "px");
+    }
     return (React.createElement("div", __assign({}, other, { ref: ref, className: cx((_a = {},
-            _a[stylesBase(color)] = true,
+            _a[stylesBase(color, variant)] = true,
             _a[stylesBaseSmall()] = size === 'small',
             _a[stylesBaseLarge()] = size === 'large',
             _a[className] = !!className,
             _a)), role: "progressbar" }),
         React.createElement("svg", { viewBox: "".concat(SIZE / 2, " ").concat(SIZE / 2, " ").concat(SIZE, " ").concat(SIZE), className: stylesProgressSvg() },
-            React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
+            React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
 });
 CircularProgress.displayName = 'CircularProgress';
 CircularProgress.defaultProps = {
     color: 'primary',
     size: 'large',
+    variant: 'indeterminate',
+    value: 0,
 };
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=circular_progress.js.map

package/dist/esm/CircularProgress/circular_progress.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"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"}

package/dist/esnext/CircularProgress/circular_progress.js

@@ -27,13 +27,17 @@ const circularDashKeyframe = keyframes `
     stroke-dashoffset: -125px;
   }
 `;
-const stylesBase = (color) => css({
+const stylesBase = (color, variant) => css({
     label: 'CircularProgress',
     overflow: 'hidden',
     position: 'relative',
     display: 'inline-block',
     color: `var(--pv-color-${color})`,
-    animation: `${circularRotateKeyframe} 1.4s linear infinite`,
+    ...(variant === 'indeterminate' ? {
+        animation: `${circularRotateKeyframe} 1.4s linear infinite`,
+    } : {
+        transform: 'rotate(-90deg)',
+    }),
 });
 const stylesBaseSmall = () => css({
     label: 'small',
@@ -49,30 +53,40 @@ const stylesProgressSvg = () => css({
     label: 'CircularProgress-svg',
     display: 'block',
 });
-const stylesProgressCircle = () => css({
+const stylesProgressCircle = (variant) => css({
     label: 'CircularProgress-circle',
     stroke: 'currentcolor',
     strokeDasharray: '80px, 200px',
     strokeDashoffset: 0,
-    animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
+    ...(variant === 'indeterminate' && {
+        animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`,
+    }),
 });
 /**
  *
  */
 export const CircularProgress = React.forwardRef((props, ref) => {
-    const { color, className, size, ...other } = props;
+    const { color, className, size, variant = 'indeterminate', value = 0, ...other } = props;
+    const circleStyle = {};
+    if (variant === 'determinate') {
+        const circumference = 2 * Math.PI * ((SIZE - THICKNESS) / 2);
+        circleStyle.strokeDasharray = circumference.toFixed(3);
+        circleStyle.strokeDashoffset = `${(((100 - value) / 100) * circumference).toFixed(3)}px`;
+    }
     return (React.createElement("div", { ...other, ref: ref, className: cx({
-            [stylesBase(color)]: true,
+            [stylesBase(color, variant)]: true,
             [stylesBaseSmall()]: size === 'small',
             [stylesBaseLarge()]: size === 'large',
             [className]: !!className,
         }), role: "progressbar" },
         React.createElement("svg", { viewBox: `${SIZE / 2} ${SIZE / 2} ${SIZE} ${SIZE}`, className: stylesProgressSvg() },
-            React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle() }))));
+            React.createElement("circle", { cx: SIZE, cy: SIZE, r: (SIZE - THICKNESS) / 2, fill: "none", strokeWidth: THICKNESS, className: stylesProgressCircle(variant), style: circleStyle }))));
 });
 CircularProgress.displayName = 'CircularProgress';
 CircularProgress.defaultProps = {
     color: 'primary',
     size: 'large',
+    variant: 'indeterminate',
+    value: 0,
 };
 //# sourceMappingURL=circular_progress.js.map

package/dist/esnext/CircularProgress/circular_progress.js.map

@@ -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;AAuB/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,KAAyB,EAAE,EAAE,CAAC,GAAG,CAAC;IACpD,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,gCACM,KAAK,EACT,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"}
+{"version":3,"file":"circular_progress.js","sourceRoot":"","sources":["../../../src/CircularProgress/circular_progress.tsx"],"names":[],"mappings":"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"}

package/dist/types/CircularProgress/circular_progress.d.ts

@@ -12,6 +12,16 @@ declare type BaseProps = {
      * The size of the progress.
      */
     size?: ('small' | 'large');
+    /**
+     * The variant to use.
+     * Use indeterminate when there is no progress value.
+     */
+    variant?: 'determinate' | 'indeterminate';
+    /**
+     * The value of the progress indicator for the determinate variant.
+     * Value between 0 and 100.
+     */
+    value?: number;
 };
 export declare type CircularProgressProps = BaseProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>;
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peculiar/react-components",
   "private": false,
-  "version": "0.1.9",
+  "version": "0.1.10",
   "author": "PeculiarVentures Team",
   "description": "A simple and customizable component library to build faster, beautiful, and more accessible React applications.",
   "keywords": [
@@ -103,5 +103,5 @@
     "node": ">=12.x"
   },
   "license": "MIT",
-  "gitHead": "92c8e5ca3d78107b0e252bb3adcb670f03309c29"
+  "gitHead": "79367fd4380886c84b1b379261094d2d0eafdfa4"
 }