@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.50

package/dist/components/{Dropdown → Select}/components/ListItem/ListItem.variants.js

@@ -1,8 +1,8 @@
 import { c as r } from "../../../../index-D29mdTf5.js";
 const t = r([
   "cursor-pointer",
-  "py-2",
-  "px-2",
+  "py-1.5",
+  "px-6",
   "h-full",
   "focus-visible:outline-none",
   "m-0",
@@ -12,10 +12,11 @@ const t = r([
   "gap-3",
   "transition-bg",
   "duration-250",
+  "min-h-10",
   "hover:bg-gray-50",
   "focus:bg-gray-50",
-  "dark:hover:bg-slate-700",
-  "dark:focus:bg-slate-700"
+  "dark:hover:bg-metal-700",
+  "dark:focus:bg-metal-700"
 ]);
 export {
   t as listItemVariants

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

@@ -0,0 +1,226 @@
+import { jsxs as u, jsx as r } from "react/jsx-runtime";
+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 { 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 = pe("search", de), je = Z(
+  ({
+    additionalOptions: b,
+    className: z,
+    defaultValue: x,
+    disabled: t = !1,
+    error: f,
+    iconClassName: R,
+    inputClassName: S,
+    isInfiniteScrollEnabled: F = !1,
+    isLoading: g,
+    isRequired: h,
+    label: v,
+    labelClassName: T,
+    listClassName: E,
+    listItemClassName: M,
+    listItemSecondRowClassName: W,
+    name: d,
+    noOptionsText: _,
+    placeholder: N,
+    searchable: k = !1,
+    showSearchIcon: C,
+    theme: $,
+    wrapperClassName: H,
+    onFetchMoreOptions: P,
+    onBlur: U,
+    onSearchChange: q,
+    ...y
+  }, A) => {
+    const I = ee(), s = w(null), L = w(null), B = w(0), {
+      isOpen: c,
+      options: l,
+      searchTerm: D,
+      value: o,
+      setCanFilter: G,
+      setSearchTerm: J,
+      setValue: i,
+      toggleOpen: K
+    } = fe(), e = te(() => l.find(({ value: a }) => a === o), [l, o]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ie({
+      ulRef: L,
+      inputRef: s,
+      disabled: t,
+      internalValue: e,
+      onBlur: U
+    }), m = d ? `${I}-${d}` : I;
+    ae(A, () => s.current, [s]), re(() => {
+      if (x && !o) {
+        const a = l && l.find((p) => p.value === x);
+        a && i(a.value);
+      }
+    }, [x, l, i, o]);
+    const X = (a) => {
+      const p = a.target.value;
+      G(!0), i(""), J(p ?? ""), q?.(p);
+      const O = l.find(
+        (Y) => Y.value.toLocaleLowerCase() === p.toLocaleLowerCase()
+      );
+      i(O ? O.value : e?.value ?? "");
+    };
+    return /* @__PURE__ */ u(
+      "div",
+      {
+        ref: Q,
+        className: n("flex flex-col w-full relative", H),
+        "data-theme": $,
+        children: [
+          v ? /* @__PURE__ */ u(
+            "label",
+            {
+              id: m,
+              className: n(oe({ className: T })),
+              htmlFor: m,
+              onClick: () => !t && j(),
+              children: [
+                v,
+                h && /* @__PURE__ */ r("span", { className: "text-red-600 dark:text-red-500 ml-1", children: "*" })
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ u(
+            "div",
+            {
+              ref: V,
+              id: m,
+              className: n(
+                ce({ className: z, hasError: !!f, disabled: t })
+              ),
+              role: "combobox",
+              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 && !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: 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: c ? D : e?.label ?? o ?? "",
+                      onChange: X,
+                      placeholder: N,
+                      className: n(se({ className: S }), {
+                        "text-red-700 placeholder:text-red-700": !!f
+                      }),
+                      onClick: (a) => {
+                        a.stopPropagation(), t || j();
+                      },
+                      "aria-label": v || N,
+                      "aria-labelledby": m,
+                      required: h,
+                      autoComplete: "off",
+                      autoCapitalize: "words",
+                      disabled: t,
+                      tabIndex: -1,
+                      ...y
+                    }
+                  ) : /* @__PURE__ */ u(
+                    ne,
+                    {
+                      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(le, { className: "w-4 h-4 text-metal-400 animate-spin select-none" }) : !C && /* @__PURE__ */ r(
+                  ue,
+                  {
+                    "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-metal-400/50 dark:group-focus-within:text-zinc-500": t
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "input",
+            {
+              ref: s,
+              type: "text",
+              name: d,
+              className: "hidden",
+              "aria-hidden": "true",
+              required: h,
+              inert: !0,
+              defaultValue: e?.value ?? o ?? void 0,
+              ...y
+            }
+          ),
+          c && /* @__PURE__ */ r(
+            me,
+            {
+              ref: L,
+              additionalOptions: b,
+              className: E,
+              itemClassName: M,
+              name: d,
+              wrapperInputRef: V,
+              inputRef: s,
+              options: l,
+              isLoading: !!g,
+              searchable: k,
+              listItemSecondRowClassName: W,
+              isInfiniteScrollEnabled: F,
+              onFetchMoreOptions: P,
+              noOptionsText: _
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  je as Wrapper
+};

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

@@ -0,0 +1,4 @@
+import { DEFAULT_LIST_SIZE as E } from "./pagination.js";
+export {
+  E as DEFAULT_LIST_SIZE
+};

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

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

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/Select/contexts/select.context.js

@@ -0,0 +1,36 @@
+import { createContext as e } from "react";
+const r = e({
+  highlightSearchEnabled: !1,
+  isOpen: !1,
+  searchTerm: "",
+  value: void 0,
+  canFilter: !0,
+  canContinueFetching: !0,
+  page: 1,
+  options: [],
+  isTyping: !1,
+  setOptions() {
+    throw new Error("setOptions function must be overridden");
+  },
+  setPage() {
+    throw new Error("setPage function must be overridden");
+  },
+  setCanContinueFetching() {
+    throw new Error("setCanContinueFetching function must be overridden");
+  },
+  setCanFilter() {
+    throw new Error("setCanFilter function must be overridden");
+  },
+  setSearchTerm() {
+    throw new Error("setSearchTerm function must be overridden");
+  },
+  setValue() {
+    throw new Error("setValue function must be overridden");
+  },
+  toggleOpen() {
+    throw new Error("toggleOpen function must be overridden");
+  }
+});
+export {
+  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/Select/hooks/useNavigationList.js

@@ -0,0 +1,50 @@
+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();
+  a(() => {
+    const m = n.current?.querySelectorAll("li") ?? [], t = Array.from(m).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 }
+    ), () => {
+      u.abort();
+    };
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
+};
+export {
+  d as useNavigationUlList
+};

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

@@ -0,0 +1,103 @@
+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(() => {
+    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 }
+    ), () => {
+      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 }
+    ), () => {
+      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 }
+    ), () => {
+      e.abort();
+    };
+  }, [i]), c(() => {
+    r?.current && (r.current.value = i && u?.value || "");
+  }, [u, i]), c(() => {
+    const e = new AbortController();
+    return t.current?.addEventListener("focusout", (s) => {
+      const o = s.relatedTarget;
+      (!o || !t.current?.contains(o)) && (r?.current?.value || g?.());
+    }), () => {
+      e.abort();
+    };
+  }, [n, t, v, g, i]);
+  const b = w(() => {
+    n(!0), requestAnimationFrame(() => r?.current?.focus());
+  }, [r, n]);
+  return {
+    wrapperRef: t,
+    wrapperInputRef: a,
+    handleOpen: b
+  };
+};
+export {
+  y as useSelect
+};

package/dist/components/Sidebar/Sidebar.variants.js

@@ -10,8 +10,8 @@ const e = r([
   "px-4",
   "relative",
   "transition-all",
-  "w-[72px]",
-  "md:w-[256px]",
+  "w-18",
+  "md:w-64",
   "bg-kubefirst-dark-blue-900"
 ]), o = r([
   "absolute",

package/dist/components/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { R as x, T as N, b as v } from "../../index-C84F4YyO.js";
+import { R as x, T as N, b as v } from "../../index-gSPwC-1I.js";
 import { forwardRef as V, useRef as b, useState as R, useImperativeHandle as g, useEffect as j, useCallback as k } from "react";
 import { cn as r } from "../../utils/index.js";
 import { trackVariants as w, thumbVariants as y, sliderVariants as C } from "./Slider.variants.js";