@konstructio/ui 0.1.2-alpha.10 → 0.1.2-alpha.103

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

@@ -1,25 +1,74 @@
-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",
-    {
-      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
-  )) });
+import { t as r } from "../../../../utils-Cx-WzRZF.js";
+import { n as I } from "../../../../table.provider-2sAkE7z_.js";
+import { useTableContext as T } from "../../contexts/table.hook.js";
+import { Skeleton as q } from "../Skeleton/Skeleton.js";
+import { isPaginationBarVisible as G } from "../../utils/pagination.js";
+import { ExpandableRow as J } from "../ExpandableRow/ExpandableRow.js";
+import { Fragment as K } from "react";
+import { jsx as e, jsxs as Q } from "react/jsx-runtime";
+var re = ({ isLoading: v, showPagination: N, emptyState: y, errorState: a }) => {
+  const { table: m, pageSize: E, totalItems: R = -1 / 0, tableLoading: C, tableError: c, enableExpandedRow: D, classNameExpandedRow: j, classNameExpandedCell: B, classNameExpandedContent: V, enableHoverRow: u, classNameHoverRow: z, classNameActiveExpandedRow: L, renderExpandedRow: f, isBorderOnAdjacentCell: _, isExpandColumnVisible: A } = T();
+  if (v || C) return /* @__PURE__ */ e(q, {
+    numberOfRows: E,
+    table: m
+  });
+  const t = m.getRowModel().rows ?? [], l = N && G(R), x = t.length === 0 && !!c && !!a, h = t.length > 0 ? null : c && a ? typeof a == "function" ? a(c) : a : y ?? null;
+  if (h) {
+    const d = m.getVisibleLeafColumns().length;
+    return /* @__PURE__ */ e("tbody", {
+      className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+      children: /* @__PURE__ */ e("tr", {
+        className: r(x ? "kvt-error-row" : "kvt-empty-row", "border-b", "border-b-gray-200", "dark:border-b-metal-700", "bg-transparent"),
+        "data-empty-row": !0,
+        "data-error-row": x ? !0 : void 0,
+        children: /* @__PURE__ */ e("td", {
+          colSpan: d,
+          className: r("p-0", "bg-white", "dark:bg-metal-900", "dark:border", "dark:border-metal-700", "rounded-b-lg"),
+          children: /* @__PURE__ */ e("div", {
+            className: "flex items-center justify-center",
+            children: h
+          })
+        })
+      })
+    });
+  }
+  return /* @__PURE__ */ e("tbody", {
+    className: r("kvt-body", "text-slate-800", "text-sm", "font-normal", "relative", "dark:border-x"),
+    children: t.map((d, b) => {
+      const { id: p, original: g, getVisibleCells: F } = d, { meta: s = {} } = g, i = F(), n = D && d.getIsExpanded(), H = !!s.expandedRow || !!f, k = i[0]?.column.id !== "__expand" || A ? 0 : _ ? 1 : null;
+      return /* @__PURE__ */ Q(K, { children: [/* @__PURE__ */ e("tr", {
+        className: r("kvt-row", { "group/row": u }, "border-b", "border-b-gray-200", "dark:text-metal-50", "dark:border-b-metal-700", "bg-transparent", s.className),
+        "data-row-id": p,
+        ...s.attributes ?? {},
+        children: i.map(({ id: M, column: o, getContext: O }, w) => {
+          const P = typeof o.columnDef.meta?.className == "function" ? o.columnDef.meta?.className(g) : o.columnDef.meta?.className;
+          return /* @__PURE__ */ e("td", {
+            className: r("kvt-cell", "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": u,
+              [r("bg-zinc-100 dark:bg-metal-800", L)]: !!n
+            }, z, P, {
+              "rounded-bl-lg": b === t.length - 1 && k !== null && w === k && !l && !n,
+              "rounded-br-lg": b === t.length - 1 && w === i.length - 1 && !l && !n,
+              "dark:[tr:last-child_&]:border-b": !l
+            }),
+            "data-expanded": n ? !0 : void 0,
+            ...o.columnDef.meta?.attributes ?? {},
+            children: I(o.columnDef.cell, O())
+          }, M);
+        })
+      }), H && /* @__PURE__ */ e(J, {
+        classNameExpandedCell: B,
+        classNameExpandedContent: V,
+        classNameExpandedRow: j,
+        colSpan: i.length,
+        id: p,
+        isExpanded: !!n,
+        isLastRow: b === t.length - 1 && !l,
+        children: s.expandedRow ?? f?.(g)
+      })] }, p);
+    })
+  });
 };
 export {
-  p as Body
+  re as Body
 };

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

