@yuno-payments/dashboard-design-system 0.0.136 → 0.0.138-beta.1

package/dist/components/molecules/empty/empty-icon.js

@@ -1,14 +1,14 @@
 import { j as o } from "../../../_virtual/jsx-runtime.js";
 import "react";
-import { Icon as i } from "../../atoms/icon/icon.js";
-function x({
+import { Icon as t } from "../../atoms/icon/icon.js";
+function d({
   name: r,
-  size: t = "xl",
-  className: m,
+  size: m = "xl",
+  className: n,
   children: s
 }) {
-  return /* @__PURE__ */ o.jsx("div", { className: "p-4 bg-white rounded-lg shadow-sm", children: s || /* @__PURE__ */ o.jsx(i, { name: r, size: t, className: m }) });
+  return /* @__PURE__ */ o.jsx("div", { className: "p-4 bg-background rounded-lg shadow-sm", children: s || /* @__PURE__ */ o.jsx(t, { name: r, size: m, className: n }) });
 }
 export {
-  x as EmptyIcon
+  d as EmptyIcon
 };

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

@@ -41,15 +41,6 @@ export interface DataTableProps<TData, TValue> {
      * @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
@@ -65,11 +56,6 @@ export interface DataTableProps<TData, TValue> {
      * @default 'onChange'
      */
     columnResizeMode?: ColumnResizeMode;
-    /**
-     * Whether to enable column pinning
-     * @default true
-     */
-    enableColumnPinning?: boolean;
     /**
      * Callback fired when a row is clicked
      */
@@ -95,15 +81,6 @@ export interface DataTableProps<TData, TValue> {
      * 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;
 }
 /**
  * Advanced data table component built on TanStack Table.
@@ -126,4 +103,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, 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, onRowSelectionChange, enableSorting, manualSorting, enableColumnFilters, enableColumnResizing, columnResizeMode, onRowClick, actions, height, rowHeight, className, persistKey, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -77,23 +77,6 @@ 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[];
@@ -114,15 +97,12 @@ 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;

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

@@ -1,17 +1,12 @@
 import { ColumnFiltersState, SortingState, VisibilityState, RowSelectionState, ColumnPinningState } from '@tanstack/react-table';
-import { DataTableSettings } from '../data-table.types';
 import * as React from "react";
 interface UseDataTableStateProps {
     persistKey?: string;
     hasActions?: boolean;
-    externalSorting?: SortingState;
-    onExternalSortingChange?: (sorting: SortingState) => void;
-    initialSettings?: DataTableSettings;
-    onUpdate?: (settings: DataTableSettings) => void;
 }
-export declare function useDataTableState({ persistKey, hasActions, externalSorting, onExternalSortingChange, initialSettings, onUpdate, }: UseDataTableStateProps): {
+export declare function useDataTableState({ persistKey, hasActions, }: UseDataTableStateProps): {
     sorting: SortingState;
-    setSorting: (sorting: SortingState) => void;
+    setSorting: React.Dispatch<React.SetStateAction<SortingState>>;
     columnFilters: ColumnFiltersState;
     setColumnFilters: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
     columnVisibility: VisibilityState;

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

@@ -1,108 +1,74 @@
-import * as i from "react";
-function N({
-  persistKey: l,
-  hasActions: s = !1,
-  externalSorting: P,
-  onExternalSortingChange: r,
-  initialSettings: n,
-  onUpdate: m
+import * as e from "react";
+function V({
+  persistKey: i,
+  hasActions: l = !1
 }) {
-  const [c, a] = i.useState([]), [y, w] = i.useState(
+  const [g, m] = e.useState([]), [S, b] = e.useState(
     []
-  ), [u, d] = i.useState({}), [V, C] = i.useState({}), [f, g] = i.useState({
+  ), [r, c] = e.useState({}), [h, P] = e.useState({}), [a, s] = e.useState({
     left: [],
-    right: s ? ["actions"] : []
-  }), F = P ?? c, I = r ?? a;
-  i.useEffect(() => {
-    if (n) {
-      if (n.hide || n.show) {
-        const e = {};
-        n.hide?.forEach((t) => {
-          e[t] = !1;
-        }), d(e);
-      }
-      n.pinnedColumns && g({
-        left: n.pinnedColumns.left || [],
-        right: [
-          ...(n.pinnedColumns.right || []).filter(
-            (e) => e !== "actions"
-          ),
-          ...s ? ["actions"] : []
-        ]
-      }), !r && n.sorting && a(n.sorting);
-    }
-  }, [n, s, r]), i.useEffect(() => {
-    if (!l) return;
-    const e = localStorage.getItem(`datatable-${l}`);
-    if (e)
+    right: l ? ["actions"] : []
+  });
+  e.useEffect(() => {
+    if (!i) return;
+    const n = localStorage.getItem(`datatable-${i}`);
+    if (n)
       try {
-        const t = JSON.parse(e);
-        t.columnVisibility && d(t.columnVisibility), t.columnPinning && g({
+        const t = JSON.parse(n);
+        t.columnVisibility && c(t.columnVisibility), t.columnPinning && s({
           left: t.columnPinning.left || [],
           right: [
             ...(t.columnPinning.right || []).filter(
               (o) => o !== "actions"
             ),
-            ...s ? ["actions"] : []
+            ...l ? ["actions"] : []
           ]
-        }), !r && 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 = {
-      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 }
+  }, [i, l]), e.useEffect(() => {
+    if (!i) return;
+    const n = {
+      columnVisibility: r,
+      columnPinning: a
     };
-    if (l) {
-      const o = {
-        columnVisibility: u,
-        columnPinning: f,
-        ...!r && { sorting: c }
-      };
-      localStorage.setItem(`datatable-${l}`, JSON.stringify(o));
-    }
-    m && m(t);
-  }, [u, f, c, l, r, m]);
-  const O = 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 : [];
-        if (s) {
-          const v = b.filter(
-            (J) => J !== "actions"
+    localStorage.setItem(`datatable-${i}`, JSON.stringify(n));
+  }, [r, a, i]);
+  const d = e.useCallback(
+    (n) => {
+      s((t) => {
+        const o = typeof n == "function" ? n(t) : n, u = Array.isArray(o.left) ? o.left : [], f = Array.isArray(o.right) ? o.right : [];
+        if (l) {
+          const y = f.filter(
+            (C) => C !== "actions"
           );
           return {
-            left: h,
-            right: [...v, "actions"]
+            left: u,
+            right: [...y, "actions"]
           };
         }
         return {
-          left: h,
-          right: b
+          left: u,
+          right: f
         };
       });
     },
-    [s]
+    [l]
   );
   return {
-    sorting: F,
-    setSorting: I,
-    columnFilters: y,
-    setColumnFilters: w,
-    columnVisibility: u,
-    setColumnVisibility: d,
-    rowSelection: V,
-    setRowSelection: C,
-    columnPinning: f,
-    handleColumnPinningChange: O
+    sorting: g,
+    setSorting: m,
+    columnFilters: S,
+    setColumnFilters: b,
+    columnVisibility: r,
+    setColumnVisibility: c,
+    rowSelection: h,
+    setRowSelection: P,
+    columnPinning: a,
+    handleColumnPinningChange: d
   };
 }
 export {
-  N as useDataTableState
+  V as useDataTableState
 };

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

@@ -16,8 +16,8 @@ export declare const ACTIONS_COLUMN_CONFIG: {
     readonly maxSize: 50;
 };
 export declare const CELL_BACKGROUND_COLORS: {
-    readonly header: "rgb(250 250 250)";
-    readonly body: "white";
+    readonly header: "hsl(var(--sidebar))";
+    readonly body: "hsl(var(--background))";
 };
 export declare const ROW_HEIGHT_DEFAULT = 66;
 export declare const PINNED_SHADOW_CLASS = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";

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

@@ -1,10 +1,10 @@
-const t = {
+const e = {
   height: "h-8",
   gap: "gap-1.5",
   roundedClass: "rounded-md",
   fontSize: "text-sm",
   fontWeight: "font-medium"
-}, e = {
+}, t = {
   width: "w-2",
   lineHeight: "h-5",
   lineWidth: "w-[1px]"
@@ -12,15 +12,15 @@ const t = {
   size: 50,
   minSize: 50,
   maxSize: 50
-}, i = {
-  header: "rgb(250 250 250)",
-  body: "white"
-}, n = 66, o = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
+}, n = {
+  header: "hsl(var(--sidebar))",
+  body: "hsl(var(--background))"
+}, o = 66, i = "shadow-[-4px_0_4px_-2px_rgba(0,0,0,0.1)]";
 export {
   _ as ACTIONS_COLUMN_CONFIG,
-  i as CELL_BACKGROUND_COLORS,
-  t as COLUMN_HEADER_CONFIG,
-  o as PINNED_SHADOW_CLASS,
-  e as RESIZE_HANDLE_CONFIG,
-  n as ROW_HEIGHT_DEFAULT
+  n as CELL_BACKGROUND_COLORS,
+  e as COLUMN_HEADER_CONFIG,
+  i as PINNED_SHADOW_CLASS,
+  t as RESIZE_HANDLE_CONFIG,
+  o as ROW_HEIGHT_DEFAULT
 };