@wealthx/shadcn 1.5.42 → 1.5.43

package/dist/components/ui/cash-balance-line-chart.js

@@ -319,7 +319,7 @@ function ChartLegendItem({
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-[11px] text-muted-foreground leading-none", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm text-muted-foreground leading-none", children: label })
   ] });
 }
 
@@ -476,7 +476,8 @@ function CashBalanceLineChart({
   showYAxis = true,
   showBalanceValue = false,
   showLegend = false,
-  legendPosition = "bottom"
+  legendPosition = "bottom",
+  extraDatasets
 }) {
   const themeVars = useThemeVars();
   const brandPrimary = themeVars["--theme-primary"] || FALLBACK_PRIMARY;
@@ -491,30 +492,48 @@ function CashBalanceLineChart({
     indices.add(count - 1);
     return indices;
   }, [hasData, chartData]);
+  const hasExtra = Array.isArray(extraDatasets) && extraDatasets.length > 0;
   const data = (0, import_react3.useMemo)(() => {
     if (!hasData) return { labels: [], datasets: [] };
+    const mainDs = {
+      label: title,
+      data: chartData.map((p) => p.y),
+      fill: false,
+      borderColor: brandPrimary,
+      backgroundColor: "transparent",
+      borderWidth: 2.5,
+      borderDash: [],
+      tension: 0.4,
+      pointRadius: 0,
+      pointHoverRadius: 6,
+      pointHoverBackgroundColor: FALLBACK_BG,
+      pointHoverBorderColor: brandPrimary,
+      pointHoverBorderWidth: 3,
+      pointHitRadius: 10,
+      yAxisID: "y"
+    };
+    const extraDs = hasExtra ? extraDatasets.map((ds) => ({
+      label: ds.label,
+      data: ds.data.map((p) => p.y),
+      fill: false,
+      borderColor: ds.color,
+      backgroundColor: "transparent",
+      borderWidth: 1.5,
+      borderDash: ds.dashed ? [5, 4] : [],
+      tension: 0.4,
+      pointRadius: 0,
+      pointHoverRadius: 4,
+      pointHoverBackgroundColor: FALLBACK_BG,
+      pointHoverBorderColor: ds.color,
+      pointHoverBorderWidth: 2,
+      pointHitRadius: 10,
+      yAxisID: "y2"
+    })) : [];
     return {
       labels: chartData.map((p) => p.x),
-      // raw ISO — used for tooltip + tick lookup
-      datasets: [
-        {
-          label: title,
-          data: chartData.map((p) => p.y),
-          fill: false,
-          borderColor: brandPrimary,
-          backgroundColor: "transparent",
-          borderWidth: 2.5,
-          tension: 0.4,
-          pointRadius: 0,
-          pointHoverRadius: 6,
-          pointHoverBackgroundColor: FALLBACK_BG,
-          pointHoverBorderColor: brandPrimary,
-          pointHoverBorderWidth: 3,
-          pointHitRadius: 10
-        }
-      ]
+      datasets: [mainDs, ...extraDs]
     };
-  }, [hasData, chartData, brandPrimary, title]);
+  }, [hasData, chartData, brandPrimary, title, hasExtra, extraDatasets]);
   const options = (0, import_react3.useMemo)(
     () => ({
       responsive: true,
@@ -526,11 +545,11 @@ function CashBalanceLineChart({
           enabled: true,
           mode: "index",
           intersect: false,
-          displayColors: false,
+          displayColors: hasExtra,
           padding: 12,
           cornerRadius: 0,
           titleFont: { size: 11, weight: "600", family: fontFamily },
-          bodyFont: { size: 13, weight: "700", family: fontFamily },
+          bodyFont: { size: 12, weight: "500", family: fontFamily },
           callbacks: {
             title: (items) => {
               var _a;
@@ -538,7 +557,8 @@ function CashBalanceLineChart({
               return iso ? formatDateTooltip(iso) : "";
             },
             label: (ctx) => {
-              return formatCurrency(ctx.parsed.y, { decimals: 2 });
+              const value = formatCurrency(ctx.parsed.y, { decimals: 2 });
+              return hasExtra ? ` ${ctx.dataset.label}: ${value}` : value;
             }
           }
         }
@@ -555,7 +575,7 @@ function CashBalanceLineChart({
             maxRotation: 0,
             minRotation: 0,
             color: FALLBACK_TICK,
-            font: { size: 10, family: fontFamily },
+            font: { size: 12, family: fontFamily },
             callback: function(_, index) {
               if (!tickIndices.has(index) || !chartData) return "";
               return formatDateLabel(chartData[index].x);
@@ -572,13 +592,27 @@ function CashBalanceLineChart({
             maxTicksLimit: 5,
             padding: 8,
             color: FALLBACK_TICK,
-            font: { size: 10, family: fontFamily },
+            font: { size: 12, family: fontFamily },
+            callback: (v) => formatCurrencyAbbrev(Number(v))
+          }
+        },
+        y2: {
+          display: hasExtra && showYAxis,
+          position: "right",
+          beginAtZero: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxTicksLimit: 5,
+            padding: 8,
+            color: FALLBACK_TICK,
+            font: { size: 12, family: fontFamily },
             callback: (v) => formatCurrencyAbbrev(Number(v))
           }
         }
       }
     }),
-    [tickIndices, chartData, showXAxis, showYAxis, fontFamily]
+    [tickIndices, chartData, showXAxis, showYAxis, fontFamily, hasExtra]
   );
   const latestValue = hasData ? chartData[chartData.length - 1].y : null;
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
@@ -587,9 +621,9 @@ function CashBalanceLineChart({
       className: cn("w-full py-4 sm:py-6 gap-2", className),
       style: { maxWidth: width, fontFamily },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
-          showBalanceValue && latestValue !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-2xl font-bold tabular-nums leading-tight", children: formatCurrency(latestValue, { decimals: 2 }) })
+        (title || showBalanceValue && latestValue !== null) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardHeader, { className: "px-3 sm:px-6", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-0.5", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
+          showBalanceValue && latestValue !== null && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-lg font-bold tabular-nums leading-tight", children: formatCurrency(latestValue, { decimals: 2 }) })
         ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "px-3 sm:px-6", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
@@ -599,14 +633,25 @@ function CashBalanceLineChart({
             children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Spinner, { size: "lg" })
           }
         ) : !hasData ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Empty, { className: "flex-none p-4", style: { height }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(EmptyDescription, { children: "No data available" }) }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          showLegend && legendPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            ChartLegendItem,
-            {
-              label: title,
-              color: brandPrimary,
-              lineStyle: "solid"
-            }
-          ) }),
+          showLegend && legendPosition === "top" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ChartLegendItem,
+              {
+                label: title,
+                color: brandPrimary,
+                lineStyle: "solid"
+              }
+            ),
+            extraDatasets == null ? void 0 : extraDatasets.map((ds) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ChartLegendItem,
+              {
+                label: ds.label,
+                color: ds.color,
+                lineStyle: ds.dashed ? "dashed" : "solid"
+              },
+              ds.label
+            ))
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height, width: "100%", position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             import_react_chartjs_2.Chart,
             {
@@ -617,14 +662,25 @@ function CashBalanceLineChart({
             },
             brandPrimary
           ) }),
