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

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

@@ -1,165 +1,103 @@
-import { jsx as i, jsxs as m } from "react/jsx-runtime";
+import { t as p } from "../../../../utils-DHuiYnx1.js";
+import { t as d } from "../../../../chevron-left-DRJXef9g.js";
+import { t as m } from "../../../../chevron-right-BooB_b7g.js";
+import { useTableContext as h } from "../../contexts/table.hook.js";
 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,
-      {
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+var l = u(({ index: t, currentPage: e, handlePage: s }) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i("button", {
+  type: "button",
+  onClick: () => s(t),
+  className: p("px-2.5 py-1 rounded-lg text-blue-600 cursor-pointer dark:text-aurora-500", { "bg-blue-600 text-white font-semibold dark:bg-aurora-500 dark:text-metal-800": t === e }),
+  children: t + 1
+}) }, t));
+l.displayName = "KonstructPageButton";
+var n = u(({ keyValue: t }) => /* @__PURE__ */ i("li", {
+  className: "px-2",
+  children: /* @__PURE__ */ i("span", {
+    className: "text-blue-600 select-none dark:text-aurora-500",
+    children: "..."
+  })
+}, t));
+n.displayName = "KonstructEllipsis";
+var o = u(({ direction: t, disabled: e, onClick: s }) => /* @__PURE__ */ i("li", {
+  className: "flex items-center justify-center",
+  children: /* @__PURE__ */ i("button", {
+    onClick: s,
+    disabled: e,
+    children: /* @__PURE__ */ i(t === "left" ? d : m, { className: p("h-6 w-6 cursor-pointer", {
+      "text-blue-600 dark:text-aurora-500": !e,
+      "text-slate-400 cursor-not-allowed": e
+    }) })
+  })
+}));
+o.displayName = "KonstructNavigationButton";
+var v = () => {
+  const { totalPages: t, page: e, handlePage: s } = h();
+  return /* @__PURE__ */ f("ul", {
+    className: "flex items-center gap-2",
+    children: [
+      /* @__PURE__ */ i(o, {
         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,
-      {
+        onClick: () => s(e - 1),
+        disabled: e === 0
+      }),
+      (() => {
+        if (t <= 5) return Array.from({ length: t }, (r, c) => /* @__PURE__ */ i(l, {
+          index: c,
+          currentPage: e,
+          handlePage: s
+        }, c));
+        const a = [];
+        if (e < 3) {
+          for (let r = 0; r < 3; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = t - 2; r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+        } else if (e >= t - 5) {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), t > 6 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis" }, "ellipsis"));
+          for (let r = Math.max(1, t - 5); r < t; r++) a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+        } else {
+          a.push(/* @__PURE__ */ i(l, {
+            index: 0,
+            currentPage: e,
+            handlePage: s
+          }, 0)), e > 3 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis1" }, "ellipsis1"));
+          for (let r = e - 1; r <= e + 1; r++) r > 0 && r < t - 1 && a.push(/* @__PURE__ */ i(l, {
+            index: r,
+            currentPage: e,
+            handlePage: s
+          }, r));
+          e < t - 4 && a.push(/* @__PURE__ */ i(n, { keyValue: "ellipsis2" }, "ellipsis2")), a.push(/* @__PURE__ */ i(l, {
+            index: t - 1,
+            currentPage: e,
+            handlePage: s
+          }, t - 1));
+        }
+        return a;
+      })(),
+      /* @__PURE__ */ i(o, {
         direction: "right",
-        onClick: () => l(t + 1),
-        disabled: t >= e - 1
-      }
-    )
-  ] });
+        onClick: () => s(e + 1),
+        disabled: e >= t - 1
+      })
+    ]
+  });
 };
 export {
-  k as DotPaginate
+  v as DotPaginate
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './DropdownPaginate.types';
+export declare const DropdownPaginate: FC<Props>;

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

@@ -1,34 +1,26 @@
-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)
-      }
-    )
-  ] });
+import { Select as i } from "../../../Select/Select.js";
+import { DEFAULT_PAGE_SIZES as l } from "../../constants/pagination.js";
+import { useTableContext as p } from "../../contexts/table.hook.js";
+import { useCallback as g, useMemo as c } from "react";
+import { jsx as o, jsxs as d } from "react/jsx-runtime";
+var u = ({ pageSizes: m = l }) => {
+  const { pageSize: r, onPageSize: t, handlePage: a } = p(), s = c(() => m.map(String).map((e) => ({
+    label: e,
+    value: e
+  })), []), n = g((e) => {
+    t(Number(e)), a(0);
+  }, [a, t]);
+  return /* @__PURE__ */ d("div", {
+    className: "flex items-center gap-2 dark:text-metal-300",
+    children: [/* @__PURE__ */ o("span", { children: "Show" }), /* @__PURE__ */ o(i, {
+      className: "w-22 [&>div>p]:text-sm bg-white",
+      listItemClassName: "[&>p]:text-sm dark:bg-metal-800",
+      options: s,
+      value: r.toString(),
+      onChange: ({ target: e }) => n(e.value)
+    })]
+  });
 };
 export {
-  b as DropdownPaginate
+  u as DropdownPaginate
 };

package/dist/components/VirtualizedTable/components/DropdownPaginate/DropdownPaginate.types.d.ts

@@ -0,0 +1,3 @@
+export type Props = {
+    pageSizes?: number[] | string[];
+};

package/dist/components/VirtualizedTable/components/ExpandableRow/ExpandableRow.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './ExpandableRow.types';
+export declare const ExpandableRow: FC<Props>;

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

@@ -0,0 +1,31 @@
+import { t as a } from "../../../../utils-DHuiYnx1.js";
+import { jsx as d } from "react/jsx-runtime";
+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/ExpandableRow/ExpandableRow.types.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+export type Props = PropsWithChildren<{
+    classNameExpandedCell?: string;
+    classNameExpandedContent?: string;
+    classNameExpandedRow?: string;
+    colSpan: number;
+    id: string;
+    isExpanded: boolean;
+    isLastRow?: boolean;
+}>;

package/dist/components/VirtualizedTable/components/Filter/Filter.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { Props } from './Filter.types';
+export declare const Filter: FC<Props>;

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

@@ -1,73 +1,114 @@
-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
+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 { t as L } from "../../../../debounce-CzFlgg9h.js";
+import { useTableContext as Q } from "../../contexts/table.hook.js";
+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
+  ]), R = v((e, t) => D(e, t.map((o) => o.id)), [D]), P = v(() => {
+    c(""), l.current && (l.current.value = "");
+  }, [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: 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: n = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ s(r.TextMultiSelect, {
+      label: o,
+      position: n,
+      options: e.options,
+      onApply: (a) => {
+        R(t, a);
       }
-    ),
-    /* @__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
-        }
-      )
-    ] })
-  ] });
+    }, 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);
+      },
+      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);
+      }
+    }, 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 {
-  B as Filter
+  re as Filter
 };

package/dist/components/VirtualizedTable/components/Filter/Filter.types.d.ts

@@ -0,0 +1,16 @@
+import { ActionFilterConfig, FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
+export type { Option } from '../../../Filter/Filter.types';
+/** @deprecated Use `ActionFilterConfig` with `type: 'action'` in the `filters` array instead */
+export type FilterAction = ActionFilterConfig;
+export type Props = {
+    filters?: FilterConfig[];
+    /** @deprecated Use `filters` instead */
+    multiSelectFilter?: MultiSelectFilter[];
+    /** @deprecated Use `ActionFilterConfig` items in `filters` instead */
+    actions?: FilterAction[];
+    placeholder: string;
+    showFilterInput?: boolean;
+    showResetButton?: boolean;
+    resetButtonClassName?: string;
+    closeOnApply?: boolean;
+};

package/dist/components/VirtualizedTable/components/FormPaginate/FormPaginate.d.ts

@@ -0,0 +1 @@
+export declare const FormPaginate: () => import("react/jsx-runtime").JSX.Element;