@yuno-payments/dashboard-design-system 0.0.165 → 0.0.167

package/dist/components/atoms/alert/alert.d.ts

@@ -1,6 +1,6 @@
 import { Alert as ShadcnAlert } from '../../../vendor/shadcn/alert';
 import { ComponentProps } from 'react';
-import { IconName } from '../icon';
+import { Icon, IconName } from '../icon';
 /**
  * Props for the Alert component
  */
@@ -17,6 +17,10 @@ interface AlertProps extends Omit<ComponentProps<typeof ShadcnAlert>, "children"
      * Alert description/body text
      */
     description?: string;
+    /**
+     * Props for the icon component
+     */
+    iconProps?: ComponentProps<typeof Icon>;
 }
 /**
  * Alert component for displaying informational, success, warning, or error messages.

package/dist/components/atoms/alert/alert.js

@@ -1,15 +1,16 @@
 import { j as r } from "../../../_virtual/jsx-runtime.js";
-import { Alert as l, AlertTitle as i, AlertDescription as a } from "../../../vendor/shadcn/alert.js";
+import { Alert as a, AlertTitle as i, AlertDescription as f } from "../../../vendor/shadcn/alert.js";
 import { forwardRef as n } from "react";
 import { Icon as p } from "../icon/icon.js";
-const x = n(
-  ({ icon: e, title: s, description: t, ...m }, o) => /* @__PURE__ */ r.jsxs(l, { ref: o, ...m, children: [
-    e && /* @__PURE__ */ r.jsx(p, { name: e, className: "size-4" }),
-    s && /* @__PURE__ */ r.jsx(i, { children: s }),
-    t && /* @__PURE__ */ r.jsx(a, { children: t })
+import { cn as x } from "../../../lib/utils.js";
+const c = n(
+  ({ icon: e, title: m, description: s, iconProps: t, ...l }, o) => /* @__PURE__ */ r.jsxs(a, { ref: o, ...l, children: [
+    e && /* @__PURE__ */ r.jsx(p, { name: e, className: x("size-4", t?.className), ...t }),
+    m && /* @__PURE__ */ r.jsx(i, { children: m }),
+    s && /* @__PURE__ */ r.jsx(f, { children: s })
   ] })
 );
-x.displayName = "Alert";
+c.displayName = "Alert";
 export {
-  x as Alert
+  c as Alert
 };

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

@@ -28,14 +28,15 @@ export interface DataTableProps<TData, TValue> {
      */
     checkboxSelection?: boolean;
     /**
-     * Key to force reset of row selection. Change this value to clear all selections.
-     * Useful when parent needs to programmatically clear selections.
+     * Controlled row selection state (optional)
+     * If provided, component operates in controlled mode
      */
-    selectionResetKey?: string | number;
+    rowSelection?: import('@tanstack/react-table').RowSelectionState;
     /**
      * Callback fired when row selection changes
+     * In controlled mode, you must update the rowSelection prop
      */
-    onRowSelectionChange?: (selectedRows: TData[]) => void;
+    onRowSelectionChange?: (rowSelectionState: import('@tanstack/react-table').RowSelectionState, selectedRows: TData[]) => void;
     /**
      * Whether to enable column sorting
      * @default true
@@ -117,6 +118,7 @@ export interface DataTableProps<TData, TValue> {
  *
  * @example
  * ```tsx
+ * // Uncontrolled selection
  * <DataTable
  *   columns={[
  *     { accessorKey: 'name', header: 'Name' },
@@ -124,11 +126,26 @@ export interface DataTableProps<TData, TValue> {
  *   ]}
  *   data={users}
  *   checkboxSelection
- *   onRowSelectionChange={(rows) => console.log('Selected:', rows)}
+ *   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, selectionResetKey, 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;
+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,149 +1,154 @@
 import { j as e } from "../../../_virtual/jsx-runtime.js";
-import * as b from "react";
-import { useReactTable as U } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { Table as V } from "../../../vendor/shadcn/table.js";
-import { cn as h } from "../../../lib/utils.js";
+import * as L from "react";
+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 Q } from "./components/data-table-body.js";
-import { useDataTableColumns as X } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as Y } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as Z } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as k, getSortedRowModel as K, getCoreRowModel as O } from "../../../node_modules/@tanstack/table-core/build/lib/index.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 go({
-  columns: m,
-  data: d,
-  isLoading: S = !1,
-  empty: j,
-  checkboxSelection: u = !1,
-  selectionResetKey: c,
+function po({
+  columns: u,
+  data: s,
+  isLoading: C = !1,
+  empty: y,
+  checkboxSelection: d = !1,
+  rowSelection: m,
   onRowSelectionChange: l,
-  enableSorting: w = !0,
-  manualSorting: y = !1,
-  sorting: T,
-  onSortingChange: R,
-  enableColumnFilters: D = !1,
-  enableColumnResizing: r = !0,
-  columnResizeMode: F = "onChange",
-  enableColumnPinning: v = !0,
-  onRowClick: E,
-  actions: s,
-  height: M,
-  rowHeight: f = Z,
-  className: N,
-  persistKey: H,
-  initialSettings: P,
-  onUpdate: W
+  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 _ = X({
-    columns: m,
-    checkboxSelection: u,
-    actions: s
+  const H = Q({
+    columns: u,
+    checkboxSelection: d,
+    actions: c
   }), {
     sorting: g,
-    setSorting: p,
-    columnFilters: $,
-    setColumnFilters: z,
-    columnVisibility: A,
-    setColumnVisibility: G,
-    rowSelection: x,
-    setRowSelection: C,
-    columnPinning: L,
-    handleColumnPinningChange: B
-  } = Y({
-    persistKey: H,
-    hasActions: !!s,
-    externalSorting: T,
-    onExternalSortingChange: R,
-    initialSettings: P,
-    onUpdate: W
-  }), i = U({
-    data: d,
-    columns: _,
-    getCoreRowModel: O(),
-    enableColumnResizing: r,
-    columnResizeMode: F,
-    enableColumnPinning: v,
+    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: H,
+    getCoreRowModel: V(),
+    enableColumnResizing: a,
+    columnResizeMode: v,
+    enableColumnPinning: D,
     defaultColumn: {
       enableSorting: !1,
       minSize: 50
     },
-    ...w && {
+    ...j && {
       onSortingChange: (o) => {
-        p(typeof o == "function" ? o(g) : o);
+        b(typeof o == "function" ? o(g) : o);
       },
-      getSortedRowModel: K(),
-      manualSorting: y
+      getSortedRowModel: O(),
+      manualSorting: h
+    },
+    ...w && {
+      onColumnFiltersChange: P,
+      getFilteredRowModel: Z()
     },
-    ...D && {
-      onColumnFiltersChange: z,
-      getFilteredRowModel: k()
+    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);
+      }
     },
-    onColumnVisibilityChange: G,
-    onRowSelectionChange: C,
-    onColumnPinningChange: B,
+    onColumnPinningChange: A,
     state: {
       sorting: g,
-      columnFilters: $,
-      columnVisibility: A,
-      rowSelection: x,
-      columnPinning: L
+      columnFilters: I,
+      columnVisibility: W,
+      rowSelection: n,
+      columnPinning: z
     }
   });
-  if (b.useEffect(() => {
-    c !== void 0 && C({});
-  }, [c]), b.useEffect(() => {
-    if (l) {
-      const o = i.getFilteredSelectedRowModel().rows.map((t) => t.original);
-      l(o);
+  if (L.useEffect(() => {
+    if (l && m === void 0) {
+      const o = Object.keys(n).filter((t) => n[t]).map((t) => s[parseInt(t)]).filter(Boolean);
+      l(n, o);
     }
-  }, [x, l, i]), S)
+  }, [n, l, s, m]), C)
     return /* @__PURE__ */ e.jsx(
       q,
       {
-        columns: m,
-        checkboxSelection: u,
-        actions: s,
-        rowHeight: f
+        columns: u,
+        checkboxSelection: d,
+        actions: c,
+        rowHeight: p
       }
     );
-  if (d.length === 0) {
-    const o = j || {}, {
+  if (s.length === 0) {
+    const o = y || {}, {
       title: t = "No results",
-      description: a = "No data available",
-      media: n,
-      actions: I
+      description: r = "No data available",
+      media: i,
+      actions: G
     } = o;
     return /* @__PURE__ */ e.jsx(
       oo,
       {
-        media: n,
+        media: i,
         title: t,
-        description: a,
-        actions: I
+        description: r,
+        actions: G
       }
     );
   }
-  return /* @__PURE__ */ e.jsx("div", { className: h("yuno-data-table space-y-4", N), 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: M || "auto" },
+      style: { height: E || "auto" },
       children: /* @__PURE__ */ e.jsxs(
-        V,
+        U,
         {
-          className: h("table-fixed"),
+          className: x("table-fixed"),
           children: [
-            /* @__PURE__ */ e.jsx("colgroup", { children: i.getHeaderGroups()[0]?.headers.map((o) => {
-              const t = o.column.columnDef.enableResizing === !1, a = o.column.id === "_spacer", n = o.column.getSize();
-              return a ? /* @__PURE__ */ e.jsx("col", { style: { width: "auto" } }, o.id) : /* @__PURE__ */ e.jsx(
+            /* @__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 ? `${n}px` : "auto",
-                    minWidth: t ? `${n}px` : void 0,
-                    maxWidth: t ? `${n}px` : void 0
+                    width: t ? `${i}px` : "auto",
+                    minWidth: t ? `${i}px` : void 0,
+                    maxWidth: t ? `${i}px` : void 0
                   }
                 },
                 o.id
@@ -152,17 +157,17 @@ function go({
             /* @__PURE__ */ e.jsx(
               J,
               {
-                table: i,
-                enableColumnResizing: r
+                table: f,
+                enableColumnResizing: a
               }
             ),
             /* @__PURE__ */ e.jsx(
-              Q,
+              K,
               {
-                table: i,
-                enableColumnResizing: r,
-                onRowClick: E,
-                rowHeight: f
+                table: f,
+                enableColumnResizing: a,
+                onRowClick: F,
+                rowHeight: p
               }
             )
           ]
@@ -172,5 +177,5 @@ function go({
   ) });
 }
 export {
-  go as DataTable
+  po as DataTable
 };

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

@@ -1,4 +1,4 @@
-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" {
@@ -100,8 +100,18 @@ export interface DataTableProps<TData> {
     isLoading?: boolean;
     empty?: EmptyProps;
     checkboxSelection?: boolean;
-    selectionResetKey?: string | number;
-    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;

package/dist/components/organisms/data-table/hooks/use-data-table-state.d.ts

@@ -6,10 +6,11 @@ interface UseDataTableStateProps {
     hasActions?: boolean;
     externalSorting?: SortingState;
     onExternalSortingChange?: (sorting: SortingState) => void;
+    externalRowSelection?: RowSelectionState;
     initialSettings?: DataTableSettings;
     onUpdate?: (settings: DataTableSettings) => void;
 }
-export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, initialSettings, onUpdate, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, externalRowSelection, initialSettings, onUpdate, }: UseDataTableStateProps): {
     sorting: SortingState;
     setSorting: (sorting: SortingState) => void;
     columnFilters: ColumnFiltersState;

package/dist/components/organisms/data-table/hooks/use-data-table-state.js

@@ -1,39 +1,40 @@
 import * as i from "react";
-function N({
-  persistKey: l,
+function $({
+  persistKey: r,
   hasActions: s = !1,
   externalSorting: P,
-  onExternalSortingChange: r,
-  initialSettings: n,
+  onExternalSortingChange: l,
+  externalRowSelection: y,
+  initialSettings: o,
   onUpdate: m
 }) {
-  const [c, a] = i.useState([]), [y, w] = i.useState(
+  const [c, a] = i.useState([]), [w, I] = i.useState(
     []
   ), [u, d] = i.useState({}), [V, C] = i.useState({}), [f, g] = i.useState({
     left: [],
     right: s ? ["actions"] : []
-  }), F = P ?? c, I = r ?? a;
+  }), F = P ?? c, O = l ?? a, R = y ?? V, v = C;
   i.useEffect(() => {
-    if (n) {
-      if (n.hide || n.show) {
+    if (o) {
+      if (o.hide || o.show) {
         const e = {};
-        n.hide?.forEach((t) => {
+        o.hide?.forEach((t) => {
           e[t] = !1;
         }), d(e);
       }
-      n.pinnedColumns && g({
-        left: n.pinnedColumns.left || [],
+      o.pinnedColumns && g({
+        left: o.pinnedColumns.left || [],
         right: [
-          ...(n.pinnedColumns.right || []).filter(
+          ...(o.pinnedColumns.right || []).filter(
             (e) => e !== "actions"
           ),
           ...s ? ["actions"] : []
         ]
-      }), !r && n.sorting && a(n.sorting);
+      }), !l && o.sorting && a(o.sorting);
     }
-  }, [n, s, r]), i.useEffect(() => {
-    if (!l) return;
-    const e = localStorage.getItem(`datatable-${l}`);
+  }, [o, s, l]), i.useEffect(() => {
+    if (!r) return;
+    const e = localStorage.getItem(`datatable-${r}`);
     if (e)
       try {
         const t = JSON.parse(e);
@@ -41,45 +42,45 @@ function N({
           left: t.columnPinning.left || [],
           right: [
             ...(t.columnPinning.right || []).filter(
-              (o) => o !== "actions"
+              (n) => n !== "actions"
             ),
             ...s ? ["actions"] : []
           ]
-        }), !r && t.sorting && a(t.sorting);
+        }), !l && t.sorting && a(t.sorting);
       } catch (t) {
         console.error("Failed to load table state", t);
       }
-  }, [l, s, r]), i.useEffect(() => {
-    const e = Object.entries(u).filter(([, o]) => !o).map(([o]) => o), t = {
+  }, [r, s, l]), i.useEffect(() => {
+    const e = Object.entries(u).filter(([, n]) => !n).map(([n]) => n), t = {
       hide: e.length > 0 ? e : void 0,
       pinnedColumns: {
         left: f.left || [],
         right: f.right || []
       },
       // Only include sorting if not controlled externally
-      ...!r && c.length > 0 && { sorting: c }
+      ...!l && c.length > 0 && { sorting: c }
     };
-    if (l) {
-      const o = {
+    if (r) {
+      const n = {
         columnVisibility: u,
         columnPinning: f,
-        ...!r && { sorting: c }
+        ...!l && { sorting: c }
       };
-      localStorage.setItem(`datatable-${l}`, JSON.stringify(o));
+      localStorage.setItem(`datatable-${r}`, JSON.stringify(n));
     }
     m && m(t);
-  }, [u, f, c, l, r, m]);
-  const O = i.useCallback(
+  }, [u, f, c, r, l, m]);
+  const J = i.useCallback(
     (e) => {
       g((t) => {
-        const o = typeof e == "function" ? e(t) : e, h = Array.isArray(o.left) ? o.left : [], b = Array.isArray(o.right) ? o.right : [];
+        const n = typeof e == "function" ? e(t) : e, h = Array.isArray(n.left) ? n.left : [], b = Array.isArray(n.right) ? n.right : [];
         if (s) {
-          const v = b.filter(
-            (J) => J !== "actions"
+          const N = b.filter(
+            (S) => S !== "actions"
           );
           return {
             left: h,
-            right: [...v, "actions"]
+            right: [...N, "actions"]
           };
         }
         return {
@@ -92,17 +93,17 @@ function N({
   );
   return {
     sorting: F,
-    setSorting: I,
-    columnFilters: y,
-    setColumnFilters: w,
+    setSorting: O,
+    columnFilters: w,
+    setColumnFilters: I,
     columnVisibility: u,
     setColumnVisibility: d,
-    rowSelection: V,
-    setRowSelection: C,
+    rowSelection: R,
+    setRowSelection: v,
     columnPinning: f,
-    handleColumnPinningChange: O
+    handleColumnPinningChange: J
   };
 }
 export {
-  N as useDataTableState
+  $ as useDataTableState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuno-payments/dashboard-design-system",
-  "version": "0.0.165",
+  "version": "0.0.167",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",