@konstructio/ui 0.1.2-alpha.43 → 0.1.2-alpha.46

package/dist/components/{Dropdown → Select}/components/Wrapper.js

@@ -1,18 +1,18 @@
 import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { forwardRef as Z, useId as ee, useRef as C, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
-import { S as ne } from "../../../loader-juvMSJ9L.js";
-import { Typography as se } from "../../Typography/Typography.js";
-import { cn as s } from "../../../utils/index.js";
-import { labelVariants as oe, inputVariants as le, dropdownVariants as ie } from "../Dropdown.variants.js";
-import { useDropdown as ce } from "../hooks/useDropdown.js";
-import { List as pe } from "./List/List.js";
-import { c as me } from "../../../createLucideIcon-D4r5Phnh.js";
+import { forwardRef as Z, useId as ee, useRef as w, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
+import { S as le } from "../../../loader-juvMSJ9L.js";
+import { Typography as ne } from "../../Typography/Typography.js";
+import { cn as n } from "../../../utils/index.js";
+import { labelVariants as oe, inputVariants as se, selectVariants as ce } from "../Select.variants.js";
+import { useSelect as ie } from "../hooks/useSelect.js";
+import { List as me } from "./List/List.js";
+import { c as pe } from "../../../createLucideIcon-D4r5Phnh.js";
 import { C as ue } from "../../../chevron-up-DrQr2Fwd.js";
-import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
+import { useSelectContext as fe } from "../contexts/select.hook.js";
 const de = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], xe = me("search", de), je = Z(
+], xe = pe("search", de), je = Z(
   ({
     additionalOptions: b,
     className: z,
@@ -20,70 +20,70 @@ const de = [
     disabled: t = !1,
     error: f,
     iconClassName: R,
-    inputClassName: F,
+    inputClassName: S,
+    isInfiniteScrollEnabled: F = !1,
     isLoading: g,
     isRequired: h,
     label: v,
-    labelClassName: S,
-    listClassName: T,
-    listItemClassName: D,
-    listItemSecondRowClassName: E,
+    labelClassName: T,
+    listClassName: E,
+    listItemClassName: M,
+    listItemSecondRowClassName: W,
     name: d,
-    placeholder: w,
+    noOptionsText: _,
+    placeholder: N,
     searchable: k = !1,
-    showSearchIcon: N,
-    theme: M,
-    wrapperClassName: W,
-    isInfiniteScrollEnabled: _ = !1,
-    onFetchMoreOptions: $,
-    onBlur: H,
-    onSearchChange: P,
-    noOptionsText: U,
+    showSearchIcon: C,
+    theme: $,
+    wrapperClassName: H,
+    onFetchMoreOptions: P,
+    onBlur: U,
+    onSearchChange: q,
     ...y
-  }, q) => {
-    const I = ee(), l = C(null), L = C(null), A = C(0), {
-      isOpen: i,
-      searchTerm: B,
+  }, A) => {
+    const I = ee(), s = w(null), L = w(null), B = w(0), {
+      isOpen: c,
+      options: l,
+      searchTerm: D,
       value: o,
-      options: n,
-      setValue: c,
-      setSearchTerm: G,
-      setCanFilter: J,
+      setCanFilter: G,
+      setSearchTerm: J,
+      setValue: i,
       toggleOpen: K
-    } = fe(), e = te(() => n.find(({ value: a }) => a === o), [n, o]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
+    } = fe(), e = te(() => l.find(({ value: a }) => a === o), [l, o]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ie({
       ulRef: L,
-      inputRef: l,
+      inputRef: s,
       disabled: t,
       internalValue: e,
-      onBlur: H
-    }), p = d ? `${I}-${d}` : I;
-    ae(q, () => l.current, [l]), re(() => {
+      onBlur: U
+    }), m = d ? `${I}-${d}` : I;
+    ae(A, () => s.current, [s]), re(() => {
       if (x && !o) {
-        const a = n && n.find((m) => m.value === x);
-        a && c(a.value);
+        const a = l && l.find((p) => p.value === x);
+        a && i(a.value);
       }
-    }, [x, n, c, o]);
+    }, [x, l, i, o]);
     const X = (a) => {
-      const m = a.target.value;
-      J(!0), c(""), G(m ?? ""), P?.(m);
-      const O = n.find(
-        (Y) => Y.value.toLocaleLowerCase() === m.toLocaleLowerCase()
+      const p = a.target.value;
+      G(!0), i(""), J(p ?? ""), q?.(p);
+      const O = l.find(
+        (Y) => Y.value.toLocaleLowerCase() === p.toLocaleLowerCase()
       );
-      c(O ? O.value : e?.value ?? "");
+      i(O ? O.value : e?.value ?? "");
     };
     return /* @__PURE__ */ u(
       "div",
       {
         ref: Q,
-        className: s("flex flex-col w-full relative", W),
-        "data-theme": M,
+        className: n("flex flex-col w-full relative", H),
+        "data-theme": $,
         children: [
           v ? /* @__PURE__ */ u(
             "label",
             {
-              id: p,
-              className: s(oe({ className: S })),
-              htmlFor: p,
+              id: m,
+              className: n(oe({ className: T })),
+              htmlFor: m,
               onClick: () => !t && j(),
               children: [
                 v,
@@ -95,22 +95,22 @@ const de = [
             "div",
             {
               ref: V,
-              id: p,
-              className: s(
-                ie({ className: z, hasError: !!f, disabled: t })
+              id: m,
+              className: n(
+                ce({ className: z, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !t && K(!i),
-              "aria-expanded": i,
-              tabIndex: A.current,
-              "aria-labelledby": p,
+              onClick: () => !t && K(!c),
+              "aria-expanded": c,
+              tabIndex: B.current,
+              "aria-labelledby": m,
               children: [
                 /* @__PURE__ */ u("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  e?.leftIcon && !N && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
-                  N && /* @__PURE__ */ r(
+                  e?.leftIcon && !C && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-metal-50", children: e.leftIcon }),
+                  C && /* @__PURE__ */ r(
                     xe,
                     {
-                      className: s(
+                      className: n(
                         "w-4",
                         "h-4",
                         "text-zinc-500",
@@ -118,7 +118,7 @@ const de = [
                         "transition-colors",
                         "duration-300",
                         "dark:text-metal-300",
-                        "dark:group-focus-within:text-slate-50"
+                        "dark:group-focus-within:text-metal-50"
                       )
                     }
                   ),
@@ -126,17 +126,17 @@ const de = [
                     "input",
                     {
                       type: "text",
-                      value: i ? B : e?.label ?? o ?? "",
+                      value: c ? D : e?.label ?? o ?? "",
                       onChange: X,
-                      placeholder: w,
-                      className: s(le({ className: F }), {
+                      placeholder: N,
+                      className: n(se({ className: S }), {
                         "text-red-700 placeholder:text-red-700": !!f
                       }),
                       onClick: (a) => {
                         a.stopPropagation(), t || j();
                       },
-                      "aria-label": v || w,
-                      "aria-labelledby": p,
+                      "aria-label": v || N,
+                      "aria-labelledby": m,
                       required: h,
                       autoComplete: "off",
                       autoCapitalize: "words",
@@ -145,37 +145,37 @@ const de = [
                       ...y
                     }
                   ) : /* @__PURE__ */ u(
-                    se,
+                    ne,
                     {
                       variant: "body2",
-                      className: s(
-                        "flex-1 text-zinc-400 text-sm dark:text-slate-400 flex gap-2 items-center",
+                      className: n(
+                        "flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center",
                         {
                           "text-red-700": !!f,
                           "select-none": !e,
-                          "text-slate-800 dark:text-slate-50": e,
-                          "text-slate-400/50 dark:text-slate-50/50": t
+                          "text-metal-800 dark:text-metal-50": e,
+                          "text-metal-400/50 dark:text-metal-50/50": t
                         },
                         e?.wrapperClassNameOnSelectedValue
                       ),
                       children: [
-                        e?.label || w,
+                        e?.label || N,
                         " ",
                         e?.showRightComponentOnselectedValue ? e?.rightComponent : null
                       ]
                     }
                   )
                 ] }),
-                g ? /* @__PURE__ */ r(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !N && /* @__PURE__ */ r(
+                g ? /* @__PURE__ */ r(le, { className: "w-4 h-4 text-metal-400 animate-spin select-none" }) : !C && /* @__PURE__ */ r(
                   ue,
                   {
-                    "data-state": i ? "open" : "closed",
-                    className: s(
-                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
+                    "data-state": c ? "open" : "closed",
+                    className: n(
+                      "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50",
                       R,
                       {
                         "text-red-700": !!f,
-                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": t
+                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
                       }
                     )
                   }
@@ -186,7 +186,7 @@ const de = [
           /* @__PURE__ */ r(
             "input",
             {
-              ref: l,
+              ref: s,
               type: "text",
               name: d,
               className: "hidden",
@@ -197,23 +197,23 @@ const de = [
               ...y
             }
           ),
-          i && /* @__PURE__ */ r(
-            pe,
+          c && /* @__PURE__ */ r(
+            me,
             {
               ref: L,
               additionalOptions: b,
-              className: T,
-              itemClassName: D,
+              className: E,
+              itemClassName: M,
               name: d,
               wrapperInputRef: V,
-              inputRef: l,
-              options: n,
+              inputRef: s,
+              options: l,
               isLoading: !!g,
               searchable: k,
-              listItemSecondRowClassName: E,
-              isInfiniteScrollEnabled: _,
-              onFetchMoreOptions: $,
-              noOptionsText: U
+              listItemSecondRowClassName: W,
+              isInfiniteScrollEnabled: F,
+              onFetchMoreOptions: P,
+              noOptionsText: _
             }
           )
         ]

package/dist/components/Select/contexts/index.js

@@ -0,0 +1,6 @@
+import { useSelectContext as r } from "./select.hook.js";
+import { SelectProvider as x } from "./select.provider.js";
+export {
+  x as SelectProvider,
+  r as useSelectContext
+};

package/dist/components/{Dropdown/contexts/dropdown.context.js → Select/contexts/select.context.js}

@@ -1,5 +1,5 @@
 import { createContext as e } from "react";
-const t = e({
+const r = e({
   highlightSearchEnabled: !1,
   isOpen: !1,
   searchTerm: "",
@@ -32,5 +32,5 @@ const t = e({
   }
 });
 export {
-  t as DropdownContext
+  r as SelectContext
 };

package/dist/components/Select/contexts/select.hook.js

@@ -0,0 +1,11 @@
+import { useContext as e } from "react";
+import { SelectContext as o } from "./select.context.js";
+const c = () => {
+  const t = e(o);
+  if (!t)
+    throw new Error("useSelectContext must be used within a SelectProvider");
+  return t;
+};
+export {
+  c as useSelectContext
+};

package/dist/components/Select/contexts/select.provider.js

@@ -0,0 +1,58 @@
+import { jsx as L } from "react/jsx-runtime";
+import { useState as e, useRef as f, useCallback as T, useEffect as p } from "react";
+import { SelectContext as N } from "./select.context.js";
+import { useToggle as O } from "../../../hooks/useToggle.js";
+const c = 1, R = 300, V = ({
+  children: C,
+  value: E,
+  name: i,
+  highlightSearch: S = !1,
+  options: n,
+  onChange: a,
+  onBlur: u
+}) => {
+  const [d, l] = e(n), v = f(S), [F, g] = O(!1), [P, I] = e(""), [b, x] = e(!0), [A, o] = e(!0), [_, s] = e(c), [y, h] = e(!1), t = f(void 0), D = T(
+    (r, m) => {
+      m?.current && (m.current.value = r), t.current && clearTimeout(t.current), h(!0), o(!0), s(c), a?.({ target: { value: r, name: i ?? "" } }), u?.(), t.current = setTimeout(() => {
+        h(!1);
+      }, R);
+    },
+    [a, i, u]
+  ), G = T(
+    (r) => {
+      g(r), o(!0), s(c);
+    },
+    [g]
+  );
+  return p(() => {
+    l(n);
+  }, [n.length]), p(() => () => {
+    t.current && clearTimeout(t.current);
+  }, []), /* @__PURE__ */ L(
+    N.Provider,
+    {
+      value: {
+        highlightSearchEnabled: v.current,
+        isOpen: F,
+        searchTerm: P,
+        value: E,
+        canFilter: b,
+        canContinueFetching: A,
+        page: _,
+        options: d,
+        isTyping: y,
+        setOptions: l,
+        setPage: s,
+        setCanContinueFetching: o,
+        setCanFilter: x,
+        setSearchTerm: I,
+        setValue: D,
+        toggleOpen: G
+      },
+      children: C
+    }
+  );
+};
+export {
+  V as SelectProvider
+};

package/dist/components/{Dropdown → Select}/hooks/useNavigationList.js

@@ -1,6 +1,6 @@
 import { useRef as g, useEffect as a } from "react";
-import { useDropdownContext as k } from "../contexts/dropdown.hook.js";
-const A = ({
+import { useSelectContext as k } from "../contexts/select.hook.js";
+const d = ({
   searchable: o,
   ulRef: n,
   wrapperInputRef: e,
@@ -46,5 +46,5 @@ const A = ({
   }, [s]);
 };
 export {
-  A as useNavigationUlList
+  d as useNavigationUlList
 };

package/dist/components/{Dropdown/hooks/useDropdown.js → Select/hooks/useSelect.js}

@@ -1,22 +1,22 @@
-import { useRef as m, useEffect as c, useCallback as b } from "react";
-import { useDropdownContext as L } from "../contexts/dropdown.hook.js";
-const p = ({
+import { useRef as m, useEffect as c, useCallback as w } from "react";
+import { useSelectContext as L } from "../contexts/select.hook.js";
+const y = ({
   ulRef: f,
-  inputRef: t,
-  disabled: w,
+  inputRef: r,
+  disabled: E,
   internalValue: u,
   onBlur: g
 }) => {
-  const r = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
+  const t = m(null), a = m(null), { value: i, setSearchTerm: v, setCanFilter: d, toggleOpen: n } = L();
   c(() => {
-    const e = new AbortController(), o = (l) => {
+    const e = new AbortController(), s = (l) => {
       l.key === "Escape" && n(!1);
-    }, s = (l) => {
-      r.current?.contains(l.target) || n(!1);
+    }, o = (l) => {
+      t.current?.contains(l.target) || n(!1);
     };
-    return document.addEventListener("keydown", o, {
+    return document.addEventListener("keydown", s, {
       signal: e.signal
-    }), document.addEventListener("mousedown", s, {
+    }), document.addEventListener("mousedown", o, {
       signal: e.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -29,20 +29,20 @@ const p = ({
     ), a.current?.addEventListener(
       "focusin",
       (l) => {
-        !w && l.target?.matches(":focus-visible") && n(!0);
+        !E && l.target?.matches(":focus-visible") && n(!0);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
-  }, [n, r]), c(() => {
+  }, [n, t]), c(() => {
     const e = new AbortController();
     return a.current?.addEventListener(
       "keydown",
-      (o) => {
-        if (o.key === "ArrowDown") {
-          const s = f.current?.querySelector("li");
-          s && s.focus();
+      (s) => {
+        if (s.key === "ArrowDown") {
+          const o = f.current?.querySelector("li");
+          o && o.focus();
         }
       },
       { signal: e.signal }
@@ -51,13 +51,13 @@ const p = ({
     };
   }, [a, f]), c(() => {
     const e = new AbortController();
-    return t?.current?.addEventListener(
+    return r?.current?.addEventListener(
       "focusin",
       () => {
         v(u?.value ?? ""), d(!1);
       },
       { signal: e.signal }
-    ), t?.current?.addEventListener(
+    ), r?.current?.addEventListener(
       "focusout",
       () => {
         d(!0);
@@ -69,35 +69,35 @@ const p = ({
         d(!1);
       },
       { signal: e.signal }
-    ), r.current?.addEventListener(
+    ), t.current?.addEventListener(
       "focusout",
-      (o) => {
-        r.current?.contains(o.relatedTarget) || n(!1);
+      (s) => {
+        t.current?.contains(s.relatedTarget) || n(!1);
       },
       { signal: e.signal }
     ), () => {
       e.abort();
     };
   }, [i]), c(() => {
-    t?.current && (t.current.value = i && u?.value || "");
+    r?.current && (r.current.value = i && u?.value || "");
   }, [u, i]), c(() => {
     const e = new AbortController();
-    return r.current?.addEventListener("focusout", (o) => {
-      const s = o.relatedTarget;
-      (!s || !r.current?.contains(s)) && (t?.current?.value || g?.());
+    return t.current?.addEventListener("focusout", (s) => {
+      const o = s.relatedTarget;
+      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
     }), () => {
       e.abort();
     };
-  }, [n, r, v, g, i]);
-  const E = b(() => {
-    n(!0), requestAnimationFrame(() => t?.current?.focus());
-  }, [t, n]);
+  }, [n, t, v, g, i]);
+  const b = w(() => {
+    n(!0), requestAnimationFrame(() => r?.current?.focus());
+  }, [r, n]);
   return {
-    wrapperRef: r,
+    wrapperRef: t,
     wrapperInputRef: a,
-    handleOpen: E
+    handleOpen: b
   };
 };
 export {
-  p as useDropdown
+  y as useSelect
 };