-          showLegend && legendPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-            ChartLegendItem,
-            {
-              label: title,
-              color: brandPrimary,
-              lineStyle: "solid"
-            }
-          ) })
+          showLegend && legendPosition === "bottom" && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
+            title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ChartLegendItem,
+              {
+                label: title,
+                color: brandPrimary,
+                lineStyle: "solid"
+              }
+            ),
+            extraDatasets == null ? void 0 : extraDatasets.map((ds) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              ChartLegendItem,
+              {
+                label: ds.label,
+                color: ds.color,
+                lineStyle: ds.dashed ? "dashed" : "solid"
+              },
+              ds.label
+            ))
+          ] })
         ] }) })
       ]
     }

package/dist/components/ui/cash-balance-line-chart.mjs

@@ -1,15 +1,15 @@
 import {
   CashBalanceLineChart
-} from "../../chunk-LHQACMZY.mjs";
-import "../../chunk-YEWNFK5S.mjs";
+} from "../../chunk-SPPQFW32.mjs";
+import "../../chunk-WLXP4OOF.mjs";
 import "../../chunk-R2ON6CAN.mjs";
 import "../../chunk-3VDET466.mjs";
 import "../../chunk-JVMXMFBB.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
-import "../../chunk-MN5NYQCL.mjs";
+import "../../chunk-XQDTFNVL.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/cashflow-bar-chart.js

