@konstructio/ui 0.1.2-alpha.21 → 0.1.2-alpha.23

package/dist/components/Tooltip/Tooltip.js

@@ -1,5 +1,5 @@
 import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { S as i } from "../../index-DQH6odE9.js";
+import { S as i } from "../../index-BtQfgaSF.js";
 import { forwardRef as v, useRef as N, useImperativeHandle as w, useMemo as h, isValidElement as x } from "react";
 import { cn as o } from "../../utils/index.js";
 import { arrowVariants as R, tooltipVariants as V } from "./Tooltip.variants.js";

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,121 +1,119 @@
 import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import { useMemo as H } from "react";
-import { cn as m } from "../../utils/index.js";
-import { TableProvider as I } from "./contexts/table.provider.js";
-import { Filter as K } from "./components/Filter/Filter.js";
-import { Header as M } from "./components/Header/Header.js";
-import { Body as k } from "./components/Body/Body.js";
-import { Pagination as q } from "./components/Pagination/Pagination.js";
-import { TruncateText as C } from "./components/TruncateText/TruncateText.js";
-import { Actions as F } from "./components/Actions/Actions.js";
-const G = ({
+import { useMemo as I } from "react";
+import { cn as c } from "../../utils/index.js";
+import { TableProvider as K } from "./contexts/table.provider.js";
+import { Filter as M } from "./components/Filter/Filter.js";
+import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
+import { Header as k } from "./components/Header/Header.js";
+import { Body as q } from "./components/Body/Body.js";
+import { Pagination as C } from "./components/Pagination/Pagination.js";
+import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
+import { Actions as G } from "./components/Actions/Actions.js";
+const J = ({
   id: n,
-  ariaLabel: c,
-  columns: d,
-  data: f,
-  totalItems: p = -1 / 0,
-  className: u,
-  classNameHeaderActiveArrows: b,
-  classNameHeaderArrows: T,
+  ariaLabel: f,
+  columns: p,
+  data: d,
+  totalItems: u = -1 / 0,
+  className: b,
+  classNameHeaderActiveArrows: T,
+  classNameHeaderArrows: x,
   classNameHeaderTable: N,
-  classNameTable: h,
-  classNameWrapperTable: x,
-  isLoading: A,
-  fetchData: v,
-  queryOptions: g,
+  classNameTable: A,
+  classNameWrapperTable: y,
+  isLoading: o,
+  fetchData: h,
+  queryOptions: z,
   // Pagination
-  showPagination: y,
-  showTotalItems: i,
+  showPagination: B,
+  showTotalItems: t,
   showDropdownPagination: a,
   showDotPagination: l,
-  showFormPagination: t,
-  pageSizes: z,
+  showFormPagination: m,
+  pageSizes: V,
   // Filter
-  showFilter: V = !1,
-  showFilterInput: j,
+  showFilter: j = !1,
+  showFilterInput: v,
   filterSearchPlaceholder: w = "",
-  multiSelectFilter: B,
-  filterActions: P,
-  showResetButton: E = !0
+  multiSelectFilter: P,
+  filterActions: E,
+  showResetButton: H = !0
 }) => {
-  const e = H(
-    () => y || [
-      i,
+  const e = I(
+    () => B || [
+      t,
       a,
       l,
-      t
+      m
     ].some(Boolean),
     []
   );
   return /* @__PURE__ */ r(
-    I,
+    K,
     {
       id: n,
-      columns: d,
-      data: f,
-      fetchData: v,
-      totalItems: p,
-      queryOptions: g,
+      columns: p,
+      data: d,
+      fetchData: h,
+      totalItems: u,
+      queryOptions: z,
       isPaginationEnabled: e,
-      children: /* @__PURE__ */ s("section", { className: u, children: [
-        V && /* @__PURE__ */ r(
-          K,
+      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
+        j && /* @__PURE__ */ r(
+          M,
           {
-            actions: P,
-            multiSelectFilter: B,
+            actions: E,
+            multiSelectFilter: P,
             placeholder: w,
-            showFilterInput: j,
-            showResetButton: E
+            showFilterInput: v,
+            showResetButton: H
           }
         ),
         /* @__PURE__ */ r(
-          "div",
+          W,
           {
-            className: m(
-              "shadow rounded-t-lg",
-              {
-                "overflow-hidden rounded-lg": !e
-              },
-              x
-            ),
+            showPagination: e,
+            classNameWrapperTable: y,
+            isLoading: o,
             children: /* @__PURE__ */ s(
               "table",
               {
-                className: m("w-full border-collapse", h),
-                "aria-label": c,
+                className: c("w-full border-collapse table-fixed", A),
+                "aria-label": f,
                 children: [
                   /* @__PURE__ */ r(
-                    M,
+                    k,
                     {
                       className: N,
-                      classNameArrows: T,
-                      classNameActiveArrows: b
+                      classNameArrows: x,
+                      classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(k, { isLoading: A })
+                  /* @__PURE__ */ r(q, { isLoading: o, showPagination: e })
                 ]
               }
             )
           }
         ),
         e && /* @__PURE__ */ r(
-          q,
+          C,
           {
-            showTotalItems: i,
+            showTotalItems: t,
             showDropdownPagination: a,
             showDotPagination: l,
-            showFormPagination: t,
-            pageSizes: z
+            showFormPagination: m,
+            pageSizes: V,
+            isLoading: o
           }
         )
       ] })
     }
   );
-}, o = G;
-o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = C;
-o.Actions = F;
+}, i = J;
+i.displayName = "KonstructVirtualizedTable";
+i.TruncateText = F;
+i.Actions = G;
 export {
-  C as TruncateText,
-  o as VirtualizedTable
+  F as TruncateText,
+  i as VirtualizedTable
 };

package/dist/components/VirtualizedTable/components/Actions/Actions.js

@@ -1,11 +1,11 @@
 import { jsxs as o, jsx as e } from "react/jsx-runtime";
 import { Button as r } from "../../../Button/Button.js";
 import { cn as n } from "../../../../utils/index.js";
-import { E as c } from "../../../../ellipsis-vertical-DpnVYRxI.js";
+import { E as c } from "../../../../ellipsis-vertical-BVPtjl5f.js";
 const u = ({
   actions: t,
   ...i
-}) => t ? /* @__PURE__ */ o("div", { className: "relative group w-fit", children: [
+}) => t ? /* @__PURE__ */ o("div", { className: "relative group", children: [
   /* @__PURE__ */ o(
     r,
     {

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

@@ -1,26 +1,48 @@
-import { jsx as e } from "react/jsx-runtime";
-import { f as d } from "../../../../index-Dx2grAuN.js";
-import { Skeleton as i } from "../../../Skeleton/Skeleton.js";
-import { useTableContext as p } from "../../contexts/table.hook.js";
-const w = ({ isLoading: o }) => {
-  const { table: t, pageSize: a } = p();
-  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: o ? /* @__PURE__ */ e(i, { numberOfRows: a, table: t }) : t.getRowModel().rows.map(({ id: l, getVisibleCells: s }) => /* @__PURE__ */ e(
-    "tr",
-    {
-      className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
-      children: s().map(({ id: m, column: r, getContext: n }) => /* @__PURE__ */ e(
-        "td",
-        {
-          className: "px-4 py-1 text-sm",
-          style: { width: r.getSize() },
-          children: d(r.columnDef.cell, n())
-        },
-        m
-      ))
-    },
-    l
-  )) });
+import { jsx as t } from "react/jsx-runtime";
+import { f as x } from "../../../../index-CSWGJT-v.js";
+import { Skeleton as y } from "../Skeleton/Skeleton.js";
+import { cn as b } from "../../../../utils/index.js";
+import { useTableContext as N } from "../../contexts/table.hook.js";
+const j = ({
+  isLoading: d,
+  showPagination: a
+}) => {
+  const { table: o, pageSize: i, tableFetching: f } = N();
+  if (d || f)
+    return /* @__PURE__ */ t(y, { numberOfRows: i, table: o });
+  const e = o.getRowModel().rows ?? [];
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map(({ id: s, original: p, getVisibleCells: u }, l) => {
+    const { meta: n = {} } = p, m = u();
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        className: b(
+          "border-b border-b-gray-200 last:border-b-transparent bg-transparent",
+          n.className
+        ),
+        "data-row-id": s,
+        ...n.attributes ?? {},
+        children: m.map(({ id: g, column: r, getContext: h }, c) => /* @__PURE__ */ t(
+          "td",
+          {
+            className: b(
+              "px-4 py-1 text-sm bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": l === e.length - 1 && c === 0 || !a,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": l === e.length - 1 && c === m.length - 1 || !a
+              }
+            ),
+            ...r.columnDef.meta?.attributes ?? {},
+            children: x(r.columnDef.cell, h())
+          },
+          g
+        ))
+      },
+      s
+    );
+  }) });
 };
 export {
-  w as Body
+  j as Body
 };

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

@@ -1,7 +1,7 @@
 import { jsx as i, 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-DeMVrnIg.js";
+import { C as g, a as d } from "../../../../chevron-right-DYvXLeql.js";
 import { useTableContext as f } from "../../contexts/table.hook.js";
 const r = u(
   ({

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -1,68 +1,70 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
-import { f as u } from "../../../../index-Dx2grAuN.js";
-import { useCallback as i } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import b from "../../assets/chevron-up.js";
-import g from "../../assets/chevron-down.js";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { f as g } from "../../../../index-CSWGJT-v.js";
+import { useCallback as p } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import u from "../../assets/chevron-up.js";
+import C from "../../assets/chevron-down.js";
 import { useTableContext as S } from "../../contexts/table.hook.js";
-const y = ({
-  className: p,
-  classNameArrows: n,
-  classNameActiveArrows: l
+const D = ({
+  className: n,
+  classNameArrows: i,
+  classNameActiveArrows: a
 }) => {
-  const { table: c, onSorting: r } = S(), d = i(
-    (t) => r([{ id: t.id, desc: !1 }]),
-    [r]
-  ), x = i(
-    (t) => r([{ id: t.id, desc: !0 }]),
-    [r]
+  const { table: c, onSorting: o } = S(), d = p(
+    (t) => o([{ id: t.id, desc: !1 }]),
+    [o]
+  ), x = p(
+    (t) => o([{ id: t.id, desc: !0 }]),
+    [o]
   );
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ r(
     "thead",
     {
-      className: o(
-        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 w-full relative block overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
-        p
+      className: s(
+        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
+        n
       ),
-      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
+      children: c.getHeaderGroups().map(({ id: t, headers: m }) => /* @__PURE__ */ r("tr", { children: m.map(({ id: f, column: e, getContext: h }) => /* @__PURE__ */ r(
         "th",
         {
           scope: "col",
-          className: "px-4 py-3 text-left text-xs",
-          style: { width: e.columnDef.size },
-          children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 w-full", children: [
-            u(e.columnDef.header, h()),
-            e.getCanSort() && /* @__PURE__ */ a(
+          className: s(
+            "px-4 py-3 text-left text-xs",
+            e.columnDef.meta?.headerClassName
+          ),
+          children: /* @__PURE__ */ l("span", { className: "flex items-center gap-2 w-full", children: [
+            g(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ l(
               "div",
               {
-                className: o(
+                className: s(
                   "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  n
+                  i
                 ),
                 role: "presentation",
                 children: [
-                  /* @__PURE__ */ s(
-                    b,
+                  /* @__PURE__ */ r(
+                    u,
                     {
-                      className: o(
+                      className: s(
                         "w-2 h-2 cursor-pointer",
                         {
                           "text-blue-600": e.getIsSorted() === "asc"
                         },
-                        l
+                        a
                       ),
                       onClick: () => d(e)
                     }
                   ),
-                  /* @__PURE__ */ s(
-                    g,
+                  /* @__PURE__ */ r(
+                    C,
                     {
-                      className: o(
+                      className: s(
                         "w-2 h-2 cursor-pointer",
                         {
                           "text-blue-600": e.getIsSorted() === "desc"
                         },
-                        l
+                        a
                       ),
                       onClick: () => x(e)
                     }
@@ -72,11 +74,11 @@ const y = ({
             )
           ] })
         },
-        m
+        f
       )) }, t))
     }
   );
 };
 export {
-  y as Header
+  D as Header
 };

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -1,26 +1,34 @@
-import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { DotPaginate as d } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as p } from "../DropdownPaginate/DropdownPaginate.js";
-import { FormPaginate as f } from "../FormPaginate/FormPaginate.js";
-import { cn as x } from "../../../../utils/index.js";
-import { useTableContext as u } from "../../contexts/table.hook.js";
-import { DEFAULT_PAGE_SIZE as g } from "../../constants/pagination.js";
-const F = ({
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as f } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as x } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { cn as g } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as b } from "../../constants/pagination.js";
+const D = ({
   showTotalItems: a = !0,
   showDropdownPagination: i = !0,
   showDotPagination: n = !0,
   showFormPagination: s = !0,
   pageSizes: l,
-  classNamePagination: o
+  classNamePagination: o,
+  isLoading: m
 }) => {
-  const { totalItems: r = -1 / 0, tableFetching: m } = u();
-  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
+  const {
+    totalItems: r = -1 / 0,
+    tableFetching: c,
+    isFirstLoad: d
+  } = h();
+  return r <= b || c || m ? null : /* @__PURE__ */ t(p, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: x(
+        className: g(
           "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
-          o
+          o,
+          {
+            "animate-in fade-in-10": !d
+          }
         ),
         children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
@@ -28,11 +36,11 @@ const F = ({
               r,
               " Results"
             ] }) : null,
-            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(p, { pageSizes: l }) })
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(x, { pageSizes: l }) })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(d, {}),
-            s && /* @__PURE__ */ e(f, {})
+            n && /* @__PURE__ */ e(f, {}),
+            s && /* @__PURE__ */ e(u, {})
           ] })
         ] })
       }
@@ -41,5 +49,5 @@ const F = ({
   ] });
 };
 export {
-  F as Pagination
+  D as Pagination
 };

package/dist/components/VirtualizedTable/components/Skeleton/Skeleton.js

@@ -0,0 +1,67 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Button as c } from "../../../Button/Button.js";
+import { cn as i } from "../../../../utils/index.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
+import { E as g } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const _ = ({ numberOfRows: n, table: o }) => {
+  const { tableFetching: d, tableLoading: m } = h(), e = Array.from({ length: n });
+  return /* @__PURE__ */ t("tbody", { className: "text-slate-800 text-sm font-normal relative", children: e.map((p, a) => {
+    const s = o.getAllColumns();
+    return /* @__PURE__ */ t(
+      "tr",
+      {
+        className: "border-b border-b-gray-200 bg-transparent last:border-b-transparent",
+        children: s.map((r, l) => r.id !== "actions" ? /* @__PURE__ */ t(
+          "td",
+          {
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t("div", { className: "animate-in fade-in-0", children: /* @__PURE__ */ t("div", { className: "bg-gray-200 animate-pulse rounded h-5 w-full" }) })
+          },
+          `skeleton-${r.id}`
+        ) : /* @__PURE__ */ t(
+          "td",
+          {
+            className: i(
+              "px-4 py-1 bg-white",
+              r.columnDef.meta?.className,
+              {
+                "[tr:last-child_&:first-of-type]:rounded-bl-lg": a === e.length - 1 && l === 0,
+                "[tr:last-child_&:last-of-type]:rounded-br-lg": a === e.length - 1 && l === s.length - 1
+              }
+            ),
+            children: /* @__PURE__ */ t(
+              c,
+              {
+                variant: "text",
+                shape: "circle",
+                size: "large",
+                disabled: !0,
+                "aria-hidden": "true",
+                children: /* @__PURE__ */ t(
+                  g,
+                  {
+                    className: i("w-5 h-5 text-slate-400", {
+                      "text-gray-300 animate-pulse": d || m
+                    })
+                  }
+                )
+              }
+            )
+          },
+          `skeleton-${r.id}`
+        ))
+      },
+      `skeleton-row-${a}`
+    );
+  }) });
+};
+export {
+  _ as Skeleton
+};