@almadar/ui 4.19.3 → 4.20.0

package/dist/avl/index.cjs

@@ -7093,7 +7093,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = React127.useState(false);
@@ -7102,7 +7102,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = React127.useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -27444,25 +27444,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -27486,6 +27485,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -27501,7 +27504,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -27516,13 +27525,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -33683,7 +33710,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -34059,7 +34086,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -34078,7 +34105,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -51638,7 +51665,6 @@ function getSlotContentRenderer2() {
 }
 function makeLambdaFn(argName, lambdaBody, callerKey) {
   return (item, index) => {
-    console.log(`[lambda-triage:${callerKey}#${index}]`, JSON.stringify(item));
     const resolvedBody = resolveLambdaBindings(lambdaBody, argName, item);
     if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody)) {
       return null;

package/dist/avl/index.js

@@ -7047,7 +7047,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = useState(false);
@@ -7056,7 +7056,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -27398,25 +27398,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -27440,6 +27439,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -27455,7 +27458,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -27470,13 +27479,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -33637,7 +33664,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -34013,7 +34040,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsx(Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -34032,7 +34059,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -51592,7 +51619,6 @@ function getSlotContentRenderer2() {
 }
 function makeLambdaFn(argName, lambdaBody, callerKey) {
   return (item, index) => {
-    console.log(`[lambda-triage:${callerKey}#${index}]`, JSON.stringify(item));
     const resolvedBody = resolveLambdaBindings(lambdaBody, argName, item);
     if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody)) {
       return null;

package/dist/components/index.cjs

@@ -3017,7 +3017,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = React110.useState(false);
@@ -3026,7 +3026,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = React110.useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -23142,25 +23142,24 @@ var init_Lightbox = __esm({
     exports.Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor; exports.StatDisplay = void 0;
 var init_StatDisplay = __esm({
@@ -23184,6 +23183,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23199,7 +23202,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -23214,13 +23223,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(exports.Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(exports.VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsxs(exports.HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsxRuntime.jsx(
+              exports.Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            exports.Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(exports.Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -29476,7 +29503,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -29852,7 +29879,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -29871,7 +29898,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field

package/dist/components/index.js

@@ -2972,7 +2972,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = useState(false);
@@ -2981,7 +2981,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -23097,25 +23097,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -23139,6 +23138,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23154,7 +23157,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -23169,13 +23178,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -29431,7 +29458,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -29807,7 +29834,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsx(Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -29826,7 +29853,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field

package/dist/components/molecules/StatDisplay.d.ts

@@ -11,8 +11,16 @@ export interface StatDisplayProps {
     label: string;
     /** Primary value (number or formatted string) */
     value: number | string;
-    /** Maximum value (renders as "value / max") */
+    /** Optional denominator. >0 renders "value / max"; 0 or omitted hides the divider. */
     max?: number;
+    /** Optional progress target. >0 renders a progress bar at value/target. */
+    target?: number;
+    /** Signed delta vs previous period. >0 renders ↑ green, <0 renders ↓ red, 0 hides. */
+    trend?: number;
+    /** Prefix prepended to the formatted value (e.g. "≈ "). */
+    prefix?: string;
+    /** Suffix appended to the formatted value (e.g. " /mo", " ms"). */
+    suffix?: string;
     /** Lucide icon name or React node */
     icon?: React.ReactNode;
     /** Icon background color class */

package/dist/providers/index.cjs

@@ -3539,7 +3539,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = React115.useState(false);
@@ -3548,7 +3548,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = React115.useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -24195,25 +24195,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -24237,6 +24236,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -24252,7 +24255,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -24267,13 +24276,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -30434,7 +30461,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -30810,7 +30837,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -30829,7 +30856,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field

package/dist/providers/index.js

@@ -3494,7 +3494,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = useState(false);
@@ -3503,7 +3503,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -24150,25 +24150,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -24192,6 +24191,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -24207,7 +24210,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -24222,13 +24231,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -30389,7 +30416,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -30765,7 +30792,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsx(Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -30784,7 +30811,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field

package/dist/runtime/index.cjs

@@ -3951,7 +3951,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = React113.useState(false);
@@ -3960,7 +3960,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = React113.useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -23907,25 +23907,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -23949,6 +23948,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23964,7 +23967,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -23979,13 +23988,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsxRuntime.jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsxRuntime.jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsxRuntime.jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -30008,7 +30035,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -30384,7 +30411,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -30403,7 +30430,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -38229,7 +38256,6 @@ function getSlotContentRenderer2() {
 }
 function makeLambdaFn(argName, lambdaBody, callerKey) {
   return (item, index) => {
-    console.log(`[lambda-triage:${callerKey}#${index}]`, JSON.stringify(item));
     const resolvedBody = resolveLambdaBindings(lambdaBody, argName, item);
     if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody)) {
       return null;

package/dist/runtime/index.js

@@ -3906,7 +3906,7 @@ var init_RangeSlider = __esm({
         action,
         actionPayload,
         onChange,
-        formatValue: formatValue5,
+        formatValue: formatValue4,
         ...props
       }, ref) => {
         const [isDragging, setIsDragging] = useState(false);
@@ -3915,7 +3915,7 @@ var init_RangeSlider = __esm({
         const eventBus = useSafeEventBus();
         const percentage = max !== min ? (value - min) / (max - min) * 100 : 0;
         const bufferedPercentage = buffered !== void 0 ? Math.min(buffered, 100) : void 0;
-        const displayValue = formatValue5 ? formatValue5(value) : String(value);
+        const displayValue = formatValue4 ? formatValue4(value) : String(value);
         const handleChange = useCallback(
           (e) => {
             const newValue = Number(e.target.value);
@@ -23862,25 +23862,24 @@ var init_Lightbox = __esm({
     Lightbox.displayName = "Lightbox";
   }
 });
-function formatValue3(value, format, max) {
+function formatNumber(value, format) {
   if (value == null) return "0";
   const v = typeof value === "number" ? value : value;
-  let formatted;
   switch (format) {
     case "currency":
-      formatted = typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
-      break;
+      return typeof v === "number" ? `$${v.toFixed(2)}` : String(v);
     case "percent":
-      formatted = typeof v === "number" ? `${Math.round(v)}%` : String(v);
-      break;
+      return typeof v === "number" ? `${Math.round(v)}%` : String(v);
     case "number":
-      formatted = typeof v === "number" ? v.toLocaleString() : String(v);
-      break;
+      return typeof v === "number" ? v.toLocaleString() : String(v);
     default:
-      formatted = String(v);
+      return String(v);
   }
-  if (max != null) return `${formatted} / ${max}`;
-  return formatted;
+}
+function composeDisplayValue(value, format, max, prefix, suffix) {
+  const formatted = formatNumber(value, format);
+  const withMax = max != null && max > 0 ? `${formatted} / ${max}` : formatted;
+  return `${prefix ?? ""}${withMax}${suffix ?? ""}`;
 }
 var variantColor, StatDisplay;
 var init_StatDisplay = __esm({
@@ -23904,6 +23903,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23919,7 +23922,13 @@ var init_StatDisplay = __esm({
       const iconSizes2 = { sm: "h-4 w-4", md: "h-5 w-5", lg: "h-6 w-6" };
       const valueSizes = { sm: "text-lg", md: "text-2xl", lg: "text-3xl" };
       const padSizes = { sm: "p-3", md: "p-4", lg: "p-6" };
-      const displayValue = formatValue3(value, format, max);
+      const displayValue = composeDisplayValue(value, format, max, prefix, suffix);
+      const numericValue = typeof value === "number" ? value : Number(value);
+      const showTarget = typeof target === "number" && target > 0 && Number.isFinite(numericValue);
+      const targetPct = showTarget ? Math.max(0, Math.min(100, numericValue / target * 100)) : 0;
+      const showTrend = typeof trend === "number" && trend !== 0 && Number.isFinite(trend);
+      const trendUp = showTrend && trend > 0;
+      const trendLabel = showTrend ? `${trendUp ? "\u2191" : "\u2193"} ${Math.abs(trend)}` : "";
       if (error) {
         return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsx(Typography, { variant: "small", color: "error", children: error.message }) });
       }
@@ -23934,13 +23943,31 @@ var init_StatDisplay = __esm({
           ResolvedIcon && /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }),
           typeof iconProp !== "string" && iconProp,
           /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+          showTrend && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: cn("font-semibold", trendUp ? "text-success" : "text-error"), children: trendLabel })
         ] });
       }
       return /* @__PURE__ */ jsx(Card, { className: cn(padSizes[size], className), children: /* @__PURE__ */ jsxs(HStack, { align: "start", justify: "between", children: [
-        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1", children: [
+        /* @__PURE__ */ jsxs(VStack, { gap: "none", className: "space-y-1 flex-1", children: [
           /* @__PURE__ */ jsx(Typography, { variant: "overline", color: "secondary", children: label }),
-          /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue })
+          /* @__PURE__ */ jsxs(HStack, { gap: "sm", align: "end", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "h4", className: cn("font-bold", valueSizes[size], variantColor[variant]), children: displayValue }),
+            showTrend && /* @__PURE__ */ jsx(
+              Typography,
+              {
+                variant: "caption",
+                className: cn("font-semibold pb-1", trendUp ? "text-success" : "text-error"),
+                children: trendLabel
+              }
+            )
+          ] }),
+          showTarget && /* @__PURE__ */ jsx(Box, { className: "mt-2 h-1.5 w-full bg-muted rounded-full overflow-hidden", children: /* @__PURE__ */ jsx(
+            Box,
+            {
+              className: cn("h-full rounded-full transition-all", `bg-${variant === "default" ? "primary" : variant}`),
+              style: { width: `${targetPct}%` }
+            }
+          ) })
         ] }),
         (ResolvedIcon || typeof iconProp !== "string" && iconProp) && /* @__PURE__ */ jsx(Box, { className: cn("p-3 rounded-md", iconBg), children: ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { className: cn(iconSizes2[size], iconColor) }) : iconProp })
       ] }) });
@@ -29963,7 +29990,7 @@ function getStatusStyle(fieldName, value) {
   if (val.includes("low")) return STATUS_STYLES2.low;
   return STATUS_STYLES2.default;
 }
-function formatValue4(value, fieldName) {
+function formatValue3(value, fieldName) {
   if (typeof value === "number") {
     if (fieldName.toLowerCase().includes("progress") || fieldName.toLowerCase().includes("percent")) {
       return `${value}%`;
@@ -30339,7 +30366,7 @@ var init_List = __esm({
                           className: "flex items-center gap-2 text-muted-foreground group-hover:text-foreground transition-colors",
                           children: [
                             /* @__PURE__ */ jsx(Calendar, { className: "w-3.5 h-3.5" }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -30358,7 +30385,7 @@ var init_List = __esm({
                               formatFieldLabel2(field),
                               ":"
                             ] }),
-                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue4(value, field) })
+                            /* @__PURE__ */ jsx(Typography, { as: "span", className: "text-foreground", children: formatValue3(value, field) })
                           ]
                         },
                         field
@@ -38184,7 +38211,6 @@ function getSlotContentRenderer2() {
 }
 function makeLambdaFn(argName, lambdaBody, callerKey) {
   return (item, index) => {
-    console.log(`[lambda-triage:${callerKey}#${index}]`, JSON.stringify(item));
     const resolvedBody = resolveLambdaBindings(lambdaBody, argName, item);
     if (resolvedBody === null || typeof resolvedBody !== "object" || Array.isArray(resolvedBody)) {
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "4.19.3",
+  "version": "4.20.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",