@konstructio/ui 0.1.2-alpha.3 → 0.1.2-alpha.30

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

@@ -1,51 +1,46 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const e = t([], {
+const a = t([], {
   variants: {
     variant: {
-      h1: ["text-[57px]", "leading-[64px]"],
+      h1: ["text-[57px]", "leading-16"],
       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]"
-      ],
+      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-sm", "font-medium", "leading-6", "tracking-[0.15px]"],
       subtitle3: [
         "text-[14px]",
         "font-medium",
-        "leading-[20px]",
+        "leading-5",
         "tracking-[0.1px]"
       ],
-      labelLarge: ["text-[14px]", "leading-[20px]", "tracking-[0.1px]"],
+      labelLarge: ["text-sm", "leading-5", "tracking-[0.1px]"],
       labelMedium: [
         "text-[12px]",
         "font-medium",
-        "leading-[16px]",
+        "leading-4",
         "tracking-[0.5px]",
         "uppercase"
       ],
       labelSmall: [
         "text-[11px]",
         "font-medium",
-        "leading-[16px]",
+        "leading-4",
         "tracking-[0.5px]",
         "uppercase"
       ],
       buttonSmall: [
         "text-[14px]",
         "font-semibold",
-        "leading-[20px]",
+        "leading-5",
         "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]"]
+      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-[22px]"]
     }
   },
   defaultVariants: {
@@ -53,5 +48,5 @@ const e = t([], {
   }
 });
 export {
-  e as typographyVariants
+  a as typographyVariants
 };

package/dist/components/VirtualizedTable/VirtualizedTable.js

@@ -0,0 +1,119 @@
+import { jsx as r, jsxs as s } from "react/jsx-runtime";
+import { useMemo as I } from "react";
+import { cn as c } from "../../utils/index.js";
+import { TableProvider as K } from "./contexts/table.provider.js";
+import { Filter as M } from "./components/Filter/Filter.js";
+import { WrapperBody as W } from "./components/WrapperBody/WrapperBody.js";
+import { Header as k } from "./components/Header/Header.js";
+import { Body as q } from "./components/Body/Body.js";
+import { Pagination as C } from "./components/Pagination/Pagination.js";
+import { TruncateText as F } from "./components/TruncateText/TruncateText.js";
+import { Actions as G } from "./components/Actions/Actions.js";
+const J = ({
+  id: n,
+  ariaLabel: f,
+  columns: p,
+  data: d,
+  totalItems: u = -1 / 0,
+  className: b,
+  classNameHeaderActiveArrows: T,
+  classNameHeaderArrows: x,
+  classNameHeaderTable: N,
+  classNameTable: A,
+  classNameWrapperTable: y,
+  isLoading: o,
+  fetchData: h,
+  queryOptions: z,
+  // Pagination
+  showPagination: B,
+  showTotalItems: t,
+  showDropdownPagination: a,
+  showDotPagination: l,
+  showFormPagination: m,
+  pageSizes: V,
+  // Filter
+  showFilter: j = !1,
+  showFilterInput: v,
+  filterSearchPlaceholder: w = "",
+  multiSelectFilter: P,
+  filterActions: E,
+  showResetButton: H = !0
+}) => {
+  const e = I(
+    () => B || [
+      t,
+      a,
+      l,
+      m
+    ].some(Boolean),
+    []
+  );
+  return /* @__PURE__ */ r(
+    K,
+    {
+      id: n,
+      columns: p,
+      data: d,
+      fetchData: h,
+      totalItems: u,
+      queryOptions: z,
+      isPaginationEnabled: e,
+      children: /* @__PURE__ */ s("section", { className: c("w-full min-w-fit", b), children: [
+        j && /* @__PURE__ */ r(
+          M,
+          {
+            actions: E,
+            multiSelectFilter: P,
+            placeholder: w,
+            showFilterInput: v,
+            showResetButton: H
+          }
+        ),
+        /* @__PURE__ */ r(
+          W,
+          {
+            showPagination: e,
+            classNameWrapperTable: y,
+            isLoading: o,
+            children: /* @__PURE__ */ s(
+              "table",
+              {
+                className: c("w-full border-collapse table-fixed", A),
+                "aria-label": f,
+                children: [
+                  /* @__PURE__ */ r(
+                    k,
+                    {
+                      className: N,
+                      classNameArrows: x,
+                      classNameActiveArrows: T
+                    }
+                  ),
+                  /* @__PURE__ */ r(q, { isLoading: o, showPagination: e })
+                ]
+              }
+            )
+          }
+        ),
+        e && /* @__PURE__ */ r(
+          C,
+          {
+            showTotalItems: t,
+            showDropdownPagination: a,
+            showDotPagination: l,
+            showFormPagination: m,
+            pageSizes: V,
+            isLoading: o
+          }
+        )
+      ] })
+    }
+  );
+}, i = J;
+i.displayName = "KonstructVirtualizedTable";
+i.TruncateText = F;
+i.Actions = G;
+export {
+  F as TruncateText,
+  i 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,72 @@
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Button as t } from "../../../Button/Button.js";
+import { cn as r } from "../../../../utils/index.js";
+import { E as u } from "../../../../ellipsis-vertical-BVPtjl5f.js";
+const w = ({
+  actions: a,
+  wrapperClassName: l,
+  triggerButtonClassName: s,
+  iconTriggerButtonClassName: n,
+  wrapperActionsClassName: c,
+  wrapperContentActionsClassName: d,
+  ...h
+}) => a ? /* @__PURE__ */ i("div", { className: r("relative group", l), children: [
+  /* @__PURE__ */ i(
+    t,
+    {
+      variant: "text",
+      shape: "circle",
+      size: "large",
+      className: r(
+        "text-slate-400 group-hover:text-slate-800 group-hover:bg-aurora-50",
+        s
+      ),
+      role: "presentation",
+      children: [
+        /* @__PURE__ */ e(
+          u,
+          {
+            "aria-hidden": "true",
+            className: r("w-7 h-7", n)
+          }
+        ),
+        /* @__PURE__ */ e("span", { className: "sr-only", children: "Show Actions" })
+      ]
+    }
+  ),
+  /* @__PURE__ */ e(
+    "div",
+    {
+      className: r(
+        "absolute top-full right-0 w-[215px] hidden group-hover:block z-10",
+        c
+      ),
+      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",
+            d
+          ),
+          children: a.map(({ label: o, className: p, onClick: m }) => /* @__PURE__ */ e(
+            t,
+            {
+              className: r(
+                "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",
+                p
+              ),
+              variant: "text",
+              asChild: !0,
+              role: "presentation",
+              children: /* @__PURE__ */ e(t, { onClick: () => m(h.row.original), children: o })
+            },
+            o
+          ))
+        }
+      )
+    }
+  )
+] }) : null;
+export {
+  w as Actions
+};

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

