@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

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

@@ -1,118 +1,37 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { Button as n } from "../../../Button/Button.js";
-import { cn as r } from "../../../../utils/index.js";
-import { E as x } from "../../../../ellipsis-vertical-Cl3yNtOy.js";
-const y = ({
-  actions: a,
-  wrapperClassName: i,
-  triggerButtonClassName: l,
-  iconTriggerButtonClassName: s,
-  wrapperActionsClassName: d,
-  wrapperContentActionsClassName: c,
-  ...m
-}) => a ? /* @__PURE__ */ t("div", { className: r("relative group", i), children: [
-  /* @__PURE__ */ t(
-    n,
-    {
-      variant: "link",
-      shape: "circle",
-      size: "large",
-      className: r(
-        "text-slate-400",
-        "group-hover:text-slate-800",
-        "group-hover:bg-aurora-50",
-        "dark:text-metal-400",
-        "dark:group-hover:text-aurora-500",
-        "dark:group-hover:bg-aurora-900",
-        l
-      ),
-      role: "presentation",
-      children: [
-        /* @__PURE__ */ e(
-          x,
-          {
-            "aria-hidden": "true",
-            className: r("w-7 h-7", s)
-          }
-        ),
-        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
-      ]
-    }
-  ),
-  /* @__PURE__ */ e(
-    "div",
-    {
-      className: r(
-        "absolute",
-        "top-full",
-        "right-0",
-        "w-53.75",
-        "hidden",
-        "group-hover:block",
-        "z-10",
-        d
-      ),
-      children: /* @__PURE__ */ e(
-        "div",
-        {
-          className: r(
-            "bg-white",
-            "mt-0.5",
-            "py-2",
-            "rounded-lg",
-            "shadow-lg",
-            "border",
-            "border-zinc-100",
-            "animate-in",
-            "fade-in-0",
-            "dark:bg-metal-800",
-            "dark:border-metal-700",
-            c
-          ),
-          children: a.map(
-            ({
-              id: p,
-              label: o,
-              className: h,
-              component: u = n,
-              componentProps: g,
-              onClick: v
-            }, f) => /* @__PURE__ */ e(
-              u,
-              {
-                className: r(
-                  "w-full",
-                  "text-slate-800",
-                  "cursor-pointer",
-                  "p-0",
-                  "h-9",
-                  "flex",
-                  "gap-2",
-                  "text-sm",
-                  "font-normal",
-                  "justify-start",
-                  "rounded-none",
-                  "px-6",
-                  "hover:bg-gray-50",
-                  "hover:text-slate-800",
-                  "hover:no-underline",
-                  "dark:hover:bg-metal-700",
-                  h
-                ),
-                variant: "link",
-                role: "presentation",
-                onClick: () => v(m.row.original),
-                ...g,
-                children: o
-              },
-              p ?? (typeof o == "string" ? o : `action-${f}`)
-            )
-          )
-        }
-      )
-    }
-  )
-] }) : null;
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { Button as o } from "../../../Button/Button.js";
+import { t as x } from "../../../../ellipsis-vertical-My0S9QY5.js";
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+var y = ({ actions: t, wrapperClassName: n, triggerButtonClassName: l, iconTriggerButtonClassName: s, wrapperActionsClassName: d, wrapperContentActionsClassName: m, ...p }) => t ? /* @__PURE__ */ i("div", {
+  className: r("relative group", n),
+  children: [/* @__PURE__ */ i(o, {
+    variant: "link",
+    shape: "circle",
+    size: "large",
+    className: r("text-slate-400", "group-hover:text-slate-800", "group-hover:bg-aurora-50", "dark:text-metal-400", "dark:group-hover:text-aurora-500", "dark:group-hover:bg-aurora-900", l),
+    role: "presentation",
+    children: [/* @__PURE__ */ e(x, {
+      "aria-hidden": "true",
+      className: r("w-7 h-7", s)
+    }), /* @__PURE__ */ e("span", {
+      className: "sr-only",
+      children: "Show Actions"
+    })]
+  }), /* @__PURE__ */ e("div", {
+    className: r("absolute", "top-full", "right-0", "w-53.75", "hidden", "group-hover:block", "z-10", d),
+    children: /* @__PURE__ */ e("div", {
+      className: r("bg-white", "mt-0.5", "py-2", "rounded-lg", "shadow-lg", "border", "border-zinc-100", "animate-in", "fade-in-0", "dark:bg-metal-800", "dark:border-metal-700", m),
+      children: t.map(({ id: c, label: a, className: h, component: u = o, componentProps: g, onClick: v }, f) => /* @__PURE__ */ e(u, {
+        className: r("w-full", "text-slate-800", "cursor-pointer", "p-0", "h-9", "flex", "gap-2", "text-sm", "font-normal", "justify-start", "rounded-none", "px-6", "hover:bg-gray-50", "hover:text-slate-800", "hover:no-underline", "dark:hover:bg-metal-700", h),
+        variant: "link",
+        role: "presentation",
+        onClick: () => v(p.row.original),
+        ...g,
+        children: a
+      }, c ?? (typeof a == "string" ? a : `action-${f}`)))
+    })
+  })]
+}) : null;
 export {
   y as Actions
 };

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

