indas-ui 0.0.1 → 0.1.0

package/dist/cjs/components/dashboard/config.js

@@ -0,0 +1,118 @@
+'use client';
+"use strict";
+// Dashboard Configuration
+// Centralized config for chart sizes, grid layouts, and responsive breakpoints
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.chartColors = exports.barConfig = exports.donutConfig = exports.chartCard = exports.spacing = exports.gridLayouts = exports.chartHeights = void 0;
+exports.getChartHeight = getChartHeight;
+exports.getGridClasses = getGridClasses;
+/**
+ * Chart height presets (in pixels)
+ * These ensure consistent sizing across all dashboard charts
+ */
+exports.chartHeights = {
+    /** Small charts - KPIs, mini sparklines */
+    sm: 180,
+    /** Medium charts - Standard dashboard charts */
+    md: 240,
+    /** Large charts - Featured/hero charts */
+    lg: 300,
+    /** Extra large - Full-width detailed charts */
+    xl: 360,
+};
+/**
+ * Grid layout configurations
+ * Responsive column layouts for different chart groupings
+ */
+exports.gridLayouts = {
+    /** Single chart full width */
+    single: 'grid-cols-1',
+    /** 2 charts side by side on large screens */
+    double: 'grid-cols-1 lg:grid-cols-2',
+    /** 3 charts on large screens, 2 on medium */
+    triple: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+    /** 4 charts - 2x2 on medium, 4 on large */
+    quad: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-4',
+    /** KPI cards - 4 columns on large, 2 on medium */
+    kpi: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+};
+/**
+ * Section spacing
+ * Gap between charts and sections
+ */
+exports.spacing = {
+    /** Gap between charts in a grid */
+    chartGap: 'gap-4 lg:gap-6',
+    /** Gap between sections */
+    sectionGap: 'space-y-4 lg:space-y-6',
+    /** Padding for main content area */
+    contentPadding: 'p-4 md:p-6',
+};
+/**
+ * Chart card configurations
+ */
+exports.chartCard = {
+    /** Default border radius */
+    borderRadius: 'rounded-xl',
+    /** Default padding */
+    padding: 'p-4',
+    /** Background */
+    background: 'bg-[rgb(var(--bg-surface))]',
+    /** Border */
+    border: 'border border-[rgb(var(--bd-default))]',
+};
+/**
+ * Donut chart configurations
+ */
+exports.donutConfig = {
+    /** Inner radius percentage for donut hole */
+    innerRadius: 60,
+    /** Outer radius percentage */
+    outerRadius: 80,
+};
+/**
+ * Bar chart configurations
+ */
+exports.barConfig = {
+    /** Default bar radius */
+    barRadius: 4,
+    /** Max bar width */
+    maxBarWidth: 40,
+};
+/**
+ * Color palette for charts
+ * Using CSS variables where possible, hex fallbacks for chart libraries
+ */
+exports.chartColors = {
+    primary: '#5470c6',
+    success: '#52c41a',
+    warning: '#faad14',
+    error: '#f5222d',
+    info: '#1890ff',
+    muted: '#8c8c8c',
+    /** Extended palette for multi-series */
+    palette: [
+        '#5470c6',
+        '#91cc75',
+        '#fac858',
+        '#ee6666',
+        '#73c0de',
+        '#3ba272',
+        '#fc8452',
+        '#9a60b4',
+        '#ea7ccc',
+    ],
+};
+/**
+ * Helper to get responsive chart height
+ * Returns different heights based on viewport considerations
+ */
+function getChartHeight(size = 'md') {
+    return exports.chartHeights[size];
+}
+/**
+ * Helper to build grid classes
+ */
+function getGridClasses(layout) {
+    return `grid ${exports.gridLayouts[layout]} ${exports.spacing.chartGap}`;
+}

package/dist/cjs/components/dashboard/index.js