@@ -0,0 +1,51 @@
+import { jsx as e } from "react/jsx-runtime";
+import { f as y } from "../../../../index-CSWGJT-v.js";
+import { Skeleton as x } from "../Skeleton/Skeleton.js";
+import { cn as b } from "../../../../utils/index.js";
+import { useTableContext as D } from "../../contexts/table.hook.js";
+const _ = ({
+  isLoading: d,
+  showPagination: a
+}) => {
+  const { table: s, pageSize: i, tableFetching: p } = D();
+  if (d || p)
+    return /* @__PURE__ */ e(x, { numberOfRows: i, table: s });
+  const r = s.getRowModel().rows ?? [];
+  return /* @__PURE__ */ e("tbody", { className: "text-slate-800 text-sm font-normal relative", children: r.map(({ id: o, original: l, getVisibleCells: u }, m) => {
+    const { meta: n = {} } = l, c = u();
+    return /* @__PURE__ */ e(
+      "tr",
+      {
+        className: b(
+          "border-b border-b-gray-200 last:border-b-transparent bg-transparent",
+          n.className
+        ),
+        "data-row-id": o,
+        ...n.attributes ?? {},
+        children: c.map(({ id: g, column: t, getContext: h }, f) => {
+          const N = typeof t.columnDef.meta?.className == "function" ? t.columnDef.meta?.className(l) : t.columnDef.meta?.className;
+          return /* @__PURE__ */ e(
+            "td",
+            {
+              className: b(
+                "px-4 py-1 text-sm bg-white",
+                N,
+                {
+                  "[tr:last-child_&:first-of-type]:rounded-bl-lg": m === r.length - 1 && f === 0 || !a,
+                  "[tr:last-child_&:last-of-type]:rounded-br-lg": m === r.length - 1 && f === c.length - 1 || !a
+                }
+              ),
+              ...t.columnDef.meta?.attributes ?? {},
+              children: y(t.columnDef.cell, h())
+            },
+            g
+          );
+        })
+      },
+      o
+    );
+  }) });
+};
+export {
+  _ as Body
+};

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

