@almadar/ui 4.19.3 → 4.21.0

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);
@@ -16859,6 +16859,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -16881,6 +16882,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -16961,7 +16965,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 })
                   ]
@@ -23907,25 +23911,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 +23952,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23964,7 +23971,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 +23992,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 +30039,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 +30415,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 +30434,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 +38260,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);
@@ -16814,6 +16814,7 @@ var init_Tabs = __esm({
       defaultActiveTab,
       activeTab: controlledActiveTab,
       onTabChange,
+      tabChangeEvent,
       variant = "default",
       orientation = "horizontal",
       className
@@ -16836,6 +16837,9 @@ var init_Tabs = __esm({
           setInternalActiveTab(tabId);
         }
         onTabChange?.(tabId);
+        if (tabChangeEvent) {
+          eventBus.emit(`UI:${tabChangeEvent}`, { tabId });
+        }
         if (tabEvent) {
           eventBus.emit(`UI:${tabEvent}`, { tabId });
         }
@@ -16916,7 +16920,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 })
                   ]
@@ -23862,25 +23866,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 +23907,10 @@ var init_StatDisplay = __esm({
       label,
       value,
       max,
+      target,
+      trend,
+      prefix,
+      suffix,
       icon: iconProp,
       iconBg = "bg-muted",
       iconColor = "text-foreground",
@@ -23919,7 +23926,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 +23947,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 +29994,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 +30370,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 +30389,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 +38215,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.21.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",