@wealthx/shadcn 1.2.2 → 1.3.0

package/src/components/ui/page-header.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * PageHeader — WealthX Design System
+ *
+ * In-page heading block. Renders inside scrollable content — not part of
+ * the layout shell. Use for sections that need a visible title and optional
+ * description (e.g. "My Advisors", "How can we help?").
+ *
+ * For a sticky top-of-page bar with action buttons, use PageTopBar instead.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageHeaderProps {
+  /** Main page / section title */
+  title: string;
+  /** Optional subtitle shown below the title */
+  description?: string;
+  /** Optional action elements rendered to the right of the title block */
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PageHeader({
+  title,
+  description,
+  actions,
+  className,
+}: PageHeaderProps) {
+  return (
+    <div
+      data-slot="page-header"
+      className={cn("flex items-start justify-between gap-4", className)}
+    >
+      {/* Title + description */}
+      <div className="flex flex-col gap-0.5">
+        <h1 className="text-xl font-bold leading-tight">{title}</h1>
+        {description && (
+          <p className="text-sm text-muted-foreground">{description}</p>
+        )}
+      </div>
+
+      {/* Optional actions */}
+      {actions && (
+        <div className="flex shrink-0 items-center gap-2">{actions}</div>
+      )}
+    </div>
+  );
+}

package/src/components/ui/page-top-bar.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * PageTopBar — WealthX Design System
+ *
+ * Sticky top-of-page bar. Sits at the top of the main content area,
+ * separated from the content by a bottom border. Holds the page title
+ * and action buttons.
+ *
+ * Used by: Loan CRM, Contact, AI Builder, and other data-heavy pages.
+ * For an in-page title block with a description, use PageHeader instead.
+ */
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface PageTopBarProps {
+  /** Page title shown on the left */
+  title: string;
+  /** Optional action elements rendered to the right */
+  actions?: React.ReactNode;
+  className?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+export function PageTopBar({ title, actions, className }: PageTopBarProps) {
+  return (
+    <div
+      data-slot="page-top-bar"
+      className={cn(
+        "flex shrink-0 items-center justify-between gap-4",
+        "border-b border-border bg-background px-6 py-3",
+        className,
+      )}
+    >
+      {/* Title */}
+      <h1 className="text-lg font-semibold leading-tight">{title}</h1>
+
+      {/* Optional actions */}
+      {actions && <div className="flex items-center gap-2">{actions}</div>}
+    </div>
+  );
+}

package/src/components/ui/pagination.tsx

@@ -1,12 +1,21 @@
-import { type ReactElement } from "react"
-import * as React from "react"
+import { type ReactElement } from "react";
+import * as React from "react";
 import {
   ChevronLeftIcon,
   ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
   MoreHorizontalIcon,
-} from "lucide-react"
-import { cn } from "@/lib/utils"
-import { buttonVariants, type Button } from "@/components/ui/button"
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { buttonVariants, Button } from "@/components/ui/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 /**
  * Pagination — WealthX Design System
@@ -16,7 +25,7 @@ import { buttonVariants, type Button } from "@/components/ui/button"
  * WealthX overrides: none — ghost/outline variants match design system
  */
 
-export type PaginationProps = React.ComponentProps<"nav">
+export type PaginationProps = React.ComponentProps<"nav">;
 
 function Pagination({ className, ...props }: PaginationProps): ReactElement {
   return (
@@ -27,10 +36,10 @@ function Pagination({ className, ...props }: PaginationProps): ReactElement {
       role="navigation"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationContentProps = React.ComponentProps<"ul">
+export type PaginationContentProps = React.ComponentProps<"ul">;
 
 function PaginationContent({
   className,
@@ -42,19 +51,19 @@ function PaginationContent({
       data-slot="pagination-content"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationItemProps = React.ComponentProps<"li">
+export type PaginationItemProps = React.ComponentProps<"li">;
 
 function PaginationItem({ ...props }: PaginationItemProps): ReactElement {
-  return <li data-slot="pagination-item" {...props} />
+  return <li data-slot="pagination-item" {...props} />;
 }
 
 export type PaginationLinkProps = {
-  isActive?: boolean
+  isActive?: boolean;
 } & Pick<React.ComponentProps<typeof Button>, "size"> &
-  React.ComponentProps<"a">
+  React.ComponentProps<"a">;
 
 function PaginationLink({
   className,
@@ -71,16 +80,18 @@ function PaginationLink({
           variant: isActive ? "outline" : "ghost",
           size,
         }),
-        className
+        className,
       )}
       data-active={isActive}
       data-slot="pagination-link"
       {...props}
     />
-  )
+  );
 }
 
-export type PaginationPreviousProps = React.ComponentProps<typeof PaginationLink>
+export type PaginationPreviousProps = React.ComponentProps<
+  typeof PaginationLink
+>;
 
 function PaginationPrevious({
   className,
@@ -96,10 +107,10 @@ function PaginationPrevious({
       <ChevronLeftIcon />
       <span className="hidden sm:block">Previous</span>
     </PaginationLink>
-  )
+  );
 }
 
-export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>
+export type PaginationNextProps = React.ComponentProps<typeof PaginationLink>;
 
 function PaginationNext({
   className,
@@ -115,10 +126,10 @@ function PaginationNext({
       <span className="hidden sm:block">Next</span>
       <ChevronRightIcon />
     </PaginationLink>
-  )
+  );
 }
 
-export type PaginationEllipsisProps = React.ComponentProps<"span">
+export type PaginationEllipsisProps = React.ComponentProps<"span">;
 
 function PaginationEllipsis({
   className,
@@ -134,7 +145,143 @@ function PaginationEllipsis({
       <MoreHorizontalIcon className="size-4" />
       <span className="sr-only">More pages</span>
     </span>
-  )
+  );
+}
+
+export type PaginationNavButtonsProps = {
+  hasPrev: boolean;
+  hasNext: boolean;
+  onFirst: () => void;
+  onPrev: () => void;
+  onNext: () => void;
+  onLast: () => void;
+};
+
+function PaginationNavButtons({
+  hasPrev,
+  hasNext,
+  onFirst,
+  onPrev,
+  onNext,
+  onLast,
+}: PaginationNavButtonsProps): ReactElement {
+  return (
+    <div className="flex items-center gap-1">
+      <Button
+        aria-label="Go to first page"
+        disabled={!hasPrev}
+        onClick={onFirst}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronsLeftIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to previous page"
+        disabled={!hasPrev}
+        onClick={onPrev}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronLeftIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to next page"
+        disabled={!hasNext}
+        onClick={onNext}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronRightIcon className="size-4" />
+      </Button>
+      <Button
+        aria-label="Go to last page"
+        disabled={!hasNext}
+        onClick={onLast}
+        size="icon-sm"
+        variant="outline"
+      >
+        <ChevronsRightIcon className="size-4" />
+      </Button>
+    </div>
+  );
+}
+
+export type TablePaginationProps = {
+  page: number;
+  pageCount: number;
+  pageSize: number;
+  pageSizeOptions?: number[];
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  selectedCount?: number;
+  totalCount?: number;
+  className?: string;
+};
+
+function TablePagination({
+  page,
+  pageCount,
+  pageSize,
+  pageSizeOptions = [10, 20, 30, 50],
+  onPageChange,
+  onPageSizeChange,
+  selectedCount,
+  totalCount,
+  className,
+}: TablePaginationProps): ReactElement {
+  return (
+    <div
+      className={cn("flex items-center gap-4 py-4", className)}
+      data-slot="table-pagination"
+    >
+      {selectedCount != null && selectedCount > 0 && totalCount != null && (
+        <span className="text-body-small text-muted-foreground">
+          {selectedCount} of {totalCount} row(s) selected.
+        </span>
+      )}
+
+      <div className="ml-auto flex items-center gap-6">
+        <div className="flex items-center gap-2">
+          <span className="text-body-small text-muted-foreground whitespace-nowrap">
+            Rows per page
+          </span>
+          <Select
+            onValueChange={(value) => onPageSizeChange(Number(value))}
+            value={`${pageSize}`}
+          >
+            <SelectTrigger
+              aria-label="Rows per page"
+              className="w-[70px]"
+              size="sm"
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <span className="text-body-small text-muted-foreground whitespace-nowrap">
+          Page {page} of {pageCount}
+        </span>
+
+        <PaginationNavButtons
+          hasNext={page < pageCount}
+          hasPrev={page > 1}
+          onFirst={() => onPageChange(1)}
+          onLast={() => onPageChange(pageCount)}
+          onNext={() => onPageChange(page + 1)}
+          onPrev={() => onPageChange(page - 1)}
+        />
+      </div>
+    </div>
+  );
 }
 
 export {
@@ -145,4 +292,6 @@ export {
   PaginationPrevious,
   PaginationNext,
   PaginationEllipsis,
-}
+  PaginationNavButtons,
+  TablePagination,
+};

package/src/components/ui/pipeline-board.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { RefreshCw, Search, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { Input } from "@/components/ui/input";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
@@ -128,13 +129,16 @@ function Toolbar({
           className="h-8 pl-8 text-sm"
         />
         {searchValue && (
-          <button
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
             onClick={() => onSearchChange("")}
-            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            className="absolute right-2 top-1/2 size-6 -translate-y-1/2 text-muted-foreground hover:text-foreground"
             aria-label="Clear search"
           >
             <X className="size-3.5" />
-          </button>
+          </Button>
         )}
       </div>
 
@@ -163,13 +167,16 @@ function Toolbar({
 
       {/* Refresh */}
       {onRefresh && (
-        <button
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
           onClick={onRefresh}
           className="ml-auto text-muted-foreground hover:text-foreground"
           aria-label="Refresh board"
         >
           <RefreshCw className="size-4" />
-        </button>
+        </Button>
       )}
     </div>
   );

package/src/components/ui/property-cashflow-doughnut-chart.tsx

@@ -127,7 +127,9 @@ export function PropertyCashflowDoughnutChart({
       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/property-debt-equity-doughnut-chart.tsx

@@ -124,7 +124,9 @@ export function PropertyDebtEquityDoughnutChart({
       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/property-mobile-estimate-line-chart.tsx

@@ -337,7 +337,9 @@ export function PropertyMobileEstimateLineChart({
       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>
         {showPeriodSelector && (
           <CardAction>
             <div className="flex gap-0.5 sm:gap-1">

package/src/components/ui/sidebar-nav.tsx

@@ -24,6 +24,8 @@ import {
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Button } from "./button";
 import {
   Tooltip,
   TooltipContent,
@@ -106,19 +108,6 @@ function getInitials(name: string): string {
     .slice(0, 2);
 }
 
-function formatCurrency(value: number, isNetItem = false): string {
-  const abs = Math.abs(value);
-  const formatted = new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  }).format(abs);
-  if (!isNetItem) return formatted;
-  if (value > 0) return `+${formatted}`;
-  if (value < 0) return `-${formatted}`;
-  return formatted;
-}
 
 function navIconCn(isActive: boolean): string {
   return cn(
@@ -186,7 +175,7 @@ function MetricsGroup({ group }: MetricsGroupProps) {
               item.isNetItem && item.value < 0 && "text-destructive",
             )}
           >
-            {formatCurrency(item.value, item.isNetItem)}
+            {formatCurrency(item.value, { showSign: item.isNetItem })}
           </span>
         </div>
       ))}
@@ -211,16 +200,17 @@ function SidebarNavItemView({
 
   return (
     <NavTooltip label={item.title} collapsed={collapsed}>
-      <button
+      <Button
         type="button"
+        variant="ghost"
         onClick={() => onNavigate?.(item.href)}
         className={cn(
-          "group flex w-full items-center gap-3 py-2.5 text-base font-medium transition-colors",
+          "group h-auto w-full items-center gap-3 py-2.5 text-base font-medium transition-colors",
           "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
           collapsed
             ? "justify-center px-2"
             : cn(
-                "px-3 border-l-4",
+                "justify-start px-3 border-l-4",
                 item.isActive
                   ? "bg-white/15 text-brand-secondary-foreground border-primary"
                   : "border-transparent",
@@ -233,7 +223,7 @@ function SidebarNavItemView({
           strokeWidth={1.75}
         />
         {!collapsed && <span className="truncate">{item.title}</span>}
-      </button>
+      </Button>
     </NavTooltip>
   );
 }
@@ -262,11 +252,12 @@ function CollapsibleNavItem({
   if (collapsed) {
     return (
       <NavTooltip label={item.title} collapsed={collapsed}>
-        <button
+        <Button
           type="button"
+          variant="ghost"
           onClick={() => onNavigate?.(item.href)}
           className={cn(
-            "group flex w-full items-center justify-center px-2 py-2.5 transition-colors",
+            "group h-auto w-full justify-center px-2 py-2.5 transition-colors",
             "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
             hasActiveChild && "bg-white/15 text-brand-secondary-foreground",
           )}
@@ -276,18 +267,19 @@ function CollapsibleNavItem({
             size={18}
             strokeWidth={1.75}
           />
-        </button>
+        </Button>
       </NavTooltip>
     );
   }
 
   return (
     <div>
-      <button
+      <Button
         type="button"
+        variant="ghost"
         onClick={() => setOpen((prev) => !prev)}
         className={cn(
-          "group flex w-full items-center gap-3 px-3 py-2.5 text-base font-medium transition-colors",
+          "group h-auto w-full justify-start gap-3 px-3 py-2.5 text-base font-medium transition-colors",
           "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
           "border-l-4 border-transparent",
           hasActiveChild &&
@@ -308,17 +300,18 @@ function CollapsibleNavItem({
           size={14}
           strokeWidth={2}
         />
-      </button>
+      </Button>
 
       {open && item.subItems && (
         <div className="ml-9 border-l border-white/15 pl-3">
           {item.subItems.map((sub) => (
-            <button
+            <Button
               key={sub.href}
               type="button"
+              variant="ghost"
               onClick={() => onNavigate?.(sub.href)}
               className={cn(
-                "flex w-full items-center gap-2 py-1.5 pl-1 text-sm transition-colors",
+                "h-auto w-full justify-start gap-2 py-1.5 pl-1 text-sm transition-colors",
                 "text-brand-secondary-foreground/50 hover:text-brand-secondary-foreground",
                 sub.isActive && "text-primary font-medium",
               )}
@@ -334,7 +327,7 @@ function CollapsibleNavItem({
                 )}
               />
               <span className="truncate">{sub.title}</span>
-            </button>
+            </Button>
           ))}
         </div>
       )}
@@ -364,7 +357,10 @@ export function SidebarNav({
         data-slot="sidebar-nav"
         data-collapsed={collapsed}
         className={cn(
-          "flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
+          // Force dark-mode CSS variable resolution — sidebar is always dark-backgrounded
+          // regardless of system theme, so semantic tokens (destructive, success, etc.)
+          // must use their dark-mode values to maintain WCAG contrast.
+          "dark flex h-full flex-col bg-brand-secondary text-brand-secondary-foreground",
           "transition-all duration-200 ease-in-out",
           collapsed ? "w-14" : "w-[279px]",
           className,
@@ -395,11 +391,12 @@ export function SidebarNav({
         {/* User section */}
         <div className="border-b border-white/15">
           <NavTooltip label={userName} collapsed={collapsed}>
-            <button
+            <Button
               type="button"
+              variant="ghost"
               onClick={() => !collapsed && setUserMenuOpen((prev) => !prev)}
               className={cn(
-                "group flex w-full items-center gap-3 px-5 py-5 text-base transition-colors",
+                "group h-auto w-full justify-start gap-3 px-5 py-5 text-base transition-colors",
                 "text-brand-secondary-foreground hover:bg-white/10",
                 collapsed && "justify-center px-2 py-4",
               )}
@@ -422,17 +419,18 @@ export function SidebarNav({
                   />
                 </>
               )}
-            </button>
+            </Button>
           </NavTooltip>
 
           {/* Logout dropdown */}
           {!collapsed && userMenuOpen && (
             <div className="border-t border-white/15 bg-black/20">
-              <button
+              <Button
                 type="button"
+                variant="ghost"
                 onClick={onLogout}
                 className={cn(
-                  "flex w-full items-center gap-3 px-5 py-3 text-base",
+                  "h-auto w-full justify-start gap-3 px-5 py-3 text-base",
                   "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground transition-colors",
                 )}
               >
@@ -442,7 +440,7 @@ export function SidebarNav({
                   className="shrink-0 text-destructive"
                 />
                 <span>Logout</span>
-              </button>
+              </Button>
             </div>
           )}
         </div>
@@ -484,11 +482,12 @@ export function SidebarNav({
               label={collapsed ? "Expand" : "Collapse"}
               collapsed={collapsed}
             >
-              <button
+              <Button
                 type="button"
+                variant="ghost"
                 onClick={() => onCollapsedChange(!collapsed)}
                 className={cn(
-                  "flex w-full items-center gap-3 px-3 py-3 transition-colors",
+                  "h-auto w-full justify-start gap-3 px-3 py-3 transition-colors",
                   "text-brand-secondary-foreground/80 hover:bg-white/10 hover:text-brand-secondary-foreground",
                   collapsed && "justify-center px-2",
                 )}
@@ -507,7 +506,7 @@ export function SidebarNav({
                   />
                 )}
                 {!collapsed && <span className="text-sm">Collapse</span>}
-              </button>
+              </Button>
             </NavTooltip>
           </div>
         )}

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">