@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

package/dist/components/VirtualizedTable/components/Body/Body.js

@@ -1,25 +1,116 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f as d } from "../../../../index-Dx2grAuN.js";
-import { useTableContext as m } from "../../contexts/table.hook.js";
-const p = () => {
-  const { table: r } = m();
-  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, getVisibleCells: o }) => /* @__PURE__ */ e(
-    "tr",
+import { jsx as a, jsxs as A } from "react/jsx-runtime";
+import { f as B } from "../../../../index-CSWGJT-v.js";
+import { Fragment as H } from "react";
+import { Skeleton as M } from "../Skeleton/Skeleton.js";
+import { cn as l } from "../../../../utils/index.js";
+import { ExpandableRow as O } from "../ExpandableRow/ExpandableRow.js";
+import { useTableContext as V } from "../../contexts/table.hook.js";
+const U = ({
+  isLoading: g,
+  showPagination: t
+}) => {
+  const {
+    table: i,
+    pageSize: h,
+    tableFetching: w,
+    enableExpandedRow: N,
+    classNameExpandedRow: R,
+    classNameExpandedCell: k,
+    classNameExpandedContent: E,
+    enableHoverRow: p,
+    classNameHoverRow: C,
+    classNameActiveExpandedRow: v,
+    renderExpandedRow: b,
+    isBorderOnAdjacentCell: D,
+    isExpandColumnVisible: y
+  } = V();
+  if (g || w)
+    return /* @__PURE__ */ a(M, { numberOfRows: h, table: i });
+  const d = i.getRowModel().rows ?? [];
+  return /* @__PURE__ */ a(
+    "tbody",
     {
-      className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
-      children: o().map(({ id: l, column: t, getContext: s }) => /* @__PURE__ */ e(
-        "td",
-        {
-          className: "px-4 py-1 text-sm",
-          style: { width: t.getSize() },
-          children: d(t.columnDef.cell, s())
-        },
-        l
-      ))
-    },
-    a
-  )) });
+      className: l(
+        "text-slate-800",
+        "text-sm",
+        "font-normal",
+        "relative",
+        "dark:border-x"
+      ),
+      children: d.map((x, s) => {
+        const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
+        return /* @__PURE__ */ A(H, { children: [
+          /* @__PURE__ */ a(
+            "tr",
+            {
+              className: l(
+                { "group/row": p },
+                "border-b",
+                "border-b-gray-200",
+                "dark:text-metal-50",
+                "dark:border-b-metal-700",
+                "bg-transparent",
+                o.className
+              ),
+              "data-row-id": m,
+              ...o.attributes ?? {},
+              children: n.map(({ id: F, column: r, getContext: S }, f) => {
+                const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
+                return /* @__PURE__ */ a(
+                  "td",
+                  {
+                    className: l(
+                      "px-4",
+                      "py-1",
+                      "text-sm",
+                      "bg-white",
+                      "dark:bg-metal-900",
+                      "dark:border-t",
+                      "dark:border-metal-700",
+                      "dark:first:border-l",
+                      "dark:last:border-r",
+                      {
+                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
+                        [l(
+                          "bg-zinc-100 dark:bg-metal-800",
+                          v
+                        )]: !!e
+                      },
+                      C,
+                      _,
+                      {
+                        "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
+                        "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
+                        "dark:[tr:last-child_&]:border-b": !t
+                      }
+                    ),
+                    "data-expanded": e ? !0 : void 0,
+                    ...r.columnDef.meta?.attributes ?? {},
+                    children: B(r.columnDef.cell, S())
+                  },
+                  F
+                );
+              })
+            }
+          ),
+          z && /* @__PURE__ */ a(
+            O,
+            {
+              classNameExpandedCell: k,
+              classNameExpandedContent: E,
+              classNameExpandedRow: R,
+              colSpan: n.length,
+              id: m,
+              isExpanded: !!e,
+              isLastRow: s === d.length - 1 && !t,
+              children: o.expandedRow ?? b?.(c)
+            }
+          )
+        ] }, m);
+      })
+    }
+  );
 };
 export {
-  p as Body
+  U as Body
 };

package/dist/components/VirtualizedTable/components/Body/Body.types.d.ts

@@ -0,0 +1,5 @@
+import { RowData } from '../../VirtualizedTable.types';
+export type BodyProps<_TData extends RowData = RowData> = {
+    isLoading?: boolean;
+    showPagination?: boolean;
+};

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.d.ts

@@ -0,0 +1 @@
+export declare const DotPaginate: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/VirtualizedTable/components/DotPaginate/DotPaginate.js

@@ -1,165 +1,169 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { jsx as s, jsxs as m } from "react/jsx-runtime";
 import { memo as u } from "react";
 import { cn as p } from "../../../../utils/index.js";