@@ -0,0 +1,39 @@
+'use client';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFiscalStartYear = exports.buildContextLabel = exports.rangeFromSelection = exports.DrillDownModal = exports.DashboardTooltip = exports.FORECAST_METHODS = exports.projectForecast = exports.computeForecast = exports.FilterBar = void 0;
+// Main Components
+var FilterBar_1 = require("./FilterBar.js");
+Object.defineProperty(exports, "FilterBar", { enumerable: true, get: function () { return FilterBar_1.FilterBar; } });
+Object.defineProperty(exports, "computeForecast", { enumerable: true, get: function () { return FilterBar_1.computeForecast; } });
+Object.defineProperty(exports, "projectForecast", { enumerable: true, get: function () { return FilterBar_1.projectForecast; } });
+Object.defineProperty(exports, "FORECAST_METHODS", { enumerable: true, get: function () { return FilterBar_1.FORECAST_METHODS; } });
+var Tooltip_1 = require("./Tooltip.js");
+Object.defineProperty(exports, "DashboardTooltip", { enumerable: true, get: function () { return Tooltip_1.DashboardTooltip; } });
+var DrillDownModal_1 = require("./DrillDownModal.js");
+Object.defineProperty(exports, "DrillDownModal", { enumerable: true, get: function () { return DrillDownModal_1.DrillDownModal; } });
+// Fiscal time helpers (shared by all dashboards)
+var time_range_1 = require("./time-range.js");
+Object.defineProperty(exports, "rangeFromSelection", { enumerable: true, get: function () { return time_range_1.rangeFromSelection; } });
+Object.defineProperty(exports, "buildContextLabel", { enumerable: true, get: function () { return time_range_1.buildContextLabel; } });
+Object.defineProperty(exports, "getFiscalStartYear", { enumerable: true, get: function () { return time_range_1.getFiscalStartYear; } });
+// Charts
+__exportStar(require("./charts/index.js"), exports);
+// KPI
+__exportStar(require("./kpi/index.js"), exports);
+// Configuration
+__exportStar(require("./config.js"), exports);

package/dist/cjs/components/dashboard/kpi/KpiBeforeAfter.js

