@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.41

package/dist/components/Divider/Divider.variants.js

@@ -1,5 +1,5 @@
 import { c as a } from "../../index-D29mdTf5.js";
-const i = a(["h-[1px]", "bg-zinc-200", "w-full"], {
+const i = a(["h-px", "bg-zinc-200", "w-full"], {
   variants: {
     variant: {
       default: ""

package/dist/components/Dropdown/Dropdown.js

@@ -1,42 +1,48 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { DropdownProvider as c } from "./contexts/dropdown.provider.js";
-import { Wrapper as x } from "./components/Wrapper.js";
-const N = n(
+import { jsx as s, jsxs as w } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { cn as o } from "../../utils/index.js";
+import { DropdownProvider as v } from "./contexts/dropdown.provider.js";
+import { Wrapper as N } from "./components/Wrapper.js";
+const W = h(
   ({
-    onChange: r,
-    onBlur: l,
-    value: a,
-    error: s,
-    helperText: e,
-    name: o,
-    highlightSearch: i,
-    ...d
-  }, m) => /* @__PURE__ */ t(
-    c,
+    error: t,
+    errorClassName: i,
+    helperText: r,
+    helperTextClassName: m,
+    highlightSearch: a,
+    mainWrapperClassName: p,
+    name: l,
+    value: d,
+    options: n,
+    onChange: c,
+    onBlur: e,
+    ...f
+  }, x) => /* @__PURE__ */ s(
+    v,
     {
-      highlightSearch: i,
-      name: o,
-      value: a,
-      onBlur: l,
-      onChange: r,
-      children: /* @__PURE__ */ p("div", { className: "relative w-full", children: [
-        /* @__PURE__ */ t(
-          x,
+      highlightSearch: a,
+      name: l,
+      value: d,
+      options: n,
+      onBlur: e,
+      onChange: c,
+      children: /* @__PURE__ */ w("div", { className: o("relative w-full", p), children: [
+        /* @__PURE__ */ s(
+          N,
           {
-            name: o,
-            error: s,
-            ref: m,
-            onBlur: l,
-            ...d
+            error: t,
+            name: l,
+            ref: x,
+            onBlur: e,
+            ...f
           }
         ),
-        s ? /* @__PURE__ */ t("span", { className: "text-xs text-red-700", children: s }) : null,
-        !s && e ? /* @__PURE__ */ t("span", { className: "text-xs text-slate-600", children: e }) : null
+        t ? /* @__PURE__ */ s("span", { className: o("text-xs text-red-700", i), children: t }) : null,
+        !t && r ? /* @__PURE__ */ s("span", { className: o("text-xs text-slate-600", m), children: r }) : null
       ] })
     }
   )
 );
 export {
-  N as Dropdown
+  W as Dropdown
 };

package/dist/components/Dropdown/Dropdown.variants.js

@@ -35,10 +35,15 @@ const a = e(
           "kubefirst:text-red-600"
         ],
         false: ""
+      },
+      disabled: {
+        true: ["cursor-default", "bg-gray-100", "dark:bg-slate-700/80"],
+        false: []
       }
     },
     defaultVariants: {
-      hasError: !1
+      hasError: !1,
+      disabled: !1
     }
   }
 ), t = e([
@@ -54,16 +59,16 @@ const a = e(
   "placeholder:select-none",
   "dark:placeholder:text-slate-400",
   "dark:text-slate-50"
-]), n = e([
+]), d = e([
   "mb-1",
   "cursor-pointer",
   "text-sm",
-  "leading-[20px]",
+  "leading-5",
   "tracking-[0.1px]",
   "dark:text-slate-50"
 ]);
 export {
   a as dropdownVariants,
   t as inputVariants,
-  n as labelVariants
+  d as labelVariants
 };

package/dist/components/Dropdown/components/List/List.js

@@ -1,76 +1,145 @@
-import { jsx as l, jsxs as x, Fragment as N } from "react/jsx-runtime";
-import { forwardRef as k, useRef as C, useImperativeHandle as y } from "react";
-import { cn as o } from "../../../../utils/index.js";
-import { useNavigationUlList as R } from "../../hooks/useNavigationList.js";
-import { ListItem as a } from "../ListItem/ListItem.js";
-import { listVariants as j } from "./List.variants.js";
-import { S as I } from "../../../../index-DQH6odE9.js";
-import { useDropdownContext as O } from "../../contexts/dropdown.hook.js";
-const z = k(
+import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import { S as Z } from "../../../../index-BtQfgaSF.js";
+import { d as B } from "../../../../debounce-BFejQm9P.js";
+import { forwardRef as G, useRef as C, useState as J, useImperativeHandle as K, useMemo as M, useEffect as Q } from "react";
+import { Loading as R } from "../../../Loading/Loading.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useNavigationUlList as W } from "../../hooks/useNavigationList.js";
+import { ListItem as b } from "../ListItem/ListItem.js";
+import { listVariants as X } from "./List.variants.js";
+import { DEFAULT_LIST_SIZE as Y } from "../../constants/pagination.js";
+import { useDropdownContext as $ } from "../../contexts/dropdown.hook.js";
+const fe = G(
   ({
-    additionalOptions: m,
-    className: f,
-    inputRef: p,
-    isLoading: u,
-    itemClassName: s,
-    name: d,
-    options: n,
-    searchable: i = !1,
-    wrapperInputRef: g,
-    wrapperRef: b
-  }, h) => {
-    const t = C(null), { isOpen: v, searchTerm: L } = O();
-    y(h, () => t.current, [t]), R({
-      ulRef: t,
-      wrapperRef: b,
-      wrapperInputRef: g,
-      inputRef: p,
-      searchable: i
+    additionalOptions: F,
+    className: N,
+    inputRef: i,
+    isLoading: E,
+    itemClassName: l,
+    name: I,
+    searchable: y = !1,
+    listItemSecondRowClassName: c,
+    wrapperInputRef: j,
+    isInfiniteScrollEnabled: u,
+    onFetchMoreOptions: f,
+    noOptionsText: L
+  }, O) => {
+    const o = C(null), m = C(null), [p, w] = J(!1), {
+      isOpen: P,
+      searchTerm: g,
+      canFilter: S,
+      canContinueFetching: n,
+      page: d,
+      options: x,
+      isTyping: k,
+      setOptions: T,
+      setPage: D,
+      setCanContinueFetching: U
+    } = $();
+    K(O, () => o.current, [o]);
+    const h = y && S ? x.filter((e) => {
+      const t = g.toLowerCase();
+      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(t);
+    }) : x;
+    W({
+      ulRef: o,
+      wrapperInputRef: j,
+      searchable: y,
+      filteredOptions: h
     });
-    const c = i ? n.filter((e) => {
-      const r = L.toLowerCase();
-      return (typeof e.label == "string" ? e.label.toLowerCase() : "").includes(r);
-    }) : n, w = c.length === 0;
-    return /* @__PURE__ */ l(
+    const _ = h.filter(
+      (e, t, s) => t === s.findIndex((v) => v.value === e.value)
+    ), q = h.length === 0, z = M(
+      () => B(async (e) => {
+        const [t] = e;
+        if (t.isIntersecting && !p && f && n)
+          try {
+            w(!0);
+            const s = d + 1, { data: v, hasMore: A } = await f({
+              page: s,
+              pageSize: Y,
+              termOfSearch: g
+            });
+            D(s), U(A), T((H) => [...H, ...v]);
+          } catch {
+            console.error("Error fetching more options");
+          } finally {
+            w(!1);
+          }
+      }, 100),
+      [p, f, g, d]
+    );
+    return Q(() => {
+      if (u && n && m.current && !k) {
+        const e = new IntersectionObserver(z, {
+          threshold: 0.1
+        });
+        return e.observe(m.current), () => e.disconnect();
+      }
+    }, [
+      u,
+      n,
+      p,
+      k,
+      d
+    ]), /* @__PURE__ */ V(
       "ul",
       {
-        ref: t,
-        title: d,
+        ref: o,
+        title: I,
         role: "listbox",
-        className: o(j({ className: f })),
-        "data-state": v ? "open" : "closed",
-        children: u ? /* @__PURE__ */ l(
-          a,
-          {
-            className: o("select-none", s),
-            isClickable: !1,
-            value: "Loading...",
-            label: "Loading..."
-          }
-        ) : w ? /* @__PURE__ */ l(
-          a,
-          {
-            className: o("select-none", s),
-            isClickable: !1,
-            value: "No options",
-            label: "No options"
-          }
-        ) : /* @__PURE__ */ x(N, { children: [
-          c.map((e) => /* @__PURE__ */ l(
-            a,
+        className: a(X({ className: N })),
+        "data-state": P ? "open" : "closed",
+        children: [
+          E ? /* @__PURE__ */ r(
+            b,
+            {
+              className: a("select-none", l),
+              isClickable: !1,
+              inputRef: i,
+              value: "Loading...",
+              label: "Loading...",
+              listItemSecondRowClassName: c
+            }
+          ) : q ? /* @__PURE__ */ r(
+            b,
             {
-              className: o("select-none", s),
+              isEmpty: !0,
+              className: a("select-none", l),
+              isClickable: !1,
+              inputRef: i,
+              value: L ?? "",
+              label: L ?? "No options",
+              listItemSecondRowClassName: c
+            }
+          ) : _.map((e) => /* @__PURE__ */ r(
+            b,
+            {
+              className: a("select-none", l),
               isClickable: !0,
+              inputRef: i,
+              listItemSecondRowClassName: c,
               ...e
             },
             e.value
           )),
-          m?.map((e, r) => /* @__PURE__ */ l("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ l(I, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, r))
-        ] })
+          u && n && /* @__PURE__ */ r(
+            "li",
+            {
+              ref: m,
+              role: "option",
+              "data-action": "true",
+              className: "flex items-center justify-center py-3",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ r(R, { className: "w-4 h-4 text-aurora-500 select-none" })
+            }
+          ),
+          F?.map((e, t) => /* @__PURE__ */ r("li", { role: "option", "data-action": "true", children: /* @__PURE__ */ r(Z, { className: "flex p-2 w-full h-full gap-1 items-center text-sm [&>svg]:w-3.5 [&>svg]:h-3.5 [&>svg]:shrink-0 cursor-pointer select-none hover:bg-gray-50 hover:dark:bg-slate-700 focus:outline-0", children: e }) }, t))
+        ]
       }
     );
   }
 );
 export {
-  z as List
+  fe as List
 };

package/dist/components/Dropdown/components/ListItem/ListItem.js

@@ -1,66 +1,117 @@
-import { jsx as o, jsxs as x } from "react/jsx-runtime";
-import { useRef as u, useCallback as l } from "react";
-import { Typography as b } from "../../../Typography/Typography.js";
-import { cn as w } from "../../../../utils/index.js";
-import { listItemVariants as y } from "./ListItem.variants.js";
-import { useDropdownContext as k } from "../../contexts/dropdown.hook.js";
-const D = ({
-  isClickable: f,
-  className: p,
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import { useRef as I, useCallback as u } from "react";
+import { cn as l } from "../../../../utils/index.js";
+import { Typography as y } from "../../../Typography/Typography.js";
+import { listItemVariants as L } from "./ListItem.variants.js";
+import { useDropdownContext as V } from "../../contexts/dropdown.hook.js";
+function j(c, n) {
+  const i = n.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = new RegExp(`(${i})`, "gi");
+  return c.split(o).map((a, t) => a.toLowerCase() === n.toLowerCase() ? /* @__PURE__ */ s(
+    "mark",
+    {
+      className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
+      children: a
+    },
+    t
+  ) : /* @__PURE__ */ s("span", { children: a }, t));
+}
+const K = ({
+  isEmpty: c,
+  isClickable: n,
+  className: i,
+  inputRef: o,
+  listItemSecondRowClassName: a,
   ...t
 }) => {
-  const { searchTerm: r, highlightSearchEnabled: i, setValue: c, toggleOpen: m } = k(), d = u(null), a = l(
+  const { searchTerm: m, highlightSearchEnabled: h, setValue: p, toggleOpen: x } = V(), b = I(null), f = u(
     (e) => {
-      c(e.value), m(!1);
+      p(e.value, o), x(!1);
     },
-    [c, m]
-  ), h = l(
-    (e, s) => {
-      e.key === "Enter" && (e.stopPropagation(), a(s));
+    [p, x]
+  ), w = u(
+    (e, r) => {
+      e.key === "Enter" && (e.stopPropagation(), f(r));
     },
-    [a]
-  ), g = l(
-    (e) => {
+    [f]
+  ), N = u(
+    ({ label: e, rightComponent: r, subLabel: g, rightComponentClassName: C }) => {
+      if (c)
+        return /* @__PURE__ */ s(
+          y,
+          {
+            variant: "body2",
+            className: "text-zinc-800 dark:text-slate-50 italic",
+            children: e
+          }
+        );
       if (typeof e != "string")
         return e;
-      const s = i && r.length > 0 ? e.split(new RegExp(`(${r})`, "gi")).map((n) => n.toLowerCase() === r.toLowerCase() ? /* @__PURE__ */ o(
-        "mark",
-        {
-          className: "bg-transparent font-semibold text-slate-800 dark:text-slate-50",
-          children: n
-        },
-        n
-      ) : n) : [e];
-      return /* @__PURE__ */ o(
-        b,
+      const k = h && m.length > 0 ? j(e, m) : [e];
+      return /* @__PURE__ */ d(
+        y,
         {
           variant: "body2",
-          className: "text-zinc-700 dark:text-slate-50",
-          children: s
+          className: "text-zinc-700 dark:text-slate-50 font-medium",
+          children: [
+            r ? /* @__PURE__ */ d(
+              "span",
+              {
+                className: l("flex gap-2 items-center", C),
+                children: [
+                  k,
+                  " ",
+                  r
+                ]
+              }
+            ) : k,
+            g ? /* @__PURE__ */ s(
+              "span",
+              {
+                className: l(
+                  "block font-normal text-sm text-slate-800 dark:text-slate-50",
+                  a
+                ),
+                children: g
+              }
+            ) : null
+          ]
         }
       );
     },
-    [i, r]
+    [h, m]
   );
-  return /* @__PURE__ */ x(
+  return /* @__PURE__ */ d(
     "li",
     {
-      ref: d,
+      ref: b,
       role: "option",
       "data-action": "false",
-      className: w(y({ className: p })),
+      className: l(L({ className: i })),
       tabIndex: 0,
       onClick: (e) => {
-        f && (a(t), e.stopPropagation());
+        n && (f(t), e.stopPropagation());
       },
-      onKeyDown: (e) => h(e, t),
+      onKeyDown: (e) => w(e, t),
       children: [
-        t.leftIcon ? /* @__PURE__ */ o("span", { className: "w-4 h-4 flex justify-center items-center", children: t.leftIcon }) : null,
-        g(t.label)
+        t.leftIcon ? /* @__PURE__ */ s(
+          "span",
+          {
+            className: l(
+              "w-4 h-4 flex justify-center",
+              {
+                "items-center": !t.subLabel,
+                "items-baseline -translate-y-2": !!t.subLabel
+              },
+              t.leftIconClassName
+            ),
+            children: t.leftIcon
+          }
+        ) : null,
+        N(t)
       ]
     }
   );
 };
 export {
-  D as ListItem
+  K as ListItem
 };