@konstructio/ui 0.1.2-alpha.41 → 0.1.2-alpha.44

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

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

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

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

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

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -1,70 +1,70 @@
-import { jsxs as m, jsx as l } from "react/jsx-runtime";
-import { d as O } from "../../../../debounce-BFejQm9P.js";
-import { useRef as R, useCallback as u, useMemo as p } from "react";
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { d as R } from "../../../../debounce-BFejQm9P.js";
+import { useRef as v, useCallback as u, useMemo as p } from "react";
 import { Button as y } from "../../../Button/Button.js";
-import { Filter as s } from "../../../Filter/Filter.js";
+import { Filter as l } from "../../../Filter/Filter.js";
 import { Input as B } from "../../../Input/Input.js";
 import { cn as N } from "../../../../utils/index.js";
 import { useTableContext as T } from "../../contexts/table.hook.js";
 const E = ({
   actions: f,
-  multiSelectFilter: d,
-  placeholder: h,
+  multiSelectFilter: h,
+  placeholder: d,
   showFilterInput: g = !0,
-  showResetButton: x = !0,
-  resetButtonClassName: C
+  showResetButton: C = !0,
+  resetButtonClassName: S
 }) => {
-  const n = R(null), {
-    termOfSearch: o,
+  const o = v(null), {
+    termOfSearch: s,
     multiselectSelected: c,
-    onChangeTermOfSearch: a,
+    onChangeTermOfSearch: n,
     onSelectMultiselect: i
-  } = T(), S = u(
+  } = T(), x = u(
     (e, t) => i(
       e,
       t.map((r) => r.id)
     ),
     [i]
-  ), b = u(() => {
-    a(""), n.current && (n.current.value = "");
-  }, [a]), F = p(
-    () => O((e) => {
-      a(e.target.value);
+  ), F = u(() => {
+    n(""), o.current && (o.current.value = "");
+  }, [n]), M = p(
+    () => R((e) => {
+      n(e.target.value);
     }, 500),
-    [a]
-  ), M = p(
-    () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
-    [o, c]
+    [n]
+  ), b = p(
+    () => !!s || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
+    [s, c]
   );
   return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    g && /* @__PURE__ */ l(
+    g && /* @__PURE__ */ a(
       B,
       {
-        ref: n,
-        placeholder: h,
+        ref: o,
+        placeholder: d,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: F
+        onChange: M
       }
     ),
-    /* @__PURE__ */ m(s, { children: [
-      d?.map(
-        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ l(
-          s.BadgeMultiSelect,
+    /* @__PURE__ */ m(l, { children: [
+      h?.map(
+        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ a(
+          l.BadgeMultiSelect,
           {
             label: t,
             position: r,
             options: j,
-            onApply: (v) => {
-              S(e, v);
+            onApply: (O) => {
+              x(e, O);
             }
           },
           t
         )
       ),
-      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
+      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ a(
         y,
         {
           variant: r,
@@ -74,15 +74,12 @@ const E = ({
         },
         e
       )),
-      x && /* @__PURE__ */ l(
-        s.ResetButton,
+      C && /* @__PURE__ */ a(
+        l.ResetButton,
         {
-          className: N(
-            "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
-            C
-          ),
-          disabled: !M,
-          onClick: b
+          className: N("select-none", S),
+          disabled: !b,
+          onClick: F
         }
       )
     ] })

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -1,41 +1,42 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useRef as l, useCallback as c } from "react";
-import { Input as p } from "../../../Input/Input.js";
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import { useRef as i, useCallback as p } from "react";
+import { Input as c } from "../../../Input/Input.js";
 import { useTableContext as f } from "../../contexts/table.hook.js";
-const h = () => {
-  const r = l(null), { totalPages: e, handlePage: o } = f(), m = c(
-    (n) => {
-      n.preventDefault();
-      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
-      o(u - 1), r.current?.reset();
+const k = () => {
+  const r = i(null), { totalPages: e, handlePage: a } = f(), n = p(
+    (o) => {
+      o.preventDefault();
+      const s = new FormData(o.currentTarget), m = Number(s.get("jump-to")), l = (m < e ? m : e) || 1;
+      a(l - 1), r.current?.reset();
     },
-    [o, e]
+    [a, e]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ u(
     "form",
     {
       "aria-label": "footer-pagination",
       ref: r,
-      onSubmit: m,
+      onSubmit: n,
       className: "flex items-center gap-2",
       children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
+        /* @__PURE__ */ t("span", { className: "min-w-fit dark:text-metal-300", children: "Jump to" }),
         /* @__PURE__ */ t(
-          p,
+          c,
           {
             type: "number",
-            className: "w-18 text-xs no-spinner",
+            className: "w-18 text-xs no-spinner dark:bg-metal-800 dark:border-metal-700 dark:text-metal-300",
             name: "jump-to",
             min: 1,
             max: e,
-            required: !0
+            required: !0,
+            autoComplete: "off"
           }
         ),
         /* @__PURE__ */ t(
           "button",
           {
             type: "submit",
-            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            className: "text-xs text-blue-600 p-2 cursor-pointer dark:text-aurora-500",
             children: "Go"
           }
         )
@@ -44,5 +45,5 @@ const h = () => {
   );
 };
 export {
-  h as FormPaginate
+  k as FormPaginate
 };