@burdenoff/microfe-bigconsole 2026.510.54

package/dist/bigconsole/components/widgets/metric-card/MetricCardConfig.js

@@ -0,0 +1,158 @@
+import { memo as e, useCallback as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/metric-card/MetricCardConfig.tsx
+var i = e(function({ config: e, onChange: i }) {
+	let a = t((t, n) => {
+		i({
+			...e,
+			[t]: n
+		});
+	}, [e, i]);
+	return /* @__PURE__ */ r("div", {
+		className: "space-y-4",
+		children: [
+			/* @__PURE__ */ r("div", { children: [
+				/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Value Field"
+				}),
+				/* @__PURE__ */ n("input", {
+					type: "text",
+					value: e.valueField || "",
+					onChange: (e) => a("valueField", e.target.value),
+					placeholder: "e.g., totalSales, value, amount",
+					className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
+				}),
+				/* @__PURE__ */ n("p", {
+					className: "text-xs text-text-secondary mt-1",
+					children: "Field name to extract from data (leave empty for auto-detect)"
+				})
+			] }),
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Subtitle"
+			}), /* @__PURE__ */ n("input", {
+				type: "text",
+				value: e.subtitle || "",
+				onChange: (e) => a("subtitle", e.target.value),
+				placeholder: "e.g., Total Revenue",
+				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
+			})] }),
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Value Format"
+			}), /* @__PURE__ */ r("select", {
+				value: e.format || "number",
+				onChange: (e) => a("format", e.target.value),
+				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            ",
+				children: [
+					/* @__PURE__ */ n("option", {
+						value: "number",
+						children: "Number"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "currency",
+						children: "Currency"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "percentage",
+						children: "Percentage"
+					}),
+					/* @__PURE__ */ n("option", {
+						value: "compact",
+						children: "Compact (1K, 1M)"
+					})
+				]
+			})] }),
+			/* @__PURE__ */ r("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Prefix"
+				}), /* @__PURE__ */ n("input", {
+					type: "text",
+					value: e.prefix || "",
+					onChange: (e) => a("prefix", e.target.value),
+					placeholder: "e.g., $",
+					className: "\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
+				})] }), /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+					className: "block text-sm font-medium text-text-primary mb-1",
+					children: "Suffix"
+				}), /* @__PURE__ */ n("input", {
+					type: "text",
+					value: e.suffix || "",
+					onChange: (e) => a("suffix", e.target.value),
+					placeholder: "e.g., users",
+					className: "\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              "
+				})] })]
+			}),
+			/* @__PURE__ */ r("div", { children: [/* @__PURE__ */ n("label", {
+				className: "block text-sm font-medium text-text-primary mb-1",
+				children: "Comparison Label"
+			}), /* @__PURE__ */ n("input", {
+				type: "text",
+				value: e.comparisonLabel || "",
+				onChange: (e) => a("comparisonLabel", e.target.value),
+				placeholder: "e.g., vs last week",
+				className: "\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            "
+			})] }),
+			/* @__PURE__ */ r("div", {
+				className: "space-y-3",
+				children: [
+					/* @__PURE__ */ r("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ n("input", {
+							type: "checkbox",
+							checked: e.showTrend !== !1,
+							onChange: (e) => a("showTrend", e.target.checked),
+							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
+						}), /* @__PURE__ */ n("span", {
+							className: "text-sm text-text-primary",
+							children: "Show trend indicator"
+						})]
+					}),
+					/* @__PURE__ */ r("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ n("input", {
+							type: "checkbox",
+							checked: e.showComparison !== !1,
+							onChange: (e) => a("showComparison", e.target.checked),
+							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
+						}), /* @__PURE__ */ n("span", {
+							className: "text-sm text-text-primary",
+							children: "Show comparison badge"
+						})]
+					}),
+					/* @__PURE__ */ r("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ n("input", {
+							type: "checkbox",
+							checked: e.showSparkline !== !1,
+							onChange: (e) => a("showSparkline", e.target.checked),
+							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
+						}), /* @__PURE__ */ n("span", {
+							className: "text-sm text-text-primary",
+							children: "Show sparkline chart"
+						})]
+					}),
+					/* @__PURE__ */ r("label", {
+						className: "flex items-center gap-3",
+						children: [/* @__PURE__ */ n("input", {
+							type: "checkbox",
+							checked: e.positiveIsGood !== !1,
+							onChange: (e) => a("positiveIsGood", e.target.checked),
+							className: "\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              "
+						}), /* @__PURE__ */ n("span", {
+							className: "text-sm text-text-primary",
+							children: "Positive change is good"
+						})]
+					})
+				]
+			})
+		]
+	});
+});
+//#endregion
+export { i as default };
+
+//# sourceMappingURL=MetricCardConfig.js.map

