@wealthx/shadcn 1.2.0 → 1.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wealthx/shadcn",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./src/index.ts",
@@ -248,6 +248,11 @@
       "import": "./dist/components/ui/chip.mjs",
       "require": "./dist/components/ui/chip.js"
     },
+    "./color-picker": {
+      "types": "./src/components/ui/color-picker.tsx",
+      "import": "./dist/components/ui/color-picker.mjs",
+      "require": "./dist/components/ui/color-picker.js"
+    },
     "./combobox": {
       "types": "./src/components/ui/combobox.tsx",
       "import": "./dist/components/ui/combobox.mjs",
@@ -413,6 +418,11 @@
       "import": "./dist/components/ui/stage-timeline.mjs",
       "require": "./dist/components/ui/stage-timeline.js"
     },
+    "./stepper": {
+      "types": "./src/components/ui/stepper.tsx",
+      "import": "./dist/components/ui/stepper.mjs",
+      "require": "./dist/components/ui/stepper.js"
+    },
     "./ai-assistant-drawer": {
       "types": "./src/components/ui/ai-assistant-drawer.tsx",
       "import": "./dist/components/ui/ai-assistant-drawer.mjs",
@@ -432,6 +442,11 @@
       "types": "./src/components/ui/opportunity-summary-tab.tsx",
       "import": "./dist/components/ui/opportunity-summary-tab.mjs",
       "require": "./dist/components/ui/opportunity-summary-tab.js"
+    },
+    "./sidebar-nav": {
+      "types": "./src/components/ui/sidebar-nav.tsx",
+      "import": "./dist/components/ui/sidebar-nav.mjs",
+      "require": "./dist/components/ui/sidebar-nav.js"
     }
   }
 }

package/src/components/index.tsx

@@ -153,6 +153,20 @@ export type { CheckboxProps, CheckboxCardProps } from "./ui/checkbox";
 export { Chip } from "./ui/chip";
 export type { ChipProps } from "./ui/chip";
 