@@ -0,0 +1,165 @@
+import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { memo as u } from "react";
+import { cn as p } from "../../../../utils/index.js";
+import { C as g, a as d } from "../../../../chevron-right-DYvXLeql.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,
+      {
+        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,
+      {
+        direction: "right",
+        onClick: () => l(t + 1),
+        disabled: t >= e - 1
+      }
+    )
+  ] });
+};
+export {
+  k as DotPaginate
+};

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

@@ -0,0 +1,34 @@
+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);
+    },
+    [t, o]
+  );
+  return /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ a("span", { children: "Show" }),
+    /* @__PURE__ */ a(
+      c,
+      {
+        className: "w-22 [&>div>p]:text-xs bg-white",
+        listItemClassName: "[&>p]:text-xs",
+        options: r,
+        value: s.toString(),
+        onChange: ({ target: e }) => m(e.value)
+      }
+    )
+  ] });
+};
+export {
+  b as DropdownPaginate
+};

package/dist/components/VirtualizedTable/components/Filter/Filter.js

@@ -0,0 +1,88 @@
+import { jsxs as m, jsx as l } from "react/jsx-runtime";
+import { d as v } from "../../../../debounce-BFejQm9P.js";
+import { useRef as O, useCallback as u, useMemo as p } from "react";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { Input as R } from "../../../Input/Input.js";
+import { Button as y } from "../../../Button/Button.js";
+import { useTableContext as B } from "../../contexts/table.hook.js";
+const $ = ({
+  actions: d,
+  multiSelectFilter: f,
+  placeholder: h,
+  showFilterInput: g = !0,
+  showResetButton: x = !0
+}) => {
+  const s = O(null), {
+    termOfSearch: o,
+    multiselectSelected: c,
+    onChangeTermOfSearch: a,
+    onSelectMultiselect: i
+  } = B(), C = u(
+    (e, t) => i(
+      e,
+      t.map((r) => r.id)
+    ),
+    [i]
+  ), S = u(() => {
+    a(""), s.current && (s.current.value = "");
+  }, [a]), b = p(
+    () => v((e) => {
+      a(e.target.value);
+    }, 500),
+    [a]
+  ), F = p(
+    () => !!o || Object.entries(c ?? {}).map(([, e]) => e).flat().length > 0,
+    [o, c]
+  );
+  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    g && /* @__PURE__ */ l(
+      R,
+      {
+        ref: s,
+        placeholder: h,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: b
+      }
+    ),
+    /* @__PURE__ */ m(n, { children: [
+      f?.map(
+        ({ key: e, label: t, position: r = "right", options: M }) => /* @__PURE__ */ l(
+          n.BadgeMultiSelect,
+          {
+            label: t,
+            position: r,
+            options: M,
+            onApply: (j) => {
+              C(e, j);
+            }
+          },
+          t
+        )
+      ),
+      d?.map(({ label: e, onClick: t, variant: r = "secondary" }) => /* @__PURE__ */ l(
+        y,
+        {
+          variant: r,
+          appearance: "compact",
+          onClick: t,
+          children: e
+        },
+        e
+      )),
+      x && /* @__PURE__ */ l(
+        n.ResetButton,
+        {
+          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+          disabled: !F,
+          onClick: S
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  $ as Filter
+};