@wealthx/shadcn 1.2.2 → 1.3.0

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

@@ -16,13 +16,20 @@ import { Card, CardContent, CardHeader, CardTitle } from "./card";
 import { Empty, EmptyDescription } from "./empty";
 import { Spinner } from "./spinner";
 import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
 import {
   FALLBACK_TICK,
   FALLBACK_PRIMARY,
   FALLBACK_SECONDARY,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+);
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -32,12 +39,6 @@ ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip)
 // Helpers
 // ---------------------------------------------------------------------------
 
-function formatDollar(value: number): string {
-  return `$${value.toLocaleString(undefined, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })}`;
-}
 
 // ---------------------------------------------------------------------------
 // Types
@@ -110,7 +111,7 @@ export function TransactionsIncomeExpenseBarChart({
                 color: FALLBACK_SECONDARY,
                 textAlign: "left",
                 // Returns array for multi-line: dollar value on line 1, blank on line 2
-                formatter: (v: number) => [formatDollar(v), ""],
+                formatter: (v: number) => [formatCurrency(v, { decimals: 2 }), ""],
               },
               name: {
                 anchor: "end",
@@ -173,7 +174,9 @@ export function TransactionsIncomeExpenseBarChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
       </CardHeader>
 
       <CardContent className="px-3 sm:px-6">

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

@@ -129,7 +129,9 @@ export function TransactionsLiabilitiesBreakdownChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base">{title}</CardTitle>
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
+          {title}
+        </CardTitle>
       </CardHeader>
 
       <CardContent className="px-3 sm:px-6">

package/src/lib/format-currency.ts

@@ -0,0 +1,44 @@
+/**
+ * Currency formatting utilities for the WealthX design system.
+ * All formatters default to AUD (en-AU locale).
+ */
+
+/**
+ * Format a number as AUD currency using Intl.NumberFormat.
+ *
+ * @param value    The numeric value to format.
+ * @param options  Optional formatting overrides.
+ * @param options.decimals  Decimal places (default: 0).
+ * @param options.showSign  Prefix with +/− for positive/negative (default: false).
+ */
+export function formatCurrency(
+  value: number,
+  options?: { decimals?: number; showSign?: boolean },
+): string {
+  const { decimals = 0, showSign = false } = options ?? {};
+  const abs = Math.abs(value);
+  const formatted = new Intl.NumberFormat("en-AU", {
+    style: "currency",
+    currency: "AUD",
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(abs);
+  if (!showSign) return value < 0 ? `-${formatted}` : formatted;
+  if (value > 0) return `+${formatted}`;
+  if (value < 0) return `-${formatted}`;
+  return formatted;
+}
+
+/**
+ * Abbreviated currency: $1.2B, $3.5M, $580K, $42.
+ * Used primarily for chart axis ticks.
+ */
+export function formatCurrencyAbbrev(value: number): string {
+  const abs = Math.abs(value);
+  const sign = value < 0 ? "-" : "";
+  if (abs >= 1_000_000_000)
+    return `${sign}$${(abs / 1_000_000_000).toFixed(1)}B`;
+  if (abs >= 1_000_000) return `${sign}$${(abs / 1_000_000).toFixed(1)}M`;
+  if (abs >= 1_000) return `${sign}$${(abs / 1_000).toFixed(0)}K`;
+  return `${sign}$${abs.toFixed(0)}`;
+}

package/src/lib/format-date.ts

@@ -0,0 +1,50 @@
+/**
+ * Date formatting utilities for the WealthX design system.
+ * Uses date-fns for consistent, locale-independent formatting.
+ */
+import { format, parseISO } from "date-fns";
+
+/**
+ * Parse an ISO date string safely, handling both full ISO and date-only strings.
+ * Date-only strings ("2026-01-15") are parsed via parseISO to avoid timezone shifts.
+ */
+function safeParse(iso: string): Date {
+  return parseISO(iso);
+}
+
+/**
+ * Format an ISO date string as "15 Jan 2026".
+ * Returns "—" for falsy input, raw string on parse failure.
+ */
+export function formatDateShort(iso?: string): string {
+  if (!iso) return "—";
+  try {
+    return format(safeParse(iso), "dd MMM yyyy");
+  } catch {
+    return iso;
+  }
+}
+
+/**
+ * Format an ISO date string as "15 Jan" (day + month only).
+ * Returns raw string on parse failure.
+ */
+export function formatDateDayMonth(iso: string): string {
+  try {
+    return format(safeParse(iso), "dd MMM");
+  } catch {
+    return iso;
+  }
+}
+
+/**
+ * Format an ISO date string with weekday: "Wed, 15 Jan 2026".
+ * Returns raw string on parse failure.
+ */
+export function formatDateWithWeekday(iso: string): string {
+  try {
+    return format(safeParse(iso), "EEE, dd MMM yyyy");
+  } catch {
+    return iso;
+  }
+}

package/src/lib/opportunity-constants.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared constants for the opportunity / loan pipeline domain.
+ */
+
+/** Asset types that represent real property (map to PropertyCard). */
+export const PROPERTY_ASSET_TYPES = new Set([
+  "Primary Residence",
+  "Investment Property",
+  "Holiday Home",
+  "Commercial Property",
+  "Rural Property",
+]);

package/src/styles/globals.css

@@ -11,7 +11,7 @@
  * (e.g. when packages/shadcn is outside the Vite root apps/docs).
  * These cover all state-dependent classes used in Checkbox, Button, etc.
  */
-@source inline("h-2 h-10 h-12 h-16 h-20 h-24 h-28 h-32 h-36 h-40 h-44 h-48 size-10 size-12 size-14 size-16 rounded-full w-4/5 shrink-0 bg-muted transition-all flex-wrap gap-x-4 gap-y-1.5 mt-3");
+@source inline("h-2 h-10 h-12 h-16 h-20 h-24 h-28 h-32 h-36 h-40 h-44 h-48 size-10 size-12 size-14 size-16 rounded-full w-4/5 shrink-0 bg-muted transition-all flex-wrap gap-x-4 gap-y-1.5 mt-3 text-success-text text-warning-text text-destructive-text text-info-text");
 
 @source inline("has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 border-border border-destructive/40 bg-destructive/10 border-warning/40 bg-warning/10 text-warning border-success/40 bg-success/10 text-success border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-warning/90 *:data-[slot=alert-description]:text-success/90 *:data-[slot=alert-description]:text-info/90 *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive [&>svg]:text-warning [&>svg]:text-success [&>svg]:text-info");
 
@@ -19,7 +19,7 @@
 
 /* Toggle / ToggleGroup pressed-state safelist — data-pressed is set by @base-ui/react/toggle */
 @source inline("data-pressed:bg-primary/10 data-pressed:inset-ring data-pressed:inset-ring-primary data-pressed:text-foreground data-pressed:hover:bg-primary/10 data-pressed:hover:text-foreground");
-@source inline("bg-foreground/50 hover:bg-foreground/5 focus:ring-border focus:ring-2 focus:ring-offset-0 fixed inset-0 translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] sm:max-w-lg border-t pt-4 justify-end gap-1.5");
+@source inline("bg-foreground/50 hover:bg-foreground/5 focus:ring-border focus:ring-2 focus:ring-offset-0 fixed inset-0 translate-x-[-50%] translate-y-[-50%] max-w-[calc(100%-2rem)] sm:max-w-sm sm:max-w-md sm:max-w-lg sm:max-w-xl sm:max-w-2xl sm:max-w-3xl sm:max-w-4xl sm:max-w-full border-t pt-4 justify-end gap-1.5 aria-expanded:border-ring aria-expanded:ring-2 aria-expanded:ring-ring/20");
 
 @source inline("data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20");
 
@@ -462,7 +462,9 @@
   --accent-foreground: oklch(0.152 0.02 235); /* #040D13 */
 
   /* Destructive — error state */
-  --destructive: oklch(0.643 0.215 28.8); /* #F44336 — palette/error/main */
+  --destructive: oklch(
+    0.48 0.215 28
+  ); /* #C62828 — darkened for 4.5:1 with white */
   --destructive-foreground: oklch(1 0 0); /* #FFFFFF — light text on red */
 
   /* Borders */
@@ -472,25 +474,25 @@
     0.894 0.208 163
   ); /* #33FF99 — primary (focus ring uses brand color) */
 
-  /* WealthX custom: state colors */
-  --warning: oklch(0.77 0.174 64.1); /* #FF9800 — palette/warning/main */
+  /* WealthX custom: state colors
+   * Base colors are darkened to achieve ≥4.5:1 contrast with white foreground.
+   * *-text tokens are for colored text on light/white surfaces (not affected). */
+  --warning: oklch(0.565 0.18 67); /* #B45309 — darkened for 4.5:1 with white */
   --warning-foreground: oklch(1 0 0); /* #FFFFFF */
   --warning-text: oklch(
     0.44 0.14 58
-  ); /* ~#7A5200 — darkened for text on light bg (4.5:1 on white) */
-  --success: oklch(0.673 0.162 144.2); /* #4CAF50 — palette/success/main */
+  ); /* ~#7A5200 — colored text on light bg (4.5:1 on white) */
+  --success: oklch(
+    0.485 0.145 145
+  ); /* #2E7D32 — darkened for 4.5:1 with white */
   --success-foreground: oklch(1 0 0); /* #FFFFFF */
-  --success-text: oklch(
-    0.4 0.12 145
-  ); /* ~#1B5E20 — darkened for text on light bg */
-  --info: oklch(0.658 0.169 248.8); /* #2196F3 — palette/info/main */
+  --success-text: oklch(0.4 0.12 145); /* ~#1B5E20 — colored text on light bg */
+  --info: oklch(0.465 0.19 252); /* #1565C0 — darkened for 4.5:1 with white */
   --info-foreground: oklch(1 0 0); /* #FFFFFF */
-  --info-text: oklch(
-    0.4 0.13 250
-  ); /* ~#0D47A1 — darkened for text on light bg */
+  --info-text: oklch(0.4 0.13 250); /* ~#0D47A1 — colored text on light bg */
   --destructive-text: oklch(
     0.44 0.2 28.8
-  ); /* ~#8B0000 — darkened for text on light bg */
+  ); /* ~#8B0000 — colored text on light bg */
 
   /* Chart series — WealthX Charts collection */
   --chart-1: oklch(0.59 0.217 261.8); /* #2B72FB — series/blue */