@almadar/ui 4.19.3 → 4.21.0

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);
@@ -15516,6 +15516,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -15538,6 +15539,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -15618,7 +15622,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 })
                   ]
@@ -23097,25 +23101,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 +23142,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23154,7 +23161,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 +23182,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 +29462,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 +29838,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 +29857,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/components/molecules/Tabs.d.ts

@@ -13,8 +13,8 @@ export interface TabItem {
     label: string;
     /** Tab content - optional for event-driven tabs */
     content?: React.ReactNode;
-    /** Tab icon */
-    icon?: LucideIcon;
+    /** Tab icon — pass either a Lucide component or its registry name (e.g. "file-text") */
+    icon?: LucideIcon | string;
     /** Tab badge */
     badge?: string | number;
     /** Disable tab */
@@ -35,6 +35,8 @@ export interface TabsProps {
     activeTab?: string;
     /** Callback when tab changes */
     onTabChange?: (tabId: string) => void;
+    /** Declarative tab change event — emits UI:{tabChangeEvent} with { tabId } */
+    tabChangeEvent?: string;
     /** Tab variant */
     variant?: 'default' | 'pills' | 'underline';
     /** Tab orientation */

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);
@@ -17069,6 +17069,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -17091,6 +17092,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -17171,7 +17175,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 })
                   ]
@@ -24195,25 +24199,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 +24240,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -24252,7 +24259,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 +24280,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 +30465,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 +30841,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 +30860,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);
@@ -17024,6 +17024,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -17046,6 +17047,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -17126,7 +17130,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 })
                   ]
@@ -24150,25 +24154,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 +24195,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -24207,7 +24214,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 +24235,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 +30420,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 +30796,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 +30815,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