@wealthx/shadcn 1.2.1 → 1.3.0

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,
@@ -34,10 +35,6 @@ import {
   ArrowUpDown,
   ArrowUp,
   ArrowDown,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
   SlidersHorizontal,
 } from "lucide-react";
 import { cn } from "@/lib/utils";
@@ -59,6 +56,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { PaginationNavButtons } from "@/components/ui/pagination";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -74,7 +72,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 +99,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 +177,7 @@ export function DataTableColumnHeader({
 // Helper: selection column
 // ---------------------------------------------------------------------------
 
-export function getSelectionColumn<TData>(): ColumnDef<TData> {
+function getSelectionColumn<TData>(): ColumnDef<TData> {
   return {
     id: "select",
     header: ({ table }) => (
@@ -268,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}`}
               />
@@ -308,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>
   );
@@ -412,15 +390,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 +439,25 @@ 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 +466,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 +564,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/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 };

package/src/components/ui/dialog.tsx

@@ -68,10 +68,55 @@ function DialogOverlay({
   );
 }
 
+/**
+ * Maps the `size` prop to an exact CSS max-width value.
+ * Applied via inline style — bypasses Tailwind v4 class scanning entirely.
+ */
+const DIALOG_MAX_WIDTHS: Record<string, string> = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "4xl": "56rem",
+  full: "100%",
+};
+
+/**
+ * Default minimum width for size="auto" dialogs.
+ * Prevents the dialog from collapsing too narrow when hugging content.
+ * Override per-instance via the `minWidth` prop.
+ */
+const DIALOG_AUTO_MIN_WIDTH = "20rem"; // 320px
+
 export type DialogContentProps = React.ComponentProps<
   typeof DialogPrimitive.Popup
 > & {
   showCloseButton?: boolean;
+  /**
+   * Optional container element to render the Dialog portal into.
+   * Pass a ref'd element to scope the overlay inside a parent (e.g. a Sheet drawer)
+   * instead of appending to document.body.
+   */
+  container?: HTMLElement | null;
+  /** Vertical alignment of the dialog. "top" anchors to top-4; "center" (default) vertically centers. */
+  align?: "center" | "top";
+  /**
+   * Width behaviour of the dialog panel.
+   * - Fixed sizes ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full"):
+   *   dialog fills width up to that maximum (applied via inline style — reliable in Tailwind v4).
+   * - "auto": dialog shrinks to fit its content (hug-content). Has a built-in minimum
+   *   width of `DIALOG_AUTO_MIN_WIDTH` (20rem / 320px) to avoid collapsing too narrow.
+   * Defaults to "lg".
+   */
+  size?: "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "full" | "auto";
+  /**
+   * Override the minimum width for `size="auto"` dialogs.
+   * Accepts any valid CSS length value (e.g. "24rem", "400px").
+   * Ignored when using a fixed size.
+   */
+  minWidth?: string;
 };
 
 function DialogContent({
@@ -79,28 +124,47 @@ function DialogContent({
   children,
   showCloseButton = true,
   style,
+  container,
+  align = "center",
+  size = "lg",
+  minWidth,
   ...props
 }: DialogContentProps): ReactElement {
   const themeVars = useThemeVars();
+  const isAuto = size === "auto";
+
+  const sizeStyle = isAuto
+    ? { minWidth: minWidth ?? DIALOG_AUTO_MIN_WIDTH }
+    : { maxWidth: DIALOG_MAX_WIDTHS[size] };
+
   return (
-    <DialogPortal>
+    <DialogPortal container={container ?? undefined}>
       <DialogOverlay style={themeVars as React.CSSProperties} />
       <DialogPrimitive.Popup
         className={cn(
-          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels), foreground/50 scrim via DialogOverlay
-          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 sm:max-w-lg",
+          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels)
+          // max-w-[calc(100%-2rem)] acts as a viewport-edge guard on all sizes.
+          // Fixed max-width is applied via inline style (sizeStyle) to avoid
+          // Tailwind v4 class-scanning gaps with dynamic class lookups.
+          "fixed left-[50%] z-50 grid max-w-[calc(100%-2rem)] translate-x-[-50%] gap-4 border bg-background p-6 duration-200 outline-none data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95",
+          // "auto" → hug content (with min-width floor); fixed sizes → fill to max-width
+          isAuto ? "w-auto" : "w-full",
+          align === "center"
+            ? "top-[50%] translate-y-[-50%]"
+            : "top-4 translate-y-0",
           className,
         )}
         data-slot="dialog-content"
-        style={{ ...themeVars, ...style } as React.CSSProperties}
+        style={{ ...themeVars, ...sizeStyle, ...style } as React.CSSProperties}
         {...props}
       >
         {children}
         {showCloseButton ? (
           <DialogPrimitive.Close
-            className="absolute top-4 right-4 transition-colors hover:bg-foreground/5 focus:outline-hidden focus:ring-2 focus:ring-border focus:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            className="absolute top-4 right-4 inline-flex size-7 items-center justify-center transition-colors hover:bg-foreground/5 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-border focus-visible:ring-offset-0 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
             // WealthX: removed rounded-xs (sharp), replaced opacity fade with hover:bg-foreground/5,
-            // focus ring uses border color (subtle, matches Figma DialogClose focus state)
+            // focus ring uses border color (subtle, matches Figma DialogClose focus state).
+            // size-7 = 28px hit area (icon is size-4=16px, centered via inline-flex).
             data-slot="dialog-close"
           >
             <XIcon />
@@ -152,6 +216,8 @@ function DialogFooter({
       {showCloseButton ? (
         <DialogPrimitive.Close
           className={cn(buttonVariants({ variant: "outline" }))}
+          // type="button" prevents accidental form submission inside Dialog forms
+          type="button"
         >
           Close
         </DialogPrimitive.Close>

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

@@ -30,7 +30,14 @@ import {
   type ChartGranularity,
 } from "./chart-shared";
 
-ChartJS.register(CategoryScale, LinearScale, BarController, BarElement, Tooltip, Legend);
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarController,
+  BarElement,
+  Tooltip,
+  Legend,
+);
 
 // ---------------------------------------------------------------------------
 // Types
@@ -234,7 +241,9 @@ export function ExpenseBarChart({
       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>
         <CardAction>
           <div className="flex gap-0.5 sm:gap-1">
             {periods.map((p) => (