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

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,30 +1,48 @@
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { DropdownProvider as n } from "./contexts/dropdown.provider.js";
-import { Wrapper as c } from "./components/Wrapper.js";
-const v = p(({ onChange: r, onBlur: l, value: a, error: s, helperText: e, name: o, ...i }, d) => /* @__PURE__ */ t(
-  n,
-  {
-    onChange: r,
-    onBlur: l,
-    value: a,
-    name: o,
-    children: /* @__PURE__ */ m("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ t(
-        c,
-        {
-          name: o,
-          error: s,
-          ref: d,
-          onBlur: l,
-          ...i
-        }
-      ),
-      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
-    ] })
-  }
-));
+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(
+  ({
+    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: 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,
+          {
+            error: t,
+            name: l,
+            ref: x,
+            onBlur: e,
+            ...f
+          }
+        ),
+        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 {
-  v as Dropdown
+  W as Dropdown
 };

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

@@ -1,6 +1,7 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const a = e(
   [
+    "group",
     "border",
     "cursor-pointer",
     "ease-in-out",
@@ -20,7 +21,9 @@ const a = r(
     "aria-expanded:border-aurora-500",
     "aria-expanded:text-aurora-500",
     "kubefirst:aria-expanded:border-kubefirst-primary",
-    "kubefirst:aria-expanded:text-kubefirst-secondary"
+    "kubefirst:aria-expanded:text-kubefirst-secondary",
+    "dark:border-slate-600",
+    "dark:focus-visible:bg-slate-800"
   ],
   {
     variants: {
@@ -32,20 +35,40 @@ const a = r(
           "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 = r([
+), t = e([
+  "flex-1",
+  "bg-transparent",
+  "border-none",
+  "outline-none",
+  "text-zinc-700",
+  "text-sm",
+  "capitalize",
+  "placeholder:text-sm",
+  "placeholder:normal-case",
+  "placeholder:select-none",
+  "dark:placeholder:text-slate-400",
+  "dark:text-slate-50"
+]), d = e([
   "mb-1",
   "cursor-pointer",
-  "text-[14px]",
-  "leading-[20px]",
-  "tracking-[0.1px]"
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
 ]);
 export {
   a as dropdownVariants,
-  t as labelVariants
+  t as inputVariants,
+  d as labelVariants
 };

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

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

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

@@ -1,26 +1,28 @@
 import { c as o } from "../../../../index-D29mdTf5.js";
-const a = o([
+const t = o([
   "absolute",
   "bg-white",
   "border",
-  "duration-100",
-  "ease-in-out",
   "flex-col",
   "mt-1",
   "overflow-hidden",
   "rounded-md",
   "shadow-2xs",
   "top-full",
-  "transition-all",
   "w-full",
   "z-10",
   "max-h-[185px]",
   "overflow-y-auto",
   "border-gray-200",
   "text-zinc-700",
-  "data-[state=open]:block",
-  "data-[state=closed]:hidden"
+  "animate-in",
+  "fade-in-50",
+  "zoom-in-95",
+  "duration-[200ms]",
+  "dark:bg-slate-800",
+  "dark:border-slate-700",
+  "dark:text-slate-50"
 ]);
 export {
-  a as listVariants
+  t as listVariants
 };

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

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

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

@@ -1,5 +1,5 @@
-import { c as o } from "../../../../index-D29mdTf5.js";
-const i = o([
+import { c as r } from "../../../../index-D29mdTf5.js";
+const t = r([
   "cursor-pointer",
   "py-2",
   "px-2",
@@ -10,11 +10,13 @@ const i = o([
   "flex",
   "items-center",
   "gap-3",
-  "hover:bg-slate-50",
-  "focus:bg-slate-50",
-  "civo:focus:bg-civo-primary/5",
-  "civo:hover:bg-civo-primary/5"
+  "transition-bg",
+  "duration-250",
+  "hover:bg-gray-50",
+  "focus:bg-gray-50",
+  "dark:hover:bg-slate-700",
+  "dark:focus:bg-slate-700"
 ]);
 export {
-  i as listItemVariants
+  t as listItemVariants
 };