@wealthx/shadcn 1.2.2 → 1.3.0

package/src/components/ui/borrowing-capacity-line-chart.tsx

@@ -25,6 +25,7 @@ import {
   ChartLegendItem,
   formatAbbrev,
 } from "./chart-shared";
+import { formatCurrency } from "@/lib/format-currency";
 
 ChartJS.register(
   CategoryScale,
@@ -123,14 +124,6 @@ const DASH_PATTERN: number[] = [6, 4];
 // Helpers
 // ---------------------------------------------------------------------------
 
-function formatCurrencyFull(dollars: number): string {
-  return new Intl.NumberFormat("en-AU", {
-    style: "currency",
-    currency: "AUD",
-    maximumFractionDigits: 0,
-  }).format(dollars);
-}
-
 /** "2025-01" or "2025-01-15" → "Jan '25" for x-axis ticks */
 function formatDateLabel(iso: string): string {
   const d = new Date(`${iso.slice(0, 7)}-01T00:00:00`);
@@ -246,7 +239,7 @@ export function BorrowingCapacityLineChart({
             },
             label: (ctx) => {
               const dollars = ctx.parsed.y ?? 0;
-              return ` ${ctx.dataset.label}: ${formatCurrencyFull(dollars)}`;
+              return ` ${ctx.dataset.label}: ${formatCurrency(dollars)}`;
             },
           },
         },
@@ -319,12 +312,12 @@ export function BorrowingCapacityLineChart({
     >
       <CardHeader className="px-3 sm:px-6">
         <div className="flex items-start justify-between gap-4">
-          <CardTitle className="text-sm sm:text-base uppercase tracking-wider">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wide">
             {title}
           </CardTitle>
           {kpiValue != null && (
             <span className="shrink-0 text-xl font-bold tabular-nums">
-              {formatCurrencyFull(kpiValue / 100)}
+              {formatCurrency(kpiValue / 100)}
             </span>
           )}
         </div>

package/src/components/ui/button.tsx

@@ -23,13 +23,13 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
         outline:
-          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground focus-visible:ring-border/50 dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
         "outline-primary":
           "border border-primary text-foreground bg-transparent shadow-xs hover:bg-primary/5 focus-visible:ring-primary/50",
         "outline-secondary":
           "border border-brand-secondary text-brand-secondary bg-transparent shadow-xs hover:bg-brand-secondary/10 focus-visible:ring-brand-secondary/30",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground hover:shadow-xs dark:hover:bg-accent/50",
+          "hover:bg-accent hover:text-accent-foreground hover:shadow-xs focus-visible:ring-border/50 dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {

package/src/components/ui/card.tsx

@@ -23,7 +23,7 @@ function CardHeader({ className, ...props }: CardHeaderProps): ReactElement {
   return (
     <div
       className={cn(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-center gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         className,
       )}
       data-slot="card-header"

package/src/components/ui/cash-balance-line-chart.tsx

@@ -21,7 +21,9 @@ import {
   FALLBACK_PRIMARY,
   FALLBACK_BG,
   ChartLegendItem,
+  formatAbbrev,
 } from "./chart-shared";
+import { formatCurrency } from "@/lib/format-currency";
 
 ChartJS.register(
   CategoryScale,
@@ -36,27 +38,6 @@ ChartJS.register(
 // Helpers
 // ---------------------------------------------------------------------------
 
-/** Abbreviate a dollar value: $1.2K, $4.5M, $1.1B */
-function formatAbbrev(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(1)}K`;
-  return `${sign}$${abs.toFixed(0)}`;
-}
-
-/** Format a balance value for prominent display: $12,345.67 */
-function formatBalanceFull(value: number): string {
-  const abs = Math.abs(value);
-  const sign = value < 0 ? "-" : "";
-  return `${sign}$${abs.toLocaleString(undefined, {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2,
-  })}`;
-}
-
 /** Format ISO date string to "MMM dd" label e.g. "Jan 15" */
 function formatDateLabel(iso: string): string {
   const d = new Date(iso);
@@ -244,12 +225,12 @@ export function CashBalanceLineChart({
     >
       <CardHeader className="px-3 sm:px-6">
         <div className="flex flex-col gap-0.5">
-          <CardTitle className="text-sm sm:text-base uppercase tracking-wider">
+          <CardTitle className="text-xs font-semibold uppercase tracking-wide">
             {title}
           </CardTitle>
           {showBalanceValue && latestValue !== null && (
             <p className="text-2xl font-bold tabular-nums leading-tight">
-              {formatBalanceFull(latestValue)}
+              {formatCurrency(latestValue, { decimals: 2 })}
             </p>
           )}
         </div>

package/src/components/ui/cashflow-bar-chart.tsx

@@ -25,7 +25,14 @@ import {
   ChartPeriodButton,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+  Legend,
+);
 
 // ---------------------------------------------------------------------------
 // Types
@@ -313,7 +320,7 @@ export function CashflowBarChart({
       style={{ maxWidth: width, fontFamily }}
     >
       <CardHeader className="px-3 sm:px-6">
-        <CardTitle className="text-sm sm:text-base uppercase tracking-wider">
+        <CardTitle className="text-xs font-semibold uppercase tracking-wide">
           {title}
         </CardTitle>
         {showPeriodSelector && (

package/src/components/ui/chart-shared.tsx

@@ -90,18 +90,11 @@ export const SEVERITY_COLORS = {
 } as const;
 
 /**
- * Format a dollar amount as an abbreviated string for chart axis ticks.
- * e.g. 1_200_000 → "$1.2M", 580_000 → "$580K", -250_000 → "-$250K"
+ * Re-export abbreviated currency formatter from shared lib.
+ * Kept as `formatAbbrev` for backward compatibility with existing chart consumers.
  */
-export function formatAbbrev(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)}`;
-}
+import { formatCurrencyAbbrev as formatAbbrev } from "@/lib/format-currency";
+export { formatAbbrev };
 
 // ---------------------------------------------------------------------------
 // Tooltip date format

package/src/components/ui/chip.tsx

@@ -7,19 +7,19 @@
 //   <Chip>Label</Chip>
 //   <Chip onRemove={() => handleRemove(id)}>Label</Chip>
 //   <Chip variant="outline" disabled onRemove={...}>Label</Chip>
-import { type ReactElement } from "react"
-import * as React from "react"
-import { X } from "lucide-react"
-import type { VariantProps } from "class-variance-authority"
-import { cn } from "@/lib/utils"
-import { badgeVariants } from "@/components/ui/badge"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { X } from "lucide-react";
+import { Button } from "./button";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+import { badgeVariants } from "@/components/ui/badge";
 
 export interface ChipProps
-  extends React.ComponentProps<"span">,
-    VariantProps<typeof badgeVariants> {
+  extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {
   /** When provided, renders a dismiss (×) button inside the chip. */
-  onRemove?: () => void
-  disabled?: boolean
+  onRemove?: () => void;
+  disabled?: boolean;
 }
 
 function Chip({
@@ -38,28 +38,32 @@ function Chip({
         // extra right padding only when dismiss button is present
         onRemove && "pr-1",
         disabled && "pointer-events-none opacity-50",
-        className
+        className,
       )}
       data-slot="chip"
       data-variant={variant}
       {...props}
     >
       {children}
-      {onRemove ? <button
+      {onRemove ? (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
           aria-label="Remove"
-          className="ml-0.5 inline-flex shrink-0 items-center justify-center rounded-full p-0.5 opacity-60 hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none"
+          className="ml-0.5 size-4 shrink-0 rounded-full p-0.5 opacity-60 hover:opacity-100 disabled:pointer-events-none"
           data-slot="chip-remove"
           disabled={disabled}
           onClick={(e) => {
-            e.stopPropagation()
-            onRemove()
+            e.stopPropagation();
+            onRemove();
           }}
-          type="button"
         >
           <X className="size-3" />
-        </button> : null}
+        </Button>
+      ) : null}
     </span>
-  )
+  );
 }
 
-export { Chip }
+export { Chip };

package/src/components/ui/color-picker.tsx

@@ -6,6 +6,7 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 
 /**
  * ColorPicker — WealthX Design System
@@ -93,14 +94,15 @@ function ColorSwatch({
   className,
 }: ColorSwatchProps) {
   return (
-    <button
+    <Button
       type="button"
+      variant="ghost"
       title={color}
       aria-label={`Select color ${color}`}
       aria-pressed={selected}
       onClick={() => onClick?.(color)}
       className={cn(
-        "relative shrink-0 transition-all outline-none shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
+        "relative shrink-0 p-0 transition-all outline-none shadow-[inset_0_0_0_1px_rgba(0,0,0,0.12)]",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
         size === "md" ? "size-7" : "size-5",
         selected &&

package/src/components/ui/data-table.tsx

@@ -35,10 +35,6 @@ import {
   ArrowUpDown,
   ArrowUp,
   ArrowDown,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
   SlidersHorizontal,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -60,6 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { PaginationNavButtons } from "@/components/ui/pagination";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -291,32 +288,30 @@ function DataTablePagination<TData>({
 }): ReactElement {
   return (
     <div
-      className="flex items-center justify-between gap-4 py-4"
+      className="flex items-center gap-4 py-4"
       data-slot="data-table-pagination"
     >
-      {/* Selected rows info */}
-      <p className="text-body-small text-muted-foreground">
-        {table.getFilteredSelectedRowModel().rows.length > 0 && (
-          <>
-            {table.getFilteredSelectedRowModel().rows.length} of{" "}
-            {table.getFilteredRowModel().rows.length} row(s) selected.
-          </>
-        )}
-      </p>
+      {table.getFilteredSelectedRowModel().rows.length > 0 && (
+        <span className="text-body-small text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </span>
+      )}
 
-      <div className="flex items-center gap-6">
-        {/* Page size selector */}
+      <div className="ml-auto flex items-center gap-6">
         <div className="flex items-center gap-2">
-          <p className="text-body-small text-muted-foreground whitespace-nowrap">
+          <span className="text-body-small text-muted-foreground whitespace-nowrap">
             Rows per page
-          </p>
+          </span>
           <Select
-            onValueChange={(value) => {
-              table.setPageSize(Number(value));
-            }}
+            onValueChange={(value) => table.setPageSize(Number(value))}
             value={`${table.getState().pagination.pageSize}`}
           >
-            <SelectTrigger className="w-[70px]" size="sm">
+            <SelectTrigger
+              aria-label="Rows per page"
+              className="w-[70px]"
+              size="sm"
+            >
               <SelectValue
                 placeholder={`${table.getState().pagination.pageSize}`}
               />
@@ -331,59 +326,19 @@ function DataTablePagination<TData>({
           </Select>
         </div>
 
-        {/* Page info */}
-        <p className="text-body-small text-muted-foreground whitespace-nowrap">
+        <span className="text-body-small text-muted-foreground whitespace-nowrap">
           Page {table.getState().pagination.pageIndex + 1} of{" "}
           {table.getPageCount()}
-        </p>
+        </span>
 
-        {/* Page navigation */}
-        <div className="flex items-center gap-1">
-          <Button
-            aria-label="Go to first page"
-            disabled={!table.getCanPreviousPage()}
-            onClick={() => {
-              table.setPageIndex(0);
-            }}
-            size="icon-sm"
-            variant="outline"
-          >
-            <ChevronsLeftIcon className="size-4" />
-          </Button>
-          <Button
-            aria-label="Go to previous page"
-            disabled={!table.getCanPreviousPage()}
-            onClick={() => {
-              table.previousPage();
-            }}
-            size="icon-sm"
-            variant="outline"
-          >
-            <ChevronLeftIcon className="size-4" />
-          </Button>
-          <Button
-            aria-label="Go to next page"
-            disabled={!table.getCanNextPage()}
-            onClick={() => {
-              table.nextPage();
-            }}
-            size="icon-sm"
-            variant="outline"
-          >
-            <ChevronRightIcon className="size-4" />
-          </Button>
-          <Button
-            aria-label="Go to last page"
-            disabled={!table.getCanNextPage()}
-            onClick={() => {
-              table.setPageIndex(table.getPageCount() - 1);
-            }}
-            size="icon-sm"
-            variant="outline"
-          >
-            <ChevronsRightIcon className="size-4" />
-          </Button>
-        </div>
+        <PaginationNavButtons
+          hasNext={table.getCanNextPage()}
+          hasPrev={table.getCanPreviousPage()}
+          onFirst={() => table.setPageIndex(0)}
+          onLast={() => table.setPageIndex(table.getPageCount() - 1)}
+          onNext={() => table.nextPage()}
+          onPrev={() => table.previousPage()}
+        />
       </div>
     </div>
   );
@@ -494,8 +449,7 @@ function DataTable<TData, TValue>({
     onColumnFiltersChange: (updater) => {
       const next =
         typeof updater === "function" ? updater(columnFilters) : updater;
-      if (controlledColumnFilters === undefined)
-        setInternalColumnFilters(next);
+      if (controlledColumnFilters === undefined) setInternalColumnFilters(next);
       onColumnFiltersChangeProp?.(next);
     },
     onPaginationChange: (updater) => {

package/src/components/ui/date-picker.tsx

@@ -1,15 +1,16 @@
-import { type ReactElement } from "react"
-import * as React from "react"
-import { format } from "date-fns"
-import { CalendarIcon } from "lucide-react"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Calendar } from "@/components/ui/calendar"
+import { type ReactElement } from "react";
+import * as React from "react";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Calendar } from "@/components/ui/calendar";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from "@/components/ui/popover";
 
 /**
  * DatePicker — WealthX Design System
@@ -22,18 +23,18 @@ import {
  */
 
 export interface DatePickerProps {
-  value?: Date
-  onChange?: (date: Date | undefined) => void
-  placeholder?: string
+  value?: Date;
+  onChange?: (date: Date | undefined) => void;
+  placeholder?: string;
   /** Show a time input below the calendar */
-  showTimePicker?: boolean
-  disabled?: boolean
-  className?: string
+  showTimePicker?: boolean;
+  disabled?: boolean;
+  className?: string;
   /** Passed through to Calendar (e.g. fromYear, toYear, captionLayout) */
   calendarProps?: Omit<
     React.ComponentProps<typeof Calendar>,
     "mode" | "selected" | "onSelect"
-  >
+  >;
 }
 
 function DatePicker({
@@ -45,37 +46,37 @@ function DatePicker({
   className,
   calendarProps,
 }: DatePickerProps): ReactElement {
-  const [open, setOpen] = React.useState(false)
+  const [open, setOpen] = React.useState(false);
 
   function handleDaySelect(day: Date | undefined): void {
     if (!day) {
-      onChange?.(undefined)
-      return
+      onChange?.(undefined);
+      return;
     }
     // Preserve existing time when selecting a new day
     if (showTimePicker && value) {
-      day.setHours(value.getHours(), value.getMinutes())
+      day.setHours(value.getHours(), value.getMinutes());
     }
-    onChange?.(day)
-    if (!showTimePicker) setOpen(false)
+    onChange?.(day);
+    if (!showTimePicker) setOpen(false);
   }
 
   function handleTimeChange(e: React.ChangeEvent<HTMLInputElement>): void {
-    const [hours, minutes] = e.target.value.split(":").map(Number)
-    const next = value ? new Date(value) : new Date()
-    next.setHours(hours, minutes, 0, 0)
-    onChange?.(next)
+    const [hours, minutes] = e.target.value.split(":").map(Number);
+    const next = value ? new Date(value) : new Date();
+    next.setHours(hours, minutes, 0, 0);
+    onChange?.(next);
   }
 
   const timeValue = value
     ? `${String(value.getHours()).padStart(2, "0")}:${String(value.getMinutes()).padStart(2, "0")}`
-    : ""
+    : "";
 
-  let displayValue: string | undefined
+  let displayValue: string | undefined;
   if (value && showTimePicker) {
-    displayValue = format(value, "dd/MM/yyyy HH:mm")
+    displayValue = format(value, "dd/MM/yyyy HH:mm");
   } else if (value) {
-    displayValue = format(value, "dd/MM/yyyy")
+    displayValue = format(value, "dd/MM/yyyy");
   }
 
   return (
@@ -85,7 +86,9 @@ function DatePicker({
           <Button
             className={cn(
               "w-full justify-start rounded-none font-normal data-[empty=true]:text-muted-foreground",
-              className
+              // Show open/focus state when the popover is expanded
+              "aria-expanded:border-ring aria-expanded:ring-2 aria-expanded:ring-ring/20",
+              className,
             )}
             data-empty={!value}
             data-slot="date-picker-trigger"
@@ -109,23 +112,25 @@ function DatePicker({
           {...calendarProps}
           className={cn(
             "rounded-none border-0 shadow-none",
-            calendarProps?.className
+            calendarProps?.className,
           )}
         />
-        {showTimePicker ? <div className="border-t border-border px-3 pb-3 pt-2">
+        {showTimePicker ? (
+          <div className="border-t border-border px-3 pb-3 pt-2">
             <label className="mb-1.5 block text-xs font-medium text-muted-foreground">
               Time
-              <input
-                className="mt-1.5 h-8 w-full rounded-none border border-input bg-transparent px-2 text-sm font-sans outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50"
+              <Input
+                className="mt-1.5 h-8"
                 onChange={handleTimeChange}
                 type="time"
                 value={timeValue}
               />
             </label>
-          </div> : null}
+          </div>
+        ) : null}
       </PopoverContent>
     </Popover>
-  )
+  );
 }
 
-export { DatePicker }
+export { DatePicker };