@@ -0,0 +1,16 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiBeforeAfter = KpiBeforeAfter;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * KpiBeforeAfter - KPI card comparing before/after values
+ *
+ * Great for: Process improvements, A/B results, optimization metrics
+ */
+function KpiBeforeAfter({ title, beforeValue, beforeLabel = 'Before', beforeSublabel, afterValue, afterLabel = 'After', afterSublabel, improvement, improvementLabel = 'improvement', improvementType = 'decrease', className }) {
+    const ImprovementIcon = improvementType === 'decrease' ? lucide_react_1.TrendingDown : lucide_react_1.TrendingUp;
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), improvement !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsxs)("span", { className: "text-lg font-bold text-[rgb(var(--color-success))]", children: [improvement, "%"] }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] ml-1", children: improvementLabel })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mb-1", children: beforeLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-bold text-[rgb(var(--fg-muted))]", children: beforeValue }), beforeSublabel && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: beforeSublabel }))] }), (0, jsx_runtime_1.jsx)("div", { className: "px-4", children: (0, jsx_runtime_1.jsx)("div", { className: "w-8 h-8 rounded-full bg-[rgb(var(--color-success))]/10 flex items-center justify-center", children: (0, jsx_runtime_1.jsx)(ImprovementIcon, { className: "w-4 h-4 text-[rgb(var(--color-success))]" }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 text-center", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mb-1", children: afterLabel }), (0, jsx_runtime_1.jsx)("p", { className: "text-2xl font-bold text-[rgb(var(--color-success))]", children: afterValue }), afterSublabel && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: afterSublabel }))] })] })] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiBreakdown.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiBreakdown = KpiBreakdown;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils.js");
+const kpi_shell_1 = require("./kpi-shell.js");
+/**
+ * KpiBreakdown - KPI card with list breakdown
+ *
+ * Great for: Status distributions, category splits, item counts by type
+ */
+function KpiBreakdown({ title, total, items, showPercentage = false, loading, compact, className }) {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(kpi_shell_1.KpiCardSkeleton, { className: className });
+    const getColorClass = (color) => {
+        switch (color) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'bg-[rgb(var(--color-primary))]';
+            case 'info':
+                return 'bg-[rgb(var(--color-info))]';
+            default:
+                // If it's a custom color (hex or rgb), return empty and use inline style
+                return color?.startsWith('#') || color?.startsWith('rgb') ? '' : 'bg-[rgb(var(--color-primary))]';
+        }
+    };
+    const totalValue = typeof total === 'number' ? total :
+        items.reduce((sum, item) => sum + (typeof item.value === 'number' ? item.value : 0), 0);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl border border-[rgb(var(--bd-default))] shadow-sm', compact ? 'p-4' : 'p-5', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('flex items-center justify-between', compact ? 'mb-2' : 'mb-3'), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), total !== undefined && ((0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof total === 'number' ? total.toLocaleString() : total }))] }), (0, jsx_runtime_1.jsx)("div", { className: compact ? 'space-y-1' : 'space-y-2', children: items.map((item, index) => {
+                    const colorClass = getColorClass(item.color);
+                    const isCustomColor = item.color?.startsWith('#') || item.color?.startsWith('rgb');
+                    const numValue = typeof item.value === 'number' ? item.value : 0;
+                    const percentage = totalValue > 0 ? Math.round((numValue / totalValue) * 100) : 0;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-2 h-2 rounded-full', colorClass), style: isCustomColor ? { backgroundColor: item.color } : undefined }), (0, jsx_runtime_1.jsx)("span", { className: "text-sm text-[rgb(var(--fg-default))]", children: item.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-sm font-medium", children: typeof item.value === 'number' ? item.value.toLocaleString() : item.value }), showPercentage && ((0, jsx_runtime_1.jsxs)("span", { className: "text-xs text-[rgb(var(--fg-muted))]", children: ["(", percentage, "%)"] }))] })] }, index));
+                }) })] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiComparison.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiComparison = KpiComparison;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils.js");
+const kpi_shell_1 = require("./kpi-shell.js");
+/**
+ * KpiComparison - KPI card with comparison progress bars
+ *
+ * Great for: Target tracking, period comparisons, goal progress
+ */
+function KpiComparison({ title, value, target, status, bars, loading, className }) {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(kpi_shell_1.KpiCardSkeleton, { className: className });
+    const getBarColor = (color) => {
+        switch (color) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'bg-[rgb(var(--color-primary))]';
+            default:
+                return color || 'bg-[rgb(var(--color-primary))]';
+        }
+    };
+    const getStatusStyles = (type) => {
+        switch (type) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]/10 text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), status && ((0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(status.type)), children: status.label }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline gap-2", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), target && ((0, jsx_runtime_1.jsxs)("span", { className: "text-sm text-[rgb(var(--fg-muted))]", children: ["/ ", target, " target"] }))] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 space-y-2", children: bars.map((bar, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs text-[rgb(var(--fg-muted))] w-16", children: bar.label }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-3 bg-[rgb(var(--bg-subtle))] rounded", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded', getBarColor(bar.color)), style: { width: `${Math.min(bar.percentage, 100)}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-medium w-12 text-right", children: typeof bar.value === 'number' ? bar.value.toLocaleString() : bar.value })] }, index))) })] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiQuickStats.js

@@ -0,0 +1,41 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiQuickStats = KpiQuickStats;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../../lib/utils.js");
+const kpi_shell_1 = require("./kpi-shell.js");
+/**
+ * KpiQuickStats - KPI card with grid of icon stats
+ *
+ * Great for: Quick overview panels, dashboard summaries, multi-metric cards
+ */
+function KpiQuickStats({ title, stats, columns = 2, loading, className }) {
+    if (loading)
+        return (0, jsx_runtime_1.jsx)(kpi_shell_1.KpiCardSkeleton, { className: className });
+    const getIconColorClass = (color) => {
+        switch (color) {
+            case 'success':
+                return 'text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'text-[rgb(var(--color-error))]';
+            case 'primary':
+                return 'text-[rgb(var(--color-primary))]';
+            case 'info':
+                return 'text-[rgb(var(--color-info))]';
+            default:
+                return 'text-[rgb(var(--fg-muted))]';
+        }
+    };
+    const gridClasses = {
+        2: 'grid-cols-2',
+        3: 'grid-cols-3',
+        4: 'grid-cols-4'
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))] mb-3", children: title }), (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('grid gap-x-3 gap-y-2', gridClasses[columns]), children: stats.map((stat, index) => {
+                    const Icon = stat.icon;
+                    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('w-4 h-4', getIconColorClass(stat.iconColor)) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-lg font-bold text-[rgb(var(--fg-default))]", children: typeof stat.value === 'number' ? stat.value.toLocaleString() : stat.value }), (0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))]", children: stat.label })] })] }, index));
+                }) })] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiRating.js