@@ -1,165 +1,103 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { t as p } from "../../../../utils-Cx-WzRZF.js";
+import { t as d } from "../../../../chevron-left-DxGDBBKA.js";
+import { t as m } from "../../../../chevron-right-CDwgDdp-.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 g, a as d } from "../../../../chevron-right-VYBOBhRt.js";
-import { useTableContext as f } from "../../contexts/table.hook.js";
-const r = u(
-  ({
-    index: e,
-    currentPage: t,
-    handlePage: l
-  }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-    "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
-    }
-  ) }, 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(
-  ({
-    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,
-    {
-      className: p("h-6 w-6 cursor-pointer", {
-        "text-blue-600": !l,
-        "text-slate-400 cursor-not-allowed": l
-      })
-    }
-  ) }) })
-);
-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,
-      {
+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";
+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,
+    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";
+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: () => l(t - 1),
-        disabled: t === 0
-      }
-    ),
-    (() => {
-      if (e <= 5)
-        return Array.from({ length: e }, (s, c) => /* @__PURE__ */ i(
-          r,
-          {
-            index: c,
-            currentPage: t,
-            handlePage: l
-          },
-          c
-        ));
-      const n = [];
-      if (t < 3) {
-        for (let s = 0; s < 3; s++)
-          n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-        n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis" }, "ellipsis"));
-        for (let s = e - 2; s < e; s++)
-          n.push(
-            /* @__PURE__ */ i(
-              r,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-      } else if (t >= e - 5) {
-        n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: 0,
-              currentPage: t,
-              handlePage: l
-            },
-            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,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-      } else {
-        n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: 0,
-              currentPage: t,
-              handlePage: l
-            },
-            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,
-              {
-                index: s,
-                currentPage: t,
-                handlePage: l
-              },
-              s
-            )
-          );
-        t < e - 4 && n.push(/* @__PURE__ */ i(o, { keyValue: "ellipsis2" }, "ellipsis2")), n.push(
-          /* @__PURE__ */ i(
-            r,
-            {
-              index: e - 1,
-              currentPage: t,
-              handlePage: l
-            },
-            e - 1
-          )
-        );
-      }
-      return n;
-    })(),
-    /* @__PURE__ */ i(
-      a,
-      {
+        onClick: () => s(e - 1),
+        disabled: e === 0
+      }),
+      (() => {
+        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: 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: () => l(t + 1),
-        disabled: t >= e - 1
-      }
-    )
-  ] });
+        onClick: () => s(e + 1),
+        disabled: e >= t - 1
+      })
+    ]
+  });
 };
 export {
-  k as DotPaginate
+  v as DotPaginate
 };

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

