@wealthx/shadcn 1.1.0 → 1.2.1

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

@@ -1,5 +1,3 @@
-"use client"
-
 /**
  * DataTable — WealthX Design System
  *
@@ -16,8 +14,8 @@
  *
  * All colors use design tokens — no hex codes.
  */
-import { type ReactElement } from "react"
-import * as React from "react"
+import { type ReactElement } from "react";
+import * as React from "react";
 import {
   type ColumnDef,
   type ColumnFiltersState,
@@ -31,7 +29,7 @@ import {
   getPaginationRowModel,
   getSortedRowModel,
   useReactTable,
-} from "@tanstack/react-table"
+} from "@tanstack/react-table";
 import {
   ArrowUpDown,
   ArrowUp,
@@ -41,8 +39,8 @@ import {
   ChevronsLeftIcon,
   ChevronsRightIcon,
   SlidersHorizontal,
-} from "lucide-react"
-import { cn } from "@/lib/utils"
+} from "lucide-react";
+import { cn } from "@/lib/utils";
 import {
   Table,
   TableBody,
@@ -50,17 +48,17 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@/components/ui/table"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
+} from "@/components/ui/select";
 import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
@@ -69,8 +67,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Skeleton } from "@/components/ui/skeleton"
+} from "@/components/ui/dropdown-menu";
+import { Skeleton } from "@/components/ui/skeleton";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -78,31 +76,31 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 export interface DataTableProps<TData, TValue> {
   /** Column definitions — pass ColumnDef[] from \@tanstack/react-table */
-  columns: ColumnDef<TData, TValue>[]
+  columns: ColumnDef<TData, TValue>[];
   /** Row data */
-  data: TData[]
+  data: TData[];
   /** Show a global search/filter input above the table */
-  searchKey?: string
+  searchKey?: string;
   /** Placeholder for the search input */
-  searchPlaceholder?: string
+  searchPlaceholder?: string;
   /** Enable row selection with checkboxes */
-  enableRowSelection?: boolean
+  enableRowSelection?: boolean;
   /** Enable column visibility toggle dropdown */
-  enableColumnVisibility?: boolean
+  enableColumnVisibility?: boolean;
   /** Page size options for the page-size selector */
-  pageSizeOptions?: number[]
+  pageSizeOptions?: number[];
   /** Show loading skeleton */
-  loading?: boolean
+  loading?: boolean;
   /** Number of skeleton rows to show while loading */
-  skeletonRows?: number
+  skeletonRows?: number;
   /** Callback when row selection changes */
-  onRowSelectionChange?: (selection: RowSelectionState) => void
+  onRowSelectionChange?: (selection: RowSelectionState) => void;
   /** Additional className for the root wrapper */
-  className?: string
+  className?: string;
   /** Render a toolbar above the table (replaces default toolbar) */
-  toolbar?: (table: TanstackTable<TData>) => React.ReactNode
+  toolbar?: (table: TanstackTable<TData>) => React.ReactNode;
   /** Text shown when no results found */
-  emptyText?: string
+  emptyText?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -114,36 +112,45 @@ export function DataTableColumnHeader({
   title,
   className,
 }: {
-  column: { getIsSorted: () => false | "asc" | "desc"; toggleSorting: (desc?: boolean) => void; getCanSort: () => boolean }
-  title: string
-  className?: string
+  column: {
+    getIsSorted: () => false | "asc" | "desc";
+    toggleSorting: (desc?: boolean) => void;
+    getCanSort: () => boolean;
+  };
+  title: string;
+  className?: string;
 }): ReactElement {
   if (!column.getCanSort()) {
-    return <span className={className}>{title}</span>
+    return <span className={className}>{title}</span>;
   }
 
-  const sorted = column.getIsSorted()
+  const sorted = column.getIsSorted();
 
-  let sortIcon: ReactElement
+  let sortIcon: ReactElement;
   if (sorted === "asc") {
-    sortIcon = <ArrowUp className="ml-1 size-3.5" />
+    sortIcon = <ArrowUp className="ml-1 size-3.5" />;
   } else if (sorted === "desc") {
-    sortIcon = <ArrowDown className="ml-1 size-3.5" />
+    sortIcon = <ArrowDown className="ml-1 size-3.5" />;
   } else {
-    sortIcon = <ArrowUpDown className="ml-1 size-3.5" />
+    sortIcon = <ArrowUpDown className="ml-1 size-3.5" />;
   }
 
   return (
     <Button
-      className={cn("-ml-3 h-8 font-medium text-muted-foreground hover:text-foreground", className)}
-      onClick={() => { column.toggleSorting(sorted === "asc"); }}
+      className={cn(
+        "-ml-3 h-8 text-muted-foreground hover:text-foreground",
+        className,
+      )}
+      onClick={() => {
+        column.toggleSorting(sorted === "asc");
+      }}
       size="sm"
       variant="ghost"
     >
       {title}
       {sortIcon}
     </Button>
-  )
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -157,20 +164,26 @@ export function getSelectionColumn<TData>(): ColumnDef<TData> {
       <Checkbox
         aria-label="Select all"
         checked={table.getIsAllPageRowsSelected()}
-        indeterminate={table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()}
-        onCheckedChange={(checked) => { table.toggleAllPageRowsSelected(Boolean(checked)); }}
+        indeterminate={
+          table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
+        }
+        onCheckedChange={(checked) => {
+          table.toggleAllPageRowsSelected(Boolean(checked));
+        }}
       />
     ),
     cell: ({ row }) => (
       <Checkbox
         aria-label="Select row"
         checked={row.getIsSelected()}
-        onCheckedChange={(checked) => { row.toggleSelected(Boolean(checked)); }}
+        onCheckedChange={(checked) => {
+          row.toggleSelected(Boolean(checked));
+        }}
       />
     ),
     enableSorting: false,
     enableHiding: false,
-  }
+  };
 }
 
 // ---------------------------------------------------------------------------
