@wealthx/shadcn 1.2.2 → 1.3.1

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

@@ -9,7 +9,7 @@
  *
  * - All icons must be Lucide icons (LucideIcon type).
  * - Supports collapsible sub-items (accordion).
- * - Collapsed state: icon-only, metrics hidden.
+ * - Collapsed state: icon-only, metrics animated out.
  * - metricsGroups: optional financial summary rows (Frontend sidebar only).
  * - No internal navigation — consumers wire onNavigate / onLogout.
  */
@@ -23,7 +23,11 @@ import {
   PanelLeftOpen,
 } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion";
 import { cn } from "@/lib/utils";
+import { formatCurrency } from "@/lib/format-currency";
+import { Accordion, AccordionContent, AccordionItem } from "./accordion";
+import { Button } from "./button";
 import {
   Tooltip,
   TooltipContent,
@@ -106,20 +110,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(
     "shrink-0 transition-colors",
@@ -186,7 +176,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 +201,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",
@@ -229,11 +220,11 @@ function SidebarNavItemView({
       >
         <Icon
           className={navIconCn(item.isActive ?? false)}
-          size={18}
+          size={24}
           strokeWidth={1.75}
         />
         {!collapsed && <span className="truncate">{item.title}</span>}
-      </button>
+      </Button>
     </NavTooltip>
   );
 }
@@ -262,83 +253,92 @@ 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",
           )}
         >
           <Icon
             className={navIconCn(hasActiveChild)}
-            size={18}
+            size={24}
             strokeWidth={1.75}
           />
-        </button>
+        </Button>
       </NavTooltip>
     );
   }
 
   return (
-    <div>
-      <button
-        type="button"
-        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",
-          "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground",
-          "border-l-4 border-transparent",
-          hasActiveChild &&
-            "bg-white/15 text-brand-secondary-foreground border-primary",
-        )}
-      >
-        <Icon
-          className={navIconCn(hasActiveChild)}
-          size={18}
-          strokeWidth={1.75}
-        />
-        <span className="flex-1 truncate text-left">{item.title}</span>
-        <ChevronDown
-          className={cn(
-            "ml-auto shrink-0 text-brand-secondary-foreground/40 transition-transform duration-200",
-            open && "rotate-180",
-          )}
-          size={14}
-          strokeWidth={2}
-        />
-      </button>
-
-      {open && item.subItems && (
-        <div className="ml-9 border-l border-white/15 pl-3">
-          {item.subItems.map((sub) => (
-            <button
-              key={sub.href}
-              type="button"
-              onClick={() => onNavigate?.(sub.href)}
+    <Accordion
+      value={open ? [item.href] : []}
+      onValueChange={(values) => setOpen(values.length > 0)}
+    >
+      <AccordionItem className="border-none" value={item.href}>
+        <AccordionPrimitive.Header className="flex">
+          <AccordionPrimitive.Trigger
+            className={cn(
+              "group flex h-auto w-full items-center 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 &&
+                "bg-white/15 text-brand-secondary-foreground border-primary",
+            )}
+          >
+            <Icon
+              className={navIconCn(hasActiveChild)}
+              size={24}
+              strokeWidth={1.75}
+            />
+            <span className="flex-1 truncate text-left">{item.title}</span>
+            <ChevronDown
               className={cn(
-                "flex w-full items-center 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",
+                "ml-auto shrink-0 text-brand-secondary-foreground/40 transition-transform duration-200",
+                "group-data-[panel-open]:rotate-180",
               )}
-            >
-              <ChevronRight
-                size={11}
-                strokeWidth={2}
-                className={cn(
-                  "shrink-0",
-                  sub.isActive
-                    ? "text-primary"
-                    : "text-brand-secondary-foreground/30",
-                )}
-              />
-              <span className="truncate">{sub.title}</span>
-            </button>
-          ))}
-        </div>
-      )}
-    </div>
+              size={14}
+              strokeWidth={2}
+            />
+          </AccordionPrimitive.Trigger>
+        </AccordionPrimitive.Header>
+
+        {item.subItems && (
+          <AccordionContent className="p-0 text-inherit">
+            <div className="ml-9 border-l border-white/15 pl-3">
+              {item.subItems.map((sub) => (
+                <Button
+                  key={sub.href}
+                  type="button"
+                  variant="ghost"
+                  onClick={() => onNavigate?.(sub.href)}
+                  className={cn(
+                    "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",
+                  )}
+                >
+                  <ChevronRight
+                    size={11}
+                    strokeWidth={2}
+                    className={cn(
+                      "shrink-0",
+                      sub.isActive
+                        ? "text-primary"
+                        : "text-brand-secondary-foreground/30",
+                    )}
+                  />
+                  <span className="truncate">{sub.title}</span>
+                </Button>
+              ))}
+            </div>
+          </AccordionContent>
+        )}
+      </AccordionItem>
+    </Accordion>
   );
 }
 