@@ -597,14 +597,17 @@ function CashflowBarChart({
           display: showXAxis,
           grid: { display: false },
           border: { display: false },
-          ticks: { font: { size: 10 }, color: FALLBACK_TICK }
+          ticks: {
+            font: { size: 12, family: fontFamily },
+            color: FALLBACK_TICK
+          }
         },
         y: {
           display: showYAxis,
           grid: { display: false },
           border: { display: false },
           ticks: {
-            font: { size: 10 },
+            font: { size: 12, family: fontFamily },
             color: FALLBACK_TICK,
             maxTicksLimit: 5,
             padding: 8,
@@ -613,7 +616,7 @@ function CashflowBarChart({
         }
       }
     }),
-    [showXAxis, showYAxis, sliced]
+    [showXAxis, showYAxis, sliced, fontFamily]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
@@ -622,7 +625,7 @@ function CashflowBarChart({
       style: { maxWidth: width, fontFamily },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { className: "px-3 sm:px-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wide", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
           showPeriodSelector && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardAction, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-0.5 sm:gap-1", children: PERIODS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
             ChartPeriodButton,
             {

package/dist/components/ui/cashflow-bar-chart.mjs

@@ -1,15 +1,15 @@
 import {
   CashflowBarChart
-} from "../../chunk-D3HKFRQO.mjs";
+} from "../../chunk-GQWKBESP.mjs";
 import "../../chunk-GTAVSBDO.mjs";
-import "../../chunk-YEWNFK5S.mjs";
+import "../../chunk-WLXP4OOF.mjs";
 import "../../chunk-R2ON6CAN.mjs";
 import "../../chunk-3VDET466.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
-import "../../chunk-MN5NYQCL.mjs";
+import "../../chunk-XQDTFNVL.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/category-edit-dialog.mjs

@@ -1,14 +1,14 @@
 import {
   CategoryEditDialog
-} from "../../chunk-C35JMOII.mjs";
+} from "../../chunk-3G6JUYRE.mjs";
 import "../../chunk-PNSYFE3K.mjs";
-import "../../chunk-T5FRVEJQ.mjs";
+import "../../chunk-JTMN36BK.mjs";
 import "../../chunk-LBTHZSBT.mjs";
+import "../../chunk-NOOEKOWY.mjs";
+import "../../chunk-R4HCRDU5.mjs";
 import "../../chunk-XYSRRDBH.mjs";
 import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-UNACI2YK.mjs";
-import "../../chunk-NOOEKOWY.mjs";
-import "../../chunk-R4HCRDU5.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/color-picker.mjs

@@ -8,10 +8,10 @@ import {
 } from "../../chunk-X3VEDQPO.mjs";
 import "../../chunk-F3CU6KEI.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/contact-alert-dialog/index.mjs

@@ -4,22 +4,22 @@ import {
   ContactAlertDialog,
   ContactAlertQueryBuilder,
   createAlertTree
-} from "../../../chunk-SCGCGVDN.mjs";
+} from "../../../chunk-SZXIPE5J.mjs";
 import "../../../chunk-7YI3HEBH.mjs";
 import "../../../chunk-MS3GNXMB.mjs";
 import "../../../chunk-IKXYTCSB.mjs";
 import "../../../chunk-K6VCC2MK.mjs";
-import "../../../chunk-T5FRVEJQ.mjs";
+import "../../../chunk-JTMN36BK.mjs";
 import "../../../chunk-2GIYVERS.mjs";
 import "../../../chunk-BS75ICOO.mjs";
 import "../../../chunk-OWFQSXVD.mjs";
 import "../../../chunk-6QAFGZC2.mjs";
 import "../../../chunk-LSRGA5BI.mjs";
 import "../../../chunk-LBTHZSBT.mjs";
-import "../../../chunk-XYSRRDBH.mjs";
-import "../../../chunk-FRCTOAKZ.mjs";
 import "../../../chunk-NOOEKOWY.mjs";
 import "../../../chunk-R4HCRDU5.mjs";
+import "../../../chunk-XYSRRDBH.mjs";
+import "../../../chunk-FRCTOAKZ.mjs";
 import "../../../chunk-AFML43VJ.mjs";
 import "../../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/create-contact-modal.mjs

@@ -1,19 +1,19 @@
 import {
   CreateContactModal
-} from "../../chunk-OKIWXOJL.mjs";
+} from "../../chunk-OWTW5WAJ.mjs";
 import "../../chunk-LDC6V6DJ.mjs";
 import "../../chunk-ISUA7DSB.mjs";
 import "../../chunk-K6VCC2MK.mjs";
-import "../../chunk-T5FRVEJQ.mjs";
+import "../../chunk-JTMN36BK.mjs";
 import "../../chunk-JVMXMFBB.mjs";
 import "../../chunk-OWFQSXVD.mjs";
 import "../../chunk-6QAFGZC2.mjs";
 import "../../chunk-LSRGA5BI.mjs";
 import "../../chunk-LBTHZSBT.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/csv-import-modal.mjs

@@ -1,12 +1,12 @@
 import {
   CsvImportModal
-} from "../../chunk-7PTRHNUV.mjs";
+} from "../../chunk-JY3FUGNL.mjs";
 import "../../chunk-I4KVSZCH.mjs";
-import "../../chunk-T5FRVEJQ.mjs";
-import "../../chunk-XYSRRDBH.mjs";
-import "../../chunk-FRCTOAKZ.mjs";
+import "../../chunk-JTMN36BK.mjs";
 import "../../chunk-NOOEKOWY.mjs";
 import "../../chunk-R4HCRDU5.mjs";
+import "../../chunk-XYSRRDBH.mjs";
+import "../../chunk-FRCTOAKZ.mjs";
 import "../../chunk-AFML43VJ.mjs";
 import "../../chunk-WNQUEZJF.mjs";
 export {

package/dist/components/ui/dashboard-expense-categories.js

@@ -187,12 +187,22 @@ function formatCurrency(value, options) {
 
 // src/components/ui/dashboard-expense-categories.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
-function ProgressBar({ pct, className }) {
+var SECONDARY_ACTIVE_BG = "color-mix(in oklch, var(--brand-secondary) 8%, transparent)";
+var SECONDARY_ACTIVE_HOVER_BG = "color-mix(in oklch, var(--brand-secondary) 12%, transparent)";
+function ProgressBar({
+  pct,
+  className,
+  colorScheme = "primary"
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("h-1.5 w-full overflow-hidden bg-muted", className), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       className: "h-full bg-primary transition-all",
-      style: { width: `${Math.min(100, Math.max(0, pct))}%` },
+      style: __spreadValues({
+        width: `${Math.min(100, Math.max(0, pct))}%`
+      }, colorScheme === "secondary" && {
+        backgroundColor: "var(--brand-secondary)"
+      }),
       "aria-hidden": "true"
     }
   ) });
@@ -200,32 +210,49 @@ function ProgressBar({ pct, className }) {
 function SubCategoryRow({
   sub,
   isSelected,
+  colorScheme = "primary",
   onClick
 }) {
+  const isSecondary = colorScheme === "secondary";
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "button",
+    "div",
     {
-      type: "button",
-      onClick,
       className: cn(
-        "flex w-full flex-col gap-1 py-1.5 pl-8 text-left transition-colors",
-        isSelected ? "bg-primary/5" : "hover:bg-muted/50"
+        "flex w-full flex-col gap-1 py-1.5 pl-8",
+        isSelected && !isSecondary && "bg-primary/5"
       ),
+      style: isSelected && isSecondary ? { backgroundColor: SECONDARY_ACTIVE_BG } : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2 text-xs", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "span",
-            {
-              className: cn(
-                "truncate",
-                isSelected ? "font-medium text-primary" : "text-muted-foreground"
-              ),
-              children: sub.name
-            }
-          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "span",
+              {
+                className: cn(
+                  "truncate text-muted-foreground",
+                  isSelected && "font-medium"
+                ),
+                children: sub.name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick,
+                "aria-label": `Filter by ${sub.name}`,
+                "aria-pressed": isSelected,
+                className: cn(
+                  "shrink-0 transition-colors",
+                  isSelected ? isSecondary ? "text-[var(--brand-secondary)]" : "text-primary" : "text-muted-foreground/50 hover:text-muted-foreground"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ListFilter, { size: 12 })
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "shrink-0 font-medium text-foreground", children: formatCurrency(sub.amount) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: sub.pct })
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: sub.pct, colorScheme })
       ]
     }
   );
