@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.51

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

@@ -1,70 +1,90 @@
-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 { useTableContext as S } from "../../contexts/table.hook.js";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
+import { f as b } from "../../../../index-CSWGJT-v.js";
+import { useCallback as l } from "react";
+import { cn as a } from "../../../../utils/index.js";
+import g from "../../assets/chevron-up.js";
+import u from "../../assets/chevron-down.js";
+import { useTableContext as k } from "../../contexts/table.hook.js";
 const y = ({
-  className: p,
-  classNameArrows: n,
-  classNameActiveArrows: l
+  className: n,
+  classNameArrows: i,
+  classNameActiveArrows: s
 }) => {
-  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 } = k(), m = l(
+    (t) => o([{ id: t.id, desc: !1 }]),
+    [o]
+  ), p = l(
+    (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: a(
+        "font-semibold",
+        "uppercase",
+        "text-slate-500",
+        "text-xs",
+        "not-italic",
+        "bg-slate-100",
+        "overflow-hidden",
+        "dark:text-slate-300",
+        "dark:bg-metal-800",
+        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: f }) => /* @__PURE__ */ r("tr", { children: f.map(({ id: x, 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: a(
+            "px-4",
+            "py-3",
+            "text-left",
+            "text-xs",
+            "first:rounded-tl-lg",
+            "last:rounded-tr-lg",
+            "border-transparent",
+            "dark:border-t",
+            "dark:border-metal-700",
+            "dark:first:border-l",
+            "dark:last:border-r",
+            e.columnDef.meta?.headerClassName
+          ),
+          children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2 w-full", children: [
+            b(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ d(
               "div",
               {
-                className: o(
+                className: a(
                   "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  n
+                  i
                 ),
                 role: "presentation",
                 children: [
-                  /* @__PURE__ */ s(
-                    b,
+                  /* @__PURE__ */ r(
+                    g,
                     {
-                      className: o(
+                      className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "asc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc"
                         },
-                        l
+                        s
                       ),
-                      onClick: () => d(e)
+                      onClick: () => m(e)
                     }
                   ),
-                  /* @__PURE__ */ s(
-                    g,
+                  /* @__PURE__ */ r(
+                    u,
                     {
-                      className: o(
+                      className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "desc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc"
                         },
-                        l
+                        s
                       ),
-                      onClick: () => x(e)
+                      onClick: () => p(e)
                     }
                   )
                 ]
@@ -72,7 +92,7 @@ const y = ({
             )
           ] })
         },
-        m
+        x
       )) }, t))
     }
   );

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

@@ -1,45 +1,66 @@
-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 f, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as p } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as x } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as u } from "../FormPaginate/FormPaginate.js";
+import { cn as b } 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,
-  showFormPagination: s = !0,
-  pageSizes: l,
-  classNamePagination: o
+  showFormPagination: l = !0,
+  pageSizes: s,
+  classNamePagination: m,
+  isLoading: o
 }) => {
-  const { totalItems: r = -1 / 0, tableFetching: m } = u();
-  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
+  const {
+    totalItems: r = -1 / 0,
+    tableFetching: d,
+    isFirstLoad: c
+  } = g();
+  return r <= h || d || o ? null : /* @__PURE__ */ t(f, { children: [
     /* @__PURE__ */ e(
       "div",
       {
-        className: x(
-          "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
+        className: b(
+          "bg-slate-50",
+          "border",
+          "border-y-transparent",
+          "border-x-slate-100",
+          "text-slate-500",
+          "text-sm",
+          "not-italic",
+          "py-2",
+          "px-6",
+          "rounded-b-lg",
+          "shadow",
+          "dark:bg-metal-800",
+          "dark:border-x-metal-700",
+          "dark:border-b-metal-700",
+          m,
+          {
+            "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: [
-            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800", children: [
+            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800 dark:text-metal-300", children: [
               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: s }) })
           ] }),
           /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
-            n && /* @__PURE__ */ e(d, {}),
-            s && /* @__PURE__ */ e(f, {})
+            n && /* @__PURE__ */ e(p, {}),
+            l && /* @__PURE__ */ e(u, {})
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ e("div", { className: "w-full min-h-[150px]" })
+    /* @__PURE__ */ e("div", { className: "w-full min-h-37.5" })
   ] });
 };
 export {
-  F as Pagination
+  j as Pagination
 };

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

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