@@ -357,6 +357,27 @@ export function SidebarNav({
   className,
 }: SidebarNavProps) {
   const [userMenuOpen, setUserMenuOpen] = React.useState(false);
+  const navScrollRef = React.useRef<HTMLDivElement>(null);
+  const expandedScrollRef = React.useRef(0);
+
+  React.useEffect(() => {
+    if (collapsed) setUserMenuOpen(false);
+  }, [collapsed]);
+
+  // Preserve nav items scroll position across collapse/expand transitions.
+  // Cleanup saves scrollTop before the DOM changes; setup restores it when expanding.
+  React.useLayoutEffect(() => {
+    const nav = navScrollRef.current;
+    if (!nav) return;
+    if (!collapsed) {
+      nav.scrollTop = expandedScrollRef.current;
+    }
+    return () => {
+      if (!collapsed && nav) {
+        expandedScrollRef.current = nav.scrollTop;
+      }
+    };
+  }, [collapsed]);
 
   return (
     <TooltipProvider>
@@ -364,100 +385,134 @@ 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,
         )}
       >
-        {/* Logo */}
-        {!collapsed && logo && (
-          <div className="flex items-center border-b border-white/15 px-5 py-4">
-            <img
-              src={logo}
-              alt="Logo"
-              className="h-8 w-auto object-contain object-left"
-              style={{ filter: "brightness(0) invert(1)" }}
-            />
+        {/* Logo — crossfade between full and icon variant */}
+        {(logo || logoCollapsed) && (
+          <div className="relative flex items-center border-b border-white/15 py-4 overflow-hidden">
+            {logo && (
+              <img
+                src={logo}
+                alt="Logo"
+                className={cn(
+                  "h-8 w-auto object-contain object-left px-5 transition-opacity duration-200",
+                  collapsed ? "opacity-0" : "opacity-100",
+                )}
+                style={{ filter: "brightness(0) invert(1)" }}
+              />
+            )}
+            {logoCollapsed && (
+              <img
+                src={logoCollapsed}
+                alt="Logo"
+                className={cn(
+                  "absolute inset-y-0 left-0 right-0 m-auto h-8 w-8 object-contain transition-opacity duration-200",
+                  collapsed ? "opacity-100" : "opacity-0",
+                )}
+                style={{ filter: "brightness(0) invert(1)" }}
+              />
+            )}
           </div>
         )}
-        {collapsed && logoCollapsed && (
-          <div className="flex items-center justify-center border-b border-white/15 py-4">
-            <img
-              src={logoCollapsed}
-              alt="Logo"
-              className="h-8 w-8 object-contain"
-              style={{ filter: "brightness(0) invert(1)" }}
-            />
+
+        {/* User section — crossfade between expanded and collapsed */}
+        <div className="relative border-b border-white/15">
+          {/* Expanded — in flow (defines height), no transition (overlay handles it) */}
+          <div
+            className={cn(
+              collapsed ? "opacity-0 pointer-events-none" : "opacity-100",
+            )}
+          >
+            <Accordion
+              value={userMenuOpen ? ["user-menu"] : []}
+              onValueChange={(values) => setUserMenuOpen(values.length > 0)}
+            >
+              <AccordionItem className="border-none" value="user-menu">
+                <AccordionPrimitive.Header className="flex">
+                  <AccordionPrimitive.Trigger
+                    className={cn(
+                      "group flex h-auto w-full items-center justify-start gap-3 px-5 py-5 text-base transition-colors",
+                      "text-brand-secondary-foreground hover:bg-white/10",
+                    )}
+                  >
+                    <div className="flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground">
+                      {getInitials(userName)}
+                    </div>
+                    <span className="flex-1 truncate text-left font-medium text-brand-secondary-foreground">
+                      {userName}
+                    </span>
+                    <ChevronDown
+                      className="ml-auto shrink-0 text-brand-secondary-foreground/50 transition-transform duration-200 group-data-[panel-open]:rotate-180"
+                      size={16}
+                      strokeWidth={2}
+                    />
+                  </AccordionPrimitive.Trigger>
+                </AccordionPrimitive.Header>
+
+                <AccordionContent className="p-0 text-inherit">
+                  <div className="border-t border-white/15 bg-black/20">
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      onClick={onLogout}
+                      className={cn(
+                        "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",
+                      )}
+                    >
+                      <LogOut
+                        size={16}
+                        strokeWidth={1.75}
+                        className="shrink-0 text-destructive"
+                      />
+                      <span>Logout</span>
+                    </Button>
+                  </div>
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
-        )}
 
-        {/* User section */}
-        <div className="border-b border-white/15">
+          {/* Collapsed — absolute overlay, centered avatar */}
           <NavTooltip label={userName} collapsed={collapsed}>
-            <button
-              type="button"
-              onClick={() => !collapsed && setUserMenuOpen((prev) => !prev)}
+            <div
               className={cn(
-                "group flex w-full items-center 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",
+                "absolute inset-0 flex items-center justify-center transition-opacity duration-200",
+                collapsed ? "opacity-100" : "opacity-0 pointer-events-none",
               )}
             >
               <div className="flex h-8 w-8 shrink-0 items-center justify-center font-semibold text-xs bg-primary text-primary-foreground">
                 {getInitials(userName)}
               </div>
-              {!collapsed && (
-                <>
-                  <span className="flex-1 truncate text-left font-medium text-brand-secondary-foreground">
-                    {userName}
-                  </span>
-                  <ChevronDown
-                    className={cn(
-                      "shrink-0 text-brand-secondary-foreground/50 transition-transform duration-200",
-                      userMenuOpen && "rotate-180",
-                    )}
-                    size={16}
-                    strokeWidth={2}
-                  />
-                </>
-              )}
-            </button>
-          </NavTooltip>
-
-          {/* Logout dropdown */}
-          {!collapsed && userMenuOpen && (
-            <div className="border-t border-white/15 bg-black/20">
-              <button
-                type="button"
-                onClick={onLogout}
-                className={cn(
-                  "flex w-full items-center gap-3 px-5 py-3 text-base",
-                  "text-brand-secondary-foreground/70 hover:bg-white/10 hover:text-brand-secondary-foreground transition-colors",
-                )}
-              >
-                <LogOut
-                  size={16}
-                  strokeWidth={1.75}
-                  className="shrink-0 text-destructive"
-                />
-                <span>Logout</span>
-              </button>
             </div>
-          )}
+          </NavTooltip>
         </div>
 
-        {/* Financial metrics (Frontend sidebar only, hidden when collapsed) */}
-        {!collapsed && !!metricsGroups?.length && (
-          <div>
-            {metricsGroups.map((group, i) => (
-              <MetricsGroup key={i} group={group} />
-            ))}
-          </div>
+        {/* Financial metrics — animated in/out with sidebar collapse to prevent nav items jumping */}
+        {!!metricsGroups?.length && (
+          <Accordion
+            value={!collapsed ? ["metrics"] : []}
+            onValueChange={() => {}}
+          >
+            <AccordionItem className="border-none" value="metrics">
+              <AccordionContent className="p-0 text-inherit">
+                {metricsGroups.map((group, i) => (
+                  <MetricsGroup key={i} group={group} />
+                ))}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
         )}
 
         {/* Nav items */}
-        <div className="flex flex-col overflow-y-auto py-3">
+        <div ref={navScrollRef} className="flex flex-col overflow-y-auto py-3">
           {items.map((item) =>
             item.isCollapsible ? (
               <CollapsibleNavItem
@@ -484,30 +539,31 @@ 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-12 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",
                 )}
               >
                 {collapsed ? (
                   <PanelLeftOpen
-                    size={18}
+                    size={24}
                     strokeWidth={1.75}
                     className="shrink-0"
                   />
                 ) : (
                   <PanelLeftClose
-                    size={18}
+                    size={24}
                     strokeWidth={1.75}
                     className="shrink-0"
                   />
                 )}
                 {!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">

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