-import { C as g, a as d } from "../../../../chevron-right-VYBOBhRt.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
-const r = u(
+import { C as h } from "../../../../chevron-left-BHBf-gQY.js";
+import { C as f } from "../../../../chevron-right-DvXGOiS_.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+const l = u(
   ({
-    index: e,
-    currentPage: t,
-    handlePage: l
-  }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+    index: t,
+    currentPage: e,
+    handlePage: i
+  }) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
     "button",
     {
       type: "button",
-      onClick: () => l(e),
-      className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer", {
-        "bg-blue-600 text-white": e === t
-      }),
-      children: e + 1
+      onClick: () => i(t),
+      className: p(
+        "px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500",
+        {
+          "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": t === e
+        }
+      ),
+      children: t + 1
     }
-  ) }, e)
+  ) }, t)
 );
-r.displayName = "PageButton";
-const o = u(({ keyValue: e }) => /* @__PURE__ */ i("li", { className: "px-2", children: /* @__PURE__ */ i("span", { className: "text-blue-600 select-none", children: "..." }) }, e));
-o.displayName = "Ellipsis";
-const a = u(
+l.displayName = "KonstructPageButton";
+const a = u(({ keyValue: t }) => /* @__PURE__ */ s("li", { className: "px-2", children: /* @__PURE__ */ s("span", { className: "text-blue-600 select-none dark:text-aurora-500", children: "..." }) }, t));
+a.displayName = "KonstructEllipsis";
+const o = u(
   ({
-    direction: e,
-    onClick: t,
-    disabled: l
-  }) => /* @__PURE__ */ i("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ i("button", { onClick: t, disabled: l, children: /* @__PURE__ */ i(
-    e === "left" ? g : d,
+    direction: t,
+    disabled: e,
+    onClick: i
+  }) => /* @__PURE__ */ s("li", { className: "flex items-center justify-center", children: /* @__PURE__ */ s("button", { onClick: i, disabled: e, children: /* @__PURE__ */ s(
+    t === "left" ? h : f,
     {
       className: p("h-6 w-6 cursor-pointer", {
-        "text-blue-600": !l,
-        "text-slate-400 cursor-not-allowed": l
+        "text-blue-600 dark:text-aurora-500": !e,
+        "text-slate-400 cursor-not-allowed": e
       })
     }
   ) }) })
 );
