@wealthx/shadcn 1.0.2 → 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

@@ -0,0 +1,205 @@
+import React, { useMemo } from "react";
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Tooltip,
+  type ChartOptions,
+  type ChartData,
+} from "chart.js";
+import ChartDataLabels from "chartjs-plugin-datalabels";
+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 { Spinner } from "./spinner";
+import { cn } from "@/lib/utils";
+import {
+  FALLBACK_TICK,
+  FALLBACK_PRIMARY,
+  FALLBACK_SECONDARY,
+} from "./chart-shared";
+
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function formatDollar(value: number): string {
+  return `$${value.toLocaleString(undefined, {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })}`;
+}
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface TransactionsIncomeExpenseBarChartProps {
+  /** Total income amount (positive number) */
+  totalIncome: number | null;
+  /** Total expense amount (negative or positive — absolute value is used) */
+  totalExpense: number | null;
+  title?: string;
+  /** Chart canvas height in pixels */
+  height?: number;
+  /** Width of the card */
+  width?: number | string;
+  className?: string;
+  /** Show skeleton loading state instead of the chart */
+  isLoading?: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function TransactionsIncomeExpenseBarChart({
+  totalIncome,
+  totalExpense,
+  title = "Transactions — Income vs Expense",
+  height = 120,
+  width = "100%",
+  className,
+  isLoading = false,
+}: TransactionsIncomeExpenseBarChartProps) {
+  const themeVars = useThemeVars();
+  const brandPrimary =
+    (themeVars["--theme-primary"] as string | undefined) || FALLBACK_PRIMARY;
+  const brandSecondary =
+    (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;
+  const expenseVal = Math.abs(totalExpense ?? 0);
+  const maxVal = Math.max(incomeVal, expenseVal);
+
+  const chartData = useMemo<ChartData<"bar">>(() => {
+    if (!hasData) return { labels: [], datasets: [] };
+    return {
+      labels: ["Incoming", "Outgoing"],
+      datasets: [
+        {
+          barThickness: 40,
+          backgroundColor: [brandPrimary, brandSecondary],
+          hoverBackgroundColor: [brandPrimary, brandSecondary],
+          borderWidth: 0,
+          borderRadius: 0,
+          borderSkipped: false,
+          data: [incomeVal, expenseVal],
+          // chartjs-plugin-datalabels config — typed via plugin module augmentation
+          datalabels: {
+            labels: {
+              value: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { weight: "bold", size: 14 },
+                color: FALLBACK_SECONDARY,
+                textAlign: "left",
+                // Returns array for multi-line: dollar value on line 1, blank on line 2
+                formatter: (v: number) => [formatDollar(v), ""],
+              },
+              name: {
+                anchor: "end",
+                align: "end",
+                offset: 10,
+                clamp: false,
+                font: { size: 12 },
+                color: FALLBACK_TICK,
+                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] ?? ""),
+                ],
+              },
+            },
+          } as unknown as never,
+        },
+      ],
+    };
+  }, [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 },
+        },
+        x: {
+          display: true,
+          suggestedMax: maxVal * 1.3,
+          grid: { display: false },
+          border: { display: false },
+          ticks: { display: false },
+        },
+      },
+    }),
+    [maxVal],
+  );
+
+  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 ? (
+          <div
+            className="flex items-center justify-center text-muted-foreground"
+            style={{ height, width: "100%" }}
+          >
+            <Spinner size="lg" />
+          </div>
+        ) : !hasData ? (
+          <Empty className="flex-none p-4" style={{ height }}>
+            <EmptyDescription>No data available</EmptyDescription>
+          </Empty>
+        ) : (
+          <div style={{ height, width: "100%", position: "relative" }}>
+            <Chart
+              key={`${brandPrimary}__${brandSecondary}`}
+              type="bar"
+              data={chartData}
+              options={options}
+              plugins={[ChartDataLabels]}
+              aria-label={title}
+            />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

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));
 }