@wealthx/shadcn 1.5.42 → 1.5.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.5.42",
+  "version": "1.5.43",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -364,6 +364,11 @@
       "import": "./dist/components/ui/expense-bar-chart.mjs",
       "require": "./dist/components/ui/expense-bar-chart.js"
     },
+    "./expense-categories-bar": {
+      "types": "./src/components/ui/expense-categories-bar.tsx",
+      "import": "./dist/components/ui/expense-categories-bar.mjs",
+      "require": "./dist/components/ui/expense-categories-bar.js"
+    },
     "./income-bar-chart": {
       "types": "./src/components/ui/income-bar-chart.tsx",
       "import": "./dist/components/ui/income-bar-chart.mjs",

package/src/component-descriptions/assets-liabilities-side-card.md

@@ -0,0 +1,19 @@
+# AssetsLiabilitiesSideCard
+
+## 2026-06-05 — Refactor to 2×2 grid layout matching frontend
+
+**Prompted by:** frontend parity review
+
+### What changed
+- Replaced vertical list layout (Net Position hero → Total Assets with sub-rows → Total Liabilities) with a 2×2 grid of metric cells
+- Four cells: Total Liabilities, Total Cash Assets, Net Position, Total Property Value — matching the order in the live frontend
+- Each cell now uses `bg-muted p-4` as background (replacing inline card border)
+- Negative values (Total Liabilities) colored with `text-brand-secondary`; positive values with `text-primary`
+- Removed `MetricRow` and `SubRow` helper components (no longer needed)
+- Removed derived `totalAssets` field (Total Assets row was removed from design)
+
+### Why
+- Frontend app uses a compact 2×2 grid; Storybook was showing a different list-based layout, causing design drift
+
+### Affected tokens / files
+- `packages/shadcn/src/components/ui/assets-liabilities-side-card.tsx`

package/src/component-descriptions/pipeline-chart.md

@@ -0,0 +1,17 @@
+# PipelineChart
+
+## 2026-05-19 — Single-color segments with gap separators
+
+**Prompted by:** Thinh Tu Duc
+
+### What changed
+- All segments now share a single primary color instead of 5 cycling opacity shades
+- 1px background-color gaps between segments provide visual separation
+- Legend dots follow the same color logic (primary fallback, or explicit `stage.color`)
+
+### Why
+- The previous 5-opacity fallback palette repeated colors when there were more than 5 stages, creating misleading visual groupings
+- A single primary color is tenant-adaptive and works for any number of stages
+
+### Affected tokens / files
+- `packages/shadcn/src/components/ui/pipeline-chart.tsx` — replaced `FALLBACK_COLORS` with `SEGMENT_COLOR = "var(--primary)"`, added `gap-px bg-background` to bar container

package/src/components/index.tsx

@@ -712,6 +712,12 @@ export type {
   ExpenseGranularity,
 } from "./ui/expense-bar-chart";
 
+export { ExpenseCategoriesBar } from "./ui/expense-categories-bar";
+export type {
+  ExpenseCategoriesBarProps,
+  ExpenseCategoryPart,
+} from "./ui/expense-categories-bar";
+
 export {
   Field,
   FieldLabel,

package/src/components/ui/assets-liabilities-side-card.tsx

@@ -27,36 +27,13 @@ export interface AssetsLiabilitiesSideCardProps {
   className?: string;
 }
 
-// ─── Metric row ──────────────────────────────────────────────────────────────
+// ─── Internal types ───────────────────────────────────────────────────────────
 
-function MetricRow({
-  label,
-  value,
-  valueClass,
-}: {
+interface MetricCell {
   label: string;
-  value: string;
-  valueClass?: string;
-}) {
-  return (
-    <div className="flex items-center justify-between gap-2">
-      <span className="text-sm font-medium text-foreground">{label}</span>
-      <span className={cn("text-base font-semibold shrink-0", valueClass)}>
-        {value}
-      </span>
-    </div>
-  );
-}
-
-// ─── Sub-row ─────────────────────────────────────────────────────────────────
-
-function SubRow({ label, value }: { label: string; value: string }) {
-  return (
-    <div className="flex items-center justify-between gap-2 pl-3 text-sm">
-      <span className="text-muted-foreground">{label}</span>
-      <span className="font-medium text-foreground">{value}</span>
-    </div>
-  );
+  value: number;
+  /** When true, value is prefixed with "-" and coloured with brand-secondary */
+  negative?: boolean;
 }
 
 // ─── Component ────────────────────────────────────────────────────────────────
@@ -70,12 +47,16 @@ export function AssetsLiabilitiesSideCard({
   tooltipText = "Current snapshot of your financial position. These values are not affected by the date range filter.",
   className,
 }: AssetsLiabilitiesSideCardProps) {
-  const totalAssets = assets + propertyValue;
-  const netPositive = netPosition >= 0;
+  const cells: MetricCell[] = [
+    { label: "Total Liabilities", value: liabilities, negative: true },
+    { label: "Total Cash Assets", value: assets },
+    { label: "Net Position", value: netPosition },
+    { label: "Total Property Value", value: propertyValue },
+  ];
 
   return (
     <Card className={cn("flex flex-col", className)}>
-      <CardHeader className="pb-2">
+      <CardHeader className="pb-3">
         <div className="flex items-center gap-1">
           <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             {title}
@@ -97,60 +78,39 @@ export function AssetsLiabilitiesSideCard({
         </div>
       </CardHeader>
 
-      <CardContent className="flex flex-1 flex-col gap-4 pb-5">
-        {/* Hero: Net Position */}
-        <div className="flex items-center justify-between gap-2">
-          <span className="text-sm font-medium text-foreground">
-            Net Position
-          </span>
-          <TooltipProvider>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <span
-                  className={cn(
-                    "cursor-default text-xl font-bold leading-tight shrink-0",
-                    netPositive ? "text-foreground" : "text-destructive",
-                  )}
-                >
-                  {netPositive ? "" : "-"}
-                  {formatCurrencyAbbrev(Math.abs(netPosition))}
-                </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                {netPositive ? "" : "-"}$
-                {Math.abs(netPosition).toLocaleString()}
-              </TooltipContent>
-            </Tooltip>
-          </TooltipProvider>
-        </div>
-
-        {/* Divider */}
-        <div className="border-t border-border" />
+      <CardContent className="pb-5">
+        {/* 2×2 grid — matches frontend layout */}
+        <div className="grid grid-cols-2 gap-1.5">
+          {cells.map((cell) => {
+            const displayValue = `${cell.negative ? "-" : ""}${formatCurrencyAbbrev(Math.abs(cell.value))}`;
+            const fullValue = `${cell.negative ? "-" : ""}$${Math.abs(cell.value).toLocaleString()}`;
 
-        {/* Total Assets */}
-        <div className="flex flex-col gap-2">
-          <MetricRow
-            label="Total Assets"
-            value={formatCurrencyAbbrev(totalAssets)}
-            valueClass="text-xl"
-          />
-          <div className="flex flex-col gap-1.5">
-            <SubRow label="Cash Assets" value={formatCurrencyAbbrev(assets)} />
-            <SubRow
-              label="Property Value"
-              value={formatCurrencyAbbrev(propertyValue)}
-            />
-          </div>
+            return (
+              <div key={cell.label} className="bg-muted p-4">
+                <p className="text-xs text-muted-foreground font-medium mb-1.5">
+                  {cell.label}
+                </p>
+                <TooltipProvider>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <span
+                        className={cn(
+                          "text-lg font-bold cursor-default",
+                          cell.negative
+                            ? "text-brand-secondary"
+                            : "text-primary",
+                        )}
+                      >
+                        {displayValue}
+                      </span>
+                    </TooltipTrigger>
+                    <TooltipContent>{fullValue}</TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+              </div>
+            );
+          })}
         </div>
-
-        <div className="border-t border-border" />
-
-        {/* Total Liabilities */}
-        <MetricRow
-          label="Total Liabilities"
-          value={`-${formatCurrencyAbbrev(liabilities)}`}
-          valueClass="text-xl text-destructive"
-        />
       </CardContent>
     </Card>
   );

package/src/components/ui/borrowing-capacity-atoms.tsx

@@ -196,7 +196,7 @@ export function LoanToValueRatio({
  */
 
 export interface AddScenarioButtonProps {
-  /** Button label (default: "Compare Loan Options") */
+  /** Button label (default: "Add New Scenario") */
   title?: string;
   /** Disables the button */
   disabled?: boolean;
@@ -206,20 +206,17 @@ export interface AddScenarioButtonProps {
 }
 
 export function AddScenarioButton({
-  title = "Compare Loan Options",
+  title = "Add New Scenario",
   disabled = false,
   onClick,
   className,
 }: AddScenarioButtonProps) {
   return (
     <Button
-      variant="outline-secondary"
+      variant="outline"
       disabled={disabled}
       onClick={onClick}
-      className={cn(
-        "w-full justify-between border-dashed text-base",
-        className,
-      )}
+      className={cn("w-full justify-between", className)}
     >
       <span>{title}</span>
       <Plus size={18} className="shrink-0" />

package/src/components/ui/borrowing-capacity-line-chart.tsx

@@ -259,7 +259,7 @@ export function BorrowingCapacityLineChart({
             maxRotation: 0,
             minRotation: 0,
             color: FALLBACK_TICK,
-            font: { size: 10, family: fontFamily },
+            font: { size: 12, family: fontFamily },
             callback: function (_, index) {
               const iso = labels[index];
               return iso ? formatDateLabel(iso) : "";
@@ -275,7 +275,7 @@ export function BorrowingCapacityLineChart({
             maxTicksLimit: 6,
             padding: 8,
             color: FALLBACK_TICK,
-            font: { size: 10, family: fontFamily },
+            font: { size: 12, family: fontFamily },
             callback: (v) => formatAbbrev(Number(v)),
           },
         },
@@ -314,11 +314,11 @@ export function BorrowingCapacityLineChart({
     >
       <CardHeader className="px-3 sm:px-6">
         <div className="flex items-start justify-between gap-4">
-          <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
             {title}
           </CardTitle>
           {kpiValue != null && (
-            <span className="shrink-0 text-xl font-bold tabular-nums">
+            <span className="shrink-0 text-lg font-bold tabular-nums">
               {formatCurrency(kpiValue / 100)}
             </span>
           )}

package/src/components/ui/cash-balance-line-chart.tsx

@@ -60,6 +60,17 @@ export interface CashBalanceDataPoint {
   y: number;
 }
 
+/**
+ * Optional secondary line datasets rendered on a right-hand Y-axis.
+ * Useful for overlaying income / expense lines against the balance.
+ */
+export interface ExtraLineDataset {
+  label: string;
+  data: CashBalanceDataPoint[];
+  color: string;
+  dashed?: boolean;
+}
+
 export interface CashBalanceLineChartProps {
   chartData?: CashBalanceDataPoint[] | null;
   title?: string;
@@ -80,6 +91,11 @@ export interface CashBalanceLineChartProps {
   showLegend?: boolean;
   /** Legend placement relative to the chart */
   legendPosition?: "top" | "bottom";
+  /**
+   * Optional secondary line datasets (e.g. income / expense) rendered on a
+   * right-hand Y-axis so their scale stays independent from the balance line.
+   */
+  extraDatasets?: ExtraLineDataset[];
 }
 
 // ---------------------------------------------------------------------------
@@ -98,6 +114,7 @@ export function CashBalanceLineChart({
   showBalanceValue = false,
   showLegend = false,
   legendPosition = "bottom",
+  extraDatasets,
 }: CashBalanceLineChartProps) {
   const themeVars = useThemeVars();
   const brandPrimary =
@@ -118,29 +135,54 @@ export function CashBalanceLineChart({
     return indices;
   }, [hasData, chartData]);
 
+  const hasExtra = Array.isArray(extraDatasets) && extraDatasets.length > 0;
+
   const data = useMemo<ChartData<"line">>(() => {
     if (!hasData) return { labels: [], datasets: [] };
-    return {
-      labels: chartData!.map((p) => p.x), // raw ISO — used for tooltip + tick lookup
-      datasets: [
-        {
-          label: title,
-          data: chartData!.map((p) => p.y),
+
+    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: brandPrimary,
+          borderColor: ds.color,
           backgroundColor: "transparent",
-          borderWidth: 2.5,
+          borderWidth: 1.5,
+          borderDash: ds.dashed ? ([5, 4] as number[]) : ([] as number[]),
           tension: 0.4,
           pointRadius: 0,
-          pointHoverRadius: 6,
+          pointHoverRadius: 4,
           pointHoverBackgroundColor: FALLBACK_BG,
-          pointHoverBorderColor: brandPrimary,
-          pointHoverBorderWidth: 3,
+          pointHoverBorderColor: ds.color,
+          pointHoverBorderWidth: 2,
           pointHitRadius: 10,
-        },
-      ],
+          yAxisID: "y2",
+        }))
+      : [];
+
+    return {
+      labels: chartData!.map((p) => p.x),
+      datasets: [mainDs, ...extraDs],
     };
-  }, [hasData, chartData, brandPrimary, title]);
+  }, [hasData, chartData, brandPrimary, title, hasExtra, extraDatasets]);
 
   const options = useMemo<ChartOptions<"line">>(
     () => ({
@@ -153,18 +195,19 @@ export 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) => {
               const iso = items[0]?.label;
               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;
             },
           },
         },
@@ -181,7 +224,7 @@ export 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);
@@ -198,13 +241,27 @@ export function CashBalanceLineChart({
             maxTicksLimit: 5,
             padding: 8,
             color: FALLBACK_TICK,
-            font: { size: 10, family: fontFamily },
+            font: { size: 12, family: fontFamily },
+            callback: (v) => formatAbbrev(Number(v)),
+          },
+        },
+        y2: {
+          display: hasExtra && showYAxis,
+          position: "right" as const,
+          beginAtZero: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: {
+            maxTicksLimit: 5,
+            padding: 8,
+            color: FALLBACK_TICK,
+            font: { size: 12, family: fontFamily },
             callback: (v) => formatAbbrev(Number(v)),
           },
         },
       },
     }),
-    [tickIndices, chartData, showXAxis, showYAxis, fontFamily],
+    [tickIndices, chartData, showXAxis, showYAxis, fontFamily, hasExtra],
   );
 
   const latestValue = hasData ? chartData![chartData!.length - 1].y : null;
@@ -214,18 +271,22 @@ export function CashBalanceLineChart({
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
       style={{ maxWidth: width, fontFamily }}
     >
-      <CardHeader className="px-3 sm:px-6">
-        <div className="flex flex-col gap-0.5">
-          <CardTitle className="text-xs font-semibold uppercase tracking-wide">
-            {title}
-          </CardTitle>
-          {showBalanceValue && latestValue !== null && (
-            <p className="text-2xl font-bold tabular-nums leading-tight">
-              {formatCurrency(latestValue, { decimals: 2 })}
-            </p>
-          )}
-        </div>
-      </CardHeader>
+      {(title || (showBalanceValue && latestValue !== null)) && (
+        <CardHeader className="px-3 sm:px-6">
+          <div className="flex flex-col gap-0.5">
+            {title && (
+              <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {title}
+              </CardTitle>
+            )}
+            {showBalanceValue && latestValue !== null && (
+              <p className="text-lg font-bold tabular-nums leading-tight">
+                {formatCurrency(latestValue, { decimals: 2 })}
+              </p>
+            )}
+          </div>
+        </CardHeader>
+      )}
 
       <CardContent className="px-3 sm:px-6">
         {isLoading ? (
@@ -243,11 +304,21 @@ export function CashBalanceLineChart({
           <div className="flex flex-col gap-2">
             {showLegend && legendPosition === "top" && (
               <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
-                <ChartLegendItem
-                  label={title}
-                  color={brandPrimary}
-                  lineStyle="solid"
-                />
+                {title && (
+                  <ChartLegendItem
+                    label={title}
+                    color={brandPrimary}
+                    lineStyle="solid"
+                  />
+                )}
+                {extraDatasets?.map((ds) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={ds.color}
+                    lineStyle={ds.dashed ? "dashed" : "solid"}
+                  />
+                ))}
               </div>
             )}
             <div style={{ height, width: "100%", position: "relative" }}>
@@ -261,11 +332,21 @@ export function CashBalanceLineChart({
             </div>
             {showLegend && legendPosition === "bottom" && (
               <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
-                <ChartLegendItem
-                  label={title}
-                  color={brandPrimary}
-                  lineStyle="solid"
-                />
+                {title && (
+                  <ChartLegendItem
+                    label={title}
+                    color={brandPrimary}
+                    lineStyle="solid"
+                  />
+                )}
+                {extraDatasets?.map((ds) => (
+                  <ChartLegendItem
+                    key={ds.label}
+                    label={ds.label}
+                    color={ds.color}
+                    lineStyle={ds.dashed ? "dashed" : "solid"}
+                  />
+                ))}
               </div>
             )}
           </div>

package/src/components/ui/cashflow-bar-chart.tsx

@@ -295,14 +295,17 @@ export 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,
@@ -311,7 +314,7 @@ export function CashflowBarChart({
         },
       },
     }),
-    [showXAxis, showYAxis, sliced],
+    [showXAxis, showYAxis, sliced, fontFamily],
   );
 
   return (
@@ -320,7 +323,7 @@ export function CashflowBarChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
           {title}
         </CardTitle>
         {showPeriodSelector && (

package/src/components/ui/chart-shared.tsx

@@ -190,7 +190,7 @@ export function ChartLegendItem({
           }}
         />
       )}
-      <span className="text-[11px] text-muted-foreground leading-none">
+      <span className="text-sm text-muted-foreground leading-none">
         {label}
       </span>
     </div>
@@ -224,15 +224,15 @@ export function DoughnutLegendRow({
             flexShrink: 0,
           }}
         />
-        <span className="text-[11px] text-muted-foreground leading-none truncate">
+        <span className="text-sm text-muted-foreground leading-none truncate">
           {label}
         </span>
       </div>
       <div className="flex items-center gap-2 shrink-0">
-        <span className="text-[11px] font-medium leading-none">
+        <span className="text-sm font-medium leading-none">
           {formatAbbrev(value)}
         </span>
-        <span className="text-[11px] text-muted-foreground leading-none w-10 text-right">
+        <span className="text-sm text-muted-foreground leading-none w-12 text-right">
           {percent}
         </span>
       </div>