@useblu/ocean-react 1.124.0 → 1.125.0

package/index.js

@@ -377,14 +377,33 @@ var IconLg = function () { return (e.createElement("svg", { width: "32", height:
     e.createElement("circle", { opacity: "0.4", cx: "16", cy: "16", r: "14", stroke: "#B8C3FF", strokeWidth: "4" }),
     e.createElement("path", { d: "M16 2C17.8385 2 19.659 2.36212 21.3576 3.06569C23.0561 3.76925 24.5995 4.80049 25.8995 6.10051C27.1995 7.40053 28.2307 8.94388 28.9343 10.6424C29.6379 12.341 30 14.1615 30 16", stroke: "#0025E0", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round" }))); };
 
+var SIZE_CONFIG = {
+    sm: { size: 16, strokeWidth: 3, radius: 6 },
+    md: { size: 24, strokeWidth: 4, radius: 10 },
+    lg: { size: 32, strokeWidth: 5, radius: 13 },
+};
+var IconDeterminate = function (_a) {
+    var size = _a.size, percentage = _a.percentage;
+    var config = SIZE_CONFIG[size];
+    var circumference = 2 * Math.PI * config.radius;
+    var normalizedPercentage = Math.min(100, Math.max(0, percentage !== null && percentage !== void 0 ? percentage : 0));
+    var strokeDashoffset = circumference - (normalizedPercentage / 100) * circumference;
+    return (e.createElement("svg", { width: config.size, height: config.size, viewBox: "0 0 ".concat(config.size, " ").concat(config.size), fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "ods-progress__determinate" },
+        e.createElement("circle", { className: "ods-progress__track", cx: config.size / 2, cy: config.size / 2, r: config.radius, strokeWidth: config.strokeWidth, fill: "none" }),
+        e.createElement("circle", { className: "ods-progress__fill", cx: config.size / 2, cy: config.size / 2, r: config.radius, strokeWidth: config.strokeWidth, fill: "none", strokeLinecap: "round", strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, transform: "rotate(-90 ".concat(config.size / 2, " ").concat(config.size / 2, ")") })));
+};
+
 var Progress = e.forwardRef(function (_a, ref) {
-    var _b = _a.onColor, onColor = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, className = _a.className, rest = __rest$1(_a, ["onColor", "size", "className"]);
+    var _b = _a.onColor, onColor = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 'md' : _c, percentage = _a.percentage, className = _a.className, rest = __rest$1(_a, ["onColor", "size", "percentage", "className"]);
+    var isIndeterminate = typeof percentage === 'undefined';
     return (e.createElement("div", __assign$1({ ref: ref, className: classNames('ods-progress', "ods-progress--".concat(size), className, {
             'ods-progress--on-color': onColor,
-        }) }, rest),
+            'ods-progress--indeterminate': isIndeterminate,
+            'ods-progress--determinate': !isIndeterminate,
+        }), role: "progressbar", "aria-valuenow": isIndeterminate ? undefined : percentage, "aria-valuemin": isIndeterminate ? undefined : 0, "aria-valuemax": isIndeterminate ? undefined : 100 }, rest), isIndeterminate ? (e.createElement(e.Fragment, null,
         size === 'sm' && e.createElement(IconSm, null),
         size === 'md' && e.createElement(IconMd, null),
-        size === 'lg' && e.createElement(IconLg, null)));
+        size === 'lg' && e.createElement(IconLg, null))) : (e.createElement(IconDeterminate, { size: size, percentage: percentage }))));
 });
 Progress.displayName = 'Progress';