@@ -0,0 +1,38 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiRating = KpiRating;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * KpiRating - KPI card with star rating display
+ *
+ * Great for: Customer satisfaction, NPS scores, product ratings
+ */
+function KpiRating({ title, score, maxScore = 5, reviewCount, status, statusType = 'success', change, changeLabel = 'from last month', periodLabel, tooltip, className }) {
+    const filledStars = Math.floor(score);
+    const hasPartialStar = score % 1 >= 0.5;
+    const getStatusStyles = (type) => {
+        switch (type) {
+            case 'success':
+                return 'bg-[rgb(var(--color-success))]/10 text-[rgb(var(--color-success))]';
+            case 'warning':
+                return 'bg-[rgb(var(--color-warning))]/10 text-[rgb(var(--color-warning))]';
+            case 'error':
+                return 'bg-[rgb(var(--color-error))]/10 text-[rgb(var(--color-error))]';
+        }
+    };
+    const getBreakdownBarColor = (pct) => {
+        if (pct >= 50)
+            return 'bg-[rgb(var(--color-success))]';
+        if (pct >= 20)
+            return 'bg-[rgb(var(--color-warning))]';
+        return 'bg-[rgb(var(--color-error))]';
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm relative group', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: title }), tooltip && ((0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-5 h-5 rounded-full bg-[rgb(var(--bg-subtle))] flex items-center justify-center cursor-help hover:bg-[rgb(var(--color-primary))]/10 transition-colors peer", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Info, { className: "w-3 h-3 text-[rgb(var(--fg-muted))]" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "absolute right-0 top-7 w-72 p-3 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg opacity-0 invisible peer-hover:opacity-100 peer-hover:visible transition-all z-10", children: [tooltip.formula && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Formula:" }), (0, jsx_runtime_1.jsx)("div", { className: "bg-[rgb(var(--bg-subtle))] rounded p-2 mb-3", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] font-mono text-[rgb(var(--fg-muted))]", children: tooltip.formula }) })] })), tooltip.description && ((0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-[rgb(var(--fg-muted))] mb-3", children: tooltip.description })), tooltip.breakdown && tooltip.breakdown.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "border-t border-[rgb(var(--bd-default))] pt-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-xs font-medium text-[rgb(var(--fg-default))] mb-2", children: "Rating Breakdown:" }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-1.5", children: tooltip.breakdown.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-3", children: item.stars }), (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 text-yellow-400", fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-1.5 bg-[rgb(var(--bg-subtle))] rounded-full overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('h-full rounded-full', getBreakdownBarColor(item.percentage)), style: { width: `${item.percentage}%` } }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-10 text-right", children: item.count.toLocaleString() }), (0, jsx_runtime_1.jsxs)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))] w-6 text-right", children: [item.percentage, "%"] })] }, item.stars))) })] }))] })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("p", { className: "text-4xl font-bold text-[rgb(var(--fg-default))]", children: score }) }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "flex gap-0.5", children: Array.from({ length: maxScore }, (_, i) => {
+                                    const starIndex = i + 1;
+                                    const isFilled = starIndex <= filledStars || (starIndex === filledStars + 1 && hasPartialStar);
+                                    return ((0, jsx_runtime_1.jsx)("svg", { className: (0, utils_1.cn)('w-5 h-5 transition-transform hover:scale-110 cursor-pointer', isFilled ? 'text-yellow-400' : 'text-yellow-400/30'), fill: "currentColor", viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) }, i));
+                                }) }), reviewCount !== undefined && ((0, jsx_runtime_1.jsxs)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: [reviewCount.toLocaleString(), " reviews"] }))] }), status && ((0, jsx_runtime_1.jsx)("div", { className: "ml-auto text-right", children: (0, jsx_runtime_1.jsx)("span", { className: (0, utils_1.cn)('text-xs px-2 py-0.5 rounded-full', getStatusStyles(statusType)), children: status }) }))] }), (change !== undefined || periodLabel) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between pt-3 mt-3 border-t border-[rgb(var(--bd-default))]", children: [change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1", children: [change > 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingUp, { className: "w-3 h-3 text-[rgb(var(--color-success))]" })) : change < 0 ? ((0, jsx_runtime_1.jsx)(lucide_react_1.TrendingDown, { className: "w-3 h-3 text-[rgb(var(--color-error))]" })) : null, (0, jsx_runtime_1.jsxs)("span", { className: (0, utils_1.cn)('text-xs', change > 0 ? 'text-[rgb(var(--color-success))]' : change < 0 ? 'text-[rgb(var(--color-error))]' : 'text-[rgb(var(--fg-muted))]'), children: [change > 0 ? '+' : '', change, " ", changeLabel] })] })), periodLabel && ((0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[rgb(var(--fg-muted))]", children: periodLabel }))] }))] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiScroll.js

@@ -0,0 +1,83 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiScroll = KpiScroll;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+/**
+ * KpiScroll - Horizontal scrollable KPI cards
+ *
+ * Great for: Channel stats, customer metrics, quick summaries
+ */
+function KpiScroll({ title, description, periodOptions, periodValue, onPeriodChange, items, showViewAll = true, onViewAll, viewAllLabel = 'Full Stats', variant = 'default', className }) {
+    const scrollContainerRef = (0, react_1.useRef)(null);
+    const [canScrollLeft, setCanScrollLeft] = (0, react_1.useState)(false);
+    const [canScrollRight, setCanScrollRight] = (0, react_1.useState)(false);
+    const [periodDropdownOpen, setPeriodDropdownOpen] = (0, react_1.useState)(false);
+    const periodDropdownRef = (0, react_1.useRef)(null);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (e) => {
+            if (periodDropdownRef.current && !periodDropdownRef.current.contains(e.target)) {
+                setPeriodDropdownOpen(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const checkScrollability = () => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            setCanScrollLeft(container.scrollLeft > 0);
+            setCanScrollRight(container.scrollLeft < container.scrollWidth - container.clientWidth - 1);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        checkScrollability();
+        const container = scrollContainerRef.current;
+        if (container) {
+            container.addEventListener('scroll', checkScrollability);
+            window.addEventListener('resize', checkScrollability);
+            return () => {
+                container.removeEventListener('scroll', checkScrollability);
+                window.removeEventListener('resize', checkScrollability);
+            };
+        }
+    }, [items]);
+    const scroll = (direction) => {
+        const container = scrollContainerRef.current;
+        if (container) {
+            const scrollAmount = variant === 'compact' ? 200 : 280;
+            container.scrollBy({
+                left: direction === 'left' ? -scrollAmount : scrollAmount,
+                behavior: 'smooth'
+            });
+        }
+    };
+    const getSentimentColor = (sentiment) => {
+        switch (sentiment) {
+            case 'positive':
+                return 'text-[rgb(var(--color-success))]';
+            case 'negative':
+                return 'text-[rgb(var(--color-error))]';
+            default:
+                return 'text-[rgb(var(--fg-default))]';
+        }
+    };
+    const getCardWidth = () => {
+        switch (variant) {
+            case 'compact':
+                return 'w-[120px] sm:w-[140px]';
+            case 'detailed':
+                return 'w-[180px] sm:w-[200px]';
+            default:
+                return 'w-[140px] sm:w-[160px]';
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-2xl border border-[rgb(var(--bd-default))] overflow-hidden', className), children: [(title || description || periodOptions) && ((0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 px-5 pt-5 pb-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [title && ((0, jsx_runtime_1.jsx)("h3", { className: "text-base font-semibold text-[rgb(var(--fg-default))]", children: title })), periodOptions && periodOptions.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { ref: periodDropdownRef, className: "relative", children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPeriodDropdownOpen(!periodDropdownOpen), className: "flex items-center gap-1 text-xs text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))] hover:bg-[rgb(var(--bg-hover))] px-2.5 py-1 rounded-full transition-colors", children: [periodOptions.find(o => o.value === periodValue)?.label || periodOptions[0]?.label, (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: (0, utils_1.cn)('w-3.5 h-3.5 transition-transform', periodDropdownOpen && 'rotate-180') })] }), periodDropdownOpen && ((0, jsx_runtime_1.jsx)("div", { className: "absolute top-full left-0 mt-1 bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] rounded-lg shadow-lg py-1 min-w-[100px] z-20", children: periodOptions.map((option) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
+                                                onPeriodChange?.(option.value);
+                                                setPeriodDropdownOpen(false);
+                                            }, className: (0, utils_1.cn)('w-full text-left px-3 py-1.5 text-xs hover:bg-[rgb(var(--bg-hover))] transition-colors', periodValue === option.value ? 'text-[rgb(var(--color-primary))] font-medium' : 'text-[rgb(var(--fg-default))]'), children: option.label }, option.value))) }))] }))] }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-sm text-[rgb(var(--fg-muted))]", children: description }))] })), (0, jsx_runtime_1.jsxs)("div", { className: "relative group px-5 pb-5", children: [canScrollLeft && ((0, jsx_runtime_1.jsx)("button", { onClick: () => scroll('left'), className: (0, utils_1.cn)('absolute left-2 top-1/2 -translate-y-1/2 z-10', 'w-9 h-9 rounded-full flex items-center justify-center', 'bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] shadow-lg', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]', 'transition-all duration-200', 'opacity-0 group-hover:opacity-100'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronLeft, { className: "w-5 h-5" }) })), canScrollRight && ((0, jsx_runtime_1.jsx)("button", { onClick: () => scroll('right'), className: (0, utils_1.cn)('absolute right-2 top-1/2 -translate-y-1/2 z-10', 'w-9 h-9 rounded-full flex items-center justify-center', 'bg-[rgb(var(--bg-surface))] border border-[rgb(var(--bd-default))] shadow-lg', 'text-[rgb(var(--fg-muted))] hover:text-[rgb(var(--color-primary))] hover:border-[rgb(var(--color-primary))]', 'transition-all duration-200', 'opacity-0 group-hover:opacity-100'), children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronRight, { className: "w-5 h-5" }) })), (0, jsx_runtime_1.jsxs)("div", { ref: scrollContainerRef, className: "flex gap-3 overflow-x-auto scrollbar-hide scroll-smooth", style: { scrollbarWidth: 'none', msOverflowStyle: 'none' }, children: [items.map((item) => ((0, jsx_runtime_1.jsxs)("div", { onClick: item.onClick, className: (0, utils_1.cn)('flex-shrink-0', getCardWidth(), 'bg-[rgb(var(--bg-subtle))] rounded-xl p-4', 'border border-transparent', 'transition-all duration-200', 'hover:bg-[rgb(var(--bg-hover))] hover:shadow-md', item.onClick && 'cursor-pointer hover:border-[rgb(var(--color-primary))]'), children: [(item.icon || item.customIcon) && ((0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: item.customIcon ? (item.customIcon) : item.icon ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('w-11 h-11 rounded-xl flex items-center justify-center', item.iconBg || 'bg-[rgb(var(--color-primary))]/10'), children: (0, jsx_runtime_1.jsx)(item.icon, { className: (0, utils_1.cn)('w-5 h-5', item.iconColor || 'text-[rgb(var(--color-primary))]') }) })) : null })), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-[rgb(var(--fg-default))] truncate", children: item.title }), item.subtitle && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] truncate mt-0.5", children: item.subtitle })), (0, jsx_runtime_1.jsxs)("p", { className: (0, utils_1.cn)('text-xl font-bold mt-2', getSentimentColor(item.sentiment)), children: [item.prefix, item.value, item.suffix] }), item.secondaryValue && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-1", children: item.secondaryValue }))] }, item.id))), showViewAll && onViewAll && ((0, jsx_runtime_1.jsxs)("button", { onClick: onViewAll, className: (0, utils_1.cn)('flex-shrink-0', getCardWidth(), 'bg-[rgb(var(--color-primary))] rounded-xl p-4', 'flex flex-col items-center justify-center gap-2', 'cursor-pointer hover:brightness-110 hover:shadow-lg transition-all duration-200', 'min-h-[140px]'), children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mb-1", children: (0, jsx_runtime_1.jsx)(lucide_react_1.ArrowRight, { className: "w-6 h-6 text-white" }) }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm font-semibold text-white text-center leading-tight", children: viewAllLabel })] }))] })] })] }));
+}

