@wealthx/shadcn 1.1.0 → 1.2.0

package/src/components/ui/transactions-expense-categories-doughnut-chart.tsx

@@ -0,0 +1,191 @@
+import React, { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  formatAbbrev,
+  hexToRgba,
+  DATASET_ALPHAS,
+  FALLBACK_PRIMARY,
+  DoughnutLegendRow,
+} from "./chart-shared";
+
+ChartJS.register(ArcElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface ExpenseCategorySegment {
+  label: string;
+  /** Spend amount in dollars */
+  value: number;
+}
+
+export interface TransactionsExpenseCategoriesDoughnutChartProps {
+  segments?: ExpenseCategorySegment[] | null;
+  title?: string;
+  showLegend?: boolean;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Card max-width in pixels or CSS string */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TransactionsExpenseCategoriesDoughnutChart({
+  segments,
+  title = "Expense Categories",
+  showLegend = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: TransactionsExpenseCategoriesDoughnutChartProps) {
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const hasData = !!segments?.length && segments.some((s) => s.value > 0);
+
+  const total = useMemo(
+    () => segments?.reduce((sum, s) => sum + s.value, 0) ?? 0,
+    [segments],
+  );
+
+  const colors = useMemo(
+    () =>
+      (segments ?? []).map((_, i) =>
+        hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ),
+    [segments, brandPrimary],
+  );
+
+  const chartData = useMemo<ChartData<"doughnut">>(
+    () => ({
+      labels: segments?.map((s) => s.label) ?? [],
+      datasets: [
+        {
+          data: segments?.map((s) => s.value) ?? [],
+          backgroundColor: colors,
+          borderWidth: 0,
+          hoverOffset: 4,
+        },
+      ],
+    }),
+    [segments, colors],
+  );
+
+  const options = useMemo<ChartOptions<"doughnut">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: "68%",
+      animation: { duration: 600, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          padding: 10,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              const pct =
+                total > 0 ? `${((val / total) * 100).toFixed(1)}%` : "0%";
+              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+            },
+          },
+        },
+      },
+    }),
+    [total],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !hasData ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="doughnut"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  textAlign: "center",
+                  pointerEvents: "none",
+                }}
+              >
+                <div className="text-base font-semibold leading-tight">
+                  {formatAbbrev(total)}
+                </div>
+                <div className="text-[11px] text-muted-foreground leading-none mt-1">
+                  Total
+                </div>
+              </div>
+            </div>
+            {showLegend && (
+              <div className="flex flex-col gap-2">
+                {segments!.map((s, i) => (
+                  <DoughnutLegendRow
+                    key={s.label}
+                    label={s.label}
+                    color={colors[i]}
+                    value={s.value}
+                    percent={
+                      total > 0
+                        ? `${((s.value / total) * 100).toFixed(1)}%`
+                        : "0%"
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/transactions-income-expense-bar-chart.tsx

@@ -15,7 +15,11 @@ import { Card, CardContent, CardHeader, CardTitle } from "./card";
 import { Empty, EmptyDescription } from "./empty";
 import { Spinner } from "./spinner";
 import { cn } from "@/lib/utils";
-import { FALLBACK_TICK } from "./chart-shared";
+import {
+  FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+} from "./chart-shared";
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
 
@@ -23,11 +27,6 @@ ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
 // Constants
 // ---------------------------------------------------------------------------
 
-const FALLBACK_PRIMARY = "#33FF99";
-const FALLBACK_SECONDARY = "#162029";
-/** Dark neutral used for dollar value labels — not a brand color. */
-const VALUE_LABEL_COLOR = "#162029";
-
 // ---------------------------------------------------------------------------
 // Helpers
 // ---------------------------------------------------------------------------
@@ -75,7 +74,10 @@ export function TransactionsIncomeExpenseBarChart({
   const brandPrimary =
     (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
   const brandSecondary =
-    (themeVars["--theme-secondary"] as string | undefined) || FALLBACK_SECONDARY;
+    (themeVars["--theme-secondary"] as string | undefined) ||
+    FALLBACK_SECONDARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
 
   const hasData = totalIncome != null && totalExpense != null;
   const incomeVal = totalIncome ?? 0;
@@ -104,7 +106,7 @@ export function TransactionsIncomeExpenseBarChart({
                 offset: 10,
                 clamp: false,
                 font: { weight: "bold", size: 14 },
-                color: VALUE_LABEL_COLOR,
+                color: FALLBACK_SECONDARY,
                 textAlign: "left",
                 // Returns array for multi-line: dollar value on line 1, blank on line 2
                 formatter: (v: number) => [formatDollar(v), ""],
@@ -119,8 +121,10 @@ export function TransactionsIncomeExpenseBarChart({
                 textAlign: "left",
                 // Returns array for multi-line: blank on line 1, bar label on line 2
                 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                formatter: (_: number, ctx: any) =>
-                  ["", String(ctx.chart.data.labels?.[ctx.dataIndex] ?? "")],
+                formatter: (_: number, ctx: any) => [
+                  "",
+                  String(ctx.chart.data.labels?.[ctx.dataIndex] ?? ""),
+                ],
               },
             },
           } as unknown as never,
@@ -129,40 +133,43 @@ export function TransactionsIncomeExpenseBarChart({
     };
   }, [hasData, incomeVal, expenseVal, brandPrimary, brandSecondary]);
 
-  const options = useMemo<ChartOptions<"bar">>(() => ({
-    indexAxis: "y",
-    responsive: true,
-    maintainAspectRatio: false,
-    animation: { duration: 800, easing: "easeOutQuart" },
-    layout: {
-      // Right padding reserves space for the datalabels rendered outside the bar area
-      padding: { right: 180, left: 0, top: 10, bottom: 10 },
-    },
-    plugins: {
-      legend: { display: false },
-      tooltip: { enabled: false },
-    },
-    scales: {
-      y: {
-        display: true,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { display: false },
+  const options = useMemo<ChartOptions<"bar">>(
+    () => ({
+      indexAxis: "y",
+      responsive: true,
+      maintainAspectRatio: false,
+      animation: { duration: 800, easing: "easeOutQuart" },
+      layout: {
+        // Right padding reserves space for the datalabels rendered outside the bar area
+        padding: { right: 180, left: 0, top: 10, bottom: 10 },
+      },
+      plugins: {
+        legend: { display: false },
+        tooltip: { enabled: false },
       },
-      x: {
-        display: true,
-        suggestedMax: maxVal * 1.3,
-        grid: { display: false },
-        border: { display: false },
-        ticks: { display: false },
+      scales: {
+        y: {
+          display: true,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { display: false },
+        },
+        x: {
+          display: true,
+          suggestedMax: maxVal * 1.3,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { display: false },
+        },
       },
-    },
-  }), [maxVal]);
+    }),
+    [maxVal],
+  );
 
   return (
     <Card
       className={cn("w-full py-4 sm:py-6 gap-2", className)}
-      style={{ maxWidth: width }}
+      style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
         <CardTitle className="text-sm sm:text-base">{title}</CardTitle>

package/src/components/ui/transactions-liabilities-breakdown-doughnut-chart.tsx

@@ -0,0 +1,191 @@
+import React, { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  ArcElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import { Chart } from "react-chartjs-2";
+import { useThemeVars } from "@/lib/theme-provider";
+import { Card, CardContent, CardHeader, CardTitle } from "./card";
+import { Empty, EmptyDescription } from "./empty";
+import { Skeleton } from "./skeleton";
+import { cn } from "@/lib/utils";
+import {
+  formatAbbrev,
+  hexToRgba,
+  DATASET_ALPHAS,
+  FALLBACK_PRIMARY,
+  DoughnutLegendRow,
+} from "./chart-shared";
+
+ChartJS.register(ArcElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface LiabilitySegment {
+  label: string;
+  /** Value in dollars */
+  value: number;
+}
+
+export interface TransactionsLiabilitiesBreakdownChartProps {
+  segments?: LiabilitySegment[] | null;
+  title?: string;
+  showLegend?: boolean;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Card max-width in pixels or CSS string */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TransactionsLiabilitiesBreakdownChart({
+  segments,
+  title = "Liabilities Breakdown",
+  showLegend = true,
+  height = 200,
+  width = "100%",
+  className,
+  isLoading = false,
+}: TransactionsLiabilitiesBreakdownChartProps) {
+  const themeVars = useThemeVars();
+  const brandPrimary: string =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const fontFamily: string =
+    (themeVars["--font-sans"] as string | undefined) || "Figtree, sans-serif";
+
+  const hasData = !!segments?.length && segments.some((s) => s.value > 0);
+
+  const total = useMemo(
+    () => segments?.reduce((sum, s) => sum + s.value, 0) ?? 0,
+    [segments],
+  );
+
+  const colors = useMemo(
+    () =>
+      (segments ?? []).map((_, i) =>
+        hexToRgba(brandPrimary, DATASET_ALPHAS[i % DATASET_ALPHAS.length]),
+      ),
+    [segments, brandPrimary],
+  );
+
+  const chartData = useMemo<ChartData<"doughnut">>(
+    () => ({
+      labels: segments?.map((s) => s.label) ?? [],
+      datasets: [
+        {
+          data: segments?.map((s) => s.value) ?? [],
+          backgroundColor: colors,
+          borderWidth: 0,
+          hoverOffset: 4,
+        },
+      ],
+    }),
+    [segments, colors],
+  );
+
+  const options = useMemo<ChartOptions<"doughnut">>(
+    () => ({
+      responsive: true,
+      maintainAspectRatio: false,
+      cutout: "68%",
+      animation: { duration: 600, easing: "easeOutQuart" },
+      plugins: {
+        legend: { display: false },
+        tooltip: {
+          padding: 10,
+          cornerRadius: 0,
+          titleFont: { size: 11, weight: 600 },
+          bodyFont: { size: 12, weight: 500 },
+          callbacks: {
+            label: (ctx) => {
+              const val = ctx.raw as number;
+              const pct =
+                total > 0 ? `${((val / total) * 100).toFixed(1)}%` : "0%";
+              return ` ${ctx.label}: ${formatAbbrev(val)} (${pct})`;
+            },
+          },
+        },
+      },
+    }),
+    [total],
+  );
+
+  return (
+    <Card
+      className={cn("w-full py-4 sm:py-6 gap-2", className)}
+      style={{ maxWidth: width, fontFamily }}
+    >
+      <CardHeader className="px-3 sm:px-6">
+        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+      </CardHeader>
+
+      <CardContent className="px-3 sm:px-6">
+        {isLoading ? (
+          <Skeleton style={{ height, width: "100%" }} />
+        ) : !hasData ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div className="flex flex-col gap-4">
+            <div style={{ height, width: "100%", position: "relative" }}>
+              <Chart
+                key={brandPrimary}
+                type="doughnut"
+                data={chartData}
+                options={options}
+                aria-label={title}
+              />
+              <div
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  textAlign: "center",
+                  pointerEvents: "none",
+                }}
+              >
+                <div className="text-base font-semibold leading-tight">
+                  {formatAbbrev(total)}
+                </div>
+                <div className="text-[11px] text-muted-foreground leading-none mt-1">
+                  Total
+                </div>
+              </div>
+            </div>
+            {showLegend && (
+              <div className="flex flex-col gap-2">
+                {segments!.map((s, i) => (
+                  <DoughnutLegendRow
+                    key={s.label}
+                    label={s.label}
+                    color={colors[i]}
+                    value={s.value}
+                    percent={
+                      total > 0
+                        ? `${((s.value / total) * 100).toFixed(1)}%`
+                        : "0%"
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/src/lib/theme-provider.tsx

@@ -93,6 +93,16 @@ export function ThemeProvider({
       // Legacy compat (used by existing WealthX apps)
       "--theme-primary": primary,
       "--theme-secondary": secondary,
+
+      // Pipeline stage palette — 5 opacity levels of primary, tenant-adaptive.
+      // Defined here (not :root) so they react to tenant theme switches.
+      "--color-stage-1": primaryOklch,
+      "--color-stage-2": `color-mix(in oklch, ${primaryOklch} 80%, transparent)`,
+      "--color-stage-3": `color-mix(in oklch, ${primaryOklch} 60%, transparent)`,
+      "--color-stage-4": `color-mix(in oklch, ${primaryOklch} 40%, transparent)`,
+      "--color-stage-5": `color-mix(in oklch, ${primaryOklch} 20%, transparent)`,
+      // WCAG-computed contrast text for any primary-shaded background
+      "--color-stage-fg": primaryFgOklch,
     };
   }, [primary, secondary, fontFamily, injectCssVariables]);
 

package/src/lib/typography.ts

@@ -12,6 +12,7 @@
 //   .text-h1 … .text-h6
 //   .text-body-large, .text-body-medium, .text-body-small
 //   .text-label-large, .text-label-medium, .text-label-small
+//   .text-button, .text-button-xs
 //   .text-caption, .text-overline, .text-code
 
 export const FONT_FAMILY_SANS =
@@ -65,6 +66,12 @@ export const TYPOGRAPHY_LABEL = {
   small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" }),
 } as const;
 
+/** Button — interactive control text (weight 500 / Medium per Figma) */
+export const TYPOGRAPHY_BUTTON = {
+  default: style(500, "0.875rem", "1.25rem"),
+  xs: style(500, "0.75rem", "1.25rem"),
+} as const;
+
 /** Utility — caption, overline, code */
 export const TYPOGRAPHY_UTILITY = {
   caption: style(400, "0.75rem", "1rem"),
@@ -80,6 +87,7 @@ export const TYPOGRAPHY = {
   heading: TYPOGRAPHY_HEADING,
   body: TYPOGRAPHY_BODY,
   label: TYPOGRAPHY_LABEL,
+  button: TYPOGRAPHY_BUTTON,
   utility: TYPOGRAPHY_UTILITY,
 } as const;
 
@@ -119,6 +127,7 @@ export function getTypographyCssVars(
     ["", TYPOGRAPHY_HEADING as unknown as Record<string, TypographyStyle>],
     ["body", TYPOGRAPHY_BODY as unknown as Record<string, TypographyStyle>],
     ["label", TYPOGRAPHY_LABEL as unknown as Record<string, TypographyStyle>],
+    ["button", TYPOGRAPHY_BUTTON as unknown as Record<string, TypographyStyle>],
     ["", TYPOGRAPHY_UTILITY as unknown as Record<string, TypographyStyle>],
   ];
 

package/src/lib/utils.ts

@@ -1,6 +1,44 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+/**
+ * Custom twMerge that recognises WealthX typography tokens as font-size
+ * utilities so they don't conflict with text-color utilities
+ * (e.g. text-button vs text-primary-foreground).
+ */
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-large",
+            "display-medium",
+            "display-small",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "h5",
+            "h6",
+            "body-large",
+            "body-medium",
+            "body-small",
+            "label-large",
+            "label-medium",
+            "label-small",
+            "button",
+            "button-xs",
+            "caption",
+            "overline",
+            "code",
+          ],
+        },
+      ],
+    },
+  },
+});
 
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }