@yuno-payments/dashboard-design-system 2.9.4 → 3.0.0

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

@@ -1,14 +0,0 @@
-import { SortDirection } from '@tanstack/react-table';
-interface DataTableColumnHeaderContentProps {
-    title: string;
-    info?: string;
-    isPinned: false | "left" | "right";
-    canSort: boolean;
-    sortDirection: false | SortDirection;
-    isHovered: boolean;
-    isMenuOpen: boolean;
-    onMouseEnter: () => void;
-    onMouseLeave: () => void;
-}
-export declare function DataTableColumnHeaderContent({ title, info, isPinned, canSort, sortDirection, isHovered, isMenuOpen, onMouseEnter, onMouseLeave, }: DataTableColumnHeaderContentProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,55 +0,0 @@
-import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as o } from "../../../../atoms/icon/icon.js";
-import { cn as u } from "../../../../../lib/utils.js";
-import { DataTableSortIndicator as f } from "./data-table-sort-indicator.js";
-import { COLUMN_HEADER_CONFIG as t } from "../../utils/data-table-constants.js";
-import { DropdownMenuTrigger as d } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-function N({
-  title: r,
-  info: i,
-  isPinned: n,
-  canSort: s,
-  sortDirection: a,
-  isHovered: l,
-  isMenuOpen: m,
-  onMouseEnter: c,
-  onMouseLeave: p
-}) {
-  return /* @__PURE__ */ e.jsxs(
-    "div",
-    {
-      className: u(
-        `w-full data-[state=open]:bg-accent flex ${t.height} items-center ${t.gap} ${t.roundedClass} ${t.fontSize} ${t.fontWeight} outline-none transition-all`,
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]"
-      ),
-      onMouseEnter: c,
-      onMouseLeave: p,
-      children: [
-        i && /* @__PURE__ */ e.jsx(
-          o,
-          {
-            name: "Info",
-            size: "sm",
-            className: "text-muted-foreground",
-            tooltip: i
-          }
-        ),
-        n && /* @__PURE__ */ e.jsx(o, { name: "PushPinSimple", size: "sm", tooltip: "Pinned column" }),
-        /* @__PURE__ */ e.jsx(f, { canSort: s, sortDirection: a }),
-        /* @__PURE__ */ e.jsx("span", { className: "flex-1 text-left", children: r }),
-        (l || m) && /* @__PURE__ */ e.jsx(d, { asChild: !0, children: /* @__PURE__ */ e.jsx(
-          o,
-          {
-            name: "DotsThreeVertical",
-            size: "sm",
-            tooltip: "Menu",
-            className: "cursor-pointer"
-          }
-        ) })
-      ]
-    }
-  );
-}
-export {
-  N as DataTableColumnHeaderContent
-};

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

@@ -1,10 +0,0 @@
-import { Column } from '@tanstack/react-table';
-import { DataTableTranslations } from '../../data-table.types';
-interface DataTableColumnHeaderMenuProps<TData, TValue> {
-    column: Column<TData, TValue>;
-    isLastVisibleColumn: boolean;
-    onManageColumnsClick: () => void;
-    translations: Required<DataTableTranslations>;
-}
-export declare function DataTableColumnHeaderMenu<TData, TValue>({ column, isLastVisibleColumn, onManageColumnsClick, translations, }: DataTableColumnHeaderMenuProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,76 +0,0 @@
-import { j as e } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as n } from "../../../../atoms/icon/icon.js";
-import { DropdownMenuContent as c, DropdownMenuItem as r, DropdownMenuSeparator as o } from "../../../../atoms/dropdown-menu/dropdown-menu.js";
-function C({
-  column: s,
-  isLastVisibleColumn: d,
-  onManageColumnsClick: x,
-  translations: i
-}) {
-  const l = s.getCanSort(), a = s.getCanPin(), g = s.getCanHide(), t = s.getIsPinned(), m = s.getIsSorted();
-  return /* @__PURE__ */ e.jsxs(c, { align: "start", children: [
-    l && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsxs(r, { onClick: () => s.toggleSorting(!1), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "ArrowUp", size: "sm" }),
-        i.ascending
-      ] }),
-      /* @__PURE__ */ e.jsxs(r, { onClick: () => s.toggleSorting(!0), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "ArrowDown", size: "sm" }),
-        i.descending
-      ] }),
-      m && /* @__PURE__ */ e.jsxs(r, { onClick: () => s.clearSorting(), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "X", size: "sm" }),
-        i.clearSorting
-      ] }),
-      /* @__PURE__ */ e.jsx(o, {})
-    ] }),
-    a && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
-      /* @__PURE__ */ e.jsxs(
-        r,
-        {
-          onClick: () => s.pin("left"),
-          disabled: t === "left",
-          children: [
-            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
-            i.pinToLeft
-          ]
-        }
-      ),
-      /* @__PURE__ */ e.jsxs(
-        r,
-        {
-          onClick: () => s.pin("right"),
-          disabled: t === "right",
-          children: [
-            /* @__PURE__ */ e.jsx(n, { name: "PushPinSimple", size: "sm" }),
-            i.pinToRight
-          ]
-        }
-      ),
-      t && /* @__PURE__ */ e.jsxs(r, { onClick: () => s.pin(!1), children: [
-        /* @__PURE__ */ e.jsx(n, { name: "PushPinSimpleSlash", size: "sm" }),
-        i.unpin
-      ] }),
-      /* @__PURE__ */ e.jsx(o, {})
-    ] }),
-    g && /* @__PURE__ */ e.jsxs(
-      r,
-      {
-        onClick: () => s.toggleVisibility(!1),
-        disabled: d,
-        children: [
-          /* @__PURE__ */ e.jsx(n, { name: "EyeSlash", size: "sm" }),
-          i.hide,
-          d && /* @__PURE__ */ e.jsx("span", { className: "ml-auto text-xs text-muted-foreground", children: i.lastColumn })
-        ]
-      }
-    ),
-    /* @__PURE__ */ e.jsxs(r, { onClick: x, children: [
-      /* @__PURE__ */ e.jsx(n, { name: "Columns", size: "sm" }),
-      i.manageColumns
-    ] })
-  ] });
-}
-export {
-  C as DataTableColumnHeaderMenu
-};

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

