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

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

@@ -1,25 +1,77 @@
-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 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: 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: "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: 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",
+                {
+                  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 {
-  p 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-right-VYBOBhRt.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 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" ? 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": !e,
+        "text-slate-400 cursor-not-allowed": e
       })
     }
   ) }) })
 );
-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 = "KonstructNavigationButton";
+const N = () => {
+  const { totalPages: t, page: e, handlePage: i } = f();
+  return /* @__PURE__ */ h("ul", { className: "flex items-center gap-2", children: [
+    /* @__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
+  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 { 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/Filter/Filter.js

@@ -1,73 +1,90 @@
 import { jsxs as m, jsx as a } from "react/jsx-runtime";
-import { d as M } from "../../../../debounce-BFejQm9P.js";
-import { useRef as j, useCallback as u, useMemo as f } from "react";
-import { Filter as n } from "../../../Filter/Filter.js";
-import { Input as v } from "../../../Input/Input.js";
-import { useTableContext as O } from "../../contexts/table.hook.js";
-const B = ({
-  placeholder: h,
-  multiSelectFilter: d,
-  showFilterInput: p = !0
+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 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: h,
+  placeholder: d,
+  showFilterInput: g = !0,
+  showResetButton: C = !0,
+  resetButtonClassName: S
 }) => {
-  const r = j(null), {
-    termOfSearch: o,
+  const o = v(null), {
+    termOfSearch: s,
     multiselectSelected: c,
-    onChangeTermOfSearch: t,
+    onChangeTermOfSearch: n,
     onSelectMultiselect: i
-  } = O(), g = u(
-    (e, l) => i(
+  } = T(), x = u(
+    (e, t) => i(
       e,
-      l.map((s) => s.id)
+      t.map((r) => r.id)
     ),
     [i]
-  ), x = u(() => {
-    t(""), r.current && (r.current.value = "");
-  }, [t]), C = f(
-    () => M((e) => {
-      t(e.target.value);
+  ), F = u(() => {
+    n(""), o.current && (o.current.value = "");
+  }, [n]), M = p(
+    () => R((e) => {
+      n(e.target.value);
     }, 500),
-    [t]
-  ), S = f(
-    () => !!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: [
-    p && /* @__PURE__ */ a(
-      v,
+    g && /* @__PURE__ */ a(
+      B,
       {
-        ref: r,
-        placeholder: h,
+        ref: o,
+        placeholder: d,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: C
+        onChange: M
       }
     ),
-    /* @__PURE__ */ m(n, { children: [
-      d?.map(
-        ({ key: e, label: l, position: s = "right", options: b }) => /* @__PURE__ */ a(
-          n.BadgeMultiSelect,
+    /* @__PURE__ */ m(l, { children: [
+      h?.map(
+        ({ key: e, label: t, position: r = "right", options: j }) => /* @__PURE__ */ a(
+          l.BadgeMultiSelect,
           {
-            label: l,
-            position: s,
-            options: b,
-            onApply: (F) => g(e, F)
+            label: t,
+            position: r,
+            options: j,
+            onApply: (O) => {
+              x(e, O);
+            }
           },
-          l
+          t
         )
       ),
-      /* @__PURE__ */ a(
-        n.ResetButton,
+      f?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ a(
+        y,
         {
-          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
-          disabled: !S,
-          onClick: x
+          variant: r,
+          appearance: "compact",
+          onClick: t,
+          children: e
+        },
+        e
+      )),
+      C && /* @__PURE__ */ a(
+        l.ResetButton,
+        {
+          className: N("select-none", S),
+          disabled: !b,
+          onClick: F
         }
       )
     ] })
   ] });
 };
 export {
-  B as Filter
+  E as Filter
 };

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

@@ -1,41 +1,53 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useRef as l, useCallback as p } from "react";
+import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { useRef as u, useCallback as l } 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 = p(
-    (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();
+import { Typography as f } from "../../../Typography/Typography.js";
+import { Button as g } from "../../../Button/Button.js";
+import { useTableContext as x } from "../../contexts/table.hook.js";
+const y = () => {
+  const o = u(null), { totalPages: t, handlePage: r } = x(), m = l(
+    (a) => {
+      a.preventDefault();
+      const s = new FormData(a.currentTarget), n = Number(s.get("jump-to")), i = (n < t ? n : t) || 1;
+      r(i - 1), o.current?.reset();
     },
-    [o, e]
+    [r, t]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ p(
     "form",
     {
       "aria-label": "footer-pagination",
-      ref: r,
+      ref: o,
       onSubmit: m,
       className: "flex items-center gap-2",
+      noValidate: !0,
       children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
+          f,
+          {
+            component: "span",
+            className: "text-sm min-w-fit tracking-normal",
+            children: "Jump to"
+          }
+        ),
+        /* @__PURE__ */ e(
           c,
           {
             type: "number",
-            className: "w-[72px] text-xs no-spinner",
+            className: "w-18 text-sm no-spinner",
             name: "jump-to",
             min: 1,
-            max: e,
-            required: !0
+            max: t,
+            required: !0,
+            autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ e(
+          g,
           {
+            variant: "link",
             type: "submit",
-            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            className: "text-xs p-2 cursor-pointer",
             children: "Go"
           }
         )
@@ -44,5 +56,5 @@ const h = () => {
   );
 };
 export {
-  h as FormPaginate
+  y as FormPaginate
 };