@konstructio/ui 0.1.2-alpha.2 → 0.1.2-alpha.20

package/dist/components/Toast/Toast.js

@@ -2,24 +2,26 @@ import { jsx as i, jsxs as A, Fragment as se } from "react/jsx-runtime";
 import { u as ae, S as B } from "../../index-DQH6odE9.js";
 import * as n from "react";
 import { useRef as xe, useEffect as be, useMemo as oe, isValidElement as re, useCallback as ge } from "react";
-import { P as D, r as Se, d as Ie } from "../../index-C9T9HQaa.js";
-import { c as Ne, a as Ae, b as x, u as De } from "../../index-BfXxHr_2.js";
-import { c as Fe } from "../../index-Cvx4lqTq.js";
-import { B as _e, R as Le, P as Me } from "../../index-CrBonFvu.js";
-import { P as Oe } from "../../index-C1g_chDT.js";
+import * as Se from "react-dom";
+import { c as Ie, a as Ne, b as x, u as Ae } from "../../index-BfXxHr_2.js";
+import { c as De } from "../../index-Cvx4lqTq.js";
+import { B as Fe, R as _e } from "../../index-CffpTFMi.js";
+import { P as Le } from "../../index-DdXGVVBv.js";
+import { P as Me } from "../../index-C1g_chDT.js";
+import { P as D, d as Oe } from "../../index-BVRIAMfe.js";
 import { u as $ } from "../../index-0ioNhtNM.js";
-import { V as ie, R as ke } from "../../index-iXyXtdgP.js";
+import { V as ie, R as ke } from "../../index-sp5ZfG6g.js";
 import { cn as j } from "../../utils/index.js";
 import { closeToastVariants as Ve, toastVariants as Ke, viewportToastVariants as He } from "./Toast.variants.js";
-import { X as We } from "../../x-BPcqkRZd.js";
-var Q = "ToastProvider", [Z, Xe, $e] = Fe("Toast"), [ce, xt] = Ne("Toast", [$e]), [Ue, U] = ce(Q), ue = (e) => {
+import { X as We } from "../../x-4F_5p77m.js";
+var Q = "ToastProvider", [Z, Xe, $e] = De("Toast"), [ce, bt] = Ie("Toast", [$e]), [Ue, U] = ce(Q), ue = (e) => {
   const {
     __scopeToast: r,
     label: o = "Notification",
     duration: t = 5e3,
     swipeDirection: c = "right",
     swipeThreshold: d = 50,
-    children: p
+    children: f
   } = e, [T, v] = n.useState(null), [a, E] = n.useState(0), w = n.useRef(!1), S = n.useRef(!1);
   return o.trim() || console.error(
     `Invalid prop \`label\` supplied to \`${Q}\`. Expected non-empty \`string\`.`
@@ -38,7 +40,7 @@ var Q = "ToastProvider", [Z, Xe, $e] = Fe("Toast"), [ce, xt] = Ne("Toast", [$e])
       onToastRemove: n.useCallback(() => E((b) => b - 1), []),
       isFocusedToastEscapeKeyDownRef: w,
       isClosePausedRef: S,
-      children: p
+      children: f
     }
   ) });
 };
@@ -50,7 +52,7 @@ var le = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
       hotkey: t = Ye,
       label: c = "Notifications ({hotkey})",
       ...d