package/dist/bigconsole/components/widgets/metric-card/MetricCardConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCardConfig.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardConfig.tsx"],"sourcesContent":["/**\n * MetricCardConfig Component\n *\n * Configuration panel for MetricCard widgets.\n */\n\nimport { type FC, memo, useCallback } from 'react';\nimport type { MetricCardConfig as ConfigType } from '../../../types';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardConfigProps {\n  /** Current configuration */\n  config: ConfigType;\n  /** Callback when config changes */\n  onChange: (config: ConfigType) => void;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardConfig: FC<MetricCardConfigProps> = memo(function MetricCardConfig({ config, onChange }) {\n  const handleChange = useCallback(\n    <K extends keyof ConfigType>(key: K, value: ConfigType[K]) => {\n      onChange({ ...config, [key]: value });\n    },\n    [config, onChange]\n  );\n\n  return (\n    <div className=\"space-y-4\">\n      {/* Value Field */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Field</label>\n        <input\n          type=\"text\"\n          value={((config as unknown as Record<string, unknown>).valueField as string) || ''}\n          onChange={(e) => handleChange('valueField' as keyof ConfigType, e.target.value as never)}\n          placeholder=\"e.g., totalSales, value, amount\"\n          className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n        />\n        <p className=\"text-xs text-text-secondary mt-1\">\n          Field name to extract from data (leave empty for auto-detect)\n        </p>\n      </div>\n\n      {/* Subtitle */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Subtitle</label>\n        <input\n          type=\"text\"\n          value={config.subtitle || ''}\n          onChange={(e) => handleChange('subtitle', e.target.value)}\n          placeholder=\"e.g., Total Revenue\"\n          className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n        />\n      </div>\n\n      {/* Format */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Value Format</label>\n        <select\n          value={config.format || 'number'}\n          onChange={(e) => handleChange('format', e.target.value as ConfigType['format'])}\n          className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n        >\n          <option value=\"number\">Number</option>\n          <option value=\"currency\">Currency</option>\n          <option value=\"percentage\">Percentage</option>\n          <option value=\"compact\">Compact (1K, 1M)</option>\n        </select>\n      </div>\n\n      {/* Prefix & Suffix */}\n      <div className=\"grid grid-cols-2 gap-3\">\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">Prefix</label>\n          <input\n            type=\"text\"\n            value={config.prefix || ''}\n            onChange={(e) => handleChange('prefix', e.target.value)}\n            placeholder=\"e.g., $\"\n            className=\"\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n          />\n        </div>\n        <div>\n          <label className=\"block text-sm font-medium text-text-primary mb-1\">Suffix</label>\n          <input\n            type=\"text\"\n            value={config.suffix || ''}\n            onChange={(e) => handleChange('suffix', e.target.value)}\n            placeholder=\"e.g., users\"\n            className=\"\n                w-full px-3 py-2\n                text-sm text-text-primary\n                bg-bg-surface\n                border border-border-default\n                rounded-md\n                focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n              \"\n          />\n        </div>\n      </div>\n\n      {/* Comparison Label */}\n      <div>\n        <label className=\"block text-sm font-medium text-text-primary mb-1\">Comparison Label</label>\n        <input\n          type=\"text\"\n          value={config.comparisonLabel || ''}\n          onChange={(e) => handleChange('comparisonLabel', e.target.value)}\n          placeholder=\"e.g., vs last week\"\n          className=\"\n              w-full px-3 py-2\n              text-sm text-text-primary\n              bg-bg-surface\n              border border-border-default\n              rounded-md\n              focus:outline-none focus:ring-2 focus:ring-action-primary-bg\n            \"\n        />\n      </div>\n\n      {/* Toggle Options */}\n      <div className=\"space-y-3\">\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showTrend !== false}\n            onChange={(e) => handleChange('showTrend', e.target.checked)}\n            className=\"\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              \"\n          />\n          <span className=\"text-sm text-text-primary\">Show trend indicator</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showComparison !== false}\n            onChange={(e) => handleChange('showComparison', e.target.checked)}\n            className=\"\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              \"\n          />\n          <span className=\"text-sm text-text-primary\">Show comparison badge</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.showSparkline !== false}\n            onChange={(e) => handleChange('showSparkline', e.target.checked)}\n            className=\"\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              \"\n          />\n          <span className=\"text-sm text-text-primary\">Show sparkline chart</span>\n        </label>\n\n        <label className=\"flex items-center gap-3\">\n          <input\n            type=\"checkbox\"\n            checked={config.positiveIsGood !== false}\n            onChange={(e) => handleChange('positiveIsGood', e.target.checked)}\n            className=\"\n                w-4 h-4\n                text-action-primary-bg\n                bg-bg-surface\n                border-border-default\n                rounded\n                focus:ring-action-primary-bg\n              \"\n          />\n          <span className=\"text-sm text-text-primary\">Positive change is good</span>\n        </label>\n      </div>\n    </div>\n  );\n});\n\nexport default MetricCardConfig;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.d.ts

@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { Widget } from '../../../types';
+import { TrendDirection } from './TrendIndicator';
+import { SparklineDataPoint } from './SparklineChart';
+
+export interface MetricCardWidgetProps {
+    /** Widget configuration */
+    widget: Widget;
+    /** Fetched data */
+    data?: MetricCardData;
+    /** Click handler for drilldown */
+    onClick?: () => void;
+    /** Drilldown handler - receives metric data */
+    onDrilldown?: (selectedData: Record<string, unknown>) => void;
+}
+export interface MetricCardData {
+    /** Primary value to display */
+    value: number | string;
+    /** Previous value for comparison */
+    previousValue?: number;
+    /** Percentage change from previous */
+    changePercent?: number;
+    /** Trend direction override */
+    trend?: TrendDirection;
+    /** Sparkline data points */
+    sparklineData?: SparklineDataPoint[];
+    /** Target value for comparison */
+    target?: number;
+    /** Unit label (e.g., "users", "$") */
+    unit?: string;
+    /** Whether the metric is a currency */
+    isCurrency?: boolean;
+}
+export declare const MetricCardWidget: FC<MetricCardWidgetProps>;
+export default MetricCardWidget;
+//# sourceMappingURL=MetricCardWidget.d.ts.map

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCardWidget.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardWidget.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAA8B,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAkB,KAAK,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAEvE,OAAO,EAAkB,KAAK,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO3E,MAAM,WAAW,qBAAqB;IACpC,2BAA2B;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,mBAAmB;IACnB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;CAC/D;AAED,MAAM,WAAW,cAAc;IAC7B,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB,4BAA4B;IAC5B,aAAa,CAAC,EAAE,kBAAkB,EAAE,CAAC;IACrC,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAwED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA4OrD,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.js

@@ -0,0 +1,195 @@
+import { firstObjectRow as e, inferValueField as t, unwrapRows as n } from "../utils/inferFields.js";
+import r from "./TrendIndicator.js";
+import i from "./ComparisonBadge.js";
+import a from "./SparklineChart.js";
+import { memo as o, useCallback as s, useMemo as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/metric-card/MetricCardWidget.tsx
+function d(e, t) {
+	if (typeof e == "string") return e;
+	let { format: n = "number", prefix: r, suffix: i } = t || {}, a;
+	switch (n) {
+		case "currency":
+			a = new Intl.NumberFormat("en-US", {
+				style: "currency",
+				currency: "USD",
+				minimumFractionDigits: 0,
+				maximumFractionDigits: 2
+			}).format(e);
+			break;
+		case "percentage":
+			a = `${(e * 100).toFixed(1)}%`;
+			break;
+		case "compact":
+			a = new Intl.NumberFormat("en-US", {
+				notation: "compact",
+				maximumFractionDigits: 1
+			}).format(e);
+			break;
+		default: a = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 }).format(e);
+	}
+	return r && (a = `${r}${a}`), i && (a = `${a}${i}`), a;
+}
+function f(e) {
+	return e === void 0 || e === 0 ? "flat" : e > 0 ? "up" : "down";
+}
+function p(e, t) {
+	return e === "flat" ? "muted" : (t ? e === "up" : e === "down") ? "success" : "error";
+}
+var m = o(function({ widget: o, data: m, onClick: h, onDrilldown: g }) {
+	let _ = o.config, v = c(() => {
+		if (!m) return;
+		let r = (e, t) => t.split(".").reduce((e, t) => e && typeof e == "object" ? e[t] : void 0, e);
+		if ("value" in m && m.value !== void 0) return m;
+		let i = _?.valueField;
+		if (i && typeof m == "object") {
+			let e = r(m, i);
+			if (e !== void 0) {
+				let t = _?.previousValueField, n = t ? r(m, t) : void 0;
+				return {
+					value: e,
+					previousValue: n,
+					changePercent: n !== void 0 && typeof e == "number" ? (e - n) / n * 100 : void 0
+				};
+			}
+		}
+		let a = [
+			"value",
+			"total",
+			"amount",
+			"count",
+			"sum",
+			"totalSales",
+			"totalRevenue",
+			"totalOrders"
+		];
+		for (let e of a) if (typeof m == "object" && e in m) {
+			let t = m[e];
+			if (typeof t == "number" || typeof t == "string") return { value: t };
+		}
+		if (typeof m == "object" && "summary" in m) {
+			let e = m.summary;
+			if (e && typeof e == "object") {
+				for (let t of a) if (t in e) {
+					let n = e[t];
+					if (typeof n == "number" || typeof n == "string") return { value: n };
+				}
+			}
+		}
+		if (typeof m == "number" || typeof m == "string") return { value: m };
+		let o = e(m);
+		if (o) {
+			let e = _?.valueField;
+			if (e) {
+				let t = n(m) ?? [o];
+				for (let n of t) if (n && typeof n == "object") {
+					let t = r(n, e);
+					if (typeof t == "number" || typeof t == "string") return { value: t };
+				}
+				return;
+			}
+			let i = t(o);
+			if (i) {
+				let e = o[i];
+				if (typeof e == "number" || typeof e == "string") return { value: e };
+			}
+		}
+	}, [m, _]), y = c(() => v?.trend || f(v?.changePercent), [v?.trend, v?.changePercent]), b = _?.positiveIsGood ?? !0, x = c(() => v?.value ? d(v.value, _) : "—", [v?.value, _]), S = c(() => p(y, b), [y, b]), C = s(() => {
+		g ? g({
+			value: v?.value,
+			changePercent: v?.changePercent,
+			trend: y,
+			target: v?.target
+		}) : h && o.drilldowns?.length && h();
+	}, [
+		h,
+		g,
+		o.drilldowns,
+		v,
+		y
+	]), w = !!(g || h && o.drilldowns?.length);
+	return /* @__PURE__ */ u("div", {
+		className: `
+          flex flex-col h-full p-4
+          ${w ? "cursor-pointer hover:bg-bg-muted/50 transition-colors" : ""}
+        `,
+		onClick: C,
+		role: w ? "button" : void 0,
+		tabIndex: w ? 0 : void 0,
+		onKeyDown: (e) => {
+			w && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), C());
+		},
+		children: [
+			_?.subtitle && /* @__PURE__ */ l("p", {
+				className: "text-xs text-text-secondary mb-1 truncate",
+				children: _.subtitle
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "flex items-baseline gap-2 mb-2",
+				children: [/* @__PURE__ */ l("span", {
+					className: "text-3xl font-semibold text-text-primary tracking-tight",
+					title: String(v?.value),
+					children: x
+				}), _?.showTrend !== !1 && v?.changePercent !== void 0 && /* @__PURE__ */ l(r, {
+					direction: y,
+					size: "md",
+					positiveIsGood: b
+				})]
+			}),
+			_?.showComparison !== !1 && v?.changePercent !== void 0 && /* @__PURE__ */ l("div", {
+				className: "mb-3",
+				children: /* @__PURE__ */ l(i, {
+					value: v.changePercent,
+					label: _?.comparisonLabel,
+					positiveIsGood: b,
+					size: "sm"
+				})
+			}),
+			v?.target !== void 0 && typeof v.value == "number" && /* @__PURE__ */ u("div", {
+				className: "mb-3",
+				children: [/* @__PURE__ */ u("div", {
+					className: "flex justify-between text-xs text-text-secondary mb-1",
+					children: [/* @__PURE__ */ u("span", { children: ["Target: ", d(v.target, _)] }), /* @__PURE__ */ u("span", { children: [(v.value / v.target * 100).toFixed(0), "%"] })]
+				}), /* @__PURE__ */ l("div", {
+					className: "h-1.5 bg-bg-muted rounded-full overflow-hidden",
+					children: /* @__PURE__ */ l("div", {
+						className: `h-full rounded-full transition-all ${v.value >= v.target ? "bg-state-success" : "bg-action-primary-bg"}`,
+						style: { width: `${Math.min(v.value / v.target * 100, 100)}%` }
+					})
+				})]
+			}),
+			_?.showSparkline !== !1 && v?.sparklineData?.length ? /* @__PURE__ */ l("div", {
+				className: "mt-auto pt-2",
+				children: /* @__PURE__ */ l(a, {
+					data: v.sparklineData,
+					width: 120,
+					height: 32,
+					color: S,
+					showFill: !0
+				})
+			}) : null,
+			w && /* @__PURE__ */ l("div", {
+				className: "mt-auto pt-2 flex items-center justify-end",
+				children: /* @__PURE__ */ u("span", {
+					className: "text-xs text-text-secondary flex items-center gap-1",
+					children: ["View details", /* @__PURE__ */ l("svg", {
+						className: "w-3 h-3",
+						fill: "none",
+						stroke: "currentColor",
+						viewBox: "0 0 24 24",
+						children: /* @__PURE__ */ l("path", {
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							strokeWidth: 2,
+							d: "M9 5l7 7-7 7"
+						})
+					})]
+				})
+			})
+		]
+	});
+});
+//#endregion
+export { m as default };
+
+//# sourceMappingURL=MetricCardWidget.js.map

package/dist/bigconsole/components/widgets/metric-card/MetricCardWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCardWidget.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/MetricCardWidget.tsx"],"sourcesContent":["/**\n * MetricCardWidget Component\n *\n * Displays a single KPI/metric with trend, comparison, and optional sparkline.\n */\n\nimport { type FC, memo, useMemo, useCallback } from 'react';\nimport type { Widget, MetricCardConfig } from '../../../types';\nimport { TrendIndicator, type TrendDirection } from './TrendIndicator';\nimport { ComparisonBadge } from './ComparisonBadge';\nimport { SparklineChart, type SparklineDataPoint } from './SparklineChart';\nimport { firstObjectRow, inferValueField, unwrapRows } from '../utils/inferFields';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface MetricCardWidgetProps {\n  /** Widget configuration */\n  widget: Widget;\n  /** Fetched data */\n  data?: MetricCardData;\n  /** Click handler for drilldown */\n  onClick?: () => void;\n  /** Drilldown handler - receives metric data */\n  onDrilldown?: (selectedData: Record<string, unknown>) => void;\n}\n\nexport interface MetricCardData {\n  /** Primary value to display */\n  value: number | string;\n  /** Previous value for comparison */\n  previousValue?: number;\n  /** Percentage change from previous */\n  changePercent?: number;\n  /** Trend direction override */\n  trend?: TrendDirection;\n  /** Sparkline data points */\n  sparklineData?: SparklineDataPoint[];\n  /** Target value for comparison */\n  target?: number;\n  /** Unit label (e.g., \"users\", \"$\") */\n  unit?: string;\n  /** Whether the metric is a currency */\n  isCurrency?: boolean;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Format a number based on configuration\n */\nfunction formatValue(value: number | string, config?: MetricCardConfig): string {\n  if (typeof value === 'string') return value;\n\n  const { format = 'number', prefix, suffix } = config || {};\n\n  let formatted: string;\n\n  switch (format) {\n    case 'currency':\n      formatted = new Intl.NumberFormat('en-US', {\n        style: 'currency',\n        currency: 'USD',\n        minimumFractionDigits: 0,\n        maximumFractionDigits: 2,\n      }).format(value);\n      break;\n\n    case 'percentage':\n      formatted = `${(value * 100).toFixed(1)}%`;\n      break;\n\n    case 'compact':\n      formatted = new Intl.NumberFormat('en-US', {\n        notation: 'compact',\n        maximumFractionDigits: 1,\n      }).format(value);\n      break;\n\n    case 'number':\n    default:\n      formatted = new Intl.NumberFormat('en-US', {\n        maximumFractionDigits: 2,\n      }).format(value);\n  }\n\n  // Apply prefix/suffix if provided\n  if (prefix) formatted = `${prefix}${formatted}`;\n  if (suffix) formatted = `${formatted}${suffix}`;\n\n  return formatted;\n}\n\n/**\n * Calculate trend direction from change percent\n */\nfunction calculateTrend(changePercent?: number): TrendDirection {\n  if (changePercent === undefined || changePercent === 0) return 'flat';\n  return changePercent > 0 ? 'up' : 'down';\n}\n\n/**\n * Get sparkline color based on trend\n */\nfunction getSparklineColor(trend: TrendDirection, positiveIsGood: boolean): 'success' | 'error' | 'muted' {\n  if (trend === 'flat') return 'muted';\n  const isGood = positiveIsGood ? trend === 'up' : trend === 'down';\n  return isGood ? 'success' : 'error';\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport const MetricCardWidget: FC<MetricCardWidgetProps> = memo(function MetricCardWidget({\n  widget,\n  data: rawData,\n  onClick,\n  onDrilldown,\n}) {\n  const config = widget.config as unknown as MetricCardConfig | undefined;\n\n  // Normalize data - extract value from object if valueField is configured\n  const data = useMemo((): MetricCardData | undefined => {\n    if (!rawData) return undefined;\n\n    // Helper to get nested value using dot notation (e.g., \"summary.totalSales\")\n    const getNestedValue = (obj: Record<string, unknown>, path: string): unknown => {\n      return path.split('.').reduce((current, key) => {\n        return current && typeof current === 'object' ? (current as Record<string, unknown>)[key] : undefined;\n      }, obj as unknown);\n    };\n\n    // If data already has 'value' property, use it directly\n    if ('value' in rawData && rawData.value !== undefined) {\n      return rawData as MetricCardData;\n    }\n\n    // If valueField is configured, extract the value from that field (supports dot notation)\n    const valueField = (config as unknown as Record<string, unknown> | undefined)?.valueField as string | undefined;\n    if (valueField && typeof rawData === 'object') {\n      const extractedValue = getNestedValue(rawData as unknown as Record<string, unknown>, valueField);\n      if (extractedValue !== undefined) {\n        // Also try to extract previousValue if previousValueField is configured\n        const previousValueField = (config as unknown as Record<string, unknown> | undefined)?.previousValueField as\n          | string\n          | undefined;\n        const previousValue = previousValueField\n          ? (getNestedValue(rawData as unknown as Record<string, unknown>, previousValueField) as number | undefined)\n          : undefined;\n\n        return {\n          value: extractedValue as number | string,\n          previousValue,\n          changePercent:\n            previousValue !== undefined && typeof extractedValue === 'number'\n              ? ((extractedValue - previousValue) / previousValue) * 100\n              : undefined,\n        };\n      }\n    }\n\n    // Try common field names at top level\n    const commonFields = ['value', 'total', 'amount', 'count', 'sum', 'totalSales', 'totalRevenue', 'totalOrders'];\n    for (const field of commonFields) {\n      if (typeof rawData === 'object' && field in rawData) {\n        const val = (rawData as unknown as Record<string, unknown>)[field];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    // Try looking in nested 'summary' object (common pattern)\n    if (typeof rawData === 'object' && 'summary' in rawData) {\n      const summary = (rawData as Record<string, unknown>).summary as Record<string, unknown> | undefined;\n      if (summary && typeof summary === 'object') {\n        for (const field of commonFields) {\n          if (field in summary) {\n            const val = summary[field];\n            if (typeof val === 'number' || typeof val === 'string') {\n              return { value: val };\n            }\n          }\n        }\n      }\n    }\n\n    // If rawData is a number or string directly, use it\n    if (typeof rawData === 'number' || typeof rawData === 'string') {\n      return { value: rawData };\n    }\n\n    // BOFF-2246 smart default: if rawData is an array (or envelope around an\n    // array) with object rows, use the configured valueField if it resolves\n    // on any row (supports dotted paths like \"metrics.revenue\") — otherwise\n    // pick the first numeric field from row[0]. This path only fires when\n    // the earlier top-level extraction didn't find anything, but an explicit\n    // `config.valueField` (flat or dotted) must always win over inference.\n    const firstRow = firstObjectRow(rawData);\n    if (firstRow) {\n      const configuredField = (config as unknown as Record<string, unknown> | undefined)?.valueField as\n        | string\n        | undefined;\n      if (configuredField) {\n        // Configured field is authoritative. Scan every row for it so sparse\n        // envelopes like `{data:[{id:1},{revenue:120}]}` with\n        // `valueField:\"revenue\"` still resolve. If no row carries it, return\n        // undefined rather than substituting an unrelated numeric column\n        // from row[0] (that would silently misrepresent the user's mapping).\n        const rows = unwrapRows(rawData) ?? [firstRow];\n        for (const r of rows) {\n          if (r && typeof r === 'object') {\n            const resolved = getNestedValue(r as Record<string, unknown>, configuredField);\n            if (typeof resolved === 'number' || typeof resolved === 'string') {\n              return { value: resolved };\n            }\n          }\n        }\n        return undefined;\n      }\n      const inferredField = inferValueField(firstRow);\n      if (inferredField) {\n        const val = firstRow[inferredField];\n        if (typeof val === 'number' || typeof val === 'string') {\n          return { value: val };\n        }\n      }\n    }\n\n    return undefined;\n  }, [rawData, config]);\n\n  // Calculate derived values\n  const trend = useMemo(() => {\n    return data?.trend || calculateTrend(data?.changePercent);\n  }, [data?.trend, data?.changePercent]);\n\n  const positiveIsGood = config?.positiveIsGood ?? true;\n\n  const formattedValue = useMemo(() => {\n    if (!data?.value) return '—';\n    return formatValue(data.value, config);\n  }, [data?.value, config]);\n\n  const sparklineColor = useMemo(() => {\n    return getSparklineColor(trend, positiveIsGood);\n  }, [trend, positiveIsGood]);\n\n  // Handle click\n  const handleClick = useCallback(() => {\n    // Support both legacy onClick and new onDrilldown\n    if (onDrilldown) {\n      onDrilldown({\n        value: data?.value,\n        changePercent: data?.changePercent,\n        trend,\n        target: data?.target,\n      });\n    } else if (onClick && widget.drilldowns?.length) {\n      onClick();\n    }\n  }, [onClick, onDrilldown, widget.drilldowns, data, trend]);\n\n  // Determine if clickable\n  const isClickable = Boolean(onDrilldown || (onClick && widget.drilldowns?.length));\n\n  return (\n    <div\n      className={`\n          flex flex-col h-full p-4\n          ${isClickable ? 'cursor-pointer hover:bg-bg-muted/50 transition-colors' : ''}\n        `}\n      onClick={handleClick}\n      role={isClickable ? 'button' : undefined}\n      tabIndex={isClickable ? 0 : undefined}\n      onKeyDown={(e) => {\n        if (isClickable && (e.key === 'Enter' || e.key === ' ')) {\n          e.preventDefault();\n          handleClick();\n        }\n      }}\n    >\n      {/* Subtitle/Label */}\n      {config?.subtitle && <p className=\"text-xs text-text-secondary mb-1 truncate\">{config.subtitle}</p>}\n\n      {/* Main Value */}\n      <div className=\"flex items-baseline gap-2 mb-2\">\n        <span className=\"text-3xl font-semibold text-text-primary tracking-tight\" title={String(data?.value)}>\n          {formattedValue}\n        </span>\n\n        {/* Trend Indicator (inline) */}\n        {config?.showTrend !== false && data?.changePercent !== undefined && (\n          <TrendIndicator direction={trend} size=\"md\" positiveIsGood={positiveIsGood} />\n        )}\n      </div>\n\n      {/* Comparison Badge */}\n      {config?.showComparison !== false && data?.changePercent !== undefined && (\n        <div className=\"mb-3\">\n          <ComparisonBadge\n            value={data.changePercent}\n            label={config?.comparisonLabel}\n            positiveIsGood={positiveIsGood}\n            size=\"sm\"\n          />\n        </div>\n      )}\n\n      {/* Target Progress */}\n      {data?.target !== undefined && typeof data.value === 'number' && (\n        <div className=\"mb-3\">\n          <div className=\"flex justify-between text-xs text-text-secondary mb-1\">\n            <span>Target: {formatValue(data.target, config)}</span>\n            <span>{((data.value / data.target) * 100).toFixed(0)}%</span>\n          </div>\n          <div className=\"h-1.5 bg-bg-muted rounded-full overflow-hidden\">\n            <div\n              className={`h-full rounded-full transition-all ${\n                data.value >= data.target ? 'bg-state-success' : 'bg-action-primary-bg'\n              }`}\n              style={{\n                width: `${Math.min((data.value / data.target) * 100, 100)}%`,\n              }}\n            />\n          </div>\n        </div>\n      )}\n\n      {/* Sparkline */}\n      {config?.showSparkline !== false && data?.sparklineData?.length ? (\n        <div className=\"mt-auto pt-2\">\n          <SparklineChart data={data.sparklineData} width={120} height={32} color={sparklineColor} showFill />\n        </div>\n      ) : null}\n\n      {/* Drilldown Indicator */}\n      {isClickable && (\n        <div className=\"mt-auto pt-2 flex items-center justify-end\">\n          <span className=\"text-xs text-text-secondary flex items-center gap-1\">\n            View details\n            <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n            </svg>\n          </span>\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport default MetricCardWidget;\n"],"mappings":"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"}

package/dist/bigconsole/components/widgets/metric-card/SparklineChart.d.ts

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+
+export interface SparklineDataPoint {
+    value: number;
+    timestamp?: string;
+}
+export interface SparklineChartProps {
+    /** Data points for the sparkline */
+    data: SparklineDataPoint[];
+    /** Width of the chart */
+    width?: number;
+    /** Height of the chart */
+    height?: number;
+    /** Line color (uses semantic token) */
+    color?: 'primary' | 'success' | 'error' | 'warning' | 'muted';
+    /** Whether to show the fill area */
+    showFill?: boolean;
+    /** Stroke width */
+    strokeWidth?: number;
+}
+export declare const SparklineChart: FC<SparklineChartProps>;
+export default SparklineChart;
+//# sourceMappingURL=SparklineChart.d.ts.map

package/dist/bigconsole/components/widgets/metric-card/SparklineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineChart.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/metric-card/SparklineChart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAiB,MAAM,OAAO,CAAC;AAE/C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,mBAAmB;IAClC,oCAAoC;IACpC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;IAC9D,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAyBD,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAkFjD,CAAC;AAEH,eAAe,cAAc,CAAC"}

package/dist/bigconsole/components/widgets/metric-card/SparklineChart.js

@@ -0,0 +1,94 @@
+import { memo as e, useMemo as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/bigconsole/components/widgets/metric-card/SparklineChart.tsx
+var i = {
+	primary: {
+		stroke: "stroke-action-primary-bg",
+		fill: "fill-action-primary-bg/20"
+	},
+	success: {
+		stroke: "stroke-state-success",
+		fill: "fill-state-success/20"
+	},
+	error: {
+		stroke: "stroke-state-error",
+		fill: "fill-state-error/20"
+	},
+	warning: {
+		stroke: "stroke-state-warning",
+		fill: "fill-state-warning/20"
+	},
+	muted: {
+		stroke: "stroke-text-secondary",
+		fill: "fill-text-secondary/10"
+	}
+}, a = e(function({ data: e, width: a = 100, height: o = 32, color: s = "primary", showFill: c = !0, strokeWidth: l = 2 }) {
+	let u = t(() => {
+		if (!e.length) return {
+			line: "",
+			area: ""
+		};
+		let t = e.map((e) => e.value), n = Math.min(...t), r = Math.max(...t) - n || 1, i = l, s = a - i * 2, c = o - i * 2, u = e.map((t, a) => ({
+			x: i + a / (e.length - 1) * s,
+			y: i + c - (t.value - n) / r * c
+		})), d = u.map((e, t) => `${t === 0 ? "M" : "L"} ${e.x} ${e.y}`).join(" ");
+		return {
+			line: d,
+			area: `
+        ${d}
+        L ${u[u.length - 1].x} ${o - i}
+        L ${i} ${o - i}
+        Z
+      `
+		};
+	}, [
+		e,
+		a,
+		o,
+		l
+	]);
+	if (!e.length) return /* @__PURE__ */ n("div", {
+		className: "flex items-center justify-center text-text-secondary",
+		style: {
+			width: a,
+			height: o
+		},
+		children: /* @__PURE__ */ n("span", {
+			className: "text-xs",
+			children: "No data"
+		})
+	});
+	let d = i[s];
+	return /* @__PURE__ */ r("svg", {
+		width: a,
+		height: o,
+		className: "overflow-visible",
+		role: "img",
+		"aria-label": "Sparkline chart",
+		children: [
+			c && /* @__PURE__ */ n("path", {
+				d: u.area,
+				className: d.fill,
+				strokeWidth: 0
+			}),
+			/* @__PURE__ */ n("path", {
+				d: u.line,
+				className: d.stroke,
+				fill: "none",
+				strokeWidth: l,
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			e.length > 0 && /* @__PURE__ */ n("circle", {
+				cx: a - l,
+				cy: l + (o - l * 2) - (e[e.length - 1].value - Math.min(...e.map((e) => e.value))) / (Math.max(...e.map((e) => e.value)) - Math.min(...e.map((e) => e.value)) || 1) * (o - l * 2),
+				r: l + 1,
+				className: `${d.stroke.replace("stroke-", "fill-")}`
+			})
+		]
+	});
+});
+//#endregion
+export { a as default };
+
+//# sourceMappingURL=SparklineChart.js.map

package/dist/bigconsole/components/widgets/metric-card/SparklineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SparklineChart.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/metric-card/SparklineChart.tsx"],"sourcesContent":["/**\n * SparklineChart Component\n *\n * Mini trend chart for metric cards.\n */\n\nimport { type FC, memo, useMemo } from 'react';\n\nexport interface SparklineDataPoint {\n  value: number;\n  timestamp?: string;\n}\n\nexport interface SparklineChartProps {\n  /** Data points for the sparkline */\n  data: SparklineDataPoint[];\n  /** Width of the chart */\n  width?: number;\n  /** Height of the chart */\n  height?: number;\n  /** Line color (uses semantic token) */\n  color?: 'primary' | 'success' | 'error' | 'warning' | 'muted';\n  /** Whether to show the fill area */\n  showFill?: boolean;\n  /** Stroke width */\n  strokeWidth?: number;\n}\n\nconst COLOR_CLASSES = {\n  primary: {\n    stroke: 'stroke-action-primary-bg',\n    fill: 'fill-action-primary-bg/20',\n  },\n  success: {\n    stroke: 'stroke-state-success',\n    fill: 'fill-state-success/20',\n  },\n  error: {\n    stroke: 'stroke-state-error',\n    fill: 'fill-state-error/20',\n  },\n  warning: {\n    stroke: 'stroke-state-warning',\n    fill: 'fill-state-warning/20',\n  },\n  muted: {\n    stroke: 'stroke-text-secondary',\n    fill: 'fill-text-secondary/10',\n  },\n};\n\nexport const SparklineChart: FC<SparklineChartProps> = memo(function SparklineChart({\n  data,\n  width = 100,\n  height = 32,\n  color = 'primary',\n  showFill = true,\n  strokeWidth = 2,\n}) {\n  const pathData = useMemo(() => {\n    if (!data.length) return { line: '', area: '' };\n\n    const values = data.map((d) => d.value);\n    const min = Math.min(...values);\n    const max = Math.max(...values);\n    const range = max - min || 1;\n\n    const padding = strokeWidth;\n    const chartWidth = width - padding * 2;\n    const chartHeight = height - padding * 2;\n\n    const points = data.map((d, i) => {\n      const x = padding + (i / (data.length - 1)) * chartWidth;\n      const y = padding + chartHeight - ((d.value - min) / range) * chartHeight;\n      return { x, y };\n    });\n\n    // Create line path\n    const linePath = points.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p.x} ${p.y}`).join(' ');\n\n    // Create area path (closed shape for fill)\n    const areaPath = `\n        ${linePath}\n        L ${points[points.length - 1].x} ${height - padding}\n        L ${padding} ${height - padding}\n        Z\n      `;\n\n    return { line: linePath, area: areaPath };\n  }, [data, width, height, strokeWidth]);\n\n  if (!data.length) {\n    return (\n      <div className=\"flex items-center justify-center text-text-secondary\" style={{ width, height }}>\n        <span className=\"text-xs\">No data</span>\n      </div>\n    );\n  }\n\n  const colors = COLOR_CLASSES[color];\n\n  return (\n    <svg width={width} height={height} className=\"overflow-visible\" role=\"img\" aria-label=\"Sparkline chart\">\n      {/* Gradient fill */}\n      {showFill && <path d={pathData.area} className={colors.fill} strokeWidth={0} />}\n\n      {/* Line */}\n      <path\n        d={pathData.line}\n        className={colors.stroke}\n        fill=\"none\"\n        strokeWidth={strokeWidth}\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n\n      {/* End dot */}\n      {data.length > 0 && (\n        <circle\n          cx={width - strokeWidth}\n          cy={\n            strokeWidth +\n            (height - strokeWidth * 2) -\n            ((data[data.length - 1].value - Math.min(...data.map((d) => d.value))) /\n              (Math.max(...data.map((d) => d.value)) - Math.min(...data.map((d) => d.value)) || 1)) *\n              (height - strokeWidth * 2)\n          }\n          r={strokeWidth + 1}\n          className={`${colors.stroke.replace('stroke-', 'fill-')}`}\n        />\n      )}\n    </svg>\n  );\n});\n\nexport default SparklineChart;\n"],"mappings":";;;AA4BA,IAAM,IAAgB;CACpB,SAAS;EACP,QAAQ;EACR,MAAM;EACP;CACD,SAAS;EACP,QAAQ;EACR,MAAM;EACP;CACD,OAAO;EACL,QAAQ;EACR,MAAM;EACP;CACD,SAAS;EACP,QAAQ;EACR,MAAM;EACP;CACD,OAAO;EACL,QAAQ;EACR,MAAM;EACP;CACF,EAEY,IAA0C,EAAK,SAAwB,EAClF,SACA,WAAQ,KACR,YAAS,IACT,WAAQ,WACR,cAAW,IACX,iBAAc,KACb;CACD,IAAM,IAAW,QAAc;AAC7B,MAAI,CAAC,EAAK,OAAQ,QAAO;GAAE,MAAM;GAAI,MAAM;GAAI;EAE/C,IAAM,IAAS,EAAK,KAAK,MAAM,EAAE,MAAM,EACjC,IAAM,KAAK,IAAI,GAAG,EAAO,EAEzB,IADM,KAAK,IAAI,GAAG,EAAO,GACX,KAAO,GAErB,IAAU,GACV,IAAa,IAAQ,IAAU,GAC/B,IAAc,IAAS,IAAU,GAEjC,IAAS,EAAK,KAAK,GAAG,OAGnB;GAAE,GAFC,IAAW,KAAK,EAAK,SAAS,KAAM;GAElC,GADF,IAAU,KAAgB,EAAE,QAAQ,KAAO,IAAS;GAC/C,EACf,EAGI,IAAW,EAAO,KAAK,GAAG,MAAM,GAAG,MAAM,IAAI,MAAM,IAAI,GAAG,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI;AAUvF,SAAO;GAAE,MAAM;GAAU,MAPR;UACX,EAAS;YACP,EAAO,EAAO,SAAS,GAAG,EAAE,GAAG,IAAS,EAAQ;YAChD,EAAQ,GAAG,IAAS,EAAQ;;;GAIK;IACxC;EAAC;EAAM;EAAO;EAAQ;EAAY,CAAC;AAEtC,KAAI,CAAC,EAAK,OACR,QACE,kBAAC,OAAD;EAAK,WAAU;EAAuD,OAAO;GAAE;GAAO;GAAQ;YAC5F,kBAAC,QAAD;GAAM,WAAU;aAAU;GAAc,CAAA;EACpC,CAAA;CAIV,IAAM,IAAS,EAAc;AAE7B,QACE,kBAAC,OAAD;EAAY;EAAe;EAAQ,WAAU;EAAmB,MAAK;EAAM,cAAW;YAAtF;GAEG,KAAY,kBAAC,QAAD;IAAM,GAAG,EAAS;IAAM,WAAW,EAAO;IAAM,aAAa;IAAK,CAAA;GAG/E,kBAAC,QAAD;IACE,GAAG,EAAS;IACZ,WAAW,EAAO;IAClB,MAAK;IACQ;IACb,eAAc;IACd,gBAAe;IACf,CAAA;GAGD,EAAK,SAAS,KACb,kBAAC,UAAD;IACE,IAAI,IAAQ;IACZ,IACE,KACC,IAAS,IAAc,MACtB,EAAK,EAAK,SAAS,GAAG,QAAQ,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,MAAM,CAAC,KAClE,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,MAAM,CAAC,GAAG,KAAK,IAAI,GAAG,EAAK,KAAK,MAAM,EAAE,MAAM,CAAC,IAAI,MACjF,IAAS,IAAc;IAE5B,GAAG,IAAc;IACjB,WAAW,GAAG,EAAO,OAAO,QAAQ,WAAW,QAAQ;IACvD,CAAA;GAEA;;EAER"}

package/dist/bigconsole/components/widgets/metric-card/TrendIndicator.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+export type TrendDirection = 'up' | 'down' | 'flat';
+export interface TrendIndicatorProps {
+    /** Direction of the trend */
+    direction: TrendDirection;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Whether positive trend is good (default true for metrics like revenue) */
+    positiveIsGood?: boolean;
+}
+export declare const TrendIndicator: FC<TrendIndicatorProps>;
+export default TrendIndicator;
+//# sourceMappingURL=TrendIndicator.d.ts.map

package/dist/bigconsole/components/widgets/metric-card/TrendIndicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrendIndicator.d.ts","sourceRoot":"","sources":["../../../../../src/bigconsole/components/widgets/metric-card/TrendIndicator.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,KAAK,EAAE,EAAQ,MAAM,OAAO,CAAC;AAEtC,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAEpD,MAAM,WAAW,mBAAmB;IAClC,6BAA6B;IAC7B,SAAS,EAAE,cAAc,CAAC;IAC1B,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,6EAA6E;IAC7E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAQD,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CA2DjD,CAAC;AAEH,eAAe,cAAc,CAAC"}