+export {
+  ColorPicker,
+  ColorPickerContent,
+  ColorSwatch,
+  COLOR_PICKER_PRESETS,
+  isValidHex,
+  normalizeHex,
+} from "./ui/color-picker";
+export type {
+  ColorPickerProps,
+  ColorPickerContentProps,
+  ColorSwatchProps,
+} from "./ui/color-picker";
+
 export {
   Combobox,
   ComboboxTrigger,
@@ -191,6 +205,7 @@ export {
 export type {
   DataTableProps,
   ColumnDef,
+  PaginationState,
   SortingState,
   ColumnFiltersState,
   VisibilityState,
@@ -639,6 +654,15 @@ export type {
 export { Separator } from "./ui/separator";
 export type { SeparatorProps } from "./ui/separator";
 
+export { SidebarNav } from "./ui/sidebar-nav";
+export type {
+  SidebarNavProps,
+  SidebarNavSubItem,
+  SidebarNavItem,
+  SidebarNavMetricItem,
+  SidebarNavMetricsGroup,
+} from "./ui/sidebar-nav";
+
 export {
   Sheet,
   SheetClose,
@@ -680,6 +704,23 @@ export type {
   StageTimelineTask,
 } from "./ui/stage-timeline";
 
+export {
+  Stepper,
+  Step,
+  StepIndicator,
+  StepLabel,
+  StepContent,
+  StepItem,
+} from "./ui/stepper";
+export type {
+  StepperProps,
+  StepProps,
+  StepIndicatorProps,
+  StepLabelProps,
+  StepContentProps,
+  StepItemProps,
+} from "./ui/stepper";
+
 export { Switch, SwitchCard } from "./ui/switch";
 export type { SwitchProps, SwitchCardProps } from "./ui/switch";
 

package/src/components/ui/backoffice-alert-history-chart.tsx

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   type ChartOptions,
@@ -24,7 +25,7 @@ import {
   ChartPeriodButton,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
 
 // ---------------------------------------------------------------------------
 // Types

package/src/components/ui/backoffice-contact-history-chart.tsx

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   type ChartOptions,
@@ -25,7 +26,7 @@ import {
   ChartPeriodButton,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip);
 
 // ---------------------------------------------------------------------------
 // Types

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

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  LineController,
   LineElement,
   PointElement,
   Tooltip,
@@ -28,6 +29,7 @@ import {
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  LineController,
   LineElement,
   PointElement,
   Tooltip,

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

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  LineController,
   LineElement,
   PointElement,
   Tooltip,
@@ -25,6 +26,7 @@ import {
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  LineController,
   LineElement,
   PointElement,
   Tooltip,

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

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   Legend,
@@ -24,7 +25,7 @@ import {
   ChartPeriodButton,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
 
 // ---------------------------------------------------------------------------
 // Types

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

@@ -0,0 +1,307 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+
+/**
+ * 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"
+      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)]",
+        "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 };

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

@@ -19,6 +19,7 @@ import * as React from "react";
 import {
   type ColumnDef,
   type ColumnFiltersState,
+  type PaginationState,
   type SortingState,
   type VisibilityState,
   type RowSelectionState,
@@ -74,7 +75,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 // Types
 // ---------------------------------------------------------------------------
 
-export interface DataTableProps<TData, TValue> {
+interface DataTableProps<TData, TValue> {
   /** Column definitions — pass ColumnDef[] from \@tanstack/react-table */
   columns: ColumnDef<TData, TValue>[];
   /** Row data */
@@ -101,13 +102,35 @@ export interface DataTableProps<TData, TValue> {
   toolbar?: (table: TanstackTable<TData>) => React.ReactNode;
   /** Text shown when no results found */
   emptyText?: string;
+  /** Enable server-side pagination (disables client-side pagination model) */
+  manualPagination?: boolean;
+  /** Enable server-side sorting (disables client-side sorting model) */
+  manualSorting?: boolean;
+  /** Enable server-side filtering (disables client-side filtering model) */
+  manualFiltering?: boolean;
+  /** Total page count (required for server-side pagination) */
+  pageCount?: number;
+  /** Total row count (alternative to pageCount for server-side pagination) */
+  rowCount?: number;
+  /** Controlled sorting state */
+  sorting?: SortingState;
+  /** Controlled pagination state */
+  pagination?: PaginationState;
+  /** Controlled column filters state */
+  columnFilters?: ColumnFiltersState;
+  /** Callback when sorting state changes */
+  onSortingChange?: (sorting: SortingState) => void;
+  /** Callback when pagination state changes */
+  onPaginationChange?: (pagination: PaginationState) => void;
+  /** Callback when column filters state changes */
+  onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
 }
 
 // ---------------------------------------------------------------------------
 // Helper: sortable header
 // ---------------------------------------------------------------------------
 
-export function DataTableColumnHeader({
+function DataTableColumnHeader({
   column,
   title,
   className,
@@ -157,7 +180,7 @@ export function DataTableColumnHeader({
 // Helper: selection column
 // ---------------------------------------------------------------------------
 
-export function getSelectionColumn<TData>(): ColumnDef<TData> {
+function getSelectionColumn<TData>(): ColumnDef<TData> {
   return {
     id: "select",
     header: ({ table }) => (
@@ -412,15 +435,38 @@ function DataTable<TData, TValue>({
   className,
   toolbar,
   emptyText = "No results.",
+  manualPagination = false,
+  manualSorting = false,
+  manualFiltering = false,
+  pageCount,
+  rowCount,
+  sorting: controlledSorting,
+  pagination: controlledPagination,
+  columnFilters: controlledColumnFilters,
+  onSortingChange: onSortingChangeProp,
+  onPaginationChange: onPaginationChangeProp,
+  onColumnFiltersChange: onColumnFiltersChangeProp,
 }: DataTableProps<TData, TValue>): ReactElement {
-  const [sorting, setSorting] = React.useState<SortingState>([]);
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+  // Internal state (used when not externally controlled)
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>(
     [],
   );
+  const [internalColumnFilters, setInternalColumnFilters] =
+    React.useState<ColumnFiltersState>([]);
+  const [internalPagination, setInternalPagination] =
+    React.useState<PaginationState>({
+      pageIndex: 0,
+      pageSize: pageSizeOptions[0] ?? 10,
+    });
   const [columnVisibility, setColumnVisibility] =
     React.useState<VisibilityState>({});
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
 
+  // Resolve controlled vs uncontrolled
+  const sorting = controlledSorting ?? internalSorting;
+  const columnFilters = controlledColumnFilters ?? internalColumnFilters;
+  const pagination = controlledPagination ?? internalPagination;
+
   // Prepend selection column if enabled
   const resolvedColumns = React.useMemo(() => {
     if (!enableRowSelection) return userColumns;
@@ -438,9 +484,26 @@ function DataTable<TData, TValue>({
       columnFilters,
       columnVisibility,
       rowSelection,
+      pagination,
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(sorting) : updater;
+      if (controlledSorting === undefined) setInternalSorting(next);
+      onSortingChangeProp?.(next);
+    },
+    onColumnFiltersChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(columnFilters) : updater;
+      if (controlledColumnFilters === undefined)
+        setInternalColumnFilters(next);
+      onColumnFiltersChangeProp?.(next);
+    },
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      if (controlledPagination === undefined) setInternalPagination(next);
+      onPaginationChangeProp?.(next);
     },
-    onSortingChange: setSorting,
-    onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: (updater) => {
       const next =
@@ -449,9 +512,17 @@ function DataTable<TData, TValue>({
       onRowSelectionChange?.(next);
     },
     getCoreRowModel: getCoreRowModel(),
-    getFilteredRowModel: getFilteredRowModel(),
-    getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModel(),
+    ...(manualFiltering
+      ? { manualFiltering: true as const }
+      : { getFilteredRowModel: getFilteredRowModel() }),
+    ...(manualPagination
+      ? { manualPagination: true as const }
+      : { getPaginationRowModel: getPaginationRowModel() }),
+    ...(manualSorting
+      ? { manualSorting: true as const }
+      : { getSortedRowModel: getSortedRowModel() }),
+    ...(pageCount !== undefined && { pageCount }),
+    ...(rowCount !== undefined && { rowCount }),
     enableRowSelection,
   });
 
@@ -539,11 +610,20 @@ function DataTable<TData, TValue>({
   );
 }
 
-export { DataTable, DataTableToolbar, DataTablePagination, DataTableSkeleton };
+export {
+  DataTable,
+  DataTableToolbar,
+  DataTablePagination,
+  DataTableSkeleton,
+  DataTableColumnHeader,
+  getSelectionColumn,
+};
 
 // Re-export tanstack types for consumer convenience
 export type {
+  DataTableProps,
   ColumnDef,
+  PaginationState,
   SortingState,
   ColumnFiltersState,
   VisibilityState,

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

@@ -3,6 +3,7 @@ import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  BarController,
   BarElement,
   Tooltip,
   Legend,
@@ -29,7 +30,7 @@ import {
   type ChartGranularity,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend);
+ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
 
 // ---------------------------------------------------------------------------
 // Types