@useblu/ocean-react 1.123.0 → 1.125.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.125.0](https://github.com/ocean-ds/ocean-web/compare/v1.124.0...v1.125.0) (2026-01-13)
+
+### Features
+
+- Introduces a new percentage property to the component to enable loading progress control. ([#1215](https://github.com/ocean-ds/ocean-web/issues/1215)) ([688bf8e](https://github.com/ocean-ds/ocean-web/commit/688bf8e260add9d6e8b042744ddd7d5ecbe686fa))
+
+# [1.124.0](https://github.com/ocean-ds/ocean-web/compare/v1.123.0...v1.124.0) (2026-01-08)
+
+### Features
+
+- card list item ([#1213](https://github.com/ocean-ds/ocean-web/issues/1213)) ([1f6344b](https://github.com/ocean-ds/ocean-web/commit/1f6344bfd098f60bbc48e9c905ee406a674644fa))
+
 # [1.123.0](https://github.com/ocean-ds/ocean-web/compare/v1.122.0...v1.123.0) (2025-12-22)
 
 ### Features

package/Progress/Progress.d.ts

@@ -2,10 +2,12 @@ import React from 'react';
 export type ProgressProps = {
     size?: 'md' | 'lg' | 'sm';
     onColor?: boolean;
+    percentage?: undefined | number;
 } & React.ComponentPropsWithoutRef<'div'>;
 declare const Progress: React.ForwardRefExoticComponent<{
     size?: "md" | "lg" | "sm";
     onColor?: boolean;
+    percentage?: undefined | number;
 } & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
 export default Progress;
 //# sourceMappingURL=Progress.d.ts.map

package/Progress/Progress.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,MAAM,MAAM,aAAa,GAAG;IAK1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAM1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ;WATL,IAAI,GAAG,IAAI,GAAG,IAAI;cAMf,OAAO;kLAsBlB,CAAC;AAIF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Progress.d.ts","sourceRoot":"","sources":["../../src/Progress/Progress.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,MAAM,aAAa,GAAG;IAK1B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAM1B,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,UAAU,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;CACjC,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,QAAQ;WAhBL,IAAI,GAAG,IAAI,GAAG,IAAI;cAMf,OAAO;iBAOJ,SAAS,GAAG,MAAM;kLAsChC,CAAC;AAIF,eAAe,QAAQ,CAAC"}

package/Progress/img/IconDeterminate.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type IconDeterminateProps = {
+    size: 'sm' | 'md' | 'lg';
+    percentage: undefined | number;
+};
+declare const IconDeterminate: React.FunctionComponent<IconDeterminateProps>;
+export default IconDeterminate;
+//# sourceMappingURL=IconDeterminate.d.ts.map

package/Progress/img/IconDeterminate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconDeterminate.d.ts","sourceRoot":"","sources":["../../../src/Progress/img/IconDeterminate.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,UAAU,EAAE,SAAS,GAAG,MAAM,CAAC;CAChC,CAAC;AAEF,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAyClE,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/index.es.js

@@ -375,14 +375,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';