@konstructio/ui 0.1.2-alpha.78 → 0.1.2-alpha.79

package/dist/components/Select/components/Wrapper.js

@@ -1,250 +1,4 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { forwardRef as re, useId as ne, useRef as w, useMemo as le, useImperativeHandle as se, useEffect as oe } from "react";
-import { Typography as ce } from "../../Typography/Typography.js";
-import { cn as n } from "../../../utils/index.js";
-import { labelVariants as ie, inputVariants as me, selectVariants as pe } from "../Select.variants.js";
-import { useSelect as ue } from "../hooks/useSelect.js";
-import { List as fe } from "./List/List.js";
-import { c as de } from "../../../createLucideIcon-CP-mMPfa.js";
-import { LoaderIcon as xe } from "../../../assets/icons/components/Loader.js";
-import { C as he } from "../../../chevron-up-IlDPxR7j.js";
-import { useSelectContext as ve } from "../contexts/select.hook.js";
-const Ne = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], Ce = de("search", Ne), Re = re(
-  ({
-    additionalOptions: z,
-    className: O,
-    defaultValue: x,
-    disabled: t = !1,
-    error: f,
-    groupedOptions: R,
-    iconClassName: F,
-    inputClassName: S,
-    isInfiniteScrollEnabled: T = !1,
-    isLoading: g,
-    isRequired: h,
-    label: v,
-    labelAction: E,
-    labelClassName: M,
-    labelWrapperClassName: W,
-    listClassName: _,
-    listItemClassName: $,
-    listItemSecondRowClassName: H,
-    name: d,
-    noOptionsText: P,
-    placeholder: N,
-    searchable: k = !1,
-    showSearchIcon: C,
-    theme: U,
-    visibleItems: q,
-    wrapperClassName: A,
-    onFetchMoreOptions: B,
-    onBlur: D,
-    onSearchChange: G,
-    ...y
-  }, J) => {
-    const I = ne(), c = w(null), j = w(null), K = w(0), {
-      isOpen: i,
-      options: l,
-      searchTerm: Q,
-      value: s,
-      setCanFilter: X,
-      setSearchTerm: Y,
-      setValue: m,
-      toggleOpen: Z
-    } = ve(), e = le(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: ee, wrapperInputRef: L, handleOpen: V } = ue({
-      ulRef: j,
-      inputRef: c,
-      disabled: t,
-      internalValue: e,
-      onBlur: D
-    }), p = d ? `${I}-${d}` : I;
-    se(J, () => c.current, [c]), oe(() => {
-      if (x && !s) {
-        const a = l && l.find((u) => u.value === x);
-        a && m(a.value);
-      }
-    }, [x, l, m, s]);
-    const te = (a) => {
-      const u = a.target.value;
-      X(!0), m(""), Y(u ?? ""), G?.(u);
-      const b = l.find(
-        (ae) => ae.value.toLocaleLowerCase() === u.toLocaleLowerCase()
-      );
-      m(b ? b.value : e?.value ?? "");
-    };
-    return /* @__PURE__ */ o(
-      "div",
-      {
-        ref: ee,
-        className: n("flex flex-col gap-2 w-full relative", A),
-        "data-theme": U,
-        children: [
-          v ? /* @__PURE__ */ o(
-            "div",
-            {
-              className: n(
-                "flex items-center justify-between",
-                W
-              ),
-              children: [
-                /* @__PURE__ */ o(
-                  "label",
-                  {
-                    id: p,
-                    className: n(ie({ className: M })),
-                    htmlFor: p,
-                    onClick: () => !t && V(),
-                    children: [
-                      v,
-                      h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
-                    ]
-                  }
-                ),
-                E
-              ]
-            }
-          ) : null,
-          /* @__PURE__ */ o(
-            "div",
-            {
-              ref: L,
-              id: p,
-              className: n(
-                pe({ className: O, hasError: !!f, disabled: t })
-              ),
-              role: "combobox",
-              onClick: () => !t && Z(!i),
-              "aria-expanded": i,
-              tabIndex: K.current,
-              "aria-labelledby": p,
-              children: [
-                /* @__PURE__ */ o("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  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(
-                    Ce,
-                    {
-                      className: n(
-                        "w-4",
-                        "h-4",
-                        "text-zinc-500",
-                        "select-none",
-                        "transition-colors",
-                        "duration-300",
-                        "dark:text-metal-300",
-                        "dark:group-focus-within:text-metal-50"
-                      )
-                    }
-                  ),
-                  k ? /* @__PURE__ */ r(
-                    "input",
-                    {
-                      type: "text",
-                      value: i ? Q : e?.label ?? s ?? "",
-                      onChange: te,
-                      placeholder: N,
-                      className: n(me({ className: S }), {
-                        "text-red-700 placeholder:text-red-700": !!f
-                      }),
-                      onClick: (a) => {
-                        a.stopPropagation(), t || V();
-                      },
-                      "aria-label": v || N,
-                      "aria-labelledby": p,
-                      required: h,
-                      autoComplete: "off",
-                      autoCapitalize: "words",
-                      disabled: t,
-                      tabIndex: -1,
-                      ...y
-                    }
-                  ) : /* @__PURE__ */ o(
-                    ce,
-                    {
-                      variant: "body2",
-                      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-metal-800 dark:text-metal-50": e,
-                          "text-metal-400/50 dark:text-metal-50/50": t
-                        },
-                        e?.wrapperClassNameOnSelectedValue
-                      ),
-                      children: [
-                        e?.label || N,
-                        " ",
-                        e?.showRightComponentOnselectedValue ? e?.rightComponent : null
-                      ]
-                    }
-                  )
-                ] }),
-                g ? /* @__PURE__ */ r(
-                  xe,
-                  {
-                    size: 16,
-                    className: "text-metal-400 animate-spin select-none"
-                  }
-                ) : !C && /* @__PURE__ */ r(
-                  he,
-                  {
-                    "data-state": i ? "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",
-                      F,
-                      {
-                        "text-red-700": !!f,
-                        "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
-                      }
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ r(
-            "input",
-            {
-              ref: c,
-              type: "text",
-              name: d,
-              className: "hidden",
-              "aria-hidden": "true",
-              required: h,
-              inert: !0,
-              defaultValue: e?.value ?? s ?? void 0,
-              ...y
-            }
-          ),
-          i && /* @__PURE__ */ r(
-            fe,
-            {
-              ref: j,
-              additionalOptions: z,
-              className: _,
-              groupedOptions: R,
-              itemClassName: $,
-              name: d,
-              wrapperInputRef: L,
-              inputRef: c,
-              options: l,
-              isLoading: !!g,
-              searchable: k,
-              listItemSecondRowClassName: H,
-              isInfiniteScrollEnabled: T,
-              onFetchMoreOptions: B,
-              noOptionsText: P,
-              visibleItems: q
-            }
-          )
-        ]
-      }
-    );
-  }
-);
+import { t as p } from "../../../Wrapper-DEJ-hyar.js";
 export {
-  Re as Wrapper
+  p as Wrapper
 };

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

