@konstructio/ui 0.1.2-alpha.20 → 0.1.2-alpha.22

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,98 +1,95 @@
 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 { 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 g } 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 = ({
   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,
-  showDropdownPagination: a,
+  showPagination: B,
+  showTotalItems: a,
+  showDropdownPagination: t,
   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 || [
       a,
+      t,
       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,
+                    g,
                     {
                       className: N,
-                      classNameArrows: T,
-                      classNameActiveArrows: b
+                      classNameArrows: x,
+                      classNameActiveArrows: T
                     }
                   ),
-                  /* @__PURE__ */ r(k, { isLoading: A })
+                  /* @__PURE__ */ r(k, { isLoading: o })
                 ]
               }
             )
@@ -101,21 +98,21 @@ const G = ({
         e && /* @__PURE__ */ r(
           q,
           {
-            showTotalItems: i,
-            showDropdownPagination: a,
+            showTotalItems: a,
+            showDropdownPagination: t,
             showDotPagination: l,
-            showFormPagination: t,
-            pageSizes: z
+            showFormPagination: m,
+            pageSizes: V
           }
         )
       ] })
     }
   );
-}, o = G;
-o.displayName = "KonstructVirtualizedTable";
-o.TruncateText = C;
-o.Actions = F;
+}, i = G;
+i.displayName = "KonstructVirtualizedTable";
+i.TruncateText = C;
+i.Actions = F;
 export {
   C as TruncateText,
-  o as VirtualizedTable
+  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,40 @@
 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 { f } from "../../../../index-CSWGJT-v.js";
+import { Skeleton as p } from "../Skeleton/Skeleton.js";
+import { cn as m } from "../../../../utils/index.js";
+import { useTableContext as u } from "../../contexts/table.hook.js";
+const y = ({
+  isLoading: s
+}) => {
+  const { table: r, pageSize: l, tableFetching: n } = u();
+  return s || n ? /* @__PURE__ */ e(p, { numberOfRows: l, table: r }) : /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.getRowModel().rows.map(({ id: a, original: i, getVisibleCells: c }) => {
+    const { meta: o = {} } = i;
+    return /* @__PURE__ */ e(
+      "tr",
+      {
+        className: m(
+          "border-b border-b-gray-200 bg-white last:border-b-transparent",
+          o.className
+        ),
+        "data-row-id": a,
+        ...o.attributes ?? {},
+        children: c().map(({ id: b, column: t, getContext: d }) => /* @__PURE__ */ e(
+          "td",
+          {
+            className: m(
+              "px-4 py-1 text-sm",
+              t.columnDef.meta?.className
+            ),
+            ...t.columnDef.meta?.attributes ?? {},
+            children: f(t.columnDef.cell, d())
+          },
+          b
+        ))
+      },
+      a
+    );
+  }) });
 };
 export {
-  w as Body
+  y 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,11 +1,11 @@
-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 d, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as p } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as f } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as x } from "../FormPaginate/FormPaginate.js";
+import { cn as u } from "../../../../utils/index.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as h } from "../../constants/pagination.js";
+const j = ({
   showTotalItems: a = !0,
   showDropdownPagination: i = !0,
   showDotPagination: n = !0,
@@ -13,14 +13,21 @@ const F = ({
   pageSizes: l,
   classNamePagination: o
 }) => {
-  const { totalItems: r = -1 / 0, tableFetching: m } = u();
-  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
+  const {
+    totalItems: r = -1 / 0,
+    tableFetching: m,
+    isFirstLoad: c
+  } = g();
+  return r <= h || m ? null : /* @__PURE__ */ t(d, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: x(
+        className: u(
           "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": !c
+          }
         ),
         children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
@@ -28,11 +35,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(f, { pageSizes: l }) })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(d, {}),
-            s && /* @__PURE__ */ e(f, {})
+            n && /* @__PURE__ */ e(p, {}),
+            s && /* @__PURE__ */ e(x, {})
           ] })
         ] })
       }
@@ -41,5 +48,5 @@ const F = ({
   ] });
 };
 export {
-  F as Pagination
+  j as Pagination
 };

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

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