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

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

@@ -1,6 +1,6 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as n } from "../../../../atoms/icon/icon.js";
-import { DropdownMenuContent as g, DropdownMenuItem as i, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
+import { DropdownMenuContent as g, DropdownMenuItem as n, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
+import { Icon as i } from "../../../../atoms/icon/icon.js";
 function p({
   column: s,
   isLastVisibleColumn: r,
@@ -9,63 +9,63 @@ function p({
   const l = s.getCanSort(), d = s.getCanPin(), x = s.getCanHide(), t = s.getIsPinned(), c = s.getIsSorted();
   return /* @__PURE__ */ e.jsxs(g, { align: "start", children: [
     l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!1), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "ArrowUp", size: "sm" }),
+      /* @__PURE__ */ e.jsxs(n, { onClick: () => s.toggleSorting(!1), children: [
+        /* @__PURE__ */ e.jsx(i, { name: "ArrowUp", size: "sm" }),
         "Ascending"
       ] }),
-      /* @__PURE__ */ e.jsxs(i, { onClick: () => s.toggleSorting(!0), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "ArrowDown", size: "sm" }),
+      /* @__PURE__ */ e.jsxs(n, { onClick: () => s.toggleSorting(!0), children: [
+        /* @__PURE__ */ e.jsx(i, { name: "ArrowDown", size: "sm" }),
         "Descending"
       ] }),
-      c && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.clearSorting(), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "X", size: "sm" }),
+      c && /* @__PURE__ */ e.jsxs(n, { onClick: () => s.clearSorting(), children: [
+        /* @__PURE__ */ e.jsx(i, { name: "X", size: "sm" }),
         "Clear sorting"
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
     d && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
       /* @__PURE__ */ e.jsxs(
-        i,
+        n,
         {
           onClick: () => s.pin("left"),
           disabled: t === "left",
           children: [
-            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
+            /* @__PURE__ */ e.jsx(i, { name: "PushPinSimple", size: "sm" }),
             "Pin to the left"
           ]
         }
       ),
       /* @__PURE__ */ e.jsxs(
-        i,
+        n,
         {
           onClick: () => s.pin("right"),
           disabled: t === "right",
           children: [
-            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
+            /* @__PURE__ */ e.jsx(i, { name: "PushPinSimple", size: "sm" }),
             "Pin to the right"
           ]
         }
       ),
-      t && /* @__PURE__ */ e.jsxs(i, { onClick: () => s.pin(!1), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "PushPinSimpleSlash", size: "sm" }),
+      t && /* @__PURE__ */ e.jsxs(n, { onClick: () => s.pin(!1), children: [
+        /* @__PURE__ */ e.jsx(i, { name: "PushPinSimpleSlash", size: "sm" }),
         "Unpin"
       ] }),
       /* @__PURE__ */ e.jsx(o, {})
     ] }),
     x && /* @__PURE__ */ e.jsxs(
-      i,
+      n,
       {
         onClick: () => s.toggleVisibility(!1),
         disabled: r,
         children: [
-          /* @__PURE__ */ e.jsx(n, { name: "EyeSlash", size: "sm" }),
+          /* @__PURE__ */ e.jsx(i, { name: "EyeSlash", size: "sm" }),
           "Hide",
           r && /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: "(Last column)" })
         ]
       }
     ),
-    /* @__PURE__ */ e.jsxs(i, { onClick: a, children: [
-      /* @__PURE__ */ e.jsx(n, { name: "Columns", size: "sm" }),
+    /* @__PURE__ */ e.jsxs(n, { onClick: a, children: [
+      /* @__PURE__ */ e.jsx(i, { name: "Columns", size: "sm" }),
       "Manage columns"
     ] })
   ] });

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

@@ -1,27 +1,9 @@
 import { Column, Table } from '@tanstack/react-table';
-/**
- * Props for the DataTableColumnHeader component
- */
 interface DataTableColumnHeaderProps<TData, TValue> extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * TanStack Table column instance
-     */
     column: Column<TData, TValue>;
-    /**
-     * TanStack Table instance
-     */
     table: Table<TData>;
-    /**
-     * Column header title text
-     */
     title: string;
-    /**
-     * Optional info/tooltip text
-     */
     info?: string;
 }
-/**
- * Column header component with sorting, pinning, and visibility controls
- */
 export declare function DataTableColumnHeader<TData, TValue>({ column, table, title, className, info, }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,10 +1,10 @@
 import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as b } from "../../../../atoms/icon/icon.js";
 import { cn as m } from "../../../../../lib/utils.js";
-import { useColumnHeader as D } from "../../hooks/use-column-header.js";
-import { DataTableColumnHeaderMenu as O } from "./data-table-column-header-menu.js";
-import { DataTableManageColumnsDialog as v } from "../dialogs/data-table-manage-columns-dialog.js";
-import { DataTableColumnHeaderContent as H } from "./data-table-column-header-content.js";
+import { useColumnHeader as b } from "../../hooks/use-column-header.js";
+import { DataTableColumnHeaderMenu as D } from "./data-table-column-header-menu.js";
+import { DataTableManageColumnsDialog as O } from "../dialogs/data-table-manage-columns-dialog.js";
+import { DataTableColumnHeaderContent as v } from "./data-table-column-header-content.js";
+import { Icon as H } from "../../../../atoms/icon/icon.js";
 import { DropdownMenu as I } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
 function z({
   column: o,
@@ -28,10 +28,10 @@ function z({
     visibleColumnsCount: j,
     isLastVisibleColumn: M,
     handleManageColumnsClick: h
-  } = D(o, l);
+  } = b(o, l);
   return !i && !x ? /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-2", a), children: [
     n && /* @__PURE__ */ e.jsx(
-      b,
+      H,
       {
         name: "Info",
         size: "sm",
@@ -43,7 +43,7 @@ function z({
   ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
     /* @__PURE__ */ e.jsx("div", { className: m("flex items-center gap-2", a), children: /* @__PURE__ */ e.jsxs(I, { open: t, onOpenChange: p, children: [
       /* @__PURE__ */ e.jsx(
-        H,
+        v,
         {
           title: s,
           info: n,
@@ -57,7 +57,7 @@ function z({
         }
       ),
       /* @__PURE__ */ e.jsx(
-        O,
+        D,
         {
           column: o,
           isLastVisibleColumn: M,
@@ -66,7 +66,7 @@ function z({
       )
     ] }) }),
     /* @__PURE__ */ e.jsx(
-      v,
+      O,
       {
         isOpen: d,
         onOpenChange: C,

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

@@ -1,27 +1,9 @@
 import { Table } from '@tanstack/react-table';
-/**
- * Props for the DataTableBody component
- */
 interface DataTableBodyProps<TData> {
-    /**
-     * TanStack Table instance
-     */
     table: Table<TData>;
-    /**
-     * Whether column resizing is enabled
-     */
     enableColumnResizing?: boolean;
-    /**
-     * Callback fired when a row is clicked
-     */
     onRowClick?: (row: TData) => void;
-    /**
-     * Fixed height for each row in pixels
-     */
     rowHeight?: number;
 }
-/**
- * Table body component that renders data rows
- */
 export declare function DataTableBody<TData>({ table, enableColumnResizing, onRowClick, rowHeight, }: DataTableBodyProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,19 +1,7 @@
 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 i, TableRow as m } from "../../../../vendor/shadcn/table.js";
-import { DataTableHeaderCell as o } from "./cells/data-table-header-cell.js";
+import { TableHeader as t, TableRow as i } from "../../../../vendor/shadcn/table.js";
+import { DataTableHeaderCell as m } from "./cells/data-table-header-cell.js";
 function p({
-  table: s,
-  enableColumnResizing: l
+  table: l,
+  enableColumnResizing: s
 }) {
-  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,
+  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,
     {
       header: r,
-      enableColumnResizing: l ?? !1
+      enableColumnResizing: s ?? !1
     },
     r.id
   )) }, a.id)) });

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

@@ -1,34 +1,10 @@
 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 f, TableRow as a, TableHead as x, TableBody as p, TableCell as h } from "../../../../../vendor/shadcn/table.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 { 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: t
+  rowHeight: i
 }) {
   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(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(
+    /* @__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(
       a,
       {
-        style: { height: t ? `${t}px` : void 0 },
+        style: { height: i ? `${i}px` : void 0 },
         children: n.map((T, m) => /* @__PURE__ */ e.jsx(h, { children: /* @__PURE__ */ e.jsx(o, { className: "h-4 w-[80px]" }) }, m))
       },
-      i
+      t
     )) })
   ] }) }) });
 }

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

@@ -1,151 +1,22 @@
 import { ColumnResizeMode } from '@tanstack/react-table';
-import { DataTableActionsConfig, DataTableColumnDef } from './data-table.types';
-import { EmptyProps } from '../../molecules';
-/**
- * Props for the DataTable component
- */
+import { DataTableActionsConfig, DataTableColumnDef, DataTableEmptyConfig } from './data-table.types';
 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;
-    /**
-     * Configuration for the empty state when no data is available
-     */
-    empty?: EmptyProps;
-    /**
-     * Whether to enable checkbox selection column
-     * @default false
-     */
+    empty?: DataTableEmptyConfig;
     checkboxSelection?: boolean;
-    /**
-     * 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
-     */
+    onRowSelectionChange?: (selectedRows: TData[]) => void;
     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;
 }
-/**
- * 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;
+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;