-    } = e, p = U(le, o), T = Xe(o), v = n.useRef(null), a = n.useRef(null), E = n.useRef(null), w = n.useRef(null), S = ae(r, w, p.onViewportChange), b = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = p.toastCount > 0;
+    } = e, f = U(le, o), T = Xe(o), v = n.useRef(null), a = n.useRef(null), E = n.useRef(null), w = n.useRef(null), S = ae(r, w, f.onViewportChange), b = t.join("+").replace(/Key/g, "").replace(/Digit/g, ""), R = f.toastCount > 0;
     n.useEffect(() => {
       const u = (h) => {
         t.length !== 0 && t.every((m) => h[m] || h.code === m) && w.current?.focus();
@@ -59,55 +61,55 @@ var le = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
     }, [t]), n.useEffect(() => {
       const u = v.current, h = w.current;
       if (R && u && h) {
-        const f = () => {
-          if (!p.isClosePausedRef.current) {
+        const p = () => {
+          if (!f.isClosePausedRef.current) {
             const y = new CustomEvent(z);
-            h.dispatchEvent(y), p.isClosePausedRef.current = !0;
+            h.dispatchEvent(y), f.isClosePausedRef.current = !0;
           }
         }, m = () => {
-          if (p.isClosePausedRef.current) {
+          if (f.isClosePausedRef.current) {
             const y = new CustomEvent(G);
-            h.dispatchEvent(y), p.isClosePausedRef.current = !1;
+            h.dispatchEvent(y), f.isClosePausedRef.current = !1;
           }
         }, P = (y) => {
           !u.contains(y.relatedTarget) && m();
         }, C = () => {
           u.contains(document.activeElement) || m();
         };
-        return u.addEventListener("focusin", f), u.addEventListener("focusout", P), u.addEventListener("pointermove", f), u.addEventListener("pointerleave", C), window.addEventListener("blur", f), window.addEventListener("focus", m), () => {
-          u.removeEventListener("focusin", f), u.removeEventListener("focusout", P), u.removeEventListener("pointermove", f), u.removeEventListener("pointerleave", C), window.removeEventListener("blur", f), window.removeEventListener("focus", m);
+        return u.addEventListener("focusin", p), u.addEventListener("focusout", P), u.addEventListener("pointermove", p), u.addEventListener("pointerleave", C), window.addEventListener("blur", p), window.addEventListener("focus", m), () => {
+          u.removeEventListener("focusin", p), u.removeEventListener("focusout", P), u.removeEventListener("pointermove", p), u.removeEventListener("pointerleave", C), window.removeEventListener("blur", p), window.removeEventListener("focus", m);
         };
       }
-    }, [R, p.isClosePausedRef]);
+    }, [R, f.isClosePausedRef]);
     const l = n.useCallback(
       ({ tabbingDirection: u }) => {
-        const f = T().map((m) => {
+        const p = T().map((m) => {
           const P = m.ref.current, C = [P, ...nt(P)];
           return u === "forwards" ? C : C.reverse();
         });
-        return (u === "forwards" ? f.reverse() : f).flat();
+        return (u === "forwards" ? p.reverse() : p).flat();
       },
       [T]
     );
     return n.useEffect(() => {
       const u = w.current;
       if (u) {
-        const h = (f) => {
-          const m = f.altKey || f.ctrlKey || f.metaKey;
-          if (f.key === "Tab" && !m) {
-            const C = document.activeElement, y = f.shiftKey;
-            if (f.target === u && y) {
+        const h = (p) => {
+          const m = p.altKey || p.ctrlKey || p.metaKey;
+          if (p.key === "Tab" && !m) {
+            const C = document.activeElement, y = p.shiftKey;
+            if (p.target === u && y) {
               a.current?.focus();
               return;
             }
             const _ = l({ tabbingDirection: y ? "backwards" : "forwards" }), V = _.findIndex((N) => N === C);
-            q(_.slice(V + 1)) ? f.preventDefault() : y ? a.current?.focus() : E.current?.focus();
+            q(_.slice(V + 1)) ? p.preventDefault() : y ? a.current?.focus() : E.current?.focus();
           }
         };
         return u.addEventListener("keydown", h), () => u.removeEventListener("keydown", h);
       }
     }, [T, l]), /* @__PURE__ */ A(
-      _e,
+      Fe,
       {
         ref: v,
         role: "region",
@@ -146,9 +148,9 @@ var le = "ToastViewport", Ye = ["F8"], z = "toast.viewportPause", G = "toast.vie
   }
 );
 de.displayName = le;
-var pe = "ToastFocusProxy", J = n.forwardRef(
+var fe = "ToastFocusProxy", J = n.forwardRef(
   (e, r) => {
-    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...c } = e, d = U(pe, o);
+    const { __scopeToast: o, onFocusFromOutsideViewport: t, ...c } = e, d = U(fe, o);
     return /* @__PURE__ */ i(
       ie,
       {
@@ -156,28 +158,28 @@ var pe = "ToastFocusProxy", J = n.forwardRef(
         ...c,
         ref: r,
         style: { position: "fixed" },
-        onFocus: (p) => {
-          const T = p.relatedTarget;
+        onFocus: (f) => {
+          const T = f.relatedTarget;
           !d.viewport?.contains(T) && t();
         }
       }
     );
   }
 );
-J.displayName = pe;
-var O = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.swipeCancel", ze = "toast.swipeEnd", fe = n.forwardRef(
+J.displayName = fe;
+var O = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.swipeCancel", ze = "toast.swipeEnd", pe = n.forwardRef(
   (e, r) => {
-    const { forceMount: o, open: t, defaultOpen: c, onOpenChange: d, ...p } = e, [T, v] = Ae({
+    const { forceMount: o, open: t, defaultOpen: c, onOpenChange: d, ...f } = e, [T, v] = Ne({
       prop: t,
       defaultProp: c ?? !0,
       onChange: d,
       caller: O
     });
-    return /* @__PURE__ */ i(Oe, { present: o || T, children: /* @__PURE__ */ i(
+    return /* @__PURE__ */ i(Me, { present: o || T, children: /* @__PURE__ */ i(
       Qe,
       {
         open: T,
-        ...p,
+        ...f,
         ref: r,
         onClose: () => v(!1),
         onPause: $(e.onPause),
@@ -200,7 +202,7 @@ var O = "Toast", Be = "toast.swipeStart", je = "toast.swipeMove", qe = "toast.sw
     ) });
   }
 );
-fe.displayName = O;
+pe.displayName = O;
 var [Ge, Je] = ce(O, {
   onClose() {
   }
@@ -211,7 +213,7 @@ var [Ge, Je] = ce(O, {
       type: t = "foreground",
       duration: c,
       open: d,
-      onClose: p,
+      onClose: f,
       onEscapeKeyDown: T,
       onPause: v,
       onResume: a,
@@ -220,8 +222,8 @@ var [Ge, Je] = ce(O, {
       onSwipeCancel: S,
       onSwipeEnd: b,
       ...R
-    } = e, l = U(O, o), [u, h] = n.useState(null), f = ae(r, (s) => h(s)), m = n.useRef(null), P = n.useRef(null), C = c || l.duration, y = n.useRef(0), F = n.useRef(C), k = n.useRef(0), { onToastAdd: _, onToastRemove: V } = l, N = $(() => {
-      u?.contains(document.activeElement) && l.viewport?.focus(), p();
+    } = e, l = U(O, o), [u, h] = n.useState(null), p = ae(r, (s) => h(s)), m = n.useRef(null), P = n.useRef(null), C = c || l.duration, y = n.useRef(0), F = n.useRef(C), k = n.useRef(0), { onToastAdd: _, onToastRemove: V } = l, N = $(() => {
+      u?.contains(document.activeElement) && l.viewport?.focus(), f();
     }), K = n.useCallback(
       (s) => {
         !s || s === 1 / 0 || (window.clearTimeout(k.current), y.current = (/* @__PURE__ */ new Date()).getTime(), k.current = window.setTimeout(N, s));
@@ -257,7 +259,7 @@ var [Ge, Je] = ce(O, {
       ),
       /* @__PURE__ */ i(Ge, { scope: o, onClose: N, children: Se.createPortal(
         /* @__PURE__ */ i(Z.ItemSlot, { scope: o, children: /* @__PURE__ */ i(
-          Le,
+          _e,
           {
             asChild: !0,
             onEscapeKeyDown: x(T, () => {
@@ -270,7 +272,7 @@ var [Ge, Je] = ce(O, {
                 "data-state": d ? "open" : "closed",
                 "data-swipe-direction": l.swipeDirection,
                 ...R,
-                ref: f,
+                ref: p,
                 style: { userSelect: "none", touchAction: "none", ...e.style },
                 onKeyDown: x(e.onKeyDown, (s) => {
                   s.key === "Escape" && (T?.(s.nativeEvent), s.nativeEvent.defaultPrevented || (l.isFocusedToastEscapeKeyDownRef.current = !0, N()));
@@ -314,11 +316,11 @@ var [Ge, Je] = ce(O, {
     ] }) : null;
   }
 ), Ze = (e) => {
-  const { __scopeToast: r, children: o, ...t } = e, c = U(O, r), [d, p] = n.useState(!1), [T, v] = n.useState(!1);
-  return ot(() => p(!0)), n.useEffect(() => {
+  const { __scopeToast: r, children: o, ...t } = e, c = U(O, r), [d, f] = n.useState(!1), [T, v] = n.useState(!1);
+  return ot(() => f(!0)), n.useEffect(() => {
     const a = window.setTimeout(() => v(!0), 1e3);
     return () => window.clearTimeout(a);
-  }, []), T ? null : /* @__PURE__ */ i(Me, { asChild: !0, children: /* @__PURE__ */ i(ie, { ...t, children: d && /* @__PURE__ */ A(se, { children: [
+  }, []), T ? null : /* @__PURE__ */ i(Le, { asChild: !0, children: /* @__PURE__ */ i(ie, { ...t, children: d && /* @__PURE__ */ A(se, { children: [
     c.label,
     " ",
     o
@@ -380,8 +382,8 @@ function Pe(e) {
       const c = t.ariaHidden || t.hidden || t.style.display === "none", d = t.dataset.radixToastAnnounceExclude === "";
       if (!c)
         if (d) {
-          const p = t.dataset.radixToastAnnounceAlt;
-          p && r.push(p);
+          const f = t.dataset.radixToastAnnounceAlt;
+          f && r.push(f);
         } else
           r.push(...Pe(t));
     }
@@ -389,7 +391,7 @@ function Pe(e) {
 }
 function X(e, r, o, { discrete: t }) {
   const c = o.originalEvent.currentTarget, d = new CustomEvent(e, { bubbles: !0, cancelable: !0, detail: o });
-  r && c.addEventListener(e, r, { once: !0 }), t ? Ie(c, d) : c.dispatchEvent(d);
+  r && c.addEventListener(e, r, { once: !0 }), t ? Oe(c, d) : c.dispatchEvent(d);
 }
 var ne = (e, r, o = 0) => {
   const t = Math.abs(e.x), c = Math.abs(e.y), d = t > c;
@@ -398,7 +400,7 @@ var ne = (e, r, o = 0) => {
 function ot(e = () => {
 }) {
   const r = $(e);
-  De(() => {
+  Ae(() => {
     let o = 0, t = 0;
     return o = window.requestAnimationFrame(() => t = window.requestAnimationFrame(r)), () => {
       window.cancelAnimationFrame(o), window.cancelAnimationFrame(t);
@@ -422,15 +424,15 @@ function q(e) {
   const r = document.activeElement;
   return e.some((o) => o === r ? !0 : (o.focus(), document.activeElement !== r));
 }
-var st = ue, at = de, it = fe, ct = me, ut = Te, lt = ve;
-const bt = ({
+var st = ue, at = de, it = pe, ct = me, ut = Te, lt = ve;
+const gt = ({
   title: e,
   duration: r = 5e3,
   titleClassName: o,
   descriptionClassName: t,
   description: c,
   children: d,
-  theme: p,
+  theme: f,
   showCloseButton: T = !0,
   closeButtonClassName: v,
   className: a,
@@ -448,7 +450,7 @@ const bt = ({
       it,
       {
         className: j(Ke({ className: a })),
-        "data-theme": p,
+        "data-theme": f,
         open: E,
         onOpenChange: w,
         children: [
@@ -474,5 +476,5 @@ const bt = ({
   ] });
 };
 export {
-  bt as Toast
+  gt as Toast
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -0,0 +1,121 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useMemo as H } from "react";
+import { cn as m } from "../../utils/index.js";
+import { TableProvider as I } from "./contexts/table.provider.js";
+import { Filter as K } from "./components/Filter/Filter.js";
+import { Header as M } from "./components/Header/Header.js";
+import { Body as k } from "./components/Body/Body.js";
+import { Pagination as q } from "./components/Pagination/Pagination.js";
+import { TruncateText as C } from "./components/TruncateText/TruncateText.js";
+import { Actions as F } from "./components/Actions/Actions.js";
+const G = ({
+  id: n,
+  ariaLabel: c,
+  columns: d,
+  data: f,
+  totalItems: p = -1 / 0,
+  className: u,
+  classNameHeaderActiveArrows: b,
+  classNameHeaderArrows: T,
+  classNameHeaderTable: N,
+  classNameTable: h,
+  classNameWrapperTable: x,
+  isLoading: A,
+  fetchData: v,
+  queryOptions: g,
+  // Pagination
+  showPagination: y,
+  showTotalItems: i,
+  showDropdownPagination: a,
+  showDotPagination: l,
+  showFormPagination: t,
+  pageSizes: z,
+  // Filter
+  showFilter: V = !1,
+  showFilterInput: j,
+  filterSearchPlaceholder: w = "",
+  multiSelectFilter: B,
+  filterActions: P,
+  showResetButton: E = !0
+}) => {
+  const e = H(
+    () => y || [
+      i,
+      a,
+      l,
+      t
+    ].some(Boolean),
+    []
+  );
+  return /* @__PURE__ */ r(
+    I,
+    {
+      id: n,
+      columns: d,
+      data: f,
+      fetchData: v,
+      totalItems: p,
+      queryOptions: g,
+      isPaginationEnabled: e,
+      children: /* @__PURE__ */ s("section", { className: u, children: [
+        V && /* @__PURE__ */ r(
+          K,
+          {
+            actions: P,
+            multiSelectFilter: B,
+            placeholder: w,
+            showFilterInput: j,
+            showResetButton: E
+          }
+        ),
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: m(
+              "shadow rounded-t-lg",
+              {
+                "overflow-hidden rounded-lg": !e
+              },
+              x
+            ),
+            children: /* @__PURE__ */ s(
+              "table",
+              {
+                className: m("w-full border-collapse", h),
+                "aria-label": c,
+                children: [
+                  /* @__PURE__ */ r(
+                    M,
+                    {
+                      className: N,
+                      classNameArrows: T,
+                      classNameActiveArrows: b
+                    }
+                  ),
+                  /* @__PURE__ */ r(k, { isLoading: A })
+                ]
+              }
+            )
+          }
+        ),
+        e && /* @__PURE__ */ r(
+          q,
+          {
+            showTotalItems: i,
+            showDropdownPagination: a,
+            showDotPagination: l,
+            showFormPagination: t,
+            pageSizes: z
+          }
+        )
+      ] })
+    }
+  );
+}, o = G;
+o.displayName = "KonstructVirtualizedTable";
+o.TruncateText = C;
+o.Actions = F;
+export {
+  C as TruncateText,
+  o as VirtualizedTable
+};

package/dist/components/VirtualizedTable/VirtualizedTable.variants.js

@@ -0,0 +1,5 @@
+import { c as a } from "../../index-D29mdTf5.js";
+const t = a([]);
+export {
+  t as virtualizeTableVariants
+};

package/dist/components/VirtualizedTable/assets/chevron-down.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+const l = ({
+  className: t,
+  onClick: e
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "none",
+    className: t,
+    onClick: e,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M0.8225 0L3.5 2.67167L6.1775 0L7 0.8225L3.5 4.3225L0 0.8225L0.8225 0Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  l as default
+};

package/dist/components/VirtualizedTable/assets/chevron-up.js

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+const l = ({
+  className: r,
+  onClick: t
+}) => /* @__PURE__ */ o(
+  "svg",
+  {
+    width: "7",
+    height: "5",
+    viewBox: "0 0 7 5",
+    fill: "currentColor",
+    className: r,
+    onClick: t,
+    children: /* @__PURE__ */ o(
+      "path",
+      {
+        d: "M0.8225 4.99999L3.5 2.32832L6.1775 4.99999L7 4.17749L3.5 0.67749L0 4.17749L0.8225 4.99999Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  l as default
+};

package/dist/components/VirtualizedTable/assets/index.js

@@ -0,0 +1,6 @@
+import { default as r } from "./chevron-up.js";
+import { default as f } from "./chevron-down.js";
+export {
+  f as ChevronDown,
+  r as ChevronUp
+};

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

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { Button as r } from "../../../Button/Button.js";
+import { cn as n } from "../../../../utils/index.js";
+import { E as c } from "../../../../ellipsis-vertical-DpnVYRxI.js";
+const u = ({
+  actions: t,
+  ...i
+}) => t ? /* @__PURE__ */ o("div", { className: "relative group w-fit", children: [
+  /* @__PURE__ */ o(
+    r,
+    {
+      variant: "text",
+      shape: "circle",
+      size: "large",
+      className: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ e(c, { "aria-hidden": "true", className: "w-7 h-7" }),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ e("div", { className: "absolute top-full right-0 w-[215px] hidden group-hover:block z-10", children: /* @__PURE__ */ e("div", { className: "bg-white mt-0.5 py-2 rounded-lg shadow-lg border border-zinc-100 animate-in fade-in-0", children: t.map(({ label: a, onClick: l, className: s }) => /* @__PURE__ */ e(
+    r,
+    {
+      className: n(
+        "w-full text-slate-800 cursor-pointer p-0 h-9 flex gap-2 text-sm font-normal justify-start hover:bg-gray-50 hover:text-slate-800 rounded-none px-6",
+        s
+      ),
+      variant: "text",
+      asChild: !0,
+      role: "presentation",
+      children: /* @__PURE__ */ e(r, { onClick: () => l(i.row.original), children: a })
+    },
+    a
+  )) }) })
+] }) : null;
+export {
+  u as Actions
+};

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

@@ -0,0 +1,26 @@
+import { jsx as e } from "react/jsx-runtime";
+import { f as d } from "../../../../index-Dx2grAuN.js";
+import { Skeleton as i } from "../../../Skeleton/Skeleton.js";
+import { useTableContext as p } from "../../contexts/table.hook.js";
+const w = ({ isLoading: o }) => {
+  const { table: t, pageSize: a } = p();
+  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: o ? /* @__PURE__ */ e(i, { numberOfRows: a, table: t }) : t.getRowModel().rows.map(({ id: l, getVisibleCells: s }) => /* @__PURE__ */ e(
+    "tr",
+    {
+      className: "border border-x-transparent border-t-gray-200 border-b-transparent table w-full table-fixed",
+      children: s().map(({ id: m, column: r, getContext: n }) => /* @__PURE__ */ e(
+        "td",
+        {
+          className: "px-4 py-1 text-sm",
+          style: { width: r.getSize() },
+          children: d(r.columnDef.cell, n())
+        },
+        m
+      ))
+    },
+    l
+  )) });
+};
+export {
+  w as Body
+};