@@ -233,68 +260,67 @@ function SubCategoryRow({
 function CategoryRow({
   item,
   selectedCategoryId,
+  colorScheme = "primary",
   onFilterClick
 }) {
   var _a, _b, _c, _d;
   const [expanded, setExpanded] = (0, import_react.useState)(false);
+  const [hovered, setHovered] = (0, import_react.useState)(false);
   const hasChildren = ((_b = (_a = item.subCategories) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
   const isSelected = selectedCategoryId === item.id;
-  const isChildSelected = hasChildren ? (_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false : false;
+  const isChildSelected = hasChildren && ((_d = (_c = item.subCategories) == null ? void 0 : _c.some((s) => s.id === selectedCategoryId)) != null ? _d : false);
   const isActive = isSelected || isChildSelected;
+  const isSecondary = colorScheme === "secondary";
+  const wrapperStyle = isSecondary && isActive ? {
+    backgroundColor: hovered ? SECONDARY_ACTIVE_HOVER_BG : SECONDARY_ACTIVE_BG
+  } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: cn(
         "border-b border-border last:border-0 transition-colors",
-        isActive && "bg-primary/5"
+        isActive && !isSecondary && "bg-primary/5"
       ),
+      style: wrapperStyle,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "button",
           {
             type: "button",
             className: cn(
-              "flex w-full items-start gap-3 py-3 text-left hover:bg-muted/40 transition-colors",
-              isActive && "hover:bg-primary/10"
+              "flex w-full items-start gap-3 py-3 text-left transition-colors",
+              !isSecondary && "hover:bg-muted/40",
+              !isSecondary && isActive && "hover:bg-primary/10"
             ),
-            onClick: () => onFilterClick(isSelected ? null : item.id),
-            "aria-pressed": isSelected,
+            onMouseEnter: () => setHovered(true),
+            onMouseLeave: () => setHovered(false),
+            onClick: () => hasChildren && setExpanded((v) => !v),
+            "aria-expanded": hasChildren ? expanded : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  className: "mt-0.5 shrink-0 text-muted-foreground",
-                  onClick: (e) => {
-                    if (!hasChildren) return;
-                    e.stopPropagation();
-                    setExpanded((v) => !v);
-                  },
-                  "aria-label": expanded ? "Collapse" : "Expand",
-                  children: hasChildren ? expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block size-3.5" })
-                }
-              ),
-              item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                "span",
-                {
-                  className: cn(
-                    "mt-0.5 shrink-0",
-                    isActive ? "text-primary" : "text-muted-foreground"
-                  ),
-                  children: item.icon
-                }
-              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: hasChildren ? expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronRight, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "inline-block size-3.5" }) }),
+              item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "mt-0.5 shrink-0 text-muted-foreground", children: item.icon }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-                    "span",
-                    {
-                      className: cn(
-                        "truncate text-sm font-medium",
-                        isActive ? "text-primary" : "text-foreground"
-                      ),
-                      children: item.name
-                    }
-                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 items-center gap-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "truncate text-sm font-medium text-foreground", children: item.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onFilterClick(isSelected ? null : item.id);
+                        },
+                        "aria-label": `Filter by ${item.name}`,
+                        "aria-pressed": isSelected,
+                        className: cn(
+                          "shrink-0 transition-colors",
+                          isActive ? isSecondary ? "text-[var(--brand-secondary)]" : "text-primary" : "text-muted-foreground/50 hover:text-muted-foreground"
+                        ),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ListFilter, { size: 13 })
+                      }
+                    )
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex shrink-0 items-center gap-2", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
                       item.pct.toFixed(0),
@@ -303,7 +329,14 @@ function CategoryRow({
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-sm font-semibold text-foreground", children: formatCurrency(item.amount) })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ProgressBar, { pct: item.pct, className: "mt-1.5" })
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  ProgressBar,
+                  {
+                    pct: item.pct,
+                    className: "mt-1.5",
+                    colorScheme
+                  }
+                )
               ] })
             ]
           }
@@ -313,6 +346,7 @@ function CategoryRow({
           {
             sub,
             isSelected: selectedCategoryId === sub.id,
+            colorScheme,
             onClick: () => onFilterClick(selectedCategoryId === sub.id ? null : sub.id)
           },
           sub.id
@@ -328,11 +362,9 @@ function DashboardExpenseCategories({
   isLoading = false,
   className,
   selectedCategoryId,
-  onCategorySelect
+  onCategorySelect,
+  colorScheme = "primary"
 }) {
-  const handleFilterClick = (id) => {
-    onCategorySelect == null ? void 0 : onCategorySelect(id);
-  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Card, { className: cn("flex flex-col", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardHeader, { className: "pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CardTitle, { className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: title }),
@@ -343,7 +375,8 @@ function DashboardExpenseCategories({
       {
         item,
         selectedCategoryId,
-        onFilterClick: handleFilterClick
+        colorScheme,
+        onFilterClick: (id) => onCategorySelect == null ? void 0 : onCategorySelect(id)
       },
       item.id
     )) }) })