dash-ui-kit 1.0.93 → 1.0.94

package/dist/react/components/progressStepBar/index.d.ts

@@ -3,6 +3,7 @@ interface ProgressStepBarProps {
     currentStep: number;
     totalSteps: number;
     className?: string;
+    color?: 'blue' | 'red' | 'orange';
 }
-export declare function ProgressStepBar({ currentStep, totalSteps, className }: ProgressStepBarProps): React.JSX.Element;
+export declare function ProgressStepBar({ currentStep, totalSteps, className, color }: ProgressStepBarProps): React.JSX.Element;
 export type { ProgressStepBarProps };

package/dist/react/index.cjs.js

@@ -11447,20 +11447,42 @@ const TransactionStatusIcon = _a => {
   }, props)) : null;
 };
 
+const colorConfig = {
+  blue: {
+    active: 'bg-[var(--color-dash-brand)]',
+    activeDark: 'bg-[var(--color-dash-brand-dim)]',
+    inactive: 'bg-[rgba(76,126,255,0.16)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  red: {
+    active: 'bg-[var(--color-dash-red)]',
+    activeDark: 'bg-[var(--color-dash-red-75)]',
+    inactive: 'bg-[var(--color-dash-red-15)]',
+    inactiveDark: 'bg-gray-700'
+  },
+  orange: {
+    active: 'bg-[var(--color-dash-orange)]',
+    activeDark: 'bg-[var(--color-dash-orange-75)]',
+    inactive: 'bg-[var(--color-dash-orange-15)]',
+    inactiveDark: 'bg-gray-700'
+  }
+};
 function ProgressStepBar({
   currentStep,
   totalSteps,
-  className = ''
+  className = '',
+  color = 'blue'
 }) {
   const {
     theme
   } = useTheme();
+  const colors = colorConfig[color];
   return jsxRuntime.jsx("div", {
     className: `flex gap-2 w-full ${className}`,
     children: Array.from({
       length: totalSteps
     }, (_, index) => jsxRuntime.jsx("div", {
-      className: `h-1.5 rounded-2xl flex-1 transition-colors ${index < currentStep ? theme === 'dark' ? 'bg-[var(--color-dash-brand-dim)]' : 'bg-[var(--color-dash-brand)]' : theme === 'dark' ? 'bg-gray-700' : 'bg-[rgba(76,126,255,0.16)]'}`
+      className: `h-1.5 rounded-2xl flex-1 transition-colors ${index < currentStep ? theme === 'dark' ? colors.activeDark : colors.active : theme === 'dark' ? colors.inactiveDark : colors.inactive}`
     }, index))
   });
 }