@wealthx/shadcn 1.2.1 → 1.3.0

package/src/components/ui/stepper.tsx

@@ -0,0 +1,347 @@
+import * as React from "react";
+import { Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Stepper — WealthX Design System
+ *
+ * Built from scratch (no Base UI primitive). Supports horizontal and vertical
+ * orientations with active, completed, and error step states.
+ *
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn
+ *
+ * Composition:
+ *   <Stepper activeStep={1}>
+ *     <Step><StepItem label="..." description="..." /></Step>
+ *     ...
+ *   </Stepper>
+ *
+ * Vertical with expandable content:
+ *   <Stepper activeStep={1} orientation="vertical">
+ *     <Step>
+ *       <div className="flex gap-4">
+ *         <StepIndicator />
+ *         <StepLabel description="...">Label</StepLabel>
+ *       </div>
+ *       <StepContent>...</StepContent>
+ *     </Step>
+ *   </Stepper>
+ */
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface StepperContextValue {
+  activeStep: number;
+  orientation: "horizontal" | "vertical";
+  totalSteps: number;
+}
+
+const StepperContext = React.createContext<StepperContextValue>({
+  activeStep: 0,
+  orientation: "horizontal",
+  totalSteps: 0,
+});
+
+interface StepContextValue {
+  index: number;
+  isActive: boolean;
+  isCompleted: boolean;
+  isFirst: boolean;
+  isLast: boolean;
+}
+
+const StepContext = React.createContext<StepContextValue>({
+  index: 0,
+  isActive: false,
+  isCompleted: false,
+  isFirst: true,
+  isLast: false,
+});
+
+// ---------------------------------------------------------------------------
+// Stepper
+// ---------------------------------------------------------------------------
+
+export interface StepperProps {
+  /** 0-based index of the currently active step. */
+  activeStep?: number;
+  orientation?: "horizontal" | "vertical";
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Stepper({
+  activeStep = 0,
+  orientation = "horizontal",
+  className,
+  children,
+}: StepperProps) {
+  const totalSteps = React.Children.count(children);
+
+  return (
+    <StepperContext.Provider value={{ activeStep, orientation, totalSteps }}>
+      <div
+        data-slot="stepper"
+        className={cn(
+          "font-sans",
+          orientation === "horizontal"
+            ? "flex w-full items-start"
+            : "flex flex-col",
+          className,
+        )}
+      >
+        {React.Children.map(children, (step, index) =>
+          React.isValidElement(step)
+            ? React.cloneElement(
+                step as React.ReactElement<StepProps>,
+                { _index: index } as Partial<StepProps>,
+              )
+            : step,
+        )}
+      </div>
+    </StepperContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Step
+// ---------------------------------------------------------------------------
+
+export interface StepProps {
+  /**
+   * Injected by `<Stepper>` via `React.cloneElement` — do not pass manually.
+   * @internal
+   */
+  _index?: number;
+  /** Mark this step as errored regardless of active state. */
+  error?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+function Step({ _index = 0, error, className, children }: StepProps) {
+  const { activeStep, orientation, totalSteps } =
+    React.useContext(StepperContext);
+
+  const isActive = _index === activeStep;
+  const isCompleted = _index < activeStep;
+  const isFirst = _index === 0;
+  const isLast = _index === totalSteps - 1;
+
+  return (
+    <StepContext.Provider
+      value={{ index: _index, isActive, isCompleted, isFirst, isLast }}
+    >
+      <div
+        data-slot="step"
+        aria-current={isActive ? "step" : undefined}
+        data-active={isActive || undefined}
+        data-completed={isCompleted || undefined}
+        data-error={error || undefined}
+        className={cn(
+          orientation === "horizontal"
+            ? "flex flex-1 flex-col items-center"
+            : "flex flex-row gap-3",
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </StepContext.Provider>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepIndicator — circle + connector lines
+// ---------------------------------------------------------------------------
+
+export interface StepIndicatorProps {
+  /** Pass `true` to render the circle in the error/destructive state. */
+  error?: boolean;
+  className?: string;
+}
+
+function StepIndicator({ error, className }: StepIndicatorProps) {
+  const { orientation } = React.useContext(StepperContext);
+  const { index, isActive, isCompleted, isFirst, isLast } =
+    React.useContext(StepContext);
+
+  const filled = isActive || isCompleted;
+
+  const circle = (
+    <div
+      className={cn(
+        "relative z-10 flex size-8 shrink-0 items-center justify-center rounded-full text-sm font-medium transition-colors",
+        !filled &&
+          !error &&
+          "border-2 border-border bg-background text-muted-foreground",
+        isActive &&
+          !error &&
+          "border-2 border-primary bg-primary text-primary-foreground",
+        isCompleted && !error && "bg-primary text-primary-foreground",
+        error &&
+          "border-2 border-destructive bg-destructive text-destructive-foreground",
+      )}
+    >
+      {isCompleted && !error ? (
+        <Check className="size-4" strokeWidth={2.5} />
+      ) : (
+        <span>{index + 1}</span>
+      )}
+    </div>
+  );
+
+  if (orientation === "horizontal") {
+    return (
+      <div
+        data-slot="step-indicator"
+        className={cn("flex w-full items-center", className)}
+      >
+        <div
+          className={cn(
+            "h-[2px] flex-1 transition-colors",
+            isFirst
+              ? "bg-transparent"
+              : isActive || isCompleted
+                ? "bg-primary"
+                : "bg-border",
+          )}
+        />
+        {circle}
+        <div
+          className={cn(
+            "h-[2px] flex-1 transition-colors",
+            isLast
+              ? "bg-transparent"
+              : isCompleted
+                ? "bg-primary"
+                : "bg-border",
+          )}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="step-indicator"
+      className={cn("flex w-8 shrink-0 flex-col items-center", className)}
+    >
+      {circle}
+      {!isLast && (
+        <div
+          data-slot="step-connector"
+          className={cn(
+            "mt-1 w-[2px] flex-1 transition-colors",
+            isActive || isCompleted ? "bg-primary" : "bg-border",
+          )}
+        />
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepLabel
+// ---------------------------------------------------------------------------
+
+export interface StepLabelProps {
+  children: React.ReactNode;
+  description?: string;
+  /** Pass a string to show a custom error message, or `true` to show description in error colour. */
+  error?: string | boolean;
+  className?: string;
+}
+
+function StepLabel({
+  children,
+  description,
+  error,
+  className,
+}: StepLabelProps) {
+  const { orientation } = React.useContext(StepperContext);
+  const { isActive, isCompleted, isLast } = React.useContext(StepContext);
+
+  const subtext = typeof error === "string" ? error : description;
+
+  return (
+    <div
+      data-slot="step-label"
+      className={cn(
+        "flex flex-col",
+        orientation === "horizontal"
+          ? "mt-2 items-center text-center"
+          : cn("flex-1", !isLast && "pb-5"),
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "text-sm font-medium leading-tight transition-colors",
+          (isActive || isCompleted) && !error && "text-foreground",
+          !isActive && !isCompleted && !error && "text-muted-foreground",
+          error && "text-destructive",
+        )}
+      >
+        {children}
+      </span>
+      {subtext && (
+        <span
+          className={cn(
+            "mt-0.5 text-xs",
+            error ? "text-destructive" : "text-muted-foreground",
+          )}
+        >
+          {subtext}
+        </span>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepContent — visible only on the active step (vertical orientation)
+// ---------------------------------------------------------------------------
+
+export interface StepContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function StepContent({ className, children }: StepContentProps) {
+  const { isActive } = React.useContext(StepContext);
+
+  if (!isActive) return null;
+
+  return (
+    <div data-slot="step-content" className={cn("pb-4 pt-2", className)}>
+      {children}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// StepItem — convenience wrapper for horizontal steppers
+// Renders StepIndicator + StepLabel in a single element.
+// ---------------------------------------------------------------------------
+
+export interface StepItemProps {
+  label: string;
+  description?: string;
+  error?: string | boolean;
+}
+
+function StepItem({ label, description, error }: StepItemProps) {
+  return (
+    <>
+      <StepIndicator error={!!error} />
+      <StepLabel description={description} error={error}>
+        {label}
+      </StepLabel>
+    </>
+  );
+}
+
+export { Stepper, Step, StepIndicator, StepLabel, StepContent, StepItem };

package/src/components/ui/toggle.tsx

@@ -15,7 +15,7 @@ import { cn } from "@/lib/utils";
  *      works correctly inside ToggleGroup where border-l is collapsed for connected items)
  */
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 text-label-medium whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 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 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -24,9 +24,9 @@ const toggleVariants = cva(
           "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
       },
       size: {
-        default: "h-9 min-w-9 px-2",
-        sm: "h-8 min-w-8 px-1.5 text-caption",
-        lg: "h-10 min-w-10 px-2.5",
+        default: "h-9 min-w-9 px-2 text-label-large",
+        sm: "h-8 min-w-8 px-1.5 text-label-medium",
+        lg: "h-10 min-w-10 px-2.5 text-h5",
       },
     },
     defaultVariants: {

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

@@ -129,7 +129,9 @@ export function TransactionsExpenseCategoriesDoughnutChart({
       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-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/lib/typography.ts

@@ -44,12 +44,12 @@ export const TYPOGRAPHY_DISPLAY = {
 
 /** Headings H1–H6 */
 export const TYPOGRAPHY_HEADING = {
-  h1: style(700, "2rem", "2.5rem"),
+  h1: style(700, "1.875rem", "2.25rem"),
   h2: style(600, "1.75rem", "2.25rem"),
   h3: style(600, "1.5rem", "2rem"),
-  h4: style(600, "1.3125rem", "1.75rem"),
+  h4: style(600, "1.25rem", "1.625rem"),
   h5: style(600, "1.125rem", "1.5rem"),
-  h6: style(600, "1rem", "1.375rem"),
+  h6: style(600, "0.9375rem", "1.25rem"),
 } as const;
 
 /** Body text */
@@ -62,20 +62,20 @@ export const TYPOGRAPHY_BODY = {
 /** Labels — buttons, form labels, badges */
 export const TYPOGRAPHY_LABEL = {
   large: style(600, "1rem", "1.25rem"),
-  medium: style(600, "0.875rem", "1.125rem"),
-  small: style(600, "0.75rem", "1rem", { letterSpacing: "0.03125rem" }),
+  medium: style(600, "0.9375rem", "1.25rem"),
+  small: style(600, "0.8125rem", "1.125rem", { letterSpacing: "0.03125rem" }),
 } as const;
 
-/** Button — interactive control text (weight 500 / Medium per Figma) */
+/** Button — interactive control text (weight 600 / SemiBold) */
 export const TYPOGRAPHY_BUTTON = {
-  default: style(500, "0.875rem", "1.25rem"),
-  xs: style(500, "0.75rem", "1.25rem"),
+  default: style(600, "0.875rem", "1.25rem"),
+  xs: style(600, "0.75rem", "1.25rem"),
 } as const;
 
 /** Utility — caption, overline, code */
 export const TYPOGRAPHY_UTILITY = {
-  caption: style(400, "0.75rem", "1rem"),
-  overline: style(600, "0.625rem", "0.875rem", {
+  caption: style(500, "0.8125rem", "1.125rem"),
+  overline: style(600, "0.75rem", "1rem", {
     letterSpacing: "0.09375rem",
     textTransform: "uppercase",
   }),
@@ -105,7 +105,7 @@ export const TYPOGRAPHY_RESPONSIVE = {
       letterSpacing: "-0.03125rem",
     }),
     "display-medium": style(700, "2rem", "2.334rem"),
-    h1: style(700, "1.75rem", "2.1875rem"),
+    h1: style(700, "1.625rem", "2rem"),
     h2: style(600, "1.5rem", "1.93rem"),
   },
 } as const;