@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.js

@@ -1,51 +1,31 @@
+import { t as a } from "../../../../utils-DHuiYnx1.js";
 import { jsx as d } from "react/jsx-runtime";
-import { cn as o } from "../../../../utils/index.js";
-const n = ({
-  children: a,
-  classNameExpandedCell: b,
-  classNameExpandedContent: t,
-  classNameExpandedRow: l,
-  colSpan: m,
-  id: i,
-  isExpanded: r,
-  isLastRow: e
-}) => /* @__PURE__ */ d(
-  "tr",
-  {
-    className: o("h-0 leading-0", l),
-    "data-expanded-row-id": i,
-    children: /* @__PURE__ */ d(
-      "td",
-      {
-        colSpan: m,
-        className: o(
-          "p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700",
-          { "rounded-b-lg": e },
-          {
-            "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
-            "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
-            "border-y-0": !r && !e,
-            "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
-          }
-        ),
-        children: /* @__PURE__ */ d(
-          "div",
-          {
-            className: o(
-              "grid transition-[grid-template-rows] duration-300 ease-in-out",
-              {
-                "grid-rows-[1fr]": r,
-                "grid-rows-[0fr]": !r
-              },
-              t
-            ),
-            children: /* @__PURE__ */ d("div", { className: "overflow-hidden", children: /* @__PURE__ */ d("div", { className: o("px-4 py-3", b), children: a }) })
-          }
-        )
-      }
-    )
-  }
-);
+var n = ({ children: o, classNameExpandedCell: b, classNameExpandedContent: t, classNameExpandedRow: l, colSpan: m, id: i, isExpanded: r, isLastRow: e }) => /* @__PURE__ */ d("tr", {
+  className: a("h-0 leading-0", l),
+  "data-expanded-row-id": i,
+  children: /* @__PURE__ */ d("td", {
+    colSpan: m,
+    className: a("p-0 bg-white dark:bg-metal-900 dark:border-x dark:border-metal-700", { "rounded-b-lg": e }, {
+      "border-t border-b border-gray-200 dark:border-t-metal-700": r && e,
+      "border-t border-b border-gray-200 dark:border-t-metal-700 dark:border-b-0": r && !e,
+      "border-y-0": !r && !e,
+      "border-t-0 border-b border-b-gray-200 dark:border-b-metal-700": !r && e
+    }),
+    children: /* @__PURE__ */ d("div", {
+      className: a("grid transition-[grid-template-rows] duration-300 ease-in-out", {
+        "grid-rows-[1fr]": r,
+        "grid-rows-[0fr]": !r
+      }, t),
+      children: /* @__PURE__ */ d("div", {
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ d("div", {
+          className: a("px-4 py-3", b),
+          children: o
+        })
+      })
+    })
+  })
+});
 export {
   n as ExpandableRow
 };

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

@@ -1,179 +1,114 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { d as G } from "../../../../debounce-DJveWHr_.js";
-import { useRef as H, useMemo as p, useCallback as w } from "react";
-import { Button as J } from "../../../Button/Button.js";
+import { o as G } from "../../../../chunk-D1xtDmiO.js";
+import { t as H } from "../../../../Input-GBMxM3Z7.js";
+import { t as J } from "../../../../utils-DHuiYnx1.js";
+import { Button as K } from "../../../Button/Button.js";
 import { Filter as r } from "../../../Filter/Filter.js";
-import { Input as K } from "../../../Input/Input.js";
-import { cn as L } from "../../../../utils/index.js";
+import { t as L } from "../../../../debounce-CzFlgg9h.js";
 import { useTableContext as Q } from "../../contexts/table.hook.js";
