@konstructio/ui 0.1.2-alpha.47 → 0.1.2-alpha.49

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -14,11 +14,11 @@ const J = ({
   ariaLabel: p,
   columns: d,
   data: f,
-  totalItems: b = -1 / 0,
-  className: u,
+  totalItems: u = -1 / 0,
+  className: b,
   classNameHeaderActiveArrows: T,
-  classNameHeaderArrows: x,
-  classNameHeaderTable: N,
+  classNameHeaderArrows: N,
+  classNameHeaderTable: x,
   classNameTable: A,
   classNameWrapperTable: y,
   isLoading: a,
@@ -26,8 +26,8 @@ const J = ({
   queryOptions: z,
   // Pagination
   showPagination: B,
-  showTotalItems: i,
-  showDropdownPagination: t,
+  showTotalItems: t,
+  showDropdownPagination: i,
   showDotPagination: l,
   showFormPagination: m,
   pageSizes: V,
@@ -42,8 +42,8 @@ const J = ({
 }) => {
   const e = I(
     () => B || [
-      i,
       t,
+      i,
       l,
       m
     ].some(Boolean),
@@ -56,10 +56,10 @@ const J = ({
       columns: d,
       data: f,
       fetchData: h,
-      totalItems: b,
+      totalItems: u,
       queryOptions: z,
       isPaginationEnabled: e,
-      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", u), children: [
+      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
         j && /* @__PURE__ */ r(
           M,
           {
@@ -81,7 +81,7 @@ const J = ({
               "table",
               {
                 className: c(
-                  "w-full border-collapse table-fixed",
+                  "w-full border-collapse table-auto",
                   "dark:border-separate dark:border-spacing-0",
                   A
                 ),
@@ -90,8 +90,8 @@ const J = ({
                   /* @__PURE__ */ r(
                     g,
                     {
-                      className: N,
-                      classNameArrows: x,
+                      className: x,
+                      classNameArrows: N,
                       classNameActiveArrows: T
                     }
                   ),
@@ -104,8 +104,8 @@ const J = ({
         e && /* @__PURE__ */ r(
           C,
           {
-            showTotalItems: i,
-            showDropdownPagination: t,
+            showTotalItems: t,
+            showDropdownPagination: i,
             showDotPagination: l,
             showFormPagination: m,
             pageSizes: V,

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

@@ -1,17 +1,17 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { Button as a } from "../../../Button/Button.js";
 import { cn as e } from "../../../../utils/index.js";
-import { E as m } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+import { E as u } from "../../../../ellipsis-vertical-BVPtjl5f.js";
 const b = ({
-  actions: t,
-  wrapperClassName: l,
+  actions: o,
+  wrapperClassName: i,
   triggerButtonClassName: n,
   iconTriggerButtonClassName: s,
   wrapperActionsClassName: d,
-  wrapperContentActionsClassName: c,
-  ...h
-}) => t ? /* @__PURE__ */ i("div", { className: e("relative group", l), children: [
-  /* @__PURE__ */ i(
+  wrapperContentActionsClassName: h,
+  ...c
+}) => o ? /* @__PURE__ */ l("div", { className: e("relative group", i), children: [
+  /* @__PURE__ */ l(
     a,
     {
       variant: "link",
@@ -29,7 +29,7 @@ const b = ({
       role: "presentation",
       children: [
         /* @__PURE__ */ r(
-          m,
+          u,
           {
             "aria-hidden": "true",
             className: e("w-7 h-7", s)
@@ -65,9 +65,11 @@ const b = ({
             "border-zinc-100",
             "animate-in",
             "fade-in-0",
-            c
+            "dark:bg-metal-800",
+            "dark:border-metal-700",
+            h
           ),
-          children: t.map(({ label: o, className: p, onClick: u }) => /* @__PURE__ */ r(
+          children: o.map(({ label: t, className: m, onClick: p }) => /* @__PURE__ */ r(
             a,
             {
               className: e(
@@ -81,18 +83,20 @@ const b = ({
                 "text-sm",
                 "font-normal",
                 "justify-start",
-                "hover:bg-gray-50",
-                "hover:text-slate-800",
                 "rounded-none",
                 "px-6",
-                p
+                "hover:bg-gray-50",
+                "hover:text-slate-800",
+                "hover:no-underline",
+                "dark:hover:bg-metal-700",
+                m
               ),
               variant: "link",
               asChild: !0,
               role: "presentation",
-              children: /* @__PURE__ */ r(a, { onClick: () => u(h.row.original), children: o })
+              children: /* @__PURE__ */ r(a, { onClick: () => p(c.row.original), children: t })
             },
-            o
+            t
           ))
         }
       )

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

@@ -3,162 +3,162 @@ import { memo as u } from "react";
 import { cn as p } from "../../../../utils/index.js";
 import { C as m, a as g } from "../../../../chevron-right-DYvXLeql.js";
 import { useTableContext as f } from "../../contexts/table.hook.js";
-const a = u(
+const l = u(
   ({
-    index: e,
-    currentPage: t,
+    index: t,
+    currentPage: e,
     handlePage: i
   }) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
     "button",
     {
       type: "button",
-      onClick: () => i(e),
+      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 dark:bg-aurora-500 dark:text-metal-800": e === t
+          "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": t === e
         }
       ),
-      children: e + 1
+      children: t + 1
     }
-  ) }, e)
+  ) }, t)
 );
-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";
+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: 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,
+    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 dark:text-aurora-500": !i,
-        "text-slate-400 cursor-not-allowed": i
+        "text-blue-600 dark:text-aurora-500": !e,
+        "text-slate-400 cursor-not-allowed": e
       })
     }
   ) }) })
 );
-o.displayName = "NavigationButton";
+o.displayName = "KonstructNavigationButton";
 const N = () => {
-  const { totalPages: e, page: t, handlePage: i } = f();
+  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: () => i(t - 1),
-        disabled: t === 0
+        onClick: () => i(e - 1),
+        disabled: e === 0
       }
     ),
     (() => {
-      if (e <= 5)
-        return Array.from({ length: e }, (r, c) => /* @__PURE__ */ s(
-          a,
+      if (t <= 5)
+        return Array.from({ length: t }, (r, c) => /* @__PURE__ */ s(
+          l,
           {
             index: c,
-            currentPage: t,
+            currentPage: e,
             handlePage: i
           },
           c
         ));
-      const l = [];
-      if (t < 3) {
+      const n = [];
+      if (e < 3) {
         for (let r = 0; r < 3; r++)
-          l.push(
+          n.push(
             /* @__PURE__ */ s(
-              a,
+              l,
               {
                 index: r,
-                currentPage: t,
+                currentPage: e,
                 handlePage: i
               },
               r
             )
           );
-        l.push(/* @__PURE__ */ s(n, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let r = e - 2; r < e; r++)
-          l.push(
+        n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = t - 2; r < t; r++)
+          n.push(
             /* @__PURE__ */ s(
-              a,
+              l,
               {
                 index: r,
-                currentPage: t,
+                currentPage: e,
                 handlePage: i
               },
               r
             )
           );
-      } else if (t >= e - 5) {
-        l.push(
+      } else if (e >= t - 5) {
+        n.push(
           /* @__PURE__ */ s(
-            a,
+            l,
             {
               index: 0,
-              currentPage: t,
+              currentPage: e,
               handlePage: i
             },
             0
           )
-        ), e > 6 && l.push(/* @__PURE__ */ s(n, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let r = Math.max(1, e - 5); r < e; r++)
-          l.push(
+        ), t > 6 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
+        for (let r = Math.max(1, t - 5); r < t; r++)
+          n.push(
             /* @__PURE__ */ s(
-              a,
+              l,
               {
                 index: r,
-                currentPage: t,
+                currentPage: e,
                 handlePage: i
               },
               r
             )
           );
       } else {
-        l.push(
+        n.push(
           /* @__PURE__ */ s(
-            a,
+            l,
             {
               index: 0,
-              currentPage: t,
+              currentPage: e,
               handlePage: i
             },
             0
           )
-        ), 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(
+        ), 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(
-              a,
+              l,
               {
                 index: r,
-                currentPage: t,
+                currentPage: e,
                 handlePage: i
               },
               r
             )
           );
-        t < e - 4 && l.push(/* @__PURE__ */ s(n, { keyValue: "ellipsis2" }, "ellipsis2")), l.push(
+        e < t - 4 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
           /* @__PURE__ */ s(
-            a,
+            l,
             {
-              index: e - 1,
-              currentPage: t,
+              index: t - 1,
+              currentPage: e,
               handlePage: i
             },
-            e - 1
+            t - 1
           )
         );
       }
-      return l;
+      return n;
     })(),
     /* @__PURE__ */ s(
       o,
       {
         direction: "right",
-        onClick: () => i(t + 1),
-        disabled: t >= e - 1
+        onClick: () => i(e + 1),
+        disabled: e >= t - 1
       }
     )
   ] });

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.js

@@ -2,12 +2,12 @@ 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";
+import { useTableContext as d } from "../../contexts/table.hook.js";
 const u = ({
-  pageSizes: r = g
+  pageSizes: m = g
 }) => {
-  const { pageSize: s, onPageSize: t, handlePage: a } = x(), m = l(
-    () => r.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 })),
     []
   ), n = p(
     (e) => {
@@ -20,10 +20,10 @@ const u = ({
     /* @__PURE__ */ o(
       c,
       {
-        className: "w-22 [&>div>p]:text-xs bg-white",
-        listItemClassName: "[&>p]:text-xs dark:bg-metal-800",
-        options: m,
-        value: s.toString(),
+        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)
       }
     )

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

@@ -1,42 +1,53 @@
-import { jsxs as u, jsx as t } from "react/jsx-runtime";
-import { useRef as i, 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 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();
+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();
     },
-    [a, e]
+    [r, t]
   );
-  return /* @__PURE__ */ u(
+  return /* @__PURE__ */ p(
     "form",
     {
       "aria-label": "footer-pagination",
-      ref: r,
-      onSubmit: n,
+      ref: o,
+      onSubmit: m,
       className: "flex items-center gap-2",
+      noValidate: !0,
       children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit dark:text-metal-300", 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-18 text-xs no-spinner dark:bg-metal-800 dark:border-metal-700 dark:text-metal-300",
+            className: "w-18 text-sm no-spinner",
             name: "jump-to",
             min: 1,
-            max: e,
+            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 dark:text-aurora-500",
+            className: "text-xs p-2 cursor-pointer",
             children: "Go"
           }
         )
@@ -45,5 +56,5 @@ const k = () => {
   );
 };
 export {
-  k as FormPaginate
+  y as FormPaginate
 };

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

@@ -1,6 +1,6 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { jsx as r, jsxs as d } from "react/jsx-runtime";
 import { f as b } from "../../../../index-CSWGJT-v.js";
-import { useCallback as d } from "react";
+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";
@@ -8,14 +8,14 @@ import { useTableContext as k } from "../../contexts/table.hook.js";
 const y = ({
   className: n,
   classNameArrows: i,
-  classNameActiveArrows: o
+  classNameActiveArrows: s
 }) => {
-  const { table: c, onSorting: s } = k(), m = d(
-    (t) => s([{ id: t.id, desc: !1 }]),
-    [s]
-  ), p = d(
-    (t) => s([{ id: t.id, desc: !0 }]),
-    [s]
+  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__ */ r(
     "thead",
@@ -50,9 +50,9 @@ const y = ({
             "dark:last:border-r",
             e.columnDef.meta?.headerClassName
           ),
-          children: /* @__PURE__ */ l("span", { className: "flex items-center gap-2 w-full", children: [
+          children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2 w-full", children: [
             b(e.columnDef.header, h()),
-            e.getCanSort() && /* @__PURE__ */ l(
+            e.getCanSort() && /* @__PURE__ */ d(
               "div",
               {
                 className: a(
@@ -67,9 +67,9 @@ const y = ({
                       className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "asc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc"
                         },
-                        o
+                        s
                       ),
                       onClick: () => m(e)
                     }
@@ -80,9 +80,9 @@ const y = ({
                       className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "desc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc"
                         },
-                        o
+                        s
                       ),
                       onClick: () => p(e)
                     }

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

@@ -1,6 +1,6 @@
-import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
-import { DotPaginate as x } from "../DotPaginate/DotPaginate.js";
-import { DropdownPaginate as f } from "../DropdownPaginate/DropdownPaginate.js";
+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";
@@ -19,7 +19,7 @@ const j = ({
     tableFetching: d,
     isFirstLoad: c
   } = g();
-  return r <= h || d || o ? null : /* @__PURE__ */ t(p, { children: [
+  return r <= h || d || o ? null : /* @__PURE__ */ t(f, { children: [
     /* @__PURE__ */ e(
       "div",
       {
@@ -29,7 +29,7 @@ const j = ({
           "border-y-transparent",
           "border-x-slate-100",
           "text-slate-500",
-          "text-xs",
+          "text-sm",
           "not-italic",
           "py-2",
           "px-6",
@@ -49,16 +49,16 @@ const j = ({
               r,
               " Results"
             ] }) : null,
-            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(f, { pageSizes: s }) })
+            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(x, {}),
+            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 {