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

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,46 @@
+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;
+export {
+  u as Actions
+};

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

@@ -0,0 +1,25 @@
+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
+  )) });
+};
+export {
+  p 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-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,
+      {
+        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-[88px] [&>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,73 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { d as M } from "../../../../debounce-BFejQm9P.js";
+import { useRef as j, useCallback as u, useMemo as f } from "react";
+import { Filter as n } from "../../../Filter/Filter.js";
+import { Input as v } from "../../../Input/Input.js";
+import { useTableContext as O } from "../../contexts/table.hook.js";
+const B = ({
+  placeholder: h,
+  multiSelectFilter: d,
+  showFilterInput: p = !0
+}) => {
+  const r = j(null), {
+    termOfSearch: o,
+    multiselectSelected: c,
+    onChangeTermOfSearch: t,
+    onSelectMultiselect: i
+  } = O(), g = u(
+    (e, l) => i(
+      e,
+      l.map((s) => s.id)
+    ),
+    [i]
+  ), x = u(() => {
+    t(""), r.current && (r.current.value = "");
+  }, [t]), C = f(
+    () => M((e) => {
+      t(e.target.value);
+    }, 500),
+    [t]
+  ), S = f(
+    () => !!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: [
+    p && /* @__PURE__ */ a(
+      v,
+      {
+        ref: r,
+        placeholder: h,
+        isSearch: !0,
+        autoComplete: "false",
+        className: "w-72",
+        inputMode: "search",
+        onChange: C
+      }
+    ),
+    /* @__PURE__ */ m(n, { children: [
+      d?.map(
+        ({ key: e, label: l, position: s = "right", options: b }) => /* @__PURE__ */ a(
+          n.BadgeMultiSelect,
+          {
+            label: l,
+            position: s,
+            options: b,
+            onApply: (F) => g(e, F)
+          },
+          l
+        )
+      ),
+      /* @__PURE__ */ a(
+        n.ResetButton,
+        {
+          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
+          disabled: !S,
+          onClick: x
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  B as Filter
+};

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.js

@@ -0,0 +1,48 @@
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useRef as l, useCallback as p } from "react";
+import { Input as c } from "../../../Input/Input.js";
+import { useTableContext as f } from "../../contexts/table.hook.js";
+const h = () => {
+  const r = l(null), { totalPages: e, handlePage: o } = f(), m = p(
+    (n) => {
+      n.preventDefault();
+      const s = new FormData(n.currentTarget), a = Number(s.get("jump-to")), u = (a < e ? a : e) || 1;
+      o(u - 1), r.current?.reset();
+    },
+    [o, e]
+  );
+  return /* @__PURE__ */ i(
+    "form",
+    {
+      "aria-label": "footer-pagination",
+      ref: r,
+      onSubmit: m,
+      className: "flex items-center gap-2",
+      children: [
+        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
+        /* @__PURE__ */ t(
+          c,
+          {
+            type: "number",
+            className: "w-[72px] text-xs no-spinner",
+            name: "jump-to",
+            min: 1,
+            max: e,
+            required: !0
+          }
+        ),
+        /* @__PURE__ */ t(
+          "button",
+          {
+            type: "submit",
+            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            children: "Go"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  h as FormPaginate
+};

package/dist/components/VirtualizedTable/components/Header/Header.js

@@ -0,0 +1,82 @@
+import { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { f as u } from "../../../../index-Dx2grAuN.js";
+import { useCallback as i } from "react";
+import { cn as o } from "../../../../utils/index.js";
+import b from "../../assets/chevron-up.js";
+import g from "../../assets/chevron-down.js";
+import { useTableContext as S } from "../../contexts/table.hook.js";
+const y = ({
+  className: p,
+  classNameArrows: n,
+  classNameActiveArrows: l
+}) => {
+  const { table: c, onSorting: r } = S(), d = i(
+    (t) => r([{ id: t.id, desc: !1 }]),
+    [r]
+  ), x = i(
+    (t) => r([{ id: t.id, desc: !0 }]),
+    [r]
+  );
+  return /* @__PURE__ */ s(
+    "thead",
+    {
+      className: o(
+        "font-semibold uppercase text-slate-500 text-xs not-italic bg-slate-100 w-full relative block overflow-hidden [clip-path:inset(-1px_-1px_0px_-1px_round_8px_8px_0px_0px)]",
+        p
+      ),
+      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
+        "th",
+        {
+          scope: "col",
+          className: "px-4 py-3 text-left text-xs",
+          style: { width: e.columnDef.size },
+          children: /* @__PURE__ */ a("span", { className: "flex items-center gap-2 w-full", children: [
+            u(e.columnDef.header, h()),
+            e.getCanSort() && /* @__PURE__ */ a(
+              "div",
+              {
+                className: o(
+                  "flex flex-col text-slate-400 justify-center items-center gap-1",
+                  n
+                ),
+                role: "presentation",
+                children: [
+                  /* @__PURE__ */ s(
+                    b,
+                    {
+                      className: o(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "asc"
+                        },
+                        l
+                      ),
+                      onClick: () => d(e)
+                    }
+                  ),
+                  /* @__PURE__ */ s(
+                    g,
+                    {
+                      className: o(
+                        "w-2 h-2 cursor-pointer",
+                        {
+                          "text-blue-600": e.getIsSorted() === "desc"
+                        },
+                        l
+                      ),
+                      onClick: () => x(e)
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        },
+        m
+      )) }, t))
+    }
+  );
+};
+export {
+  y as Header
+};

package/dist/components/VirtualizedTable/components/Pagination/Pagination.js

@@ -0,0 +1,45 @@
+import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
+import { DotPaginate as d } from "../DotPaginate/DotPaginate.js";
+import { DropdownPaginate as p } from "../DropdownPaginate/DropdownPaginate.js";
+import { FormPaginate as f } from "../FormPaginate/FormPaginate.js";
+import { cn as x } from "../../../../utils/index.js";
+import { useTableContext as u } from "../../contexts/table.hook.js";
+import { DEFAULT_PAGE_SIZE as g } from "../../constants/pagination.js";
+const F = ({
+  showTotalItems: a = !0,
+  showDropdownPagination: i = !0,
+  showDotPagination: n = !0,
+  showFormPagination: s = !0,
+  pageSizes: l,
+  classNamePagination: o
+}) => {
+  const { totalItems: r = -1 / 0, tableFetching: m } = u();
+  return r <= g || m ? null : /* @__PURE__ */ t(c, { children: [
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: x(
+          "bg-slate-50 border border-y-transparent border-x-slate-100 text-slate-500 text-xs not-italic py-2 px-6 rounded-b-lg shadow",
+          o
+        ),
+        children: /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-6", children: [
+            r && a ? /* @__PURE__ */ t("span", { className: "text-slate-800", children: [
+              r,
+              " Results"
+            ] }) : null,
+            i && /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ e(p, { pageSizes: l }) })
+          ] }),
+          /* @__PURE__ */ t("div", { className: "flex items-center gap-8", children: [
+            n && /* @__PURE__ */ e(d, {}),
+            s && /* @__PURE__ */ e(f, {})
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "w-full min-h-[150px]" })
+  ] });
+};
+export {
+  F as Pagination
+};