@@ -1,10 +1,10 @@
-import { A as t } from "../../../AdditionalOptions-C2FDVZhu.js";
-import { EmptyList as e } from "./EmptyList.js";
-import { List as m } from "./List/List.js";
-import { Wrapper as s } from "./Wrapper.js";
+import { t as o } from "../../../Wrapper-DEJ-hyar.js";
+import { t as i } from "../../../AdditionalOptions-Cx9wU01w.js";
+import { EmptyList as p } from "./EmptyList.js";
+import { List as a } from "./List/List.js";
 export {
-  t as AdditionalOptions,
-  e as EmptyList,
-  m as List,
-  s as Wrapper
+  i as AdditionalOptions,
+  p as EmptyList,
+  a as List,
+  o as Wrapper
 };

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

@@ -1,6 +1,6 @@
-import { DEFAULT_LIST_SIZE as E } from "./pagination.js";
-import { ITEM_HEIGHT_PX as T } from "./list.js";
+import { DEFAULT_LIST_SIZE as r } from "./pagination.js";
+import { ITEM_HEIGHT_PX as E } from "./list.js";
 export {
-  E as DEFAULT_LIST_SIZE,
-  T as ITEM_HEIGHT_PX
+  r as DEFAULT_LIST_SIZE,
+  E as ITEM_HEIGHT_PX
 };

