@datatechsolutions/ui 3.9.0 → 3.10.0

package/dist/{chunk-MT66VKLS.js → chunk-LVR4SR65.js}

@@ -3230,54 +3230,54 @@ function InfoPopover({ title, content, triggerLabel = "Info" }) {
 }
 var colorClasses = {
   emerald: {
-    iconBg: "bg-emerald-100 text-emerald-600 dark:bg-emerald-900/50 dark:text-emerald-400",
+    iconBg: "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/20 dark:text-emerald-300",
     activeGradient: "from-emerald-500 to-teal-600",
     activeRing: "ring-emerald-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/50 dark:text-emerald-300"
+    badgeBg: "border border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300"
   },
   blue: {
-    iconBg: "bg-blue-100 text-blue-600 dark:bg-blue-900/50 dark:text-blue-400",
+    iconBg: "bg-blue-500/15 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300",
     activeGradient: "from-blue-500 to-indigo-600",
     activeRing: "ring-indigo-500/70",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-blue-100 text-blue-700 dark:bg-blue-900/50 dark:text-blue-300"
+    badgeBg: "border border-blue-500/30 bg-blue-500/20 text-blue-700 dark:text-blue-300"
   },
   amber: {
-    iconBg: "bg-amber-100 text-amber-600 dark:bg-amber-900/50 dark:text-amber-400",
+    iconBg: "bg-amber-500/15 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300",
     activeGradient: "from-amber-500 to-orange-600",
     activeRing: "ring-amber-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-amber-100 text-amber-700 dark:bg-amber-900/50 dark:text-amber-300",
+    badgeBg: "border border-amber-500/30 bg-amber-500/20 text-amber-700 dark:text-amber-300",
     urgentValueColor: "text-amber-600 dark:text-amber-400"
   },
   orange: {
-    iconBg: "bg-orange-100 text-orange-600 dark:bg-orange-900/50 dark:text-orange-400",
+    iconBg: "bg-orange-500/15 text-orange-700 dark:bg-orange-500/20 dark:text-orange-300",
     activeGradient: "from-orange-500 to-amber-600",
     activeRing: "ring-orange-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-orange-100 text-orange-700 dark:bg-orange-900/50 dark:text-orange-300"
+    badgeBg: "border border-orange-500/30 bg-orange-500/20 text-orange-700 dark:text-orange-300"
   },
   indigo: {
-    iconBg: "bg-indigo-100 text-indigo-600 dark:bg-indigo-900/50 dark:text-indigo-400",
+    iconBg: "bg-indigo-500/15 text-indigo-700 dark:bg-indigo-500/20 dark:text-indigo-300",
     activeGradient: "from-indigo-500 to-blue-600",
     activeRing: "ring-indigo-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/50 dark:text-indigo-300"
+    badgeBg: "border border-indigo-500/30 bg-indigo-500/20 text-indigo-700 dark:text-indigo-300"
   },
   purple: {
-    iconBg: "bg-purple-100 text-purple-600 dark:bg-purple-900/50 dark:text-purple-400",
+    iconBg: "bg-purple-500/15 text-purple-700 dark:bg-purple-500/20 dark:text-purple-300",
     activeGradient: "from-purple-500 to-indigo-600",
     activeRing: "ring-purple-500",
     valueColor: "text-slate-900 dark:text-white",
-    badgeBg: "bg-purple-100 text-purple-700 dark:bg-purple-900/50 dark:text-purple-300"
+    badgeBg: "border border-purple-500/30 bg-purple-500/20 text-purple-700 dark:text-purple-300"
   },
   red: {
-    iconBg: "bg-red-100 text-red-600 dark:bg-red-900/50 dark:text-red-400",
+    iconBg: "bg-red-500/15 text-red-700 dark:bg-red-500/20 dark:text-red-300",
     activeGradient: "from-red-500 to-rose-600",
     activeRing: "ring-red-500",
     valueColor: "text-red-600 dark:text-red-400",
-    badgeBg: "bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-300"
+    badgeBg: "border border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300"
   }
 };
 function StatCard({
@@ -3351,7 +3351,12 @@ function StatCard({
           badge && /* @__PURE__ */ jsxRuntime.jsx(
             "span",
             {
-              className: `mt-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${isActive ? "bg-white/20 text-white" : colorConfig.badgeBg}`,
+              style: isActive ? void 0 : {
+                backdropFilter: "blur(12px) saturate(1.5)",
+                WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+                boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+              },
+              className: `mt-2 inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${isActive ? "border border-white/30 bg-white/20 text-white backdrop-blur-sm" : colorConfig.badgeBg}`,
               children: badge
             }
           )
@@ -3455,6 +3460,11 @@ function getStatusColor(status) {
       return "bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-400";
   }
 }
+var CRYSTAL_STYLE2 = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
+};
 function PriceChangeBadge({
   value,
   size = "md",
@@ -3464,13 +3474,15 @@ function PriceChangeBadge({
   const locale = chunkYXN2K77G_js.useLocale();
   if (value === null) return null;
   const isPositive = value >= 0;
-  const colorClasses3 = isPositive ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400" : "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400";
-  const sizeClasses3 = size === "sm" ? "px-2 py-1 text-xs" : "px-2.5 py-1 text-xs";
+  const toneClasses = isPositive ? "border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : "border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300";
+  const sizeClasses3 = size === "sm" ? "px-2 py-0.5 text-xs" : "px-2.5 py-1 text-xs";
   const iconClasses = size === "sm" ? "h-3 w-3" : "h-3.5 w-3.5";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: `inline-flex items-center gap-1 rounded-full font-semibold ${colorClasses3} ${sizeClasses3} ${className}`,
+      role: "status",
+      style: CRYSTAL_STYLE2,
+      className: `inline-flex items-center gap-1 rounded-full border font-semibold ${toneClasses} ${sizeClasses3} ${className}`,
       children: [
         showIcon && (isPositive ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingUpIcon, { className: iconClasses }) : /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.ArrowTrendingDownIcon, { className: iconClasses })),
         !showIcon && isPositive ? "+" : "",
@@ -3774,9 +3786,14 @@ function InlineSpinner({ size = "xs", className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size, color: "current", className });
 }
 var sizeClasses = {
-  xs: { icon: "h-2.5 w-2.5", text: "text-[10px]" },
-  sm: { icon: "h-3 w-3", text: "text-xs" },
-  md: { icon: "h-4 w-4", text: "text-sm" }
+  xs: { icon: "h-2.5 w-2.5", text: "text-[10px]", pad: "px-1.5 py-0.5" },
+  sm: { icon: "h-3 w-3", text: "text-xs", pad: "px-2 py-0.5" },
+  md: { icon: "h-4 w-4", text: "text-sm", pad: "px-2.5 py-1" }
+};
+var CRYSTAL_STYLE3 = {
+  backdropFilter: "blur(12px) saturate(1.5)",
+  WebkitBackdropFilter: "blur(12px) saturate(1.5)",
+  boxShadow: "inset 0 1px 1.5px rgba(255,255,255,0.45), 0 1px 3px -1px rgba(15,23,42,0.12)"
 };
 function defaultFormatValue(value, format3) {
   if (format3 === "percent") {
@@ -3791,20 +3808,42 @@ function GrowthIndicator({
   showValue = false,
   format: format3 = "percent",
   formatValue,
+  variant = "inline",
   className
 }) {
   const isPositive = value > 0;
   const isNegative = value < 0;
   const isNeutral = value === 0;
-  const colorClasses3 = isPositive ? "text-emerald-500" : isNegative ? "text-red-500" : "text-gray-500";
+  const inlineColorClasses = isPositive ? "text-emerald-500" : isNegative ? "text-red-500" : "text-slate-500";
+  const pillToneClasses = isPositive ? "border-emerald-500/30 bg-emerald-500/20 text-emerald-700 dark:text-emerald-300" : isNegative ? "border-red-500/30 bg-red-500/20 text-red-700 dark:text-red-300" : "border-slate-500/30 bg-slate-500/20 text-slate-700 dark:text-slate-300";
   const Icon = isPositive ? HeroIcons.ArrowTrendingUpIcon : HeroIcons.ArrowTrendingDownIcon;
-  const { icon: iconClass, text: textClass } = sizeClasses[size];
+  const { icon: iconClass, text: textClass, pad: padClass } = sizeClasses[size];
   const formatter = formatValue ?? defaultFormatValue;
   const formattedValue = formatter(value, format3);
   if (isNeutral && !showValue) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx4.clsx("inline-flex items-center gap-0.5", colorClasses3, className), children: [
+  if (variant === "pill") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        role: "status",
+        style: CRYSTAL_STYLE3,
+        className: clsx4.clsx(
+          "inline-flex items-center gap-1 rounded-full border font-semibold",
+          padClass,
+          textClass,
+          pillToneClasses,
+          className
+        ),
+        children: [
+          !isNeutral && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: iconClass }),
+          showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { children: formattedValue })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: clsx4.clsx("inline-flex items-center gap-0.5", inlineColorClasses, className), children: [
     !isNeutral && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: iconClass }),
     showValue && /* @__PURE__ */ jsxRuntime.jsx("span", { className: textClass, children: formattedValue })
   ] });
@@ -7203,6 +7242,118 @@ function TimePicker({
     ) })
   ] });
 }