-const te = ({
-  actions: u,
-  filters: d,
-  multiSelectFilter: i,
-  placeholder: T,
-  showFilterInput: v = !0,
-  showResetButton: x = !0,
-  resetButtonClassName: M,
-  closeOnApply: j = !0
-}) => {
-  const l = H(null), {
-    termOfSearch: h,
-    multiselectSelected: y,
-    dateFilters: F,
-    dateRangeFilters: b,
-    timeFilters: D,
-    onChangeTermOfSearch: c,
-    onSelectMultiselect: R,
-    onSelectDateFilter: O,
-    onSelectDateRangeFilter: A,
-    onSelectTimeFilter: B
-  } = Q(), k = p(() => {
+import { useCallback as v, useMemo as m, useRef as U } from "react";
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+var V = /* @__PURE__ */ G(L(), 1), re = ({ actions: u, filters: d, multiSelectFilter: i, placeholder: w, showFilterInput: T = !0, showResetButton: x = !0, resetButtonClassName: M, closeOnApply: j = !0 }) => {
+  const l = U(null), { termOfSearch: h, multiselectSelected: y, dateFilters: F, dateRangeFilters: b, timeFilters: S, onChangeTermOfSearch: c, onSelectMultiselect: D, onSelectDateFilter: O, onSelectDateRangeFilter: A, onSelectTimeFilter: B } = Q(), k = m(() => {
     const e = d ?? i?.map((o) => ({
       ...o,
       type: "badgeMultiSelect"
     })) ?? [], t = u ?? [];
     return [...e, ...t];
-  }, [d, i, u]), S = w(
-    (e, t) => R(
-      e,
-      t.map((o) => o.id)
-    ),
-    [R]
-  ), P = w(() => {
+  }, [
+    d,
+    i,
+    u
+  ]), R = v((e, t) => D(e, t.map((o) => o.id)), [D]), P = v(() => {
     c(""), l.current && (l.current.value = "");
-  }, [c]), I = p(
-    () => G((e) => {
-      c(e.target.value);
-    }, 500),
-    [c]
-  ), N = p(
-    () => !!h || Object.values(y ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(b ?? {}).some(Boolean) || Object.values(D ?? {}).some(Boolean),
-    [
-      h,
-      y,
-      F,
-      b,
-      D
-    ]
-  ), g = (e) => {
+  }, [c]), _ = m(() => (0, V.default)((e) => {
+    c(e.target.value);
+  }, 500), [c]), I = m(() => !!h || Object.values(y ?? {}).flat().length > 0 || Object.values(F ?? {}).some(Boolean) || Object.values(b ?? {}).some(Boolean) || Object.values(S ?? {}).some(Boolean), [
+    h,
+    y,
+    F,
+    b,
+    S
+  ]), N = (e) => {
     if (e.type === "action") {
-      const {
-        label: a,
-        appearance: _ = "compact",
-        variant: $ = "secondary",
-        leftIcon: q,
-        rightIcon: z,
-        type: U,
-        ...E
-      } = e;
-      return /* @__PURE__ */ m(
-        J,
-        {
-          appearance: _,
-          variant: $,
-          ...E,
-          children: [
-            q,
-            a,
-            z
-          ]
-        },
-        a
-      );
+      const { label: a, appearance: g = "compact", variant: q = "secondary", leftIcon: E, rightIcon: $, type: W, ...z } = e;
+      return /* @__PURE__ */ p(K, {
+        appearance: g,
+        variant: q,
+        ...z,
+        children: [
+          E,
+          a,
+          $
+        ]
+      }, a);
     }
-    const { key: t, label: o, position: s = "right" } = e;
-    return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
-      r.TextMultiSelect,
-      {
-        label: o,
-        position: s,
-        options: e.options,
-        onApply: (a) => {
-          S(t, a);
-        }
-      },
-      t
-    ) : e.type === "date" ? /* @__PURE__ */ n(
-      r.DateFilterDropdown,
-      {
-        label: o,
-        position: s,
-        countryCode: e.countryCode,
-        onApply: (a) => {
-          O(t, a);
-        }
-      },
-      t
-    ) : e.type === "dateRange" ? /* @__PURE__ */ n(
-      r.DateRangeFilterDropdown,
-      {
-        label: o,
-        position: s,
-        showTime: e.showTime,
-        timeFormat: e.timeFormat,
-        showPresets: e.showPresets,
-        defaultRange: e.defaultRange,
-        minDate: e.minDate,
-        maxDate: e.maxDate,
-        countryCode: e.countryCode,
-        onApply: (a) => {
-          A(t, a);
-        },
-        onRangeChange: e.onRangeChange
-      },
-      t
-    ) : e.type === "time" ? /* @__PURE__ */ n(
-      r.TimeFilterDropdown,
-      {
-        label: o,
-        position: s,
-        format: e.format,
-        presets: e.presets,
-        showTimePicker: e.showTimePicker,
-        onApply: (a) => {
-          B(t, a);
-        }
-      },
-      t
-    ) : /* @__PURE__ */ n(
-      r.BadgeMultiSelect,
-      {
-        label: o,
-        position: s,
-        options: e.options,
-        onApply: (a) => {
-          S(t, a);
-        }
+    const { key: t, label: o, position: n = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ s(r.TextMultiSelect, {
+      label: o,
+      position: n,
+      options: e.options,
+      onApply: (a) => {
+        R(t, a);
+      }
+    }, t) : e.type === "date" ? /* @__PURE__ */ s(r.DateFilterDropdown, {
+      label: o,
+      position: n,
+      countryCode: e.countryCode,
+      onApply: (a) => {
+        O(t, a);
+      }
+    }, t) : e.type === "dateRange" ? /* @__PURE__ */ s(r.DateRangeFilterDropdown, {
+      label: o,
+      position: n,
+      showTime: e.showTime,
+      timeFormat: e.timeFormat,
+      showPresets: e.showPresets,
+      defaultRange: e.defaultRange,
+      minDate: e.minDate,
+      maxDate: e.maxDate,
+      countryCode: e.countryCode,
+      onApply: (a) => {
+        A(t, a);
       },
-      t
-    );
-  };
-  return /* @__PURE__ */ m("div", { className: "w-full flex items-center justify-end pb-6", children: [
-    v && /* @__PURE__ */ n(
-      K,
-      {
-        ref: l,
-        placeholder: T,
-        isSearch: !0,
-        autoComplete: "false",
-        className: "w-72",
-        inputMode: "search",
-        onChange: I
+      onRangeChange: e.onRangeChange
+    }, t) : e.type === "time" ? /* @__PURE__ */ s(r.TimeFilterDropdown, {
+      label: o,
+      position: n,
+      format: e.format,
+      presets: e.presets,
+      showTimePicker: e.showTimePicker,
+      onApply: (a) => {
+        B(t, a);
       }
-    ),
-    /* @__PURE__ */ m(r, { closeOnApply: j, children: [
-      k.map(g),
-      x && /* @__PURE__ */ n(
-        r.ResetButton,
-        {
-          className: L("select-none", M),
-          disabled: !N,
-          onClick: P
-        }
-      )
-    ] })
-  ] });
+    }, t) : /* @__PURE__ */ s(r.BadgeMultiSelect, {
+      label: o,
+      position: n,
+      options: e.options,
+      onApply: (a) => {
+        R(t, a);
+      }
+    }, t);
+  };
+  return /* @__PURE__ */ p("div", {
+    className: "w-full flex items-center justify-end pb-6",
+    children: [T && /* @__PURE__ */ s(H, {
+      ref: l,
+      placeholder: w,
+      isSearch: !0,
+      autoComplete: "false",
+      className: "w-72",
+      inputMode: "search",
+      onChange: _
+    }), /* @__PURE__ */ p(r, {
+      closeOnApply: j,
+      children: [k.map(N), x && /* @__PURE__ */ s(r.ResetButton, {
+        className: J("select-none", M),
+        disabled: !I,
+        onClick: P
+      })]
+    })]
+  });
 };
 export {
-  te as Filter
+  re as Filter
 };

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

@@ -1,59 +1,44 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { useRef as u, useCallback as l } from "react";
-import { Input as c } from "../../../Input/Input.js";
-import { Typography as f } from "../../../Typography/Typography.js";
-import { Button as g } from "../../../Button/Button.js";
-import { useTableContext as x } from "../../contexts/table.hook.js";
-const y = () => {
-  const o = u(null), { totalPages: t, handlePage: r } = x(), m = l(
-    (a) => {
-      a.preventDefault();
-      const s = new FormData(a.currentTarget), n = Number(s.get("jump-to")), i = (n < t ? n : t) || 1;
-      r(i - 1), o.current?.reset();
-    },
-    [r, t]
-  );
-  return /* @__PURE__ */ p(
-    "form",
-    {
-      "aria-label": "footer-pagination",
-      ref: o,
-      onSubmit: m,
-      className: "flex items-center gap-2",
-      noValidate: !0,
-      children: [
-        /* @__PURE__ */ e(
-          f,
-          {
-            component: "span",
-            className: "text-sm min-w-fit tracking-normal",
-            children: "Jump to"
-          }
-        ),
-        /* @__PURE__ */ e(
-          c,
-          {
-            type: "number",
-            className: "w-18 text-sm no-spinner",
-            name: "jump-to",
-            min: 1,
-            max: t,
-            required: !0,
-            autoComplete: "off"
-          }
-        ),
-        /* @__PURE__ */ e(
-          g,
-          {
-            variant: "link",
-            type: "submit",
-            className: "text-xs p-2 cursor-pointer",
-            children: "Go"
-          }
-        )
-      ]
-    }
-  );
+import { t as i } from "../../../../Input-GBMxM3Z7.js";
+import { Button as p } from "../../../Button/Button.js";
+import { Typography as u } from "../../../Typography/Typography.js";
+import { useTableContext as l } from "../../contexts/table.hook.js";
+import { useCallback as c, useRef as f } from "react";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+var y = () => {
+  const r = f(null), { totalPages: t, handlePage: o } = l(), n = c((a) => {
+    a.preventDefault();
+    const s = new FormData(a.currentTarget), m = Number(s.get("jump-to"));
+    o(((m < t ? m : t) || 1) - 1), r.current?.reset();
+  }, [o, t]);
+  return /* @__PURE__ */ x("form", {
+    "aria-label": "footer-pagination",
+    ref: r,
+    onSubmit: n,
+    className: "flex items-center gap-2",
+    noValidate: !0,
+    children: [
+      /* @__PURE__ */ e(u, {
+        component: "span",
+        className: "text-sm min-w-fit tracking-normal",
+        children: "Jump to"
+      }),
+      /* @__PURE__ */ e(i, {
+        type: "number",
+        className: "w-18 text-sm no-spinner",
+        name: "jump-to",
+        min: 1,
+        max: t,
+        required: !0,
+        autoComplete: "off"
+      }),
+      /* @__PURE__ */ e(p, {
+        variant: "link",
+        type: "submit",
+        className: "text-xs p-2 cursor-pointer",
+        children: "Go"
+      })
+    ]
+  });
 };
 export {
   y as FormPaginate

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

@@ -1,101 +1,39 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { f as b } from "../../../../index-CSWGJT-v.js";
-import { useCallback as l } from "react";
-import { cn as a } from "../../../../utils/index.js";
-import g from "../../assets/chevron-up.js";
-import u from "../../assets/chevron-down.js";
-import { useTableContext as k } from "../../contexts/table.hook.js";
-const y = ({
-  className: n,
-  classNameArrows: i,
-  classNameActiveArrows: s
-}) => {
-  const { table: c, onSorting: o } = k(), m = l(
-    (t) => o([{ id: t.id, desc: !1 }]),
-    [o]
-  ), p = l(
-    (t) => o([{ id: t.id, desc: !0 }]),
-    [o]
-  );
-  return /* @__PURE__ */ r(
-    "thead",
-    {
-      className: a(
-        "font-semibold",
-        "uppercase",
-        "text-slate-500",
-        "text-xs",
-        "not-italic",
-        "bg-slate-100",
-        "overflow-hidden",
-        "dark:text-slate-300",
-        "dark:bg-metal-800",
-        n
-      ),
-      children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ r("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ r(
-        "th",
-        {
-          scope: "col",
-          className: a(
-            "px-4",
-            "py-3",
-            "text-left",
-            "text-xs",
-            "first:rounded-tl-lg",
-            "last:rounded-tr-lg",
-            "border-transparent",
-            "dark:border-t",
-            "dark:border-metal-700",
-            "dark:first:border-l",
-            "dark:last:border-r",
-            e.columnDef.meta?.headerClassName
-          ),
-          children: /* @__PURE__ */ d("span", { className: "flex items-center gap-2 w-full", children: [
-            b(e.columnDef.header, h()),
-            e.getCanSort() && /* @__PURE__ */ d(
-              "div",
-              {
-                className: a(
-                  "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  i
-                ),
-                role: "presentation",
-                children: [
-                  /* @__PURE__ */ r(
-                    g,
-                    {
-                      className: a(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc"
-                        },
-                        s
-                      ),
-                      onClick: () => m(e)
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    u,
-                    {
-                      className: a(
-                        "w-2 h-2 cursor-pointer",
-                        {
-                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc"
-                        },
-                        s
-                      ),
-                      onClick: () => p(e)
-                    }
-                  )
-                ]
-              }
-            )
-          ] })
-        },
-        x
-      )) }, t))
-    }
-  );
+import { t as r } from "../../../../utils-DHuiYnx1.js";
+import { n as b } from "../../../../table.provider-4OQNqxH3.js";
+import { useTableContext as g } from "../../contexts/table.hook.js";
+import u from "../../assets/chevron-up.js";
+import k from "../../assets/chevron-down.js";
+import { useCallback as d } from "react";
+import { jsx as a, jsxs as l } from "react/jsx-runtime";
+var y = ({ className: n, classNameArrows: i, classNameActiveArrows: o }) => {
+  const { table: c, onSorting: s } = g(), m = d((t) => s([{
+    id: t.id,
+    desc: !1
+  }]), [s]), p = d((t) => s([{
+    id: t.id,
+    desc: !0
+  }]), [s]);
+  return /* @__PURE__ */ a("thead", {
+    className: r("font-semibold", "uppercase", "text-slate-500", "text-xs", "not-italic", "bg-slate-100", "overflow-hidden", "dark:text-slate-300", "dark:bg-metal-800", n),
+    children: c.getHeaderGroups().map(({ id: t, headers: f }) => /* @__PURE__ */ a("tr", { children: f.map(({ id: x, column: e, getContext: h }) => /* @__PURE__ */ a("th", {
+      scope: "col",
+      className: r("px-4", "py-3", "text-left", "text-xs", "first:rounded-tl-lg", "last:rounded-tr-lg", "border-transparent", "dark:border-t", "dark:border-metal-700", "dark:first:border-l", "dark:last:border-r", e.columnDef.meta?.headerClassName),
+      children: /* @__PURE__ */ l("span", {
+        className: "flex items-center gap-2 w-full",
+        children: [b(e.columnDef.header, h()), e.getCanSort() && /* @__PURE__ */ l("div", {
+          className: r("flex flex-col text-slate-400 justify-center items-center gap-1", i),
+          role: "presentation",
+          children: [/* @__PURE__ */ a(u, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc" }, o),
+            onClick: () => m(e)
+          }), /* @__PURE__ */ a(k, {
+            className: r("w-2 h-2 cursor-pointer", { "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc" }, o),
+            onClick: () => p(e)
+          })]
+        })]
+      })
+    }, x)) }, t))
+  });
 };
 export {
   y as Header