@diwauhris/ui 1.7.6 → 1.7.7

package/lib/assets/ui.css

@@ -2332,6 +2332,10 @@
   border-color: rgb(255 255 255 / 0.2);
 }
 
+.border-white\/30 {
+  border-color: rgb(255 255 255 / 0.3);
+}
+
 .border-white\/50 {
   border-color: rgb(255 255 255 / 0.5);
 }
@@ -2374,6 +2378,10 @@
   background-color: rgb(45 138 202 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#2D8ACA\]\/50 {
+  background-color: rgb(45 138 202 / 0.5);
+}
+
 .bg-\[\#B91C1C\] {
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
@@ -2879,6 +2887,10 @@
   background-color: rgb(255 255 255 / 0.3);
 }
 
+.bg-white\/5 {
+  background-color: rgb(255 255 255 / 0.05);
+}
+
 .bg-white\/60 {
   background-color: rgb(255 255 255 / 0.6);
 }
@@ -3806,6 +3818,10 @@
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-white\/20 {
+  color: rgb(255 255 255 / 0.2);
+}
+
 .text-white\/30 {
   color: rgb(255 255 255 / 0.3);
 }
@@ -3959,6 +3975,11 @@
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-black\/20 {
+  --tw-shadow-color: rgb(0 0 0 / 0.2);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-brand-blue\/15 {
   --tw-shadow-color: rgb(3 78 162 / 0.15);
   --tw-shadow: var(--tw-shadow-colored);

package/lib/index.cjs

@@ -3519,14 +3519,19 @@ function resolveState(id, currentStep, completedSteps, disabledSteps) {
 	if (id === currentStep) return "current";
 	return "upcoming";
 }
-function StepCircle({ state, number, icon }) {
+function StepCircle({ state, number, icon, dark = false }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${{
+		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${(dark ? {
+			completed: "border-[#2D8ACA] bg-[#2D8ACA] text-white",
+			current: "border-white bg-white text-[#00377B] shadow-md shadow-black/20",
+			upcoming: "border-white/30 bg-white/10 text-white/60",
+			disabled: "border-white/10 bg-white/5 text-white/20"
+		} : {
 			completed: "border-brand-blue bg-brand-blue text-white",
 			current: "border-brand-blue bg-white text-brand-blue shadow-md shadow-brand-blue/15",
 			upcoming: "border-slate-300 bg-white text-slate-400",
 			disabled: "border-slate-200 bg-slate-50 text-slate-300"
-		}[state]}`,
+		})[state]}`,
 		"aria-hidden": "true",
 		children: state === "completed" ? icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
 			size: 16,
@@ -3534,8 +3539,10 @@ function StepCircle({ state, number, icon }) {
 		}) : icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: number })
 	});
 }
-function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
-	if (!(orientation === "horizontal")) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", theme = "light", className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	const dark = theme === "dark";
+	if (!isHorizontal) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		role: "group",
 		"aria-label": "Progress",
 		className: cn("flex flex-col", className),
@@ -3545,6 +3552,18 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
+				const labelColor = dark ? {
+					completed: "text-[#2D8ACA]",
+					current: "text-white font-bold",
+					upcoming: "text-white/60",
+					disabled: "text-white/20"
+				} : {
+					completed: "text-brand-blue",
+					current: "text-brand-navy font-bold",
+					upcoming: "text-slate-500",
+					disabled: "text-slate-300"
+				};
+				const connectorColor = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex items-start gap-4 pb-8 last:pb-0",
@@ -3553,23 +3572,19 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 							state,
 							number: idx + 1,
-							icon: step.icon
+							icon: step.icon,
+							dark
 						}), !isLast && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${connectorColor}`,
 							"aria-hidden": "true"
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						className: "min-w-0 flex-1 pt-1",
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: `text-sm leading-tight ${{
-								completed: "text-brand-blue",
-								current: "text-brand-navy font-bold",
-								upcoming: "text-slate-500",
-								disabled: "text-slate-300"
-							}[state]}`,
+							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]
@@ -3578,7 +3593,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		})
 	});
 	const resolvedStates = steps.map((step) => resolveState(step.id, currentStep, completedSteps, disabledSteps));
-	const labelColor = {
+	const labelColor = dark ? {
+		completed: "text-[#2D8ACA]",
+		current: "text-white font-bold",
+		upcoming: "text-white/60",
+		disabled: "text-white/20"
+	} : {
 		completed: "text-brand-blue",
 		current: "text-brand-navy font-bold",
 		upcoming: "text-slate-500",
@@ -3596,6 +3616,9 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
 				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
+				const connectorDone = prevState === "completed" || prevState === "current";
+				const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
+				const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex flex-col items-center",
@@ -3603,7 +3626,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						className: "flex w-full items-center",
 						children: [
 							idx > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${prevState === "completed" || prevState === "current" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorLeft}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex-1",
@@ -3614,11 +3637,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepCircle, {
 									state,
 									number: idx + 1,
-									icon: step.icon
+									icon: step.icon,
+									dark
 								})
 							}),
 							!isLast ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorRight}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "flex-1",
@@ -3631,7 +3655,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]

package/lib/index.mjs

@@ -3495,14 +3495,19 @@ function resolveState(id, currentStep, completedSteps, disabledSteps) {
 	if (id === currentStep) return "current";
 	return "upcoming";
 }
-function StepCircle({ state, number, icon }) {
+function StepCircle({ state, number, icon, dark = false }) {
 	return /* @__PURE__ */ jsx("div", {
-		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${{
+		className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-bold transition-all ${(dark ? {
+			completed: "border-[#2D8ACA] bg-[#2D8ACA] text-white",
+			current: "border-white bg-white text-[#00377B] shadow-md shadow-black/20",
+			upcoming: "border-white/30 bg-white/10 text-white/60",
+			disabled: "border-white/10 bg-white/5 text-white/20"
+		} : {
 			completed: "border-brand-blue bg-brand-blue text-white",
 			current: "border-brand-blue bg-white text-brand-blue shadow-md shadow-brand-blue/15",
 			upcoming: "border-slate-300 bg-white text-slate-400",
 			disabled: "border-slate-200 bg-slate-50 text-slate-300"
-		}[state]}`,
+		})[state]}`,
 		"aria-hidden": "true",
 		children: state === "completed" ? icon ?? /* @__PURE__ */ jsx(Check, {
 			size: 16,
@@ -3510,8 +3515,10 @@ function StepCircle({ state, number, icon }) {
 		}) : icon ?? /* @__PURE__ */ jsx("span", { children: number })
 	});
 }
-function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", className = "" }) {
-	if (!(orientation === "horizontal")) return /* @__PURE__ */ jsx("div", {
+function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [], orientation = "horizontal", theme = "light", className = "" }) {
+	const isHorizontal = orientation === "horizontal";
+	const dark = theme === "dark";
+	if (!isHorizontal) return /* @__PURE__ */ jsx("div", {
 		role: "group",
 		"aria-label": "Progress",
 		className: cn("flex flex-col", className),
@@ -3521,6 +3528,18 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 				const state = resolveState(step.id, currentStep, completedSteps, disabledSteps);
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
+				const labelColor = dark ? {
+					completed: "text-[#2D8ACA]",
+					current: "text-white font-bold",
+					upcoming: "text-white/60",
+					disabled: "text-white/20"
+				} : {
+					completed: "text-brand-blue",
+					current: "text-brand-navy font-bold",
+					upcoming: "text-slate-500",
+					disabled: "text-slate-300"
+				};
+				const connectorColor = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ jsxs("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex items-start gap-4 pb-8 last:pb-0",
@@ -3529,23 +3548,19 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						children: [/* @__PURE__ */ jsx(StepCircle, {
 							state,
 							number: idx + 1,
-							icon: step.icon
+							icon: step.icon,
+							dark
 						}), !isLast && /* @__PURE__ */ jsx("div", {
-							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+							className: `mt-1 w-0.5 flex-1 min-h-[32px] ${connectorColor}`,
 							"aria-hidden": "true"
 						})]
 					}), /* @__PURE__ */ jsxs("div", {
 						className: "min-w-0 flex-1 pt-1",
 						children: [/* @__PURE__ */ jsx("p", {
-							className: `text-sm leading-tight ${{
-								completed: "text-brand-blue",
-								current: "text-brand-navy font-bold",
-								upcoming: "text-slate-500",
-								disabled: "text-slate-300"
-							}[state]}`,
+							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ jsx("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]
@@ -3554,7 +3569,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 		})
 	});
 	const resolvedStates = steps.map((step) => resolveState(step.id, currentStep, completedSteps, disabledSteps));
-	const labelColor = {
+	const labelColor = dark ? {
+		completed: "text-[#2D8ACA]",
+		current: "text-white font-bold",
+		upcoming: "text-white/60",
+		disabled: "text-white/20"
+	} : {
 		completed: "text-brand-blue",
 		current: "text-brand-navy font-bold",
 		upcoming: "text-slate-500",
@@ -3572,6 +3592,9 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 				const isCurrent = state === "current";
 				const isLast = idx === steps.length - 1;
 				const prevState = idx > 0 ? resolvedStates[idx - 1] : null;
+				const connectorDone = prevState === "completed" || prevState === "current";
+				const connectorLeft = dark ? connectorDone ? "bg-[#2D8ACA]/50" : "bg-white/15" : connectorDone ? "bg-brand-blue/50" : "bg-slate-200";
+				const connectorRight = dark ? state === "completed" ? "bg-[#2D8ACA]/50" : "bg-white/15" : state === "completed" ? "bg-brand-blue/50" : "bg-slate-200";
 				return /* @__PURE__ */ jsxs("li", {
 					"aria-current": isCurrent ? "step" : void 0,
 					className: "flex flex-col items-center",
@@ -3579,7 +3602,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 						className: "flex w-full items-center",
 						children: [
 							idx > 0 ? /* @__PURE__ */ jsx("div", {
-								className: `h-0.5 flex-1 ${prevState === "completed" || prevState === "current" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorLeft}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ jsx("div", {
 								className: "flex-1",
@@ -3590,11 +3613,12 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 								children: /* @__PURE__ */ jsx(StepCircle, {
 									state,
 									number: idx + 1,
-									icon: step.icon
+									icon: step.icon,
+									dark
 								})
 							}),
 							!isLast ? /* @__PURE__ */ jsx("div", {
-								className: `h-0.5 flex-1 ${state === "completed" ? "bg-brand-blue/50" : "bg-slate-200"}`,
+								className: `h-0.5 flex-1 ${connectorRight}`,
 								"aria-hidden": "true"
 							}) : /* @__PURE__ */ jsx("div", {
 								className: "flex-1",
@@ -3607,7 +3631,7 @@ function Stepper({ steps, currentStep, completedSteps = [], disabledSteps = [],
 							className: `text-sm leading-tight ${labelColor[state]}`,
 							children: step.label
 						}), step.description && /* @__PURE__ */ jsx("p", {
-							className: "mt-0.5 text-xs text-slate-400 leading-tight",
+							className: `mt-0.5 text-xs leading-tight ${dark ? "text-white/40" : "text-slate-400"}`,
 							children: step.description
 						})]
 					})]

package/lib/types/ui-library/gallery/stepper/Stepper.d.ts

@@ -38,6 +38,8 @@ export interface StepperProps {
     /** IDs of steps that are disabled */
     disabledSteps?: string[];
     orientation?: 'horizontal' | 'vertical';
+    /** Use "dark" when rendering on a dark/navy background */
+    theme?: 'light' | 'dark';
     className?: string;
 }
-export declare function Stepper({ steps, currentStep, completedSteps, disabledSteps, orientation, className, }: StepperProps): import("react").JSX.Element;
+export declare function Stepper({ steps, currentStep, completedSteps, disabledSteps, orientation, theme, className, }: StepperProps): import("react").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.6",
+  "version": "1.7.7",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [