@konstructio/ui 0.1.2-alpha.7 → 0.1.2-alpha.71

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

@@ -1,73 +1,142 @@
-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
+import { jsxs as D, jsx as n } from "react/jsx-runtime";
+import { d as N } from "../../../../debounce-DJveWHr_.js";
+import { useRef as P, useMemo as m, useCallback as S } from "react";
+import { Button as I } from "../../../Button/Button.js";
+import { Filter as r } from "../../../Filter/Filter.js";
+import { Input as $ } from "../../../Input/Input.js";
+import { cn as q } from "../../../../utils/index.js";
+import { useTableContext as z } from "../../contexts/table.hook.js";
+const U = ({
+  actions: b,
+  filters: u,
+  multiSelectFilter: p,
+  placeholder: x,
+  showFilterInput: w = !0,
+  showResetButton: M = !0,
+  resetButtonClassName: v
 }) => {
-  const r = j(null), {
-    termOfSearch: o,
-    multiselectSelected: c,
-    onChangeTermOfSearch: t,
-    onSelectMultiselect: i
-  } = O(), g = u(
-    (e, l) => i(
+  const c = P(null), {
+    termOfSearch: d,
+    multiselectSelected: i,
+    dateFilters: h,
+    dateRangeFilters: y,
+    onChangeTermOfSearch: s,
+    onSelectMultiselect: F,
+    onSelectDateFilter: j,
+    onSelectDateRangeFilter: O
+  } = z(), T = m(
+    () => u ?? p?.map((e) => ({
+      ...e,
+      type: "badgeMultiSelect"
+    })) ?? [],
+    [u, p]
+  ), R = S(
+    (e, t) => F(
       e,
-      l.map((s) => s.id)
+      t.map((a) => a.id)
     ),
-    [i]
-  ), x = u(() => {
-    t(""), r.current && (r.current.value = "");
-  }, [t]), C = f(
-    () => M((e) => {
-      t(e.target.value);
+    [F]
+  ), g = S(() => {
+    s(""), c.current && (c.current.value = "");
+  }, [s]), B = m(
+    () => N((e) => {
+      s(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,
+    [s]
+  ), A = m(
+    () => !!d || Object.values(i ?? {}).flat().length > 0 || Object.values(h ?? {}).some(Boolean) || Object.values(y ?? {}).some(Boolean),
+    [d, i, h, y]
+  ), k = (e) => {
+    const { key: t, label: a, position: l = "right" } = e;
+    return e.type === "textMultiSelect" ? /* @__PURE__ */ n(
+      r.TextMultiSelect,
       {
-        ref: r,
-        placeholder: h,
+        label: a,
+        position: l,
+        options: e.options,
+        onApply: (o) => {
+          R(t, o);
+        }
+      },
+      t
+    ) : e.type === "date" ? /* @__PURE__ */ n(
+      r.DateFilterDropdown,
+      {
+        label: a,
+        position: l,
+        countryCode: e.countryCode,
+        onApply: (o) => {
+          j(t, o);
+        }
+      },
+      t
+    ) : e.type === "dateRange" ? /* @__PURE__ */ n(
+      r.DateRangeFilterDropdown,
+      {
+        label: a,
+        position: l,
+        showTime: e.showTime,
+        timeFormat: e.timeFormat,
+        showPresets: e.showPresets,
+        defaultRange: e.defaultRange,
+        minDate: e.minDate,
+        maxDate: e.maxDate,
+        countryCode: e.countryCode,
+        onApply: (o) => {
+          O(t, o);
+        },
+        onRangeChange: e.onRangeChange
+      },
+      t
+    ) : /* @__PURE__ */ n(
+      r.BadgeMultiSelect,
+      {
+        label: a,
+        position: l,
+        options: e.options,
+        onApply: (o) => {
+          R(t, o);
+        }
+      },
+      t
+    );
+  };
+  return /* @__PURE__ */ D("div", { className: "w-full flex items-center justify-end pb-6", children: [
+    w && /* @__PURE__ */ n(
+      $,
+      {
+        ref: c,
+        placeholder: x,
         isSearch: !0,
         autoComplete: "false",
         className: "w-72",
         inputMode: "search",
-        onChange: C
+        onChange: B
       }
     ),
-    /* @__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,
+    /* @__PURE__ */ D(r, { children: [
+      T.map(k),
+      b?.map(({ label: e, onClick: t, variant: a = "secondary" }) => /* @__PURE__ */ n(
+        I,
+        {
+          variant: a,
+          appearance: "compact",
+          onClick: t,
+          children: e
+        },
+        e
+      )),
+      M && /* @__PURE__ */ n(
+        r.ResetButton,
         {
-          className: "text-slate-700 hover:text-slate-700 disabled:text-slate-700/45 select-none",
-          disabled: !S,
-          onClick: x
+          className: q("select-none", v),
+          disabled: !A,
+          onClick: g
         }
       )
     ] })
   ] });
 };
 export {
-  B as Filter
+  U as Filter
 };

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

@@ -0,0 +1,18 @@
+import { ButtonProps } from '../../../Button/Button.types';
+import { FilterConfig, MultiSelectFilter } from '../../VirtualizedTable.types';
+export type { Option } from '../../../Filter/Filter.types';
+export type FilterAction = {
+    label: string;
+    onClick: () => void;
+    variant?: ButtonProps['variant'];
+};
+export type Props = {
+    actions?: FilterAction[];
+    filters?: FilterConfig[];
+    /** @deprecated Use `filters` instead */
+    multiSelectFilter?: MultiSelectFilter[];
+    placeholder: string;
+    showFilterInput?: boolean;
+    showResetButton?: boolean;
+    resetButtonClassName?: string;
+};

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

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

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

@@ -1,41 +1,53 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { useRef as l, useCallback as p } from "react";
+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 { 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();
+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();
     },
-    [o, e]
+    [r, t]
   );
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ p(
     "form",
     {
       "aria-label": "footer-pagination",
-      ref: r,
+      ref: o,
       onSubmit: m,
       className: "flex items-center gap-2",
+      noValidate: !0,
       children: [
-        /* @__PURE__ */ t("span", { className: "min-w-fit", children: "Jump to" }),
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
+          f,
+          {
+            component: "span",
+            className: "text-sm min-w-fit tracking-normal",
+            children: "Jump to"
+          }
+        ),
+        /* @__PURE__ */ e(
           c,
           {
             type: "number",
-            className: "w-[72px] text-xs no-spinner",
+            className: "w-18 text-sm no-spinner",
             name: "jump-to",
             min: 1,
-            max: e,
-            required: !0
+            max: t,
+            required: !0,
+            autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ t(
-          "button",
+        /* @__PURE__ */ e(
+          g,
           {
+            variant: "link",
             type: "submit",
-            className: "text-xs text-blue-600 p-2 cursor-pointer",
+            className: "text-xs p-2 cursor-pointer",
             children: "Go"
           }
         )
@@ -44,5 +56,5 @@ const h = () => {
   );
 };
 export {
-  h as FormPaginate
+  y as FormPaginate
 };

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

@@ -0,0 +1,3 @@
+import { RowData } from '../../VirtualizedTable.types';
+import { Props } from './Header.types';
+export declare const Header: <TData extends RowData>({ className, classNameArrows, classNameActiveArrows, }: Props) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,70 +1,90 @@
-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";
+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: p,
-  classNameArrows: n,
-  classNameActiveArrows: l
+  className: n,
+  classNameArrows: i,
+  classNameActiveArrows: s
 }) => {
-  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]
+  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__ */ s(
+  return /* @__PURE__ */ r(
     "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
+      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__ */ s("tr", { className: "table w-full table-fixed", children: f.map(({ id: m, column: e, getContext: h }) => /* @__PURE__ */ s(
+      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: "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(
+          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: o(
+                className: a(
                   "flex flex-col text-slate-400 justify-center items-center gap-1",
-                  n
+                  i
                 ),
                 role: "presentation",
                 children: [
-                  /* @__PURE__ */ s(
-                    b,
+                  /* @__PURE__ */ r(
+                    g,
                     {
-                      className: o(
+                      className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "asc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "asc"
                         },
-                        l
+                        s
                       ),
-                      onClick: () => d(e)
+                      onClick: () => m(e)
                     }
                   ),
-                  /* @__PURE__ */ s(
-                    g,
+                  /* @__PURE__ */ r(
+                    u,
                     {
-                      className: o(
+                      className: a(
                         "w-2 h-2 cursor-pointer",
                         {
-                          "text-blue-600": e.getIsSorted() === "desc"
+                          "text-blue-600 dark:text-aurora-500": e.getIsSorted() === "desc"
                         },
-                        l
+                        s
                       ),
-                      onClick: () => x(e)
+                      onClick: () => p(e)
                     }
                   )
                 ]
@@ -72,7 +92,7 @@ const y = ({
             )
           ] })
         },
-        m
+        x
       )) }, t))
     }
   );

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

@@ -0,0 +1,5 @@
+export type Props = {
+    className?: string;
+    classNameArrows?: string;
+    classNameActiveArrows?: string;
+};

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

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

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

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

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

@@ -0,0 +1,9 @@
+export type Props = {
+    showTotalItems?: boolean;
+    showDropdownPagination?: boolean;
+    showDotPagination?: boolean;
+    showFormPagination?: boolean;
+    pageSizes?: number[] | string[];
+    classNamePagination?: string;
+    isLoading?: boolean;
+};

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

@@ -0,0 +1,2 @@
+import { SkeletonProps } from './Skeleton.types';
+export declare const Skeleton: <T>({ numberOfRows, table }: SkeletonProps<T>) => import("react/jsx-runtime").JSX.Element;