@@ -1,115 +1,53 @@
-import { jsx as a, jsxs as A } from "react/jsx-runtime";
-import { f as B } from "../../../../index-CSWGJT-v.js";
-import { Fragment as H } from "react";
-import { Skeleton as M } from "../Skeleton/Skeleton.js";
-import { cn as l } from "../../../../utils/index.js";
-import { ExpandableRow as O } from "../ExpandableRow/ExpandableRow.js";
-import { useTableContext as V } from "../../contexts/table.hook.js";
-const U = ({
-  isLoading: g,
-  showPagination: t
-}) => {
-  const {
-    table: i,
-    pageSize: h,
-    tableFetching: w,
-    enableExpandedRow: N,
-    classNameExpandedRow: R,
-    classNameExpandedCell: k,
-    classNameExpandedContent: E,
-    enableHoverRow: p,
-    classNameHoverRow: C,
-    classNameActiveExpandedRow: v,
-    renderExpandedRow: b,
-    isBorderOnAdjacentCell: D,
-    isExpandColumnVisible: y
-  } = V();
-  if (g || w)
-    return /* @__PURE__ */ a(M, { numberOfRows: h, table: i });
+import { t as l } from "../../../../utils-DHuiYnx1.js";
+import { n as A } from "../../../../table.provider-4OQNqxH3.js";
+import { useTableContext as B } from "../../contexts/table.hook.js";
+import { Skeleton as H } from "../Skeleton/Skeleton.js";
+import { ExpandableRow as M } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as O } from "react";
+import { jsx as a, jsxs as V } from "react/jsx-runtime";
+var U = ({ isLoading: g, showPagination: t }) => {
+  const { table: i, pageSize: h, tableFetching: w, enableExpandedRow: N, classNameExpandedRow: R, classNameExpandedCell: k, classNameExpandedContent: E, enableHoverRow: p, classNameHoverRow: v, classNameActiveExpandedRow: C, renderExpandedRow: b, isBorderOnAdjacentCell: D, isExpandColumnVisible: y } = B();
+  if (g || w) return /* @__PURE__ */ a(H, {
+    numberOfRows: h,
+    table: i
+  });
   const d = i.getRowModel().rows ?? [];
-  return /* @__PURE__ */ a(
-    "tbody",
-    {
-      className: l(
-        "text-slate-800",
-        "text-sm",
-        "font-normal",
-        "relative",
-        "dark:border-x"
-      ),
-      children: d.map((x, s) => {
-        const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
-        return /* @__PURE__ */ A(H, { children: [
-          /* @__PURE__ */ a(
-            "tr",
-            {
-              className: l(
-                { "group/row": p },
-                "border-b",
-                "border-b-gray-200",
-                "dark:text-metal-50",
-                "dark:border-b-metal-700",
-                "bg-transparent",
-                o.className
-              ),
-              "data-row-id": m,
-              ...o.attributes ?? {},
-              children: n.map(({ id: F, column: r, getContext: S }, f) => {
-                const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
-                return /* @__PURE__ */ a(
-                  "td",
-                  {
-                    className: l(
-                      "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",
-                      {
-                        "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
-                        [l(
-                          "bg-zinc-100 dark:bg-metal-800",
-                          v
-                        )]: !!e
-                      },
-                      C,
-                      _,
-                      {
-                        "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
-                        "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
-                        "dark:[tr:last-child_&]:border-b": !t
-                      }
-                    ),
-                    "data-expanded": e ? !0 : void 0,
-                    ...r.columnDef.meta?.attributes ?? {},
-                    children: B(r.columnDef.cell, S())
-                  },
-                  F
-                );
-              })
-            }
-          ),
-          z && /* @__PURE__ */ a(
-            O,
-            {
-              classNameExpandedCell: k,
-              classNameExpandedContent: E,
-              classNameExpandedRow: R,
-              colSpan: n.length,
-              id: m,
-              isExpanded: !!e,
-              isLastRow: s === d.length - 1 && !t,
-              children: o.expandedRow ?? b?.(c)
-            }
-          )
-        ] }, m);
-      })
-    }
-  );
+  return /* @__PURE__ */ a("tbody", {
+    className: l("text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: d.map((x, s) => {
+      const { id: m, original: c, getVisibleCells: j } = x, { meta: o = {} } = c, n = j(), e = N && x.getIsExpanded(), z = !!o.expandedRow || !!b, u = n[0]?.column.id !== "__expand" || y ? 0 : D ? 1 : null;
+      return /* @__PURE__ */ V(O, { children: [/* @__PURE__ */ a("tr", {
+        className: l({ "group/row": p }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", o.className),
+        "data-row-id": m,
+        ...o.attributes ?? {},
+        children: n.map(({ id: F, column: r, getContext: S }, f) => {
+          const _ = typeof r.columnDef.meta?.className == "function" ? r.columnDef.meta?.className(c) : r.columnDef.meta?.className;
+          return /* @__PURE__ */ a("td", {
+            className: l("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", {
+              "group-hover/row:bg-zinc-100 dark:group-hover/row:bg-metal-800": p,
+              [l("bg-zinc-100 dark:bg-metal-800", C)]: !!e
+            }, v, _, {
+              "rounded-bl-lg": s === d.length - 1 && u !== null && f === u && !t && !e,
+              "rounded-br-lg": s === d.length - 1 && f === n.length - 1 && !t && !e,
+              "dark:[tr:last-child_&]:border-b": !t
+            }),
+            "data-expanded": e ? !0 : void 0,
+            ...r.columnDef.meta?.attributes ?? {},
+            children: A(r.columnDef.cell, S())
+          }, F);
+        })
+      }), z && /* @__PURE__ */ a(M, {
+        classNameExpandedCell: k,
+        classNameExpandedContent: E,
+        classNameExpandedRow: R,
+        colSpan: n.length,
+        id: m,
+        isExpanded: !!e,
+        isLastRow: s === d.length - 1 && !t,
+        children: o.expandedRow ?? b?.(c)
+      })] }, m);
+    })
+  });
 };
 export {
   U as Body

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

@@ -1,169 +1,103 @@
-import { jsx as s, jsxs as m } from "react/jsx-runtime";
+import { t as p } from "../../../../utils-DHuiYnx1.js";
+import { t as d } from "../../../../chevron-left-DRJXef9g.js";
+import { t as m } from "../../../../chevron-right-BooB_b7g.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
 import { memo as u } from "react";
-import { cn as p } from "../../../../utils/index.js";
-import { C as h } from "../../../../chevron-left-BHBf-gQY.js";
-import { C as f } from "../../../../chevron-right-DvXGOiS_.js";
-import { useTableContext as g } from "../../contexts/table.hook.js";
-const l = u(
-  ({
-    index: t,
-    currentPage: e,
-    handlePage: i
-  }) => /* @__PURE__ */ s("li", { children: /* @__PURE__ */ s(
-    "button",
-    {
-      type: "button",
-      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
-    }
-  ) }, t)
-);
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+var l = u(({ index: t, currentPage: e, handlePage: s }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i("button", {
+  type: "button",
+  onClick: () => s(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
+}) }, t));
 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: t,
+var n = u(({ keyValue: t }) => /* @__PURE__ */ i("li", {
+  className: "px-2",
+  children: /* @__PURE__ */ i("span", {
+    className: "text-blue-600 select-none dark:text-aurora-500",
+    children: "..."
+  })
+}, t));
+n.displayName = "KonstructEllipsis";
+var o = u(({ direction: t, disabled: e, onClick: s }) => /* @__PURE__ */ i("li", {
+  className: "flex items-center justify-center",
+  children: /* @__PURE__ */ i("button", {
+    onClick: s,
     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" ? h : f,
-    {
-      className: p("h-6 w-6 cursor-pointer", {
-        "text-blue-600 dark:text-aurora-500": !e,
-        "text-slate-400 cursor-not-allowed": e
-      })
-    }
-  ) }) })
-);
+    children: /* @__PURE__ */ i(t === "left" ? d : m, { className: p("h-6 w-6 cursor-pointer", {
+      "text-blue-600 dark:text-aurora-500": !e,
+      "text-slate-400 cursor-not-allowed": e
+    }) })
+  })
+}));
 o.displayName = "KonstructNavigationButton";
