@yuno-payments/dashboard-design-system 0.0.170 → 0.0.172

package/dist/components/organisms/data-table/components/data-table-header.d.ts

@@ -1,7 +1,19 @@
 import { Table } from '@tanstack/react-table';
+/**
+ * Props for the DataTableHeader component
+ */
 interface DataTableHeaderProps<TData> {
+    /**
+     * TanStack Table instance
+     */
     table: Table<TData>;
+    /**
+     * Whether column resizing is enabled
+     */
     enableColumnResizing?: boolean;
 }
+/**
+ * Renders the table header with sortable and resizable columns
+ */
 export declare function DataTableHeader<TData>({ table, enableColumnResizing, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/data-table/components/data-table-header.js

@@ -1,15 +1,15 @@
 import { j as e } from "../../../../_virtual/jsx-runtime.js";
-import { TableHeader as t, TableRow as i } from "../../../../vendor/shadcn/table.js";
-import { DataTableHeaderCell as m } from "./cells/data-table-header-cell.js";
+import { TableHeader as i, TableRow as m } from "../../../../vendor/shadcn/table.js";
+import { DataTableHeaderCell as o } from "./cells/data-table-header-cell.js";
 function p({
-  table: l,
-  enableColumnResizing: s
+  table: s,
+  enableColumnResizing: l
 }) {
-  return /* @__PURE__ */ e.jsx(t, { children: l.getHeaderGroups().map((a) => /* @__PURE__ */ e.jsx(i, { className: "bg-neutral-50", children: a.headers.map((r) => /* @__PURE__ */ e.jsx(
-    m,
+  return /* @__PURE__ */ e.jsx(i, { children: s.getHeaderGroups().map((a) => /* @__PURE__ */ e.jsx(m, { className: "bg-surface", children: a.headers.map((r) => /* @__PURE__ */ e.jsx(
+    o,
     {
       header: r,
-      enableColumnResizing: s ?? !1
+      enableColumnResizing: l ?? !1
     },
     r.id
   )) }, a.id)) });

package/dist/components/organisms/data-table/components/states/data-table-loading.d.ts

@@ -1,10 +1,34 @@
 import { DataTableColumnDef, DataTableActionsConfig } from '../../data-table.types';
+/**
+ * Props for the DataTableLoading component
+ */
 interface DataTableLoadingProps<TData, TValue = unknown> {
+    /**
+     * Column definitions to determine header structure
+     */
     columns: DataTableColumnDef<TData, TValue>[];
+    /**
+     * Number of skeleton rows to display
+     * @default 5
+     */
     rowsCount?: number;
+    /**
+     * Whether checkbox selection column is enabled
+     * @default false
+     */
     checkboxSelection?: boolean;
+    /**
+     * Actions configuration to determine if actions column should be shown
+     */
     actions?: DataTableActionsConfig<TData>;
+    /**
+     * Fixed height for each skeleton row in pixels
+     */
     rowHeight?: number;
 }
+/**
+ * Loading state component for DataTable showing skeleton rows
+ * Displays a table structure with skeleton loaders matching the expected column layout
+ */
 export declare function DataTableLoading<TData, TValue = unknown>({ columns, rowsCount, checkboxSelection, actions, rowHeight, }: DataTableLoadingProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/data-table/components/states/data-table-loading.js

@@ -1,5 +1,5 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Table as u, TableHeader as x, TableRow as a, TableHead as f, TableBody as p, TableCell as h } from "../../../../../vendor/shadcn/table.js";
+import { Table as u, TableHeader as f, TableRow as a, TableHead as x, TableBody as p, TableCell as h } from "../../../../../vendor/shadcn/table.js";
 import { Skeleton as o } from "../../../../../vendor/shadcn/skeleton.js";
 function j(s) {
   return typeof s == "object" && s !== null && "title" in s && typeof s.title == "string";
@@ -13,20 +13,20 @@ function v({
   rowsCount: l = 5,
   checkboxSelection: c = !1,
   actions: d,
-  rowHeight: i
+  rowHeight: t
 }) {
   const n = [];
   return c && n.push(null), s.forEach((r) => {
     n.push(b(r));
   }), d && n.push("Actions"), /* @__PURE__ */ e.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ e.jsx("div", { className: "rounded-md border", children: /* @__PURE__ */ e.jsxs(u, { children: [
-    /* @__PURE__ */ e.jsx(x, { children: /* @__PURE__ */ e.jsx(a, { className: "bg-neutral-50", children: n.map((r, t) => /* @__PURE__ */ e.jsx(f, { children: r ? /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: r }) : /* @__PURE__ */ e.jsx(o, { className: "h-4 w-4" }) }, t)) }) }),
-    /* @__PURE__ */ e.jsx(p, { children: Array.from({ length: l }).map((r, t) => /* @__PURE__ */ e.jsx(
+    /* @__PURE__ */ e.jsx(f, { children: /* @__PURE__ */ e.jsx(a, { className: "bg-surface", children: n.map((r, i) => /* @__PURE__ */ e.jsx(x, { children: r ? /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: r }) : /* @__PURE__ */ e.jsx(o, { className: "h-4 w-4" }) }, i)) }) }),
+    /* @__PURE__ */ e.jsx(p, { children: Array.from({ length: l }).map((r, i) => /* @__PURE__ */ e.jsx(
       a,
       {
-        style: { height: i ? `${i}px` : void 0 },
+        style: { height: t ? `${t}px` : void 0 },
         children: n.map((T, m) => /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(o, { className: "h-4 w-[80px]" }) }, m))
       },
-      t
+      i
     )) })
   ] }) }) });
 }

package/dist/components/organisms/data-table/data-table.d.ts

@@ -1,22 +1,151 @@
 import { ColumnResizeMode } from '@tanstack/react-table';
-import { DataTableActionsConfig, DataTableColumnDef, DataTableEmptyConfig } from './data-table.types';
+import { DataTableActionsConfig, DataTableColumnDef } from './data-table.types';
+import { EmptyProps } from '../../molecules';
+/**
+ * Props for the DataTable component
+ */
 export interface DataTableProps<TData, TValue> {
+    /**
+     * Column definitions for the table
+     */
     columns: DataTableColumnDef<TData, TValue>[];
+    /**
+     * Array of data to display in the table
+     */
     data: TData[];
+    /**
+     * Whether the table is in a loading state
+     * @default false
+     */
     isLoading?: boolean;
-    empty?: DataTableEmptyConfig;
+    /**
+     * Configuration for the empty state when no data is available
+     */
+    empty?: EmptyProps;
+    /**
+     * Whether to enable checkbox selection column
+     * @default false
+     */
     checkboxSelection?: boolean;
-    onRowSelectionChange?: (selectedRows: TData[]) => void;
+    /**
+     * Controlled row selection state (optional)
+     * If provided, component operates in controlled mode
+     */
+    rowSelection?: import('@tanstack/react-table').RowSelectionState;
+    /**
+     * Callback fired when row selection changes
+     * In controlled mode, you must update the rowSelection prop
+     */
+    onRowSelectionChange?: (rowSelectionState: import('@tanstack/react-table').RowSelectionState, selectedRows: TData[]) => void;
+    /**
+     * Whether to enable column sorting
+     * @default true
+     */
     enableSorting?: boolean;
+    /**
+     * Whether sorting is handled manually (server-side)
+     * @default false
+     */
     manualSorting?: boolean;
+    /**
+     * Controlled sorting state (optional)
+     * If provided, component operates in controlled mode
+     */
+    sorting?: import('@tanstack/react-table').SortingState;
+    /**
+     * Callback when sorting changes (required for controlled mode)
+     */
+    onSortingChange?: (sorting: import('@tanstack/react-table').SortingState) => void;
+    /**
+     * Whether to enable column filtering
+     * @default false
+     */
     enableColumnFilters?: boolean;
+    /**
+     * Whether to enable column resizing
+     * @default true
+     */
     enableColumnResizing?: boolean;
+    /**
+     * Column resize mode: 'onChange' or 'onEnd'
+     * @default 'onChange'
+     */
     columnResizeMode?: ColumnResizeMode;
+    /**
+     * Whether to enable column pinning
+     * @default true
+     */
+    enableColumnPinning?: boolean;
+    /**
+     * Callback fired when a row is clicked
+     */
     onRowClick?: (row: TData) => void;
+    /**
+     * Configuration for actions column (always pinned to the right)
+     */
     actions?: DataTableActionsConfig<TData>;
+    /**
+     * Fixed height for the table container
+     */
     height?: string | number;
+    /**
+     * Height for each row in pixels
+     * @default 52
+     */
     rowHeight?: number;
+    /**
+     * Additional CSS classes for the container
+     */
     className?: string;
+    /**
+     * Unique key for persisting table state in localStorage
+     */
     persistKey?: string;
+    /**
+     * Initial settings to load (from backend/profile)
+     * Takes precedence over localStorage
+     */
+    initialSettings?: import('./data-table.types').DataTableSettings;
+    /**
+     * Callback when table settings change (for syncing to backend)
+     */
+    onUpdate?: (settings: import('./data-table.types').DataTableSettings) => void;
 }
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, onRowSelectionChange, enableSorting, manualSorting, enableColumnFilters, enableColumnResizing, columnResizeMode, onRowClick, actions, height, rowHeight, className, persistKey, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Advanced data table component built on TanStack Table.
+ * Features sorting, filtering, column resizing, row selection, and loading/empty states.
+ * Supports column pinning, visibility control, and state persistence.
+ *
+ * @example
+ * ```tsx
+ * // Uncontrolled selection
+ * <DataTable
+ *   columns={[
+ *     { accessorKey: 'name', header: 'Name' },
+ *     { accessorKey: 'email', header: 'Email' }
+ *   ]}
+ *   data={users}
+ *   checkboxSelection
+ *   onRowSelectionChange={(rowSelectionState, selectedRows) => {
+ *     console.log('Selected rows:', selectedRows);
+ *   }}
+ *   actions={{
+ *     items: [{ label: 'Edit', onClick: (row) => editUser(row) }]
+ *   }}
+ * />
+ *
+ * // Controlled selection
+ * const [rowSelection, setRowSelection] = useState({});
+ * <DataTable
+ *   columns={columns}
+ *   data={users}
+ *   checkboxSelection
+ *   rowSelection={rowSelection}
+ *   onRowSelectionChange={(newRowSelection, selectedRows) => {
+ *     setRowSelection(newRowSelection);
+ *     console.log('Selected rows:', selectedRows);
+ *   }}
+ * />
+ * ```
+ */
+export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/data-table/data-table.js

@@ -1,141 +1,173 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
 import * as L from "react";
-import { useReactTable as W } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { Table as _ } from "../../../vendor/shadcn/table.js";
-import { cn as f } from "../../../lib/utils.js";
-import { DataTableLoading as B } from "./components/states/data-table-loading.js";
-import { DataTableHeader as G } from "./components/data-table-header.js";
-import { DataTableBody as I } from "./components/data-table-body.js";
-import { useDataTableColumns as O } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as U } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as q } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as J, getSortedRowModel as K, getCoreRowModel as Q } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as X } from "../../molecules/empty/empty.js";
-function ae({
-  columns: a,
+import { useReactTable as k } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
+import { Table as U } from "../../../vendor/shadcn/table.js";
+import { cn as x } from "../../../lib/utils.js";
+import { DataTableLoading as q } from "./components/states/data-table-loading.js";
+import { DataTableHeader as J } from "./components/data-table-header.js";
+import { DataTableBody as K } from "./components/data-table-body.js";
+import { useDataTableColumns as Q } from "./hooks/use-data-table-columns.js";
+import { useDataTableState as X } from "./hooks/use-data-table-state.js";
+import { ROW_HEIGHT_DEFAULT as Y } from "./utils/data-table-constants.js";
+import { getFilteredRowModel as Z, getSortedRowModel as O, getCoreRowModel as V } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
+import { Empty as oo } from "../../molecules/empty/empty.js";
+function po({
+  columns: u,
   data: s,
-  isLoading: c = !1,
-  empty: g,
-  checkboxSelection: m = !1,
-  onRowSelectionChange: o,
-  enableSorting: p = !0,
-  manualSorting: b = !1,
-  enableColumnFilters: C = !1,
-  enableColumnResizing: i = !0,
-  columnResizeMode: h = "onChange",
-  onRowClick: x,
-  actions: l,
-  height: w,
-  rowHeight: d = q,
-  className: T,
-  persistKey: j
+  isLoading: C = !1,
+  empty: y,
+  checkboxSelection: d = !1,
+  rowSelection: m,
+  onRowSelectionChange: l,
+  enableSorting: j = !0,
+  manualSorting: h = !1,
+  sorting: S,
+  onSortingChange: T,
+  enableColumnFilters: w = !1,
+  enableColumnResizing: a = !0,
+  columnResizeMode: v = "onChange",
+  enableColumnPinning: D = !0,
+  onRowClick: F,
+  actions: c,
+  height: E,
+  rowHeight: p = Y,
+  className: M,
+  persistKey: R,
+  initialSettings: N,
+  onUpdate: B
 }) {
-  const y = O({
-    columns: a,
-    checkboxSelection: m,
-    actions: l
+  const H = Q({
+    columns: u,
+    checkboxSelection: d,
+    actions: c
   }), {
-    sorting: R,
-    setSorting: S,
-    columnFilters: D,
-    setColumnFilters: F,
-    columnVisibility: M,
-    setColumnVisibility: E,
-    rowSelection: u,
-    setRowSelection: N,
-    columnPinning: v,
-    handleColumnPinningChange: P
-  } = U({
-    persistKey: j,
-    hasActions: !!l
-  }), t = W({
+    sorting: g,
+    setSorting: b,
+    columnFilters: I,
+    setColumnFilters: P,
+    columnVisibility: W,
+    setColumnVisibility: _,
+    rowSelection: n,
+    setRowSelection: $,
+    columnPinning: z,
+    handleColumnPinningChange: A
+  } = X({
+    persistKey: R,
+    hasActions: !!c,
+    externalSorting: S,
+    onExternalSortingChange: T,
+    externalRowSelection: m,
+    initialSettings: N,
+    onUpdate: B
+  }), f = k({
     data: s,
-    columns: y,
-    getCoreRowModel: Q(),
-    enableColumnResizing: i,
-    columnResizeMode: h,
-    enableColumnPinning: !0,
+    columns: H,
+    getCoreRowModel: V(),
+    enableColumnResizing: a,
+    columnResizeMode: v,
+    enableColumnPinning: D,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...p && {
-      onSortingChange: S,
-      getSortedRowModel: K(),
-      manualSorting: b
+    ...j && {
+      onSortingChange: (o) => {
+        b(typeof o == "function" ? o(g) : o);
+      },
+      getSortedRowModel: O(),
+      manualSorting: h
     },
-    ...C && {
-      onColumnFiltersChange: F,
-      getFilteredRowModel: J()
+    ...w && {
+      onColumnFiltersChange: P,
+      getFilteredRowModel: Z()
     },
-    onColumnVisibilityChange: E,
-    onRowSelectionChange: N,
-    onColumnPinningChange: P,
+    onColumnVisibilityChange: _,
+    onRowSelectionChange: (o) => {
+      const t = typeof o == "function" ? o(n) : o;
+      if ($(t), l && m !== void 0) {
+        const r = Object.keys(t).filter((i) => t[i]).map((i) => s[parseInt(i)]).filter(Boolean);
+        l(t, r);
+      }
+    },
+    onColumnPinningChange: A,
     state: {
-      sorting: R,
-      columnFilters: D,
-      columnVisibility: M,
-      rowSelection: u,
-      columnPinning: v
+      sorting: g,
+      columnFilters: I,
+      columnVisibility: W,
+      rowSelection: n,
+      columnPinning: z
     }
   });
   if (L.useEffect(() => {
-    if (o) {
-      const r = t.getFilteredSelectedRowModel().rows.map((n) => n.original);
-      o(r);
+    if (l && m === void 0) {
+      const o = Object.keys(n).filter((t) => n[t]).map((t) => s[parseInt(t)]).filter(Boolean);
+      l(n, o);
     }
-  }, [u, o, t]), c)
+  }, [n, l, s, m]), C)
     return /* @__PURE__ */ e.jsx(
-      B,
+      q,
       {
-        columns: a,
-        checkboxSelection: m,
-        actions: l,
-        rowHeight: d
+        columns: u,
+        checkboxSelection: d,
+        actions: c,
+        rowHeight: p
       }
     );
   if (s.length === 0) {
-    const r = g || {}, {
-      title: n = "No results",
-      subtitle: V = "No data available",
-      media: A,
-      children: H
-    } = r;
+    const o = y || {}, {
+      title: t = "No results",
+      description: r = "No data available",
+      media: i,
+      actions: G
+    } = o;
     return /* @__PURE__ */ e.jsx(
-      X,
+      oo,
       {
-        media: A,
-        title: n,
-        description: V,
-        actions: H
+        media: i,
+        title: t,
+        description: r,
+        actions: G
       }
     );
   }
-  return /* @__PURE__ */ e.jsx("div", { className: f("space-y-4", T), children: /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e.jsx("div", { className: x("yuno-data-table space-y-4", M), children: /* @__PURE__ */ e.jsx(
     "div",
     {
       className: "rounded-md border overflow-x-auto",
-      style: { height: w || "auto" },
+      style: { height: E || "auto" },
       children: /* @__PURE__ */ e.jsxs(
-        _,
+        U,
         {
-          className: f("table-fixed"),
-          style: { width: "max-content", minWidth: "100%" },
+          className: x("table-fixed"),
           children: [
+            /* @__PURE__ */ e.jsx("colgroup", { children: f.getHeaderGroups()[0]?.headers.map((o) => {
+              const t = o.column.columnDef.enableResizing === !1, r = o.column.id === "_spacer", i = o.column.getSize();
+              return r ? /* @__PURE__ */ e.jsx("col", { style: { width: "auto" } }, o.id) : /* @__PURE__ */ e.jsx(
+                "col",
+                {
+                  style: {
+                    width: t ? `${i}px` : "auto",
+                    minWidth: t ? `${i}px` : void 0,
+                    maxWidth: t ? `${i}px` : void 0
+                  }
+                },
+                o.id
+              );
+            }) }),
             /* @__PURE__ */ e.jsx(
-              G,
+              J,
               {
-                table: t,
-                enableColumnResizing: i
+                table: f,
+                enableColumnResizing: a
               }
             ),
             /* @__PURE__ */ e.jsx(
-              I,
+              K,
               {
-                table: t,
-                enableColumnResizing: i,
-                onRowClick: x,
-                rowHeight: d
+                table: f,
+                enableColumnResizing: a,
+                onRowClick: F,
+                rowHeight: p
               }
             )
           ]
@@ -145,5 +177,5 @@ function ae({
   ) });
 }
 export {
-  ae as DataTable
+  po as DataTable
 };

package/dist/components/organisms/data-table/data-table.types.d.ts

@@ -1,5 +1,6 @@
-import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
+import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, RowSelectionState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
 import { IconName } from '../../atoms/icon';
+import { EmptyProps } from '../../molecules';
 declare module "@tanstack/react-table" {
     interface TableMeta<TData extends RowData> {
         updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
@@ -13,29 +14,6 @@ export interface DataTableActionsConfig<TData> {
     /** Click handler for the default button (only used if render is not provided) */
     onClick?: (row: TData) => void;
 }
-/**
- * Configuration for DataTable empty state
- *
- * @example
- * ```tsx
- * {
- *   title: "No results",
- *   subtitle: "No data available",
- *   media: <EmptyIcon name="Wallet" />,
- *   children: <Button>Create</Button>
- * }
- * ```
- */
-export interface DataTableEmptyConfig {
-    /** Title text displayed prominently */
-    title?: string;
-    /** Optional subtitle/description text displayed below the title */
-    subtitle?: string;
-    /** Media content to display (icon, image, or any ReactNode). Use EmptyIcon component for styled icons. */
-    media?: React.ReactNode;
-    /** Optional actions (buttons, links, or any ReactNode) displayed below the description */
-    children?: React.ReactNode;
-}
 /**
  * Configuration for DataTableColumnHeader component
  *
@@ -99,13 +77,41 @@ export type DataTableColumn<TData> = ColumnDef<TData> & {
     enableSorting?: boolean;
     enableHiding?: boolean;
 };
+/**
+ * Settings structure compatible with TableV2 format
+ * Used for initialSettings and onUpdate callback
+ */
+export interface DataTableSettings {
+    hide?: string[];
+    show?: string[];
+    width?: {
+        [key: string]: number;
+    };
+    pinnedColumns?: {
+        right: string[];
+        left: string[];
+    };
+    order?: string[];
+    sorting?: SortingState;
+}
 export interface DataTableProps<TData> {
     columns: DataTableColumn<TData>[];
     data: TData[];
     isLoading?: boolean;
-    empty?: DataTableEmptyConfig;
+    empty?: EmptyProps;
     checkboxSelection?: boolean;
-    onRowSelectionChange?: (selectedRows: TData[]) => void;
+    /**
+     * Controlled row selection state (optional)
+     * If provided, component operates in controlled mode
+     */
+    rowSelection?: RowSelectionState;
+    /**
+     * Callback fired when row selection changes
+     * In controlled mode, you must update the rowSelection prop
+     * @param rowSelectionState - Object with row indices as keys (e.g., { "0": true, "2": true })
+     * @param selectedRows - Array of actual row data objects
+     */
+    onRowSelectionChange?: (rowSelectionState: RowSelectionState, selectedRows: TData[]) => void;
     enablePagination?: boolean;
     pageSize?: number;
     pageIndex?: number;
@@ -119,12 +125,15 @@ export interface DataTableProps<TData> {
     enableColumnFilters?: boolean;
     columnFilters?: ColumnFiltersState;
     onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+    enableColumnPinning?: boolean;
     columnVisibility?: VisibilityState;
     onColumnVisibilityChange?: (visibility: VisibilityState) => void;
     onRowClick?: (row: TData) => void;
     height?: string | number;
     rowHeight?: number;
     persistKey?: string;
+    initialSettings?: DataTableSettings;
+    onUpdate?: (settings: DataTableSettings) => void;
     renderToolbar?: () => React.ReactNode;
     renderActions?: () => React.ReactNode;
     className?: string;