@@ -1,34 +1,72 @@
-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
-}) => {
-  const { pageSize: s, onPageSize: o, handlePage: t } = x(), r = p(
-    () => n.map(String).map((e) => ({ label: e, value: e })),
-    []
-  ), m = l(
-    (e) => {
-      o(Number(e)), t(0);
+import { t as o } from "../../../../utils-Cx-WzRZF.js";
+import { t as u } from "../../../../chevron-up-Bjpvg6ui.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { i as b, n as v, r as w, t as S } from "../../../../dist-2bGlmy8N2.js";
+import { listVariants as k } from "../../../Select/components/List/List.variants.js";
+import { listItemVariants as N } from "../../../Select/components/ListItem/ListItem.variants.js";
+import { selectVariants as C } from "../../../Select/Select.variants.js";
+import { DEFAULT_PAGE_SIZES as y } from "../../constants/pagination.js";
+import { useTableContext as z } from "../../contexts/table.hook.js";
+import { useState as O } from "react";
+import { jsx as t, jsxs as r } from "react/jsx-runtime";
+var _ = ({ pageSizes: d = y, isListPortal: f = !1, direction: s = "auto" }) => {
+  const { pageSize: i, onPageSize: g, handlePage: h } = z(), [n, l] = O(!1), m = (e) => {
+    g(Number(e)), h(0), l(!1);
+  }, p = /* @__PURE__ */ t(S, {
+    asChild: !0,
+    side: s === "up" ? "top" : "bottom",
+    avoidCollisions: s === "auto",
+    align: "start",
+    sideOffset: 4,
+    onOpenAutoFocus: (e) => {
+      e.preventDefault();
     },
-    [t, o]
-  );
-  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-    /* @__PURE__ */ a("span", { children: "Show" }),
-    /* @__PURE__ */ a(
-      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)
-      }
-    )
-  ] });
+    children: /* @__PURE__ */ t("ul", {
+      role: "listbox",
+      "aria-label": "Rows per page",
+      className: o(k(), "kvt-page-size-list", "static top-auto mt-0 z-50 w-(--radix-popover-trigger-width)"),
+      children: d.map((e) => {
+        const a = String(e);
+        return /* @__PURE__ */ t("li", {
+          role: "option",
+          "aria-selected": a === String(i),
+          tabIndex: 0,
+          className: o(N(), "dark:bg-metal-800"),
+          onClick: () => {
+            m(a);
+          },
+          onKeyDown: (x) => {
+            x.key === "Enter" && m(a);
+          },
+          children: /* @__PURE__ */ t(c, {
+            variant: "body2",
+            className: "text-sm dark:text-metal-50",
+            children: a
+          })
+        }, a);
+      })
+    })
+  });
+  return /* @__PURE__ */ r("div", {
+    className: "kvt-page-size flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ t("span", { children: "Show" }), /* @__PURE__ */ r(w, {
+      open: n,
+      onOpenChange: l,
+      children: [/* @__PURE__ */ r(b, {
+        "aria-label": "Rows per page",
+        className: o(C(), "w-22 bg-white"),
+        children: [/* @__PURE__ */ t(c, {
+          variant: "body2",
+          className: "flex-1 text-left text-sm text-metal-800 dark:text-metal-50",
+          children: i
+        }), /* @__PURE__ */ t(u, {
+          "data-state": n ? "open" : "closed",
+          className: "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none"
+        })]
+      }), f ? /* @__PURE__ */ t(v, { children: p }) : p]
+    })]
+  });
 };
 export {
-  b as DropdownPaginate
+  _ as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -0,0 +1,31 @@
+import { t as a } from "../../../../utils-Cx-WzRZF.js";
+import { jsx as d } from "react/jsx-runtime";
+var n = ({ children: o, classNameExpandedCell: b, classNameExpandedContent: t, classNameExpandedRow: l, colSpan: m, id: i, isExpanded: r, isLastRow: e }) => /* @__PURE__ */ d("tr", {
+  className: a("kvt-expanded-row h-0 leading-0", l),
+  "data-expanded-row-id": i,
+  children: /* @__PURE__ */ d("td", {
+    colSpan: m,
+    className: a("p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700", { "rounded-b-lg": e }, {
+      "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
+      "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
+      "border-y-0": !r && !e,
+      "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
+    }),
+    children: /* @__PURE__ */ d("div", {
+      className: a("grid transition-[grid-template-rows] duration-300 ease-in-out", {
+        "grid-rows-[1fr]": r,
+        "grid-rows-[0fr]": !r
+      }, t),
+      children: /* @__PURE__ */ d("div", {
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ d("div", {
+          className: a("px-4 py-3", b),
+          children: o
+        })
+      })
+    })
+  })
+});
+export {
+  n as ExpandableRow
+};