-const C = () => {
-  const { totalPages: t, page: e, handlePage: i } = g();
-  return /* @__PURE__ */ m("ul", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ s(
-      o,
-      {
+var v = () => {
+  const { totalPages: t, page: e, handlePage: s } = h();
+  return /* @__PURE__ */ f("ul", {
+    className: "flex items-center gap-2",
+    children: [
+      /* @__PURE__ */ i(o, {
         direction: "left",
-        onClick: () => i(e - 1),
+        onClick: () => s(e - 1),
         disabled: e === 0
-      }
-    ),
-    (() => {
-      if (t <= 5)
-        return Array.from({ length: t }, (r, c) => /* @__PURE__ */ s(
-          l,
-          {
-            index: c,
+      }),
+      (() => {
+        if (t <= 5) return Array.from({ length: t }, (r, c) => /* @__PURE__ */ i(l, {
+          index: c,
+          currentPage: e,
+          handlePage: s
+        }, c));
+        const a = [];
+        if (e < 3) {
+          for (let r = 0; r < 3; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = t - 2; r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+        } else if (e >= t - 5) {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), t > 6 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = Math.max(1, t - 5); r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
             currentPage: e,
-            handlePage: i
-          },
-          c
-        ));
-      const n = [];
-      if (e < 3) {
-        for (let r = 0; r < 3; r++)
-          n.push(
-            /* @__PURE__ */ s(
-              l,
-              {
-                index: r,
-                currentPage: e,
-                handlePage: i
-              },
-              r
-            )
-          );
-        n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let r = t - 2; r < t; r++)
-          n.push(
-            /* @__PURE__ */ s(
-              l,
-              {
-                index: r,
-                currentPage: e,
-                handlePage: i
-              },
-              r
-            )
-          );
-      } else if (e >= t - 5) {
-        n.push(
-          /* @__PURE__ */ s(
-            l,
-            {
-              index: 0,
-              currentPage: e,
-              handlePage: i
-            },
-            0
-          )
-        ), 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(
-              l,
-              {
-                index: r,
-                currentPage: e,
-                handlePage: i
-              },
-              r
-            )
-          );
-      } else {
-        n.push(
-          /* @__PURE__ */ s(
-            l,
-            {
-              index: 0,
-              currentPage: e,
-              handlePage: i
-            },
-            0
-          )
-        ), 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: r,
-                currentPage: e,
-                handlePage: i
-              },
-              r
-            )
-          );
-        e < t - 4 && n.push(/* @__PURE__ */ s(a, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
-          /* @__PURE__ */ s(
-            l,
-            {
-              index: t - 1,
-              currentPage: e,
-              handlePage: i
-            },
-            t - 1
-          )
-        );
-      }
-      return n;
-    })(),
-    /* @__PURE__ */ s(
-      o,
-      {
+            handlePage: s
+          }, r));
+        } else {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), e > 3 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis1" }, "ellipsis1"));
+          for (let r = e - 1; r <= e + 1; r++) r > 0 && r < t - 1 && a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          e < t - 4 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis2" }, "ellipsis2")), a.push(/* @__PURE__ */ i(l, {
+            index: t - 1,
+            currentPage: e,
+            handlePage: s
+          }, t - 1));
+        }
+        return a;
+      })(),
+      /* @__PURE__ */ i(o, {
         direction: "right",
-        onClick: () => i(e + 1),
+        onClick: () => s(e + 1),
         disabled: e >= t - 1
-      }
-    )
-  ] });
+      })
+    ]
+  });
 };
 export {
-  C as DotPaginate
+  v as DotPaginate
 };

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

@@ -1,33 +1,25 @@
-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 d } from "../../contexts/table.hook.js";
-const u = ({
-  pageSizes: m = g
-}) => {
-  const { pageSize: r, onPageSize: t, handlePage: a } = d(), s = l(
-    () => m.map(String).map((e) => ({ label: e, value: e })),
-    []
-  ), n = p(
-    (e) => {
-      t(Number(e)), a(0);
-    },
-    [a, t]
-  );
-  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-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)
-      }
-    )
-  ] });
+import { Select as i } from "../../../Select/Select.js";
+import { DEFAULT_PAGE_SIZES as l } from "../../constants/pagination.js";
+import { useTableContext as p } from "../../contexts/table.hook.js";
+import { useCallback as g, useMemo as c } from "react";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+var u = ({ pageSizes: m = l }) => {
+  const { pageSize: r, onPageSize: t, handlePage: a } = p(), s = c(() => m.map(String).map((e) => ({
+    label: e,
+    value: e
+  })), []), n = g((e) => {
+    t(Number(e)), a(0);
+  }, [a, t]);
+  return /* @__PURE__ */ d("div", {
+    className: "flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ o("span", { children: "Show" }), /* @__PURE__ */ o(i, {
+      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 {
   u as DropdownPaginate