@wealthx/shadcn 1.2.1 → 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

@@ -0,0 +1,309 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+/**
+ * ColorPicker — WealthX Design System
+ *
+ * Popover-based color picker with preset swatches and a hex input field.
+ * Designed for tenant white-label brand color configuration.
+ *
+ * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn
+ */
+
+// ---------------------------------------------------------------------------
+// Preset palettes
+// ---------------------------------------------------------------------------
+
+export const COLOR_PICKER_PRESETS = [
+  // Blues
+  "#1E40AF",
+  "#2563EB",
+  "#3B82F6",
+  "#60A5FA",
+  // Purples
+  "#7C3AED",
+  "#8B5CF6",
+  "#A78BFA",
+  "#C4B5FD",
+  // Greens
+  "#15803D",
+  "#16A34A",
+  "#22C55E",
+  "#4ADE80",
+  // Reds
+  "#B91C1C",
+  "#DC2626",
+  "#EF4444",
+  "#F87171",
+  // Oranges
+  "#C2410C",
+  "#EA580C",
+  "#F97316",
+  "#FB923C",
+  // Teals
+  "#0F766E",
+  "#0D9488",
+  "#14B8A6",
+  "#2DD4BF",
+  // Neutrals
+  "#111827",
+  "#374151",
+  "#6B7280",
+  "#D1D5DB",
+];
+
+// ---------------------------------------------------------------------------
+// Utility
+// ---------------------------------------------------------------------------
+
+/** Returns true if the string is a valid 6-digit or 3-digit hex color. */
+function isValidHex(value: string): boolean {
+  return /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(value);
+}
+
+/** Ensures value always has a leading `#`. */
+function normalizeHex(value: string): string {
+  const stripped = value.replace(/^#/, "");
+  return `#${stripped}`;
+}
+
+// ---------------------------------------------------------------------------
+// ColorSwatch
+// ---------------------------------------------------------------------------
+
+interface ColorSwatchProps {
+  color: string;
+  selected?: boolean;
+  size?: "sm" | "md";
+  onClick?: (color: string) => void;
+  className?: string;
+}
+
+function ColorSwatch({
+  color,
+  selected,
+  size = "md",
+  onClick,
+  className,
+}: ColorSwatchProps) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      title={color}
+      aria-label={`Select color ${color}`}
+      aria-pressed={selected}
+      onClick={() => onClick?.(color)}
+      className={cn(
+        "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 &&
+          "ring-2 ring-foreground ring-offset-1 ring-offset-background",
+        className,
+      )}
+      style={{ backgroundColor: color }}
+    />
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ColorPickerContent (inner panel shown in popover)
+// ---------------------------------------------------------------------------
+
+interface ColorPickerContentProps {
+  value: string;
+  onChange: (color: string) => void;
+  presets?: string[];
+}
+
+function ColorPickerContent({
+  value,
+  onChange,
+  presets = COLOR_PICKER_PRESETS,
+}: ColorPickerContentProps) {
+  const [hexInput, setHexInput] = React.useState(value);
+
+  React.useEffect(() => {
+    setHexInput(value);
+  }, [value]);
+
+  function handleHexInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const raw = e.target.value;
+    setHexInput(raw);
+    const normalized = normalizeHex(raw);
+    if (isValidHex(normalized)) {
+      onChange(normalized);
+    }
+  }
+
+  function handleHexBlur() {
+    const normalized = normalizeHex(hexInput);
+    if (isValidHex(normalized)) {
+      setHexInput(normalized);
+      if (normalized !== value) onChange(normalized);
+    } else {
+      setHexInput(value);
+    }
+  }
+
+  const normalizedInput = normalizeHex(hexInput);
+  const isValid = isValidHex(normalizedInput);
+
+  return (
+    <div data-slot="color-picker-content" className="flex flex-col gap-4">
+      <div>
+        <p className="mb-2 text-xs font-medium text-muted-foreground">
+          Presets
+        </p>
+        <div className="grid grid-cols-7 gap-1.5">
+          {presets.map((color) => (
+            <ColorSwatch
+              key={color}
+              color={color}
+              selected={value.toLowerCase() === color.toLowerCase()}
+              onClick={onChange}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <p className="mb-2 text-xs font-medium text-muted-foreground">
+          Custom hex
+        </p>
+        <div className="flex items-center gap-2">
+          <label
+            className="relative size-9 shrink-0 cursor-pointer border border-border"
+            title="Open color picker"
+            style={{
+              backgroundColor: isValid ? normalizedInput : value,
+            }}
+          >
+            <input
+              type="color"
+              aria-label="Native color picker"
+              value={isValid ? normalizedInput : value}
+              onChange={(e) => {
+                setHexInput(e.target.value);
+                onChange(e.target.value);
+              }}
+              className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
+            />
+          </label>
+          <Input
+            aria-label="Hex color value"
+            placeholder="#000000"
+            value={hexInput}
+            onChange={handleHexInputChange}
+            onBlur={handleHexBlur}
+            maxLength={7}
+            className="h-9 flex-1 font-mono text-sm uppercase"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// ColorPicker (popover trigger + content)
+// ---------------------------------------------------------------------------
+
+interface ColorPickerProps {
+  /** The current color value (hex string, e.g. `"#3B82F6"`). */
+  value?: string;
+  /** Default value when uncontrolled. */
+  defaultValue?: string;
+  /** Called whenever the selected color changes. */
+  onChange?: (color: string) => void;
+  /** Preset colors shown in the swatch grid. Defaults to `COLOR_PICKER_PRESETS`. */
+  presets?: string[];
+  /** Disable the picker. */
+  disabled?: boolean;
+  /** Optional label shown above the trigger. */
+  label?: string;
+  className?: string;
+}
+
+function ColorPicker({
+  value: controlledValue,
+  defaultValue = "#3B82F6",
+  onChange,
+  presets,
+  disabled,
+  label,
+  className,
+}: ColorPickerProps) {
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const color = isControlled ? controlledValue : internalValue;
+  const [open, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+
+  function handleChange(newColor: string) {
+    if (!isControlled) setInternalValue(newColor);
+    onChange?.(newColor);
+  }
+
+  return (
+    <div
+      data-slot="color-picker"
+      className={cn("inline-flex flex-col gap-1.5 font-sans", className)}
+    >
+      {label && (
+        <span className="text-sm font-medium text-foreground">{label}</span>
+      )}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger
+          disabled={disabled}
+          className={cn(
+            "flex h-9 min-w-[140px] cursor-pointer items-center gap-2.5 border border-input bg-background px-3 text-sm outline-none transition-colors",
+            "hover:border-ring",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+        >
+          <span
+            aria-hidden
+            className="size-5 shrink-0 border border-border/50"
+            style={{ backgroundColor: color }}
+          />
+          <span className="font-mono text-xs uppercase tracking-wide">
+            {color}
+          </span>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-[220px] p-4"
+          align="start"
+          data-shadcn-scope
+        >
+          <ColorPickerContent
+            value={color}
+            onChange={handleChange}
+            presets={presets}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
+
+export {
+  ColorPicker,
+  ColorPickerContent,
+  ColorSwatch,
+  isValidHex,
+  normalizeHex,
+};
+export type { ColorPickerProps, ColorPickerContentProps, ColorSwatchProps };