package/dist/cjs/components/dashboard/kpi/KpiTrend.js

@@ -0,0 +1,37 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiTrend = KpiTrend;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../../lib/utils.js");
+const kpi_shell_1 = require("./kpi-shell.js");
+/**
+ * KpiTrend — KPI card with trend indicator, built on the reusable KpiShell.
+ * Inherits accent / active / onClick / loading / watermark from the shell, so it
+ * works both as a plain metric card (surface) and as an interactive filter toggle.
+ */
+function KpiTrend({ title, value, unit, change, changeUnit, description, icon: Icon, iconColor, decreaseIsGood = false, 
+// shell props
+accent, active, onClick, loading, watermarkIcon, className, }) {
+    const getTrendConfig = () => {
+        if (change === undefined || change === 0) {
+            return { icon: lucide_react_1.Minus, color: 'text-[rgb(var(--fg-muted))] bg-[rgb(var(--bg-subtle))]' };
+        }
+        const isPositive = change > 0;
+        const isGood = decreaseIsGood ? !isPositive : isPositive;
+        return {
+            icon: isPositive ? lucide_react_1.TrendingUp : lucide_react_1.TrendingDown,
+            color: isGood
+                ? 'text-[rgb(var(--color-success))] bg-[rgb(var(--color-success))]/10'
+                : 'text-[rgb(var(--color-error))] bg-[rgb(var(--color-error))]/10',
+        };
+    };
+    const trend = getTrendConfig();
+    const TrendIcon = trend.icon;
+    // Flat surface card unless an accent/active/onClick is requested (then use the tinted shell).
+    const surface = !accent && !active && !onClick;
+    const titleColor = accent ? kpi_shell_1.ACCENT_MAP[accent].text : 'text-[rgb(var(--fg-muted))]';
+    const headIconColor = iconColor || (accent ? kpi_shell_1.ACCENT_MAP[accent].text : 'text-[rgb(var(--fg-muted))]');
+    return ((0, jsx_runtime_1.jsx)(kpi_shell_1.KpiShell, { accent: accent, active: active, onClick: onClick, loading: loading, watermarkIcon: watermarkIcon, surface: surface, className: className, children: (0, jsx_runtime_1.jsxs)("div", { className: "p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [Icon && (0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('w-4 h-4', headIconColor) }), (0, jsx_runtime_1.jsx)("p", { className: (0, utils_1.cn)('text-sm', titleColor), children: title })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("p", { className: "text-3xl font-bold text-[rgb(var(--fg-default))]", children: value }), unit && (0, jsx_runtime_1.jsx)("span", { className: "text-lg text-[rgb(var(--fg-muted))]", children: unit }), change !== undefined && ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('ml-auto flex items-center gap-1 px-2 py-1 rounded', trend.color), children: [(0, jsx_runtime_1.jsx)(TrendIcon, { className: "w-4 h-4" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-sm font-medium", children: [change > 0 ? '+' : '', change, changeUnit || unit || ''] })] }))] }), description && ((0, jsx_runtime_1.jsx)("p", { className: "text-xs text-[rgb(var(--fg-muted))] mt-2", children: description }))] }) }));
+}

