@almadar/ui 4.19.3 → 4.21.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);
@@ -20318,6 +20318,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -20340,6 +20341,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -20420,7 +20424,7 @@ var init_Tabs = __esm({
                     isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" }),
+                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "default", size: "sm", children: item.badge })
                   ]
@@ -27444,25 +27448,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 +27489,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -27501,7 +27508,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 +27529,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 +33714,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 +34090,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 +34109,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 +51669,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);
@@ -20272,6 +20272,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -20294,6 +20295,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -20374,7 +20378,7 @@ var init_Tabs = __esm({
                     isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" }),
+                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsx(Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsx(Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsx(Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsx(Badge, { variant: "default", size: "sm", children: item.badge })
                   ]
@@ -27398,25 +27402,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 +27443,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -27455,7 +27462,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 +27483,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 +33668,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 +34044,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 +34063,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 +51623,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);
@@ -15561,6 +15561,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -15583,6 +15584,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -15663,7 +15667,7 @@ var init_Tabs = __esm({
                     isActive ? variant === "pills" ? "text-primary-foreground font-bold" : "text-foreground font-bold" : "text-muted-foreground hover:text-foreground"
                   ),
                   children: [
-                    item.icon && /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm" }),
+                    item.icon && (typeof item.icon === "string" ? /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { name: item.icon, size: "sm" }) : /* @__PURE__ */ jsxRuntime.jsx(exports.Icon, { icon: item.icon, size: "sm" })),
                     /* @__PURE__ */ jsxRuntime.jsx(exports.Typography, { variant: "small", weight: isActive ? "semibold" : "normal", className: "!text-inherit", children: item.label }),
                     item.badge !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(exports.Badge, { variant: "default", size: "sm", children: item.badge })
                   ]
@@ -23142,25 +23146,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 +23187,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23199,7 +23206,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 +23227,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 +29507,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 +29883,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 +29902,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