+var completeStyles = "border-indigo-500 hover:border-indigo-600 dark:border-indigo-400 dark:hover:border-indigo-300";
+var currentStyles = "border-indigo-500 dark:border-indigo-400";
+var upcomingStyles = "border-slate-300 hover:border-slate-400 dark:border-white/10 dark:hover:border-white/20";
+var completeEyebrow = "text-indigo-700 group-hover:text-indigo-800 dark:text-indigo-300 dark:group-hover:text-indigo-200";
+var currentEyebrow = "text-indigo-700 dark:text-indigo-300";
+var upcomingEyebrow = "text-slate-500 group-hover:text-slate-700 dark:text-slate-400 dark:group-hover:text-slate-300";
+function StepProgress({ steps, progressLabel, onStepClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": progressLabel, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { role: "list", className: "space-y-4 md:flex md:space-y-0 md:space-x-8", children: steps.map((step, index) => {
+    const borderStyles = step.status === "complete" ? completeStyles : step.status === "current" ? currentStyles : upcomingStyles;
+    const eyebrowStyles = step.status === "complete" ? completeEyebrow : step.status === "current" ? currentEyebrow : upcomingEyebrow;
+    const isInteractive = step.status !== "upcoming" || Boolean(onStepClick);
+    const ariaCurrent = step.status === "current" ? "step" : void 0;
+    const handleClick = (event) => {
+      if (!onStepClick) return;
+      event.preventDefault();
+      onStepClick(index);
+    };
+    const baseClasses = "group flex flex-col border-l-4 py-2 pl-4 transition-colors md:border-t-4 md:border-l-0 md:pt-4 md:pb-0 md:pl-0 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 focus-visible:rounded-sm";
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { className: "md:flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: step.href ?? "#",
+        "aria-current": ariaCurrent,
+        onClick: onStepClick ? handleClick : void 0,
+        className: `${baseClasses} ${borderStyles} ${isInteractive ? "" : "cursor-default"}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm font-medium ${eyebrowStyles}`, children: step.id }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-slate-900 dark:text-white", children: step.name })
+        ]
+      }
+    ) }, step.id);
+  }) }) });
+}
+var accentStyles = {
+  indigo: {
+    currentPill: "bg-indigo-500/15 text-indigo-700 dark:bg-indigo-500/25 dark:text-indigo-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-indigo-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  blue: {
+    currentPill: "bg-blue-500/15 text-blue-700 dark:bg-blue-500/25 dark:text-blue-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-blue-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  emerald: {
+    currentPill: "bg-emerald-500/15 text-emerald-700 dark:bg-emerald-500/25 dark:text-emerald-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-emerald-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  },
+  violet: {
+    currentPill: "bg-violet-500/15 text-violet-700 dark:bg-violet-500/25 dark:text-violet-300",
+    completePill: "bg-emerald-500/10 text-emerald-700 hover:bg-emerald-500/20 dark:bg-emerald-500/20 dark:text-emerald-300",
+    currentDot: "bg-violet-500 text-white",
+    completeDot: "bg-emerald-500 text-white",
+    connector: "bg-emerald-500/30 dark:bg-emerald-500/20"
+  }
+};
+var upcomingPill = "bg-slate-500/8 text-slate-400 dark:bg-white/5 dark:text-white/30";
+var upcomingDot = "bg-slate-200 text-slate-400 dark:bg-white/10 dark:text-white/30";
+var upcomingConnector = "bg-slate-200 dark:bg-white/10";
+function StepIndicator({
+  steps,
+  currentStep,
+  onStepChange,
+  progressLabel,
+  accent = "indigo"
+}) {
+  const tone = accentStyles[accent];
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": progressLabel, className: "flex items-center gap-2", children: steps.map((step, index) => {
+    const isCompleted = index < currentStep;
+    const isCurrent = index === currentStep;
+    const isClickable = isCompleted && Boolean(onStepChange);
+    const pillTone = isCurrent ? tone.currentPill : isCompleted ? tone.completePill : upcomingPill;
+    const dotTone = isCurrent ? tone.currentDot : isCompleted ? tone.completeDot : upcomingDot;
+    const connectorTone = index < currentStep ? tone.connector : upcomingConnector;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: isClickable ? () => onStepChange?.(index) : void 0,
+          disabled: !isClickable && !isCurrent,
+          "aria-current": isCurrent ? "step" : void 0,
+          className: `flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200 backdrop-blur-sm focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/70 focus-visible:ring-offset-1 ${pillTone} ${isClickable ? "cursor-pointer" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold ${dotTone}`,
+                children: step.icon ? step.icon : isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckIcon, { className: "h-3 w-3" }) : index + 1
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: step.title })
+          ]
+        }
+      ),
+      index < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: `h-px flex-1 transition-colors duration-200 ${connectorTone}`
+        }
+      ) : null
+    ] }, step.id);
+  }) });
+}
 function PageHeading({
   breadcrumbs,
   eyebrow,
@@ -7859,27 +8010,16 @@ function StepFormPage({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-tight text-slate-950 dark:text-white sm:text-3xl", children: steps[currentStep]?.title ?? title }),
         steps[currentStep]?.description ?? subtitle ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 max-w-xl text-sm text-slate-500 dark:text-white/60 sm:text-base", children: steps[currentStep]?.description ?? subtitle }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex items-center gap-2", children: steps.map((step, index) => {
-          const isCompleted = index < currentStep;
-          const isCurrent = index === currentStep;
-          const isClickable = index < currentStep;
-          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center gap-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                type: "button",
-                onClick: () => isClickable ? onStepChange(index) : void 0,
-                disabled: !isClickable && !isCurrent,
-                className: `flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium transition-all duration-200 ${isCurrent ? "bg-blue-500/15 text-blue-700 shadow-sm backdrop-blur-sm dark:bg-blue-500/25 dark:text-blue-300" : isCompleted ? "bg-emerald-500/10 text-emerald-700 cursor-pointer hover:bg-emerald-500/20 backdrop-blur-sm dark:bg-emerald-500/20 dark:text-emerald-300" : "bg-slate-500/8 text-slate-400 dark:bg-white/5 dark:text-white/30"}`,
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: `flex h-5 w-5 items-center justify-center rounded-full text-[10px] font-bold ${isCurrent ? "bg-blue-500 text-white" : isCompleted ? "bg-emerald-500 text-white" : "bg-slate-200 text-slate-400 dark:bg-white/10 dark:text-white/30"}`, children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(HeroIcons.CheckIcon, { className: "h-3 w-3" }) : index + 1 }),
-                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: step.title })
-                ]
-              }
-            ),
-            index < steps.length - 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-px flex-1 transition-colors duration-200 ${index < currentStep ? "bg-emerald-500/30 dark:bg-emerald-500/20" : "bg-slate-200 dark:bg-white/10"}` }) : null
-          ] }, step.id);
-        }) })
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          StepIndicator,
+          {
+            steps: steps.map((step) => ({ id: step.id, title: step.title, icon: step.icon })),
+            currentStep,
+            onStepChange,
+            accent: "blue",
+            progressLabel: title
+          }
+        ) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "liquid-surface rounded-2xl p-6", children: [
@@ -20319,7 +20459,9 @@ exports.StatCardSkeleton = StatCardSkeleton;
 exports.StatusBadge = StatusBadge;
 exports.StatusToggle = StatusToggle;
 exports.StepFormPage = StepFormPage;
+exports.StepIndicator = StepIndicator;
 exports.StepNavigationButtons = StepNavigationButtons;
+exports.StepProgress = StepProgress;
 exports.StepTimeline = StepTimeline;
 exports.StreamingDashboard = StreamingDashboard;
 exports.Strong = Strong;
@@ -20628,5 +20770,5 @@ exports.useSocialProviders = useSocialProviders;
 exports.validateDashboardSpec = validateDashboardSpec;
 exports.xScale = xScale;
 exports.yScale = yScale;
-//# sourceMappingURL=chunk-MT66VKLS.js.map
-//# sourceMappingURL=chunk-MT66VKLS.js.map
+//# sourceMappingURL=chunk-LVR4SR65.js.map
+//# sourceMappingURL=chunk-LVR4SR65.js.map