@konstructio/ui 0.1.2-alpha.8 → 0.1.2-alpha.81

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

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

@@ -1,25 +1,54 @@
-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 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__ */ 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 {
-  p as Body
+  U as Body
 };