@@ -1,27 +0,0 @@
-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,84 +0,0 @@
-import { j as e } from "../../../../../_virtual/jsx-runtime.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 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 w({
-  column: o,
-  table: s,
-  title: a,
-  className: r,
-  info: n
-}) {
-  const {
-    isHovered: p,
-    setIsHovered: t,
-    isMenuOpen: i,
-    setIsMenuOpen: d,
-    isManageColumnsOpen: c,
-    setIsManageColumnsOpen: C,
-    isPinned: x,
-    canPin: f,
-    canSort: m,
-    isSorted: g,
-    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(
-      h,
-      {
-        name: "Info",
-        size: "sm",
-        className: "text-muted-foreground",
-        tooltip: n
-      }
-    ),
-    /* @__PURE__ */ e.jsx("span", { children: a })
-  ] }) : /* @__PURE__ */ e.jsxs(e.Fragment, { 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(
-        A,
-        {
-          title: a,
-          info: n,
-          isPinned: x,
-          canSort: m,
-          sortDirection: g,
-          isHovered: p,
-          isMenuOpen: i,
-          onMouseEnter: () => t(!0),
-          onMouseLeave: () => t(!1)
-        }
-      ),
-      /* @__PURE__ */ e.jsx(
-        b,
-        {
-          column: o,
-          isLastVisibleColumn: D,
-          onManageColumnsClick: T,
-          translations: l
-        }
-      )
-    ] }) }),
-    /* @__PURE__ */ e.jsx(
-      v,
-      {
-        isOpen: c,
-        onOpenChange: C,
-        toggleableColumns: j,
-        visibleColumnsCount: M,
-        translations: l
-      }
-    )
-  ] });
-}
-export {
-  w as DataTableColumnHeader
-};

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