package/dist/components/Select/constants/list.js

@@ -1,4 +1,4 @@
-const o = 40;
+var r = 40;
 export {
-  o as ITEM_HEIGHT_PX
+  r as ITEM_HEIGHT_PX
 };

package/dist/components/Select/constants/pagination.js

@@ -1,4 +1,4 @@
-const o = 10;
+var r = 10;
 export {
-  o as DEFAULT_LIST_SIZE
+  r as DEFAULT_LIST_SIZE
 };

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

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

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

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

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

@@ -1,10 +1,9 @@
-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;
+import { SelectContext as t } from "./select.context.js";
+import { useContext as o } from "react";
+var c = () => {
+  const e = o(t);
+  if (!e) throw new Error("useSelectContext must be used within a SelectProvider");
+  return e;
 };
 export {
   c as useSelectContext

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

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

package/dist/components/Select/hooks/useNavigationList.js

@@ -1,50 +1,41 @@
-import { useRef as g, useEffect as a } from "react";
 import { useSelectContext as k } from "../contexts/select.hook.js";
-const d = ({
-  searchable: o,
-  ulRef: n,
-  wrapperInputRef: e,
-  filteredOptions: f
-}) => {
-  const r = g(0), { isOpen: s } = k();
+import { useEffect as a, useRef as b } from "react";
+var A = ({ searchable: o, ulRef: n, wrapperInputRef: e, filteredOptions: f }) => {
+  const r = b(0), { isOpen: s } = k();
   a(() => {
-    const m = n.current?.querySelectorAll("li") ?? [], t = Array.from(m).filter(
-      (c) => c.getAttribute("data-action") !== "true"
-    ), u = new AbortController(), i = () => {
+    const g = n.current?.querySelectorAll("li") ?? [], t = Array.from(g).filter((c) => c.getAttribute("data-action") !== "true"), u = new AbortController(), i = () => {
       r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
     }, l = () => {
       r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
     };
-    return n.current?.addEventListener(
-      "keydown",
-      (c) => {
-        switch (c.preventDefault(), c.key) {
-          case "ArrowDown": {
-            i();
-            break;
-          }
-          case "Tab": {
-            c.shiftKey ? l() : i();
-            break;
-          }
-          case "ArrowUp": {
-            r.current === 0 ? e.current?.focus() : l();
-            break;
-          }
-          case "Enter": {
-            t[r.current]?.click();
-            break;
-          }
-        }
-      },
-      { signal: u.signal }
-    ), () => {
+    return n.current?.addEventListener("keydown", (c) => {
+      switch (c.preventDefault(), c.key) {
+        case "ArrowDown":
+          i();
+          break;
+        case "Tab":
+          c.shiftKey ? l() : i();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? e.current?.focus() : l();
+          break;
+        case "Enter":
+          t[r.current]?.click();
+          break;
+      }
+    }, { signal: u.signal }), () => {
       u.abort();
     };
-  }, [n, r, e, o, f.length]), a(() => {
+  }, [
+    n,
+    r,
+    e,
+    o,
+    f.length
+  ]), a(() => {
     s || (r.current = 0);
   }, [s]);
 };
 export {
-  d as useNavigationUlList
+  A as useNavigationUlList
 };

package/dist/components/Select/hooks/useSelect.js

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