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

package/dist/components/Typography/Typography.variants.js

@@ -1,57 +1,75 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
-  variants: {
-    variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
-      h2: ["text-[45px]", "leading-[52px]"],
-      h3: ["text-[36px]", "leading-[44px]"],
-      h4: ["text-[32px]", "leading-[40px]"],
-      h5: ["text-[28px]", "leading-[36px]"],
-      h6: ["text-[24px]", "font-medium", "leading-[32px]", "tracking-[0.15px]"],
-      subtitle1: ["text-[22px]", "leading-[28px]"],
-      subtitle2: [
-        "text-[16px]",
-        "font-medium",
-        "leading-[24px]",
-        "tracking-[0.15px]"
-      ],
-      subtitle3: [
-        "text-[14px]",
-        "font-medium",
-        "leading-[20px]",
-        "tracking-[0.1px]"
-      ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
-      labelMedium: [
-        "text-[12px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      labelSmall: [
-        "text-[11px]",
-        "font-medium",
-        "leading-[16px]",
-        "tracking-[0.5px]",
-        "uppercase"
-      ],
-      buttonSmall: [
-        "text-[14px]",
-        "font-semibold",
-        "leading-[20px]",
-        "tracking-[0.25px]"
-      ],
-      body1: ["text-[16px]", "leading-[24px]", "tracking-[0.5px]"],
-      body2: ["text-[14px]", "leading-[20px]", "tracking-[0.25px]"],
-      body3: ["text-[12px]", "leading-[16px]", "tracking-[0.4px]"],
-      tooltip: ["text-[14px]", "leading-[22px]"]
-    }
-  },
-  defaultVariants: {
-    variant: "body1"
-  }
+import { t } from "../../dist-B9GE4SXf.js";
+var a = t(["text-slate-800", "dark:text-metal-50"], {
+  variants: { variant: {
+    h1: ["text-[57px]", "leading-16"],
+    h2: ["text-[45px]", "leading-13"],
+    h3: ["text-4xl", "leading-11"],
+    h4: ["text-[32px]", "leading-10"],
+    h5: ["text-[28px]", "leading-9"],
+    h6: [
+      "text-2xl",
+      "font-medium",
+      "leading-8",
+      "tracking-[0.15px]"
+    ],
+    subtitle1: ["text-[22px]", "leading-7"],
+    subtitle2: [
+      "text-[16px]",
+      "font-medium",
+      "leading-6",
+      "tracking-[0.15px]"
+    ],
+    subtitle3: [
+      "text-[14px]",
+      "font-medium",
+      "leading-5",
+      "tracking-[0.1px]"
+    ],
+    labelLarge: [
+      "text-sm",
+      "font-medium",
+      "text-slate-500",
+      "dark:text-metal-50"
+    ],
+    labelMedium: [
+      "text-[12px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    labelSmall: [
+      "text-[11px]",
+      "font-medium",
+      "leading-4",
+      "tracking-[0.5px]",
+      "uppercase"
+    ],
+    buttonSmall: [
+      "text-[14px]",
+      "font-semibold",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body1: [
+      "text-base",
+      "leading-6",
+      "tracking-[0.5px]"
+    ],
+    body2: [
+      "text-sm",
+      "leading-5",
+      "tracking-[0.25px]"
+    ],
+    body3: [
+      "text-xs",
+      "leading-4",
+      "tracking-[0.4px]"
+    ],
+    tooltip: ["text-sm", "leading-5.5"]
+  } },
+  defaultVariants: { variant: "body1" }
 });
 export {
-  e as typographyVariants
+  a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -1,117 +1,104 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useMemo as H } from "react";
-import { cn as s } 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 P } from "./components/Body/Body.js";
-import { Pagination as k } from "./components/Pagination/Pagination.js";
-import { TruncateText as q } from "./components/TruncateText/TruncateText.js";
-import { Actions as C } from "./components/Actions/Actions.js";
-const E = ({
-  id: c,
-  ariaLabel: n,
-  columns: d,
-  data: f,
-  totalItems: p = -1 / 0,
-  className: u,
-  classNameHeaderActiveArrows: b,
-  classNameHeaderArrows: T,
-  classNameHeaderTable: N,
-  classNameTable: h,
-  classNameWrapperTable: x,
-  fetchData: A,
-  // Pagination
-  showPagination: v,
-  showTotalItems: o,
-  showDropdownPagination: i,
-  showDotPagination: a,
-  showFormPagination: l,
-  pageSizes: y,
-  // Filter
-  showFilter: z = !1,
-  showFilterInput: V,
-  filterSearchPlaceholder: g = "",
-  multiSelectFilter: j,
-  filterActions: w,
-  showResetButton: B = !0
-}) => {
-  const t = H(
-    () => v || [
-      o,
-      i,
-      a,
-      l
-    ].some(Boolean),
-    []
-  );
-  return /* @__PURE__ */ r(
-    I,
-    {
-      id: c,
-      columns: d,
-      data: f,
-      fetchData: A,
-      totalItems: p,
-      children: /* @__PURE__ */ m("section", { className: u, children: [
-        z && /* @__PURE__ */ r(
-          K,
-          {
-            actions: w,
-            multiSelectFilter: j,
-            placeholder: g,
-            showFilterInput: V,
-            showResetButton: B
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: s(
-              "shadow rounded-t-lg",
-              {
-                "overflow-hidden rounded-lg": !t
-              },
-              x
-            ),
-            children: /* @__PURE__ */ m(
-              "table",
-              {
-                className: s("w-full border-collapse", h),
-                "aria-label": n,
-                children: [
-                  /* @__PURE__ */ r(
-                    M,
-                    {
-                      className: N,
-                      classNameArrows: T,
-                      classNameActiveArrows: b
-                    }
-                  ),
-                  /* @__PURE__ */ r(P, {})
-                ]
-              }
-            )
-          }
-        ),
-        t && /* @__PURE__ */ r(
-          k,
-          {
-            showTotalItems: o,
-            showDropdownPagination: i,
-            showDotPagination: a,
-            showFormPagination: l,
-            pageSizes: y
-          }
-        )
-      ] })
-    }
-  );
-}, e = E;
-e.displayName = "KonstructVirtualizedTable";
-e.TruncateText = q;
-e.Actions = C;
+import { t as n } from "../../utils-Cx-WzRZF.js";
+import { Actions as g } from "./components/Actions/Actions.js";
+import { t as h } from "../../table.provider-9uUt5a-s.js";
+import { sendCollapseRowEvent as L, sendExpandRowEvent as P, sendResetFiltersEvent as D, sendToggleRowEvent as ee } from "./events/index.js";
+import { Body as re } from "./components/Body/Body.js";
+import { Filter as te } from "./components/Filter/Filter.js";
+import { Header as ae } from "./components/Header/Header.js";
+import { Pagination as le } from "./components/Pagination/Pagination.js";
+import { TruncateText as me } from "./components/TruncateText/TruncateText.js";
+import { WrapperBody as oe } from "./components/WrapperBody/WrapperBody.js";
+import { useMemo as se } from "react";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+var ie = ({ id: i, ariaLabel: p, columns: f, data: u, totalItems: b = -1 / 0, className: v, classNameHeaderActiveArrows: E, classNameHeaderArrows: T, classNameHeaderTable: x, classNameTable: N, classNameWrapperTable: A, isLoading: a, emptyState: y, getRowId: R, fetchData: z, queryOptions: B, showPagination: c, showTotalItems: l, showDropdownPagination: m, showDotPagination: o, showFormPagination: s, pageSizes: V, showFilter: j = !1, showFilterInput: k, filterSearchPlaceholder: C = "", filters: H, multiSelectFilter: K, filterActions: M, showResetButton: W = !0, resetButtonClassName: q, closeOnApply: F = !0, enableHoverRow: G, classNameHoverRow: I, enableExpandedRow: J, expandedState: O, defaultExpanded: Q, classNameExpandedRow: S, classNameExpandedCell: U, classNameExpandedContent: X, classNameExpandedHeader: Y, classNameActiveExpandedRow: Z, onExpandedChange: _, renderExpandedRow: $, keepExpandColumnVisible: w }) => {
+  const r = se(() => c || [
+    l,
+    m,
+    o,
+    s
+  ].some(Boolean), [
+    c,
+    l,
+    m,
+    o,
+    s
+  ]);
+  return /* @__PURE__ */ e(h, {
+    id: i,
+    columns: f,
+    data: u,
+    getRowId: R,
+    fetchData: z,
+    totalItems: b,
+    queryOptions: B,
+    isPaginationEnabled: r,
+    enableExpandedRow: J,
+    expandedState: O,
+    onExpandedChange: _,
+    defaultExpanded: Q,
+    classNameExpandedRow: S,
+    classNameExpandedCell: U,
+    classNameExpandedContent: X,
+    classNameExpandedHeader: Y,
+    classNameActiveExpandedRow: Z,
+    enableHoverRow: G,
+    classNameHoverRow: I,
+    renderExpandedRow: $,
+    keepExpandColumnVisible: w,
+    children: /* @__PURE__ */ d("section", {
+      className: n("w-full min-w-fit", v),
+      children: [
+        j && /* @__PURE__ */ e(te, {
+          id: i,
+          actions: M,
+          filters: H,
+          multiSelectFilter: K,
+          placeholder: C,
+          showFilterInput: k,
+          showResetButton: W,
+          resetButtonClassName: q,
+          closeOnApply: F
+        }),
+        /* @__PURE__ */ e(oe, {
+          showPagination: r,
+          classNameWrapperTable: A,
+          isLoading: a,
+          children: /* @__PURE__ */ d("table", {
+            className: n("w-full border-collapse table-auto", "dark:border-separate dark:border-spacing-0", N),
+            "aria-label": p,
+            children: [/* @__PURE__ */ e(ae, {
+              className: x,
+              classNameArrows: T,
+              classNameActiveArrows: E
+            }), /* @__PURE__ */ e(re, {
+              isLoading: a,
+              showPagination: r,
+              emptyState: y
+            })]
+          })
+        }),
+        r && /* @__PURE__ */ e(le, {
+          showTotalItems: l,
+          showDropdownPagination: m,
+          showDotPagination: o,
+          showFormPagination: s,
+          pageSizes: V,
+          isLoading: a
+        })
+      ]
+    })
+  });
+}, t = ie;
+t.displayName = "KonstructVirtualizedTable";
+t.TruncateText = me;
+t.Actions = g;
+t.Events = {
+  sendExpandRowEvent: P,
+  sendCollapseRowEvent: L,
+  sendToggleRowEvent: ee,
+  sendResetFiltersEvent: D
+};
 export {
-  q as TruncateText,
-  e as VirtualizedTable
+  me as TruncateText,
+  t as VirtualizedTable
 };

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

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

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