package/dist/cjs/components/dashboard/kpi/index.js

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiScroll = exports.KpiBeforeAfter = exports.KpiRating = exports.KpiQuickStats = exports.KpiBreakdown = exports.KpiTrend = exports.KpiComparison = exports.ACCENT_MAP = exports.KpiShell = void 0;
+// KPI Components
+var kpi_shell_1 = require("./kpi-shell.js");
+Object.defineProperty(exports, "KpiShell", { enumerable: true, get: function () { return kpi_shell_1.KpiShell; } });
+Object.defineProperty(exports, "ACCENT_MAP", { enumerable: true, get: function () { return kpi_shell_1.ACCENT_MAP; } });
+var KpiComparison_1 = require("./KpiComparison.js");
+Object.defineProperty(exports, "KpiComparison", { enumerable: true, get: function () { return KpiComparison_1.KpiComparison; } });
+var KpiTrend_1 = require("./KpiTrend.js");
+Object.defineProperty(exports, "KpiTrend", { enumerable: true, get: function () { return KpiTrend_1.KpiTrend; } });
+var KpiBreakdown_1 = require("./KpiBreakdown.js");
+Object.defineProperty(exports, "KpiBreakdown", { enumerable: true, get: function () { return KpiBreakdown_1.KpiBreakdown; } });
+var KpiQuickStats_1 = require("./KpiQuickStats.js");
+Object.defineProperty(exports, "KpiQuickStats", { enumerable: true, get: function () { return KpiQuickStats_1.KpiQuickStats; } });
+var KpiRating_1 = require("./KpiRating.js");
+Object.defineProperty(exports, "KpiRating", { enumerable: true, get: function () { return KpiRating_1.KpiRating; } });
+var KpiBeforeAfter_1 = require("./KpiBeforeAfter.js");
+Object.defineProperty(exports, "KpiBeforeAfter", { enumerable: true, get: function () { return KpiBeforeAfter_1.KpiBeforeAfter; } });
+var KpiScroll_1 = require("./KpiScroll.js");
+Object.defineProperty(exports, "KpiScroll", { enumerable: true, get: function () { return KpiScroll_1.KpiScroll; } });