@@ -1,7 +0,0 @@
-import { SortDirection } from '@tanstack/react-table';
-interface DataTableSortIndicatorProps {
-    canSort: boolean;
-    sortDirection: false | SortDirection;
-}
-export declare function DataTableSortIndicator({ canSort, sortDirection, }: DataTableSortIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

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

@@ -1,23 +0,0 @@
-import { j as i } from "../../../../../_virtual/jsx-runtime.js";
-import { Icon as r } from "../../../../atoms/icon/icon.js";
-function s({
-  canSort: t,
-  sortDirection: o
-}) {
-  if (!t || !o)
-    return null;
-  const n = {
-    asc: {
-      name: "ArrowUp",
-      tooltip: "Sort ascending"
-    },
-    desc: {
-      name: "ArrowDown",
-      tooltip: "Sort descending"
-    }
-  }[o];
-  return /* @__PURE__ */ i.jsx(r, { name: n.name, size: "sm", tooltip: n.tooltip });
-}
-export {
-  s as DataTableSortIndicator
-};

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

@@ -1,27 +0,0 @@
-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-body.js

@@ -1,36 +0,0 @@
-import { j as s } from "../../../../_virtual/jsx-runtime.js";
-import { TableBody as m, TableRow as p } from "../../../../vendor/shadcn/table.js";
-import { cn as b } from "../../../../lib/utils.js";
-import { DataTableBodyCell as c } from "./cells/data-table-body-cell.js";
-function u({
-  table: l,
-  enableColumnResizing: r,
-  onRowClick: t,
-  rowHeight: o
-}) {
-  const a = l.getRowModel().rows, n = (e) => e === a.length - 1;
-  return /* @__PURE__ */ s.jsx(m, { children: a.map((e, d) => /* @__PURE__ */ s.jsx(
-    p,
-    {
-      "data-state": e.getIsSelected() && "selected",
-      onClick: () => t && t(e.original),
-      className: b(
-        t ? "cursor-pointer" : "",
-        n(d) && "border-b-0"
-      ),
-      style: { height: o ? `${o}px` : void 0 },
-      children: e.getVisibleCells().map((i) => /* @__PURE__ */ s.jsx(
-        c,
-        {
-          cell: i,
-          enableColumnResizing: r ?? !1
-        },
-        i.id
-      ))
-    },
-    e.id
-  )) });
-}
-export {
-  u as DataTableBody
-};

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

@@ -1,8 +0,0 @@
-import { Table } from '@tanstack/react-table';
-interface DataTableHeaderProps<TData> {
-    table: Table<TData>;
-    enableColumnResizing?: boolean;
-    enableColumnDragDrop?: boolean;
-}
-export declare function DataTableHeader<TData>({ table, enableColumnResizing, enableColumnDragDrop, }: DataTableHeaderProps<TData>): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,36 +0,0 @@
-import { j as a } from "../../../../_virtual/jsx-runtime.js";
-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 j({
-  table: i,
-  enableColumnResizing: l,
-  enableColumnDragDrop: n = !1
-}) {
-  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: l ?? !1
-    },
-    e.id
-  ) : /* @__PURE__ */ a.jsx(
-    d,
-    {
-      header: e,
-      index: t,
-      enableColumnResizing: l ?? !1
-    },
-    e.id
-  )) }, 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: l ?? !1
-    },
-    e.id
-  )) }, s.id)) });
-}
-export {
-  j as DataTableHeader
-};

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

@@ -1,11 +0,0 @@
-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, 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,77 +0,0 @@
-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 "../../../../molecules/search-field/search-field.js";
-import { Switch as j } from "../../../../molecules/switch/switch.js";
-function D({
-  isOpen: m,
-  onOpenChange: h,
-  toggleableColumns: t,
-  visibleColumnsCount: a,
-  translations: i
-}) {
-  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((s) => s.toggleVisibility(!1));
-  }, b = t.every(
-    (e) => e.getIsVisible()
-  ), g = a <= 1;
-  return /* @__PURE__ */ l.jsx(
-    C,
-    {
-      open: m,
-      closeIcon: u,
-      title: i.manageColumns,
-      widthContainer: 400,
-      buttons: [
-        {
-          children: i.hideAll,
-          variant: "link",
-          onClick: f,
-          disabled: g
-        },
-        {
-          children: i.showAll,
-          variant: "link",
-          onClick: p,
-          disabled: b
-        }
-      ],
-      children: /* @__PURE__ */ l.jsxs("div", { className: "space-y-4", children: [
-        /* @__PURE__ */ l.jsx(
-          V,
-          {
-            placeholder: i.searchColumns,
-            value: o,
-            onSearch: r,
-            className: "mb-6"
-          }
-        ),
-        /* @__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: c,
-              label: `${s}${c ? ` ${i.lastColumn}` : ""}`,
-              onChange: (x) => e.toggleVisibility(x.target.checked)
-            },
-            e.id
-          );
-        }) })
-      ] })
-    }
-  );
-}
-export {
-  D as DataTableManageColumnsDialog
-};

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

@@ -1,34 +0,0 @@
-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,35 +0,0 @@
-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 { Skeleton as o } from "../../../../../vendor/shadcn/skeleton.js";
-function j(s) {
-  return typeof s == "object" && s !== null && "title" in s && typeof s.title == "string";
-}
-function b(s) {
-  const { header: l } = s;
-  return typeof l == "string" ? l : j(l) ? l.title : null;
-}
-function v({
-  columns: s,
-  rowsCount: l = 5,
-  checkboxSelection: c = !1,
-  actions: d,
-  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(x, { children: /* @__PURE__ */ e.jsx(a, { className: "bg-muted", 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: 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))
-      },
-      t
-    )) })
-  ] }) }) });
-}
-export {
-  v as DataTableLoading
-};