@yuno-payments/dashboard-design-system 2.2.0 → 2.2.1-beta.2

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

@@ -1,37 +1,38 @@
 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 { Icon as h } from "../../../../atoms/icon/icon.js";
+import { cn as u } from "../../../../../lib/utils.js";
+import { useColumnHeader as O } from "../../hooks/use-column-header.js";
+import { DataTableColumnHeaderMenu as b } 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 { DataTableColumnHeaderContent as A } from "./data-table-column-header-content.js";
+import { DEFAULT_DATA_TABLE_TRANSLATIONS as H } from "../../data-table.types.js";
 import { DropdownMenu as I } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-function z({
+function w({
   column: o,
-  table: l,
-  title: s,
-  className: a,
+  table: s,
+  title: a,
+  className: r,
   info: n
 }) {
   const {
-    isHovered: u,
-    setIsHovered: r,
-    isMenuOpen: t,
-    setIsMenuOpen: p,
-    isManageColumnsOpen: d,
+    isHovered: p,
+    setIsHovered: t,
+    isMenuOpen: i,
+    setIsMenuOpen: d,
+    isManageColumnsOpen: c,
     setIsManageColumnsOpen: C,
-    isPinned: c,
-    canPin: x,
-    canSort: i,
+    isPinned: x,
+    canPin: f,
+    canSort: m,
     isSorted: g,
-    toggleableColumns: f,
-    visibleColumnsCount: j,
-    isLastVisibleColumn: M,
-    handleManageColumnsClick: h
-  } = D(o, l);
-  return !i && !x ? /* @__PURE__ */ e.jsxs("div", { className: m("flex items-center gap-2", a), children: [
+    toggleableColumns: j,
+    visibleColumnsCount: M,
+    isLastVisibleColumn: D,
+    handleManageColumnsClick: T
+  } = O(o, s), l = s.options.meta?.translations ?? H;
+  return !m && !f ? /* @__PURE__ */ e.jsxs("div", { className: u("flex items-center gap-2", r), children: [
     n && /* @__PURE__ */ e.jsx(
-      b,
+      h,
       {
         name: "Info",
         size: "sm",
@@ -39,43 +40,45 @@ function z({
         tooltip: n
       }
     ),
-    /* @__PURE__ */ e.jsx("span", { children: s })
+    /* @__PURE__ */ e.jsx("span", { children: a })
   ] }) : /* @__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("div", { className: u("flex items-center gap-2", r), children: /* @__PURE__ */ e.jsxs(I, { open: i, onOpenChange: d, children: [
       /* @__PURE__ */ e.jsx(
-        H,
+        A,
         {
-          title: s,
+          title: a,
           info: n,
-          isPinned: c,
-          canSort: i,
+          isPinned: x,
+          canSort: m,
           sortDirection: g,
-          isHovered: u,
-          isMenuOpen: t,
-          onMouseEnter: () => r(!0),
-          onMouseLeave: () => r(!1)
+          isHovered: p,
+          isMenuOpen: i,
+          onMouseEnter: () => t(!0),
+          onMouseLeave: () => t(!1)
         }
       ),
       /* @__PURE__ */ e.jsx(
-        O,
+        b,
         {
           column: o,
-          isLastVisibleColumn: M,
-          onManageColumnsClick: h
+          isLastVisibleColumn: D,
+          onManageColumnsClick: T,
+          translations: l
         }
       )
     ] }) }),
     /* @__PURE__ */ e.jsx(
       v,
       {
-        isOpen: d,
+        isOpen: c,
         onOpenChange: C,
-        toggleableColumns: f,
-        visibleColumnsCount: j
+        toggleableColumns: j,
+        visibleColumnsCount: M,
+        translations: l
       }
     )
   ] });
 }
 export {
-  z as DataTableColumnHeader
+  w as DataTableColumnHeader
 };

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

@@ -1,37 +1,36 @@
 import { j as a } from "../../../../_virtual/jsx-runtime.js";
-import "react";
 import { TableHeader as r, TableRow as m } from "../../../../vendor/shadcn/table.js";
 import { DataTableHeaderCell as o } from "./cells/data-table-header-cell.js";
 import { DataTableDraggableHeaderCell as d } from "./cells/data-table-draggable-header-cell.js";
-function b({
-  table: l,
-  enableColumnResizing: i,
-  enableColumnDragDrop: t = !1
+function j({
+  table: i,
+  enableColumnResizing: l,
+  enableColumnDragDrop: n = !1
 }) {
-  return t ? /* @__PURE__ */ a.jsx(r, { children: l.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e, n) => e.column.id === "select" || e.column.id === "actions" || e.column.id === "_spacer" ? /* @__PURE__ */ a.jsx(
+  return n ? /* @__PURE__ */ a.jsx(r, { children: i.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e, t) => e.column.id === "select" || e.column.id === "actions" || e.column.id === "_spacer" ? /* @__PURE__ */ a.jsx(
     o,
     {
       header: e,
-      enableColumnResizing: i ?? !1
+      enableColumnResizing: l ?? !1
     },
     e.id
   ) : /* @__PURE__ */ a.jsx(
     d,
     {
       header: e,
-      index: n,
-      enableColumnResizing: i ?? !1
+      index: t,
+      enableColumnResizing: l ?? !1
     },
     e.id
-  )) }, s.id)) }) : /* @__PURE__ */ a.jsx(r, { children: l.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e) => /* @__PURE__ */ a.jsx(
+  )) }, s.id)) }) : /* @__PURE__ */ a.jsx(r, { children: i.getHeaderGroups().map((s) => /* @__PURE__ */ a.jsx(m, { className: "bg-muted", children: s.headers.map((e) => /* @__PURE__ */ a.jsx(
     o,
     {
       header: e,
-      enableColumnResizing: i ?? !1
+      enableColumnResizing: l ?? !1
     },
     e.id
   )) }, s.id)) });
 }
 export {
-  b as DataTableHeader
+  j as DataTableHeader
 };