@@ -183,24 +196,38 @@ function DataTableToolbar<TData>({
   searchPlaceholder,
   enableColumnVisibility,
 }: {
-  table: TanstackTable<TData>
-  searchKey?: string
-  searchPlaceholder?: string
-  enableColumnVisibility?: boolean
+  table: TanstackTable<TData>;
+  searchKey?: string;
+  searchPlaceholder?: string;
+  enableColumnVisibility?: boolean;
 }): ReactElement {
   return (
-    <div className="flex items-center justify-between gap-2 py-4" data-slot="data-table-toolbar">
+    <div
+      className="flex items-center justify-between gap-2 py-4"
+      data-slot="data-table-toolbar"
+    >
       <div className="flex flex-1 items-center gap-2">
-        {searchKey ? <Input
+        {searchKey ? (
+          <Input
             className="max-w-xs"
-            onChange={(e) => table.getColumn(searchKey)?.setFilterValue(e.target.value)}
+            onChange={(e) =>
+              table.getColumn(searchKey)?.setFilterValue(e.target.value)
+            }
             placeholder={searchPlaceholder ?? `Filter ${searchKey}...`}
             value={table.getColumn(searchKey)?.getFilterValue() as string}
-          /> : null}
+          />
+        ) : null}
       </div>
-      {enableColumnVisibility ? <DropdownMenu>
+      {enableColumnVisibility ? (
+        <DropdownMenu>
           <DropdownMenuTrigger
-            render={<Button className="ml-auto h-8 gap-1.5" size="sm" variant="outline" />}
+            render={
+              <Button
+                className="ml-auto h-8 gap-1.5"
+                size="sm"
+                variant="outline"
+              />
+            }
           >
             <SlidersHorizontal className="size-3.5" />
             <span className="hidden sm:inline">Columns</span>
@@ -217,24 +244,27 @@ function DataTableToolbar<TData>({
                     checked={col.getIsVisible()}
                     className="capitalize"
                     key={col.id}
-                    onCheckedChange={(value) => { col.toggleVisibility(Boolean(value)); }}
+                    onCheckedChange={(value) => {
+                      col.toggleVisibility(Boolean(value));
+                    }}
                   >
                     {col.id}
                   </DropdownMenuCheckboxItem>
                 ))}
             </DropdownMenuGroup>
           </DropdownMenuContent>
-        </DropdownMenu> : null}
+        </DropdownMenu>
+      ) : null}
     </div>
-  )
+  );
 }
 
 function DataTablePagination<TData>({
   table,
   pageSizeOptions = [10, 20, 30, 50],
 }: {
-  table: TanstackTable<TData>
-  pageSizeOptions?: number[]
+  table: TanstackTable<TData>;
+  pageSizeOptions?: number[];
 }): ReactElement {
   return (
     <div
@@ -242,7 +272,7 @@ function DataTablePagination<TData>({
       data-slot="data-table-pagination"
     >
       {/* Selected rows info */}
-      <p className="text-sm text-muted-foreground">
+      <p className="text-body-small text-muted-foreground">
         {table.getFilteredSelectedRowModel().rows.length > 0 && (
           <>
             {table.getFilteredSelectedRowModel().rows.length} of{" "}
@@ -254,13 +284,19 @@ function DataTablePagination<TData>({
       <div className="flex items-center gap-6">
         {/* Page size selector */}
         <div className="flex items-center gap-2">
-          <p className="text-sm text-muted-foreground whitespace-nowrap">Rows per page</p>
+          <p className="text-body-small text-muted-foreground whitespace-nowrap">
+            Rows per page
+          </p>
           <Select
-            onValueChange={(value) => { table.setPageSize(Number(value)); }}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
             value={`${table.getState().pagination.pageSize}`}
           >
             <SelectTrigger className="w-[70px]" size="sm">
-              <SelectValue placeholder={`${table.getState().pagination.pageSize}`} />
+              <SelectValue
+                placeholder={`${table.getState().pagination.pageSize}`}
+              />
             </SelectTrigger>
             <SelectContent>
               {pageSizeOptions.map((pageSize) => (
@@ -273,8 +309,9 @@ function DataTablePagination<TData>({
         </div>
 
         {/* Page info */}
-        <p className="text-sm text-muted-foreground whitespace-nowrap">
-          Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+        <p className="text-body-small text-muted-foreground whitespace-nowrap">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
         </p>
 
         {/* Page navigation */}
@@ -282,7 +319,9 @@ function DataTablePagination<TData>({
           <Button
             aria-label="Go to first page"
             disabled={!table.getCanPreviousPage()}
-            onClick={() => { table.setPageIndex(0); }}
+            onClick={() => {
+              table.setPageIndex(0);
+            }}
             size="icon-sm"
             variant="outline"
           >
@@ -291,7 +330,9 @@ function DataTablePagination<TData>({
           <Button
             aria-label="Go to previous page"
             disabled={!table.getCanPreviousPage()}
-            onClick={() => { table.previousPage(); }}
+            onClick={() => {
+              table.previousPage();
+            }}
             size="icon-sm"
             variant="outline"
           >
@@ -300,7 +341,9 @@ function DataTablePagination<TData>({
           <Button
             aria-label="Go to next page"
             disabled={!table.getCanNextPage()}
-            onClick={() => { table.nextPage(); }}
+            onClick={() => {
+              table.nextPage();
+            }}
             size="icon-sm"
             variant="outline"
           >
@@ -309,7 +352,9 @@ function DataTablePagination<TData>({
           <Button
             aria-label="Go to last page"
             disabled={!table.getCanNextPage()}
-            onClick={() => { table.setPageIndex(table.getPageCount() - 1); }}
+            onClick={() => {
+              table.setPageIndex(table.getPageCount() - 1);
+            }}
             size="icon-sm"
             variant="outline"
           >
@@ -318,7 +363,7 @@ function DataTablePagination<TData>({
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -329,22 +374,24 @@ function DataTableSkeleton({
   columnCount,
   rowCount = 5,
 }: {
-  columnCount: number
-  rowCount?: number
+  columnCount: number;
+  rowCount?: number;
 }): ReactElement {
   return (
     <>
       {Array.from({ length: rowCount }).map((_, rowIdx) => (
         <TableRow key={`skeleton-row-${String(rowIdx)}`}>
           {Array.from({ length: columnCount }).map((_inner, colIdx) => (
-            <TableCell key={`skeleton-cell-${String(rowIdx)}-${String(colIdx)}`}>
+            <TableCell
+              key={`skeleton-cell-${String(rowIdx)}-${String(colIdx)}`}
+            >
               <Skeleton className="h-4 w-3/4" />
             </TableCell>
           ))}
         </TableRow>
       ))}
     </>
-  )
+  );
 }
 
 // ---------------------------------------------------------------------------
@@ -366,16 +413,22 @@ function DataTable<TData, TValue>({
   toolbar,
   emptyText = "No results.",
 }: DataTableProps<TData, TValue>): ReactElement {
-  const [sorting, setSorting] = React.useState<SortingState>([])
-  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([])
-  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({})
-  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({})
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
+    [],
+  );
+  const [columnVisibility, setColumnVisibility] =
+    React.useState<VisibilityState>({});
+  const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
 
   // Prepend selection column if enabled
   const resolvedColumns = React.useMemo(() => {
-    if (!enableRowSelection) return userColumns
-    return [getSelectionColumn<TData>(), ...userColumns] as ColumnDef<TData, TValue>[]
-  }, [userColumns, enableRowSelection])
+    if (!enableRowSelection) return userColumns;
+    return [getSelectionColumn<TData>(), ...userColumns] as ColumnDef<
+      TData,
+      TValue
+    >[];
+  }, [userColumns, enableRowSelection]);
 
   const table = useReactTable({
     data,
@@ -390,20 +443,26 @@ function DataTable<TData, TValue>({
     onColumnFiltersChange: setColumnFilters,
     onColumnVisibilityChange: setColumnVisibility,
     onRowSelectionChange: (updater) => {
-      const next = typeof updater === "function" ? updater(rowSelection) : updater
-      setRowSelection(next)
-      onRowSelectionChange?.(next)
+      const next =
+        typeof updater === "function" ? updater(rowSelection) : updater;
+      setRowSelection(next);
+      onRowSelectionChange?.(next);
     },
     getCoreRowModel: getCoreRowModel(),
     getFilteredRowModel: getFilteredRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     getSortedRowModel: getSortedRowModel(),
     enableRowSelection,
-  })
+  });
 
   function renderTableBody(): ReactElement {
     if (loading) {
-      return <DataTableSkeleton columnCount={resolvedColumns.length} rowCount={skeletonRows} />
+      return (
+        <DataTableSkeleton
+          columnCount={resolvedColumns.length}
+          rowCount={skeletonRows}
+        />
+      );
     }
 
     if (table.getRowModel().rows.length) {
@@ -422,7 +481,7 @@ function DataTable<TData, TValue>({
             </TableRow>
           ))}
         </>
-      )
+      );
     }
 
     return (
@@ -434,7 +493,7 @@ function DataTable<TData, TValue>({
           {emptyText}
         </TableCell>
       </TableRow>
-    )
+    );
   }
 
   return (
@@ -461,30 +520,32 @@ function DataTable<TData, TValue>({
                   <TableHead key={header.id}>
                     {header.isPlaceholder
                       ? null
-                      : flexRender(header.column.columnDef.header, header.getContext())}
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
                   </TableHead>
                 ))}
               </TableRow>
             ))}
           </TableHeader>
-          <TableBody>
-            {renderTableBody()}
-          </TableBody>
+          <TableBody>{renderTableBody()}</TableBody>
         </Table>
       </div>
 
       {/* Pagination */}
       <DataTablePagination pageSizeOptions={pageSizeOptions} table={table} />
     </div>
-  )
+  );
 }
 
-export {
-  DataTable,
-  DataTableToolbar,
-  DataTablePagination,
-  DataTableSkeleton,
-}
+export { DataTable, DataTableToolbar, DataTablePagination, DataTableSkeleton };
 
 // Re-export tanstack types for consumer convenience
-export type { ColumnDef, SortingState, ColumnFiltersState, VisibilityState, RowSelectionState }
+export type {
+  ColumnDef,
+  SortingState,
+  ColumnFiltersState,
+  VisibilityState,
+  RowSelectionState,
+};

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

@@ -1,5 +1,3 @@
-"use client"
-
 import { type ReactElement } from "react"
 import * as React from "react"
 import { format } from "date-fns"