-a.displayName = "NavigationButton";
-const k = () => {
-  const { totalPages: e, page: t, handlePage: l } = f();
+o.displayName = "KonstructNavigationButton";
+const C = () => {
+  const { totalPages: t, page: e, handlePage: i } = g();
   return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ s(
+      o,
       {
         direction: "left",
-        onClick: () => l(t - 1),
-        disabled: t === 0
+        onClick: () => i(e - 1),
+        disabled: e === 0
       }
     ),
     (() => {
-      if (e <= 5)
-        return Array.from({ length: e }, (s, c) => /* @__PURE__ */ i(
-          r,
+      if (t <= 5)
+        return Array.from({ length: t }, (r, c) => /* @__PURE__ */ s(
+          l,
           {
             index: c,
-            currentPage: t,
-            handlePage: l
+            currentPage: e,
+            handlePage: i
           },
           c
         ));
       const n = [];
-      if (t < 3) {
-        for (let s = 0; s < 3; s++)
+      if (e < 3) {
+        for (let r = 0; r < 3; r++)
           n.push(
-            /* @__PURE__ */ i(
-              r,
+            /* @__PURE__ */ s(
+              l,
               {
-                index: s,
-                currentPage: t,
-                handlePage: l
+                index: r,
+                currentPage: e,
+                handlePage: i
               },
-              s
+              r
             )
           );
-        n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let s = e - 2; s < e; s++)
+        n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = t - 2; r < t; r++)
           n.push(
-            /* @__PURE__ */ i(
-              r,
+            /* @__PURE__ */ s(
+              l,
               {
-                index: s,
-                currentPage: t,
-                handlePage: l
+                index: r,
+                currentPage: e,
+                handlePage: i
               },
-              s
+              r
             )
           );
-      } else if (t >= e - 5) {
+      } else if (e >= t - 5) {
         n.push(
-          /* @__PURE__ */ i(
-            r,
+          /* @__PURE__ */ s(
+            l,
             {
               index: 0,
-              currentPage: t,
-              handlePage: l
+              currentPage: e,
+              handlePage: i
             },
             0
           )
-        ), e > 6 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let s = Math.max(1, e - 5); s < e; s++)
+        ), t > 6 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = Math.max(1, t - 5); r < t; r++)
           n.push(
-            /* @__PURE__ */ i(
-              r,
+            /* @__PURE__ */ s(
+              l,
               {
-                index: s,
-                currentPage: t,
-                handlePage: l
+                index: r,
+                currentPage: e,
+                handlePage: i
               },
-              s
+              r
             )
           );
       } else {
         n.push(
-          /* @__PURE__ */ i(
-            r,
+          /* @__PURE__ */ s(
+            l,
             {
               index: 0,
-              currentPage: t,
-              handlePage: l
+              currentPage: e,
+              handlePage: i
             },
             0
           )
-        ), t > 3 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis1" }, "ellipsis1"));
-        for (let s = t - 1; s <= t + 1; s++)
-          s > 0 && s < e - 1 && n.push(
-            /* @__PURE__ */ i(
-              r,
+        ), e > 3 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis1" }, "ellipsis1"));
+        for (let r = e - 1; r <= e + 1; r++)
+          r > 0 && r < t - 1 && n.push(
+            /* @__PURE__ */ s(
+              l,
               {
-                index: s,
-                currentPage: t,
-                handlePage: l
+                index: r,
+                currentPage: e,
+                handlePage: i
               },
-              s
+              r
             )
           );
-        t < e - 4 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
-          /* @__PURE__ */ i(
-            r,
+        e < t - 4 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
+          /* @__PURE__ */ s(
+            l,
             {
-              index: e - 1,
-              currentPage: t,
-              handlePage: l
+              index: t - 1,
+              currentPage: e,
+              handlePage: i
             },
-            e - 1
+            t - 1
           )
         );
       }
       return n;
     })(),
-    /* @__PURE__ */ i(
-      a,
+    /* @__PURE__ */ s(
+      o,
       {
         direction: "right",
-        onClick: () => l(t + 1),
-        disabled: t >= e - 1
+        onClick: () => i(e + 1),
+        disabled: e >= t - 1
       }
     )
   ] });
 };
 export {
-  k as DotPaginate
+  C as DotPaginate
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './DropdownPaginate.types';
+export declare const DropdownPaginate: FC<Props>;

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -1,34 +1,34 @@
-import { jsxs as i, jsx as a } from "react/jsx-runtime";
-import { useMemo as p, useCallback as l } from "react";
-import { Dropdown as c } from "../../../Dropdown/Dropdown.js";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import { useMemo as l, useCallback as p } from "react";
+import { Select as c } from "../../../Select/Select.js";
 import { DEFAULT_PAGE_SIZES as g } from "../../constants/pagination.js";
-import { useTableContext as x } from "../../contexts/table.hook.js";
-const b = ({
-  pageSizes: n = g
+import { useTableContext as d } from "../../contexts/table.hook.js";
+const u = ({
+  pageSizes: m = g
 }) => {
-  const { pageSize: s, onPageSize: o, handlePage: t } = x(), r = p(
-    () => n.map(String).map((e) => ({ label: e, value: e })),
+  const { pageSize: r, onPageSize: t, handlePage: a } = d(), s = l(
+    () => m.map(String).map((e) => ({ label: e, value: e })),
     []
-  ), m = l(
+  ), n = p(
     (e) => {
-      o(Number(e)), t(0);
+      t(Number(e)), a(0);
     },
-    [t, o]
+    [a, t]
   );
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ a("span", { children: "Show" }),
-    /* @__PURE__ */ a(
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2 dark:text-metal-300", children: [
+    /* @__PURE__ */ o("span", { children: "Show" }),
+    /* @__PURE__ */ o(
       c,
       {
-        className: "w-[88px] [&>div>p]:text-xs bg-white",
-        listItemClassName: "[&>p]:text-xs",
-        options: r,
-        value: s.toString(),
-        onChange: ({ target: e }) => m(e.value)
+        className: "w-22 [&>div>p]:text-sm bg-white",
+        listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
+        options: s,
+        value: r.toString(),
+        onChange: ({ target: e }) => n(e.value)
       }
     )
   ] });
 };
 export {
-  b as DropdownPaginate
+  u as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.types.d.ts

@@ -0,0 +1,3 @@
+export type Props = {
+    pageSizes?: number[] | string[];
+};

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ExpandableRow.types';
+export declare const ExpandableRow: FC<Props>;

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -0,0 +1,51 @@
+import { jsx as d } from "react/jsx-runtime";
+import { cn as o } from "../../../../utils/index.js";
+const n = ({
+  children: a,
+  classNameExpandedCell: b,
+  classNameExpandedContent: t,
+  classNameExpandedRow: l,
+  colSpan: m,
+  id: i,
+  isExpanded: r,
+  isLastRow: e
+}) => /* @__PURE__ */ d(
+  "tr",
+  {
+    className: o("h-0 leading-0", l),
+    "data-expanded-row-id": i,
+    children: /* @__PURE__ */ d(
+      "td",
+      {
+        colSpan: m,
+        className: o(
+          "p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700",
+          { "rounded-b-lg": e },
+          {
+            "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
+            "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
+            "border-y-0": !r && !e,
+            "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
+          }
+        ),
+        children: /* @__PURE__ */ d(
+          "div",
+          {
+            className: o(
+              "grid transition-[grid-template-rows] duration-300 ease-in-out",
+              {
+                "grid-rows-[1fr]": r,
+                "grid-rows-[0fr]": !r
+              },
+              t
+            ),
+            children: /* @__PURE__ */ d("div", { className: "overflow-hidden", children: /* @__PURE__ */ d("div", { className: o("px-4 py-3", b), children: a }) })
+          }
+        )
+      }
+    )
+  }
+);
+export {
+  n as ExpandableRow
+};

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.types.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren<{
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedRow?: string;
+    colSpan: number;
+    id: string;
+    isExpanded: boolean;
+    isLastRow?: boolean;
+}>;

package/dist/components/VirtualizedTable/components/Filter/Filter.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Filter.types';
+export declare const Filter: FC<Props>;