@@ -1,25 +1,16 @@
 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"
-      }
-    )
-  }
-);
+var i = ({ className: e, onClick: r }) => /* @__PURE__ */ o("svg", {
+  width: "7",
+  height: "5",
+  viewBox: "0 0 7 5",
+  fill: "none",
+  className: e,
+  onClick: r,
+  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
+  i as default
 };

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

@@ -1,25 +1,16 @@
-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"
-      }
-    )
-  }
-);
+import { jsx as r } from "react/jsx-runtime";
+var l = ({ className: o, onClick: t }) => /* @__PURE__ */ r("svg", {
+  width: "7",
+  height: "5",
+  viewBox: "0 0 7 5",
+  fill: "currentColor",
+  className: o,
+  onClick: t,
+  children: /* @__PURE__ */ r("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

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

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

@@ -1,46 +1,63 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { Button as r } from "../../../Button/Button.js";
-import { c } from "../../../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const s = [
-  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
-  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
-  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
-], n = c("ellipsis-vertical", s), u = ({
-  actions: t,
-  ...o
-}) => t ? /* @__PURE__ */ l("div", { className: "relative group w-fit", children: [
-  /* @__PURE__ */ l(
-    r,
-    {
-      variant: "text",
+import { t as r } from "../../../../utils-Cx-WzRZF.js";
+import { Button as g } from "../../../Button/Button.js";
+import { t as B } from "../../../../ellipsis-vertical-BBmhzIXn.js";
+import { useCallback as C, useRef as R, useState as A } from "react";
+import { jsx as a, jsxs as m } from "react/jsx-runtime";
+var H = 36, I = 16, G = ({ actions: o, wrapperClassName: h, triggerButtonClassName: v, iconTriggerButtonClassName: f, wrapperActionsClassName: b, wrapperContentActionsClassName: w, ...x }) => {
+  const c = R(null), [u, y] = A(!1), k = C(() => {
+    const n = c.current;
+    if (!n || !o) return;
+    const t = n.getBoundingClientRect(), p = o.length * H + I;
+    let i = 0, l = window.innerHeight, e = n.parentElement;
+    for (; e; ) {
+      const { overflowY: E } = window.getComputedStyle(e);
+      if ([
+        "auto",
+        "scroll",
+        "hidden"
+      ].includes(E)) {
+        const d = e.getBoundingClientRect();
+        i = d.top, l = d.bottom;
+        break;
+      }
+      e = e.parentElement;
+    }
+    const s = l - t.bottom, N = t.top - i;
+    y(s < p && N > s);
+  }, [o]);
+  return o ? /* @__PURE__ */ m("div", {
+    ref: c,
+    className: r("relative group", h),
+    onMouseEnter: k,
+    children: [/* @__PURE__ */ m(g, {
+      variant: "link",
       shape: "circle",
       size: "large",
-      className: "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
-      role: "presentation",
-      children: [
-        /* @__PURE__ */ e(n, { "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: i, onClick: a }) => /* @__PURE__ */ e(
-    r,
-    {
-      className: "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",
-      variant: "text",
-      asChild: !0,
+      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", v),
       role: "presentation",
-      children: /* @__PURE__ */ e(r, { onClick: () => a(o.row.original), children: i })
-    },
-    i
-  )) }) })
-] }) : null;
+      children: [/* @__PURE__ */ a(B, {
+        "aria-hidden": "true",
+        className: r("w-7 h-7", f)
+      }), /* @__PURE__ */ a("span", {
+        className: "sr-only",
+        children: "Show Actions"
+      })]
+    }), /* @__PURE__ */ a("div", {
+      className: r("absolute", "right-0", "w-53.75", "z-10", u ? "bottom-full" : "top-full", u ? "pb-1" : "pt-1", "invisible", "opacity-0", "transition-[opacity,visibility]", "duration-150", "delay-150", "group-hover:visible", "group-hover:opacity-100", "group-hover:delay-0", "group-hover:duration-75", b),
+      children: /* @__PURE__ */ a("div", {
+        className: r("bg-white", "py-2", "rounded-lg", "shadow-lg", "border", "border-zinc-100", "dark:bg-metal-800", "dark:border-metal-700", w),
+        children: o.map(({ id: n, label: t, className: p, component: i = g, componentProps: l, onClick: e }, s) => /* @__PURE__ */ a(i, {
+          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", p),
+          variant: "link",
+          role: "presentation",
+          onClick: () => e(x.row.original),
+          ...l,
+          children: t
+        }, n ?? (typeof t == "string" ? t : `action-${s}`)))
+      })
+    })]
+  }) : null;
+};
 export {
-  u as Actions
+  G as Actions
 };