@ballistix.digital/react-components 7.0.2 → 7.1.1

package/dist/index.js

@@ -46,6 +46,7 @@ $parcel$export(module.exports, "ButtonGroupElement", () => $49256f91bd9e1c3f$exp
 $parcel$export(module.exports, "DropdownElement", () => $6f7275eb03c2b93c$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "IconElement", () => $2125901b4a9afff9$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "CollapsibleElement", () => $9a91e005c750fbb3$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "ProgressTrackElement", () => $ccdca29d489f3200$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "InputGroupForm", () => $75cfef1d7ff66e89$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "ContainerLayout", () => $f73096bc2c28d1e8$export$2e2bcd8739ae039);
 $parcel$export(module.exports, "DividerLayout", () => $b249780162e56cf8$export$2e2bcd8739ae039);
@@ -1309,6 +1310,81 @@ var $9a91e005c750fbb3$export$2e2bcd8739ae039 = $9a91e005c750fbb3$var$Collapsible
 
 
 
+
+
+var $3f21e39b768dacf2$var$base = {
+    container: 'w-fit h-fit relative group/tooltip',
+    icon: 'w-4! h-4! border-2 border-black rounded-full p-0.5 text-sm',
+    defaultIcon: 'text-gray-500 border-gray-500',
+    successIcon: 'text-green-500 border-green-500',
+    errorIcon: 'text-red-500 border-red-500',
+    pendingIcon: 'text-blue-500 border-blue-500 animate-spin',
+    stepContainer: "flex items-center after:content-[''] after:w-2 after:h-[2px] after:bg-gray-300 after:ml-0.5 after:mr-0.5 last:after:content-none",
+    stepLine: 'flex-1 h-px bg-gray-200',
+    stepsWrapper: 'flex items-center',
+    tooltipContainer: 'flex'
+};
+var $3f21e39b768dacf2$var$styles = {
+    base: $3f21e39b768dacf2$var$base
+};
+var $3f21e39b768dacf2$export$2e2bcd8739ae039 = $3f21e39b768dacf2$var$styles;
+
+
+var $ccdca29d489f3200$var$ProgressTrack = function(props) {
+    var stylesOverrides = props.styles;
+    var handleGenerateStyle = (0, $iA2ta$react.useCallback)(function() {
+        var result = (0, $f0c671820c340322$export$e2d2075c69d9100d)((0, $3f21e39b768dacf2$export$2e2bcd8739ae039).base);
+        var keys = (0, $27f90b0cff19565d$export$be5d6ab3c5b84767)((0, $3f21e39b768dacf2$export$2e2bcd8739ae039).base);
+        keys.forEach(function(key) {
+            return (0, $iA2ta$lodash.set)(result, key, (0, $622cd2936b18c771$export$4370d69198e9314a)((0, $iA2ta$lodash.get)((0, $3f21e39b768dacf2$export$2e2bcd8739ae039).base, key), (0, $iA2ta$lodash.get)(stylesOverrides, key)));
+        });
+        return result;
+    }, [
+        stylesOverrides
+    ]);
+    var styles = handleGenerateStyle();
+    var renderStep = (0, $iA2ta$react.useCallback)(function(step) {
+        var icon = (0, $iA2ta$reactjsxruntime.jsx)((0, $2125901b4a9afff9$export$2e2bcd8739ae039), {
+            accessor: step.icon,
+            className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.icon, step.colorCls)
+        });
+        return step.tooltip ? (0, $iA2ta$reactjsxruntime.jsx)((0, $1c4aa673c4ad6947$export$2e2bcd8739ae039), {
+            placement: "top",
+            content: step.tooltip,
+            isPointing: true,
+            children: (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                className: (0, $622cd2936b18c771$export$4370d69198e9314a)(styles.tooltipContainer),
+                children: icon
+            })
+        }) : icon;
+    }, [
+        styles
+    ]);
+    return (0, $iA2ta$reactjsxruntime.jsx)("div", {
+        className: styles.stepsWrapper,
+        children: (0, $iA2ta$lodash.map)(props.steps, function(step, index) {
+            return (0, $iA2ta$reactjsxruntime.jsx)("div", {
+                className: styles.stepContainer,
+                children: renderStep(step)
+            }, "progress-track-step-".concat(index));
+        })
+    });
+};
+var $ccdca29d489f3200$export$2e2bcd8739ae039 = $ccdca29d489f3200$var$ProgressTrack;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 var $143cee146891bafc$var$base = {
     container: '',
     head: 'flex justify-between',
@@ -6970,9 +7046,6 @@ var $7fcfa1d90c4a7e45$export$2e2bcd8739ae039 = $7fcfa1d90c4a7e45$var$AddressInpu
 
 
 
-
-
-
 var $5f561ce307b5bbb8$var$getDateString = function(date) {
     var _a, _b, _c;
     if (!date) return '';