package/dist/components/organisms/data-table/components/dialogs/data-table-manage-columns-dialog.d.ts

@@ -1,9 +1,11 @@
 import { Column } from '@tanstack/react-table';
+import { DataTableTranslations } from '../../data-table.types';
 interface DataTableManageColumnsDialogProps<TData> {
     isOpen: boolean;
     onOpenChange: (open: boolean) => void;
     toggleableColumns: Column<TData, unknown>[];
     visibleColumnsCount: number;
+    translations: Required<DataTableTranslations>;
 }
-export declare function DataTableManageColumnsDialog<TData>({ isOpen, onOpenChange, toggleableColumns, visibleColumnsCount, }: DataTableManageColumnsDialogProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableManageColumnsDialog<TData>({ isOpen, onOpenChange, toggleableColumns, visibleColumnsCount, translations, }: DataTableManageColumnsDialogProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/organisms/data-table/components/dialogs/data-table-manage-columns-dialog.js

@@ -1,68 +1,69 @@
-import { j as s } from "../../../../../_virtual/jsx-runtime.js";
-import { useState as x } from "react";
-import { getColumnDisplayName as c } from "../../utils/data-table-utils.js";
-import { Dialog as y } from "../../../dialog/dialog.js";
-import { SearchField as N } from "../../../../atoms/search-field/search-field.js";
-import { Switch as V } from "../../../../atoms/switch/switch.js";
+import { j as l } from "../../../../../_virtual/jsx-runtime.js";
+import { useState as y } from "react";
+import { getColumnDisplayName as d } from "../../utils/data-table-utils.js";
+import { Dialog as C } from "../../../dialog/dialog.js";
+import { SearchField as V } from "../../../../atoms/search-field/search-field.js";
+import { Switch as j } from "../../../../atoms/switch/switch.js";
 function D({
-  isOpen: d,
-  onOpenChange: m,
-  toggleableColumns: l,
-  visibleColumnsCount: t
+  isOpen: m,
+  onOpenChange: h,
+  toggleableColumns: t,
+  visibleColumnsCount: a,
+  translations: i
 }) {
-  const [a, n] = x(""), h = () => {
-    n(""), m(!1);
-  }, o = l.filter((e) => c(e).toLowerCase().includes(a.toLowerCase())), u = () => {
-    l.forEach((e) => e.toggleVisibility(!0));
-  }, p = () => {
-    const e = l.filter(
-      (i) => i.getIsVisible()
+  const [o, r] = y(""), u = () => {
+    r(""), h(!1);
+  }, n = t.filter((e) => d(e).toLowerCase().includes(o.toLowerCase())), p = () => {
+    t.forEach((e) => e.toggleVisibility(!0));
+  }, f = () => {
+    const e = t.filter(
+      (s) => s.getIsVisible()
     );
-    e.length <= 1 || e.slice(1).forEach((i) => i.toggleVisibility(!1));
-  }, f = l.every(
+    e.length <= 1 || e.slice(1).forEach((s) => s.toggleVisibility(!1));
+  }, b = t.every(
     (e) => e.getIsVisible()
-  ), b = t <= 1;
-  return /* @__PURE__ */ s.jsx(
-    y,
+  ), g = a <= 1;
+  return /* @__PURE__ */ l.jsx(
+    C,
     {
-      open: d,
-      closeIcon: h,
-      title: "Manage columns",
+      open: m,
+      closeIcon: u,
+      title: i.manageColumns,
       widthContainer: 400,
       buttons: [
         {
-          children: "Hide all",
+          children: i.hideAll,
           variant: "link",
-          onClick: p,
-          disabled: b
+          onClick: f,
+          disabled: g
         },
         {
-          children: "Show all",
+          children: i.showAll,
           variant: "link",
-          onClick: u,
-          disabled: f
+          onClick: p,
+          disabled: b
         }
       ],
-      children: /* @__PURE__ */ s.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ s.jsx(
-          N,
+      children: /* @__PURE__ */ l.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ l.jsx(
+          V,
           {
-            placeholder: "Search columns...",
-            value: a,
-            onSearch: n,
+            placeholder: i.searchColumns,
+            value: o,
+            onSearch: r,
             className: "mb-6"
           }
         ),
-        /* @__PURE__ */ s.jsx("div", { className: "space-y-4 max-h-[300px] overflow-y-auto", children: o.length === 0 ? /* @__PURE__ */ s.jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: "No columns found" }) : o.map((e) => {
-          const i = c(e), r = t === 1 && e.getIsVisible();
-          return /* @__PURE__ */ s.jsx(
-            V,
+        /* @__PURE__ */ l.jsx("div", { className: "space-y-4 max-h-[300px] overflow-y-auto", children: n.length === 0 ? /* @__PURE__ */ l.jsx("p", { className: "text-sm text-muted-foreground text-center py-4", children: i.noColumnsFound }) : n.map((e) => {
+          const s = d(e), c = a === 1 && e.getIsVisible();
+          return /* @__PURE__ */ l.jsx(
+            j,
             {
               id: `column-${e.id}`,
               checked: e.getIsVisible(),
-              disabled: r,
-              label: `${i}${r ? " (Last column)" : ""}`,
-              onChange: (g) => e.toggleVisibility(g.target.checked)
+              disabled: c,
+              label: `${s}${c ? ` ${i.lastColumn}` : ""}`,
+              onChange: (x) => e.toggleVisibility(x.target.checked)
             },
             e.id
           );

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

@@ -1,5 +1,5 @@
 import { ColumnResizeMode } from '@tanstack/react-table';
-import { DataTableActionsConfig, DataTableColumnDef } from './data-table.types';
+import { DataTableActionsConfig, DataTableColumnDef, DataTableTranslations, DataTableLanguage } from './data-table.types';
 import { EmptyProps } from '../../molecules';
 /**
  * Props for the DataTable component
@@ -117,6 +117,31 @@ export interface DataTableProps<TData, TValue> {
      * @default false
      */
     enableColumnDragDrop?: boolean;
+    /**
+     * Language code for translations.
+     * When provided, uses built-in translations for the specified language.
+     * @default "en"
+     */
+    lang?: DataTableLanguage;
+    /**
+     * Translation strings for the column menu and dialogs.
+     * All fields are optional with English defaults.
+     * Overrides lang-based translations if both are provided.
+     *
+     * @example
+     * ```tsx
+     * <DataTable
+     *   lang="es"
+     *   translations={{
+     *     ascending: t('table.ascending'),
+     *     descending: t('table.descending'),
+     *     clearSorting: t('table.clearSorting'),
+     *     // ...
+     *   }}
+     * />
+     * ```
+     */
+    translations?: DataTableTranslations;
 }
 /**
  * Advanced data table component built on TanStack Table.
@@ -134,4 +159,4 @@ export interface DataTableProps<TData, TValue> {
  * />
  * ```
  */
-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, enableColumnDragDrop, }: 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, enableColumnDragDrop, lang, translations, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;