package/dist/cjs/components/dashboard/kpi/kpi-shell.js

@@ -0,0 +1,113 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACCENT_MAP = void 0;
+exports.KpiShell = KpiShell;
+exports.KpiCardSkeleton = KpiCardSkeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const framer_motion_1 = require("framer-motion");
+const utils_1 = require("../../../lib/utils.js");
+// Class strings must be fully static so Tailwind can detect them — no template literals.
+exports.ACCENT_MAP = {
+    primary: {
+        text: 'text-[rgb(var(--color-primary))]',
+        bg: 'bg-[rgb(var(--color-primary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-primary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-primary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-primary))]/40',
+        activeBg: 'bg-[rgb(var(--color-primary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-primary))]/10',
+    },
+    success: {
+        text: 'text-[rgb(var(--color-success))]',
+        bg: 'bg-[rgb(var(--color-success))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-success))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-success))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-success))]/40',
+        activeBg: 'bg-[rgb(var(--color-success))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-success))]/10',
+    },
+    warning: {
+        text: 'text-[rgb(var(--color-warning))]',
+        bg: 'bg-[rgb(var(--color-warning))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-warning))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-warning))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-warning))]/40',
+        activeBg: 'bg-[rgb(var(--color-warning))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-warning))]/10',
+    },
+    error: {
+        text: 'text-[rgb(var(--color-error))]',
+        bg: 'bg-[rgb(var(--color-error))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-error))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-error))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-error))]/40',
+        activeBg: 'bg-[rgb(var(--color-error))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-error))]/10',
+    },
+    info: {
+        text: 'text-[rgb(var(--color-info))]',
+        bg: 'bg-[rgb(var(--color-info))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-info))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-info))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-info))]/40',
+        activeBg: 'bg-[rgb(var(--color-info))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-info))]/10',
+    },
+    tertiary: {
+        text: 'text-[rgb(var(--color-tertiary))]',
+        bg: 'bg-[rgb(var(--color-tertiary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-tertiary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-tertiary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-tertiary))]/40',
+        activeBg: 'bg-[rgb(var(--color-tertiary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-tertiary))]/10',
+    },
+    secondary: {
+        text: 'text-[rgb(var(--color-secondary))]',
+        bg: 'bg-[rgb(var(--color-secondary))]/[0.06]',
+        bgHover: 'hover:bg-[rgb(var(--color-secondary))]/[0.10]',
+        iconText: 'text-[rgb(var(--color-secondary))]/[0.07]',
+        ring: 'ring-[rgb(var(--color-secondary))]/40',
+        activeBg: 'bg-[rgb(var(--color-secondary))]/[0.12]',
+        pillBg: 'bg-[rgb(var(--color-secondary))]/10',
+    },
+    neutral: {
+        text: 'text-[rgb(var(--fg-muted))]',
+        bg: 'bg-[rgb(var(--bg-surface))]',
+        bgHover: 'hover:bg-[rgb(var(--bg-subtle))]',
+        iconText: 'text-[rgb(var(--fg-muted))]/[0.07]',
+        ring: 'ring-[rgb(var(--bd-strong))]',
+        activeBg: 'bg-[rgb(var(--bg-subtle))]',
+        pillBg: 'bg-[rgb(var(--bg-subtle))]',
+    },
+};
+/**
+ * KpiShell — reusable card chrome for all KPI components.
+ * Owns: accent theming, active ring, click/loading states, watermark.
+ * KPI components render their content as children.
+ */
+function KpiShell({ accent: accentKey = 'primary', active = false, onClick, loading = false, watermarkIcon: Watermark, surface = false, className, children, }) {
+    const a = exports.ACCENT_MAP[accentKey];
+    const isInteractive = !!onClick;
+    const base = (0, utils_1.cn)('w-full h-full relative overflow-hidden rounded-xl border transition-all text-left', surface
+        ? 'bg-[rgb(var(--bg-surface))] border-[rgb(var(--bd-default))] shadow-sm'
+        : active
+            ? (0, utils_1.cn)(a.activeBg, 'border-transparent ring-2', a.ring)
+            : (0, utils_1.cn)(a.bg, isInteractive && a.bgHover, 'border-transparent'), isInteractive && 'cursor-pointer', className);
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: base, children: (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 space-y-2 animate-pulse p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-14 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-7 w-10 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-2 w-20 rounded bg-[rgb(var(--bg-subtle))]" })] }) }));
+    }
+    const inner = ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Watermark && ((0, jsx_runtime_1.jsx)(Watermark, { className: (0, utils_1.cn)('absolute -bottom-3 -right-3 w-20 h-20 pointer-events-none', a.iconText), strokeWidth: 1.2 })), (0, jsx_runtime_1.jsx)("div", { className: "relative z-10 h-full", children: children })] }));
+    if (isInteractive) {
+        return ((0, jsx_runtime_1.jsx)(framer_motion_1.motion.button, { type: "button", onClick: onClick, whileTap: { scale: 0.98 }, className: base, children: inner }));
+    }
+    return (0, jsx_runtime_1.jsx)("div", { className: base, children: inner });
+}
+/**
+ * Standalone skeleton for KPI cards that don't render through KpiShell
+ * (KpiComparison, KpiBreakdown, KpiQuickStats). Matches the card chrome + pulse.
+ */
+function KpiCardSkeleton({ className }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('bg-[rgb(var(--bg-surface))] rounded-xl p-5 border border-[rgb(var(--bd-default))] shadow-sm', className), children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 w-24 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-7 w-16 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 pt-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-full rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-5/6 rounded bg-[rgb(var(--bg-subtle))]" }), (0, jsx_runtime_1.jsx)("div", { className: "h-2.5 w-2/3 rounded bg-[rgb(var(--bg-subtle))]" })] })] }) }));
+}