@konstructio/ui 0.1.2-alpha.76 → 0.1.2-alpha.77

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,85 +1,57 @@
-import { jsxs as b, jsx as l } from "react/jsx-runtime";
-import { forwardRef as C, useRef as d, useId as R, useImperativeHandle as g } from "react";
-import { cn as s } from "../../utils/index.js";
-import { labelVariants as A, autocompleteVariants as O } from "./Autocomplete.variants.js";
-import { useAutocomplete as V } from "./hooks/useAutocomplete.js";
-import { List as j } from "./components/List/List.js";
-const y = C(
-  ({
-    autoComplete: m = "off",
-    className: n,
-    label: t,
-    labelClassName: c,
-    labelWrapperClassName: p,
-    name: r,
-    options: u,
-    placeholder: f,
-    placeHolderEmptyValues: h = "No values...",
-    placeHolderEmptyValuesClassName: v,
-    theme: w,
-    onChange: x
-  }, N) => {
-    const a = d(null), o = d(null), i = R();
-    g(N, () => o.current, [o]);
-    const e = V({
-      options: u,
-      inputRef: o,
-      wrapperRef: a,
-      onChange: x
-    });
-    return /* @__PURE__ */ b(
-      "div",
-      {
-        ref: a,
-        className: "relative flex flex-col gap-2",
-        "data-theme": w,
-        children: [
-          t ? /* @__PURE__ */ l("div", { className: s(p), children: /* @__PURE__ */ l(
-            "label",
-            {
-              htmlFor: r ?? i,
-              className: s(
-                A({
-                  className: c
-                })
-              ),
-              children: t
-            }
-          ) }) : null,
-          /* @__PURE__ */ l(
-            "input",
-            {
-              ref: o,
-              id: t ? r ?? i : void 0,
-              type: "text",
-              name: r,
-              role: "combobox",
-              autoComplete: m,
-              className: s(O({ className: n })),
-              onChange: e.handleChange,
-              value: e.value,
-              placeholder: f,
-              "aria-expanded": e.showOptions ? "true" : "false"
-            }
-          ),
-          e.showOptions && /* @__PURE__ */ l("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm border-zinc-200 overflow-hidden", children: /* @__PURE__ */ l(
-            j,
-            {
-              className: n,
-              inputRef: o,
-              wrapperRef: a,
-              options: e.newOptions,
-              placeholder: h,
-              placeholderClassName: v,
-              onClick: e.handleSelectValue
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-y.displayName = "Autocomplete";
+import { jsx as c, jsxs as _ } from "react/jsx-runtime";
+import { c as k } from "../../compiler-runtime-DA41awpA.js";
+import { forwardRef as F, useRef as j, useId as L, useImperativeHandle as W } from "react";
+import { cn as H } from "../../utils/index.js";
+import { labelVariants as $, autocompleteVariants as q } from "./Autocomplete.variants.js";
+import { useAutocomplete as B } from "./hooks/useAutocomplete.js";
+import { List as D } from "./components/List/List.js";
+const G = F((z, I) => {
+  const e = k.c(34), {
+    autoComplete: S,
+    className: o,
+    label: i,
+    labelClassName: v,
+    labelWrapperClassName: N,
+    name: t,
+    options: w,
+    placeholder: C,
+    placeHolderEmptyValues: A,
+    placeHolderEmptyValuesClassName: b,
+    theme: x,
+    onChange: V
+  } = z, O = S === void 0 ? "off" : S, g = A === void 0 ? "No values..." : A, y = j(null), m = j(null), p = L();
+  let d, u;
+  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (d = () => m.current, u = [m], e[0] = d, e[1] = u) : (d = e[0], u = e[1]), W(I, d, u);
+  let f;
+  e[2] !== V || e[3] !== w ? (f = {
+    options: w,
+    inputRef: m,
+    wrapperRef: y,
+    onChange: V
+  }, e[2] = V, e[3] = w, e[4] = f) : f = e[4];
+  const l = B(f);
+  let a;
+  e[5] !== p || e[6] !== i || e[7] !== v || e[8] !== N || e[9] !== t ? (a = i ? /* @__PURE__ */ c("div", { className: H(N), children: /* @__PURE__ */ c("label", { htmlFor: t ?? p, className: H($({
+    className: v
+  })), children: i }) }) : null, e[5] = p, e[6] = i, e[7] = v, e[8] = N, e[9] = t, e[10] = a) : a = e[10];
+  const R = i ? t ?? p : void 0;
+  let s;
+  e[11] !== o ? (s = H(q({
+    className: o
+  })), e[11] = o, e[12] = s) : s = e[12];
+  const E = l.showOptions ? "true" : "false";
+  let n;
+  e[13] !== O || e[14] !== l.handleChange || e[15] !== l.value || e[16] !== t || e[17] !== C || e[18] !== R || e[19] !== s || e[20] !== E ? (n = /* @__PURE__ */ c("input", { ref: m, id: R, type: "text", name: t, role: "combobox", autoComplete: O, className: s, onChange: l.handleChange, value: l.value, placeholder: C, "aria-expanded": E }), e[13] = O, e[14] = l.handleChange, e[15] = l.value, e[16] = t, e[17] = C, e[18] = R, e[19] = s, e[20] = E, e[21] = n) : n = e[21];
+  let r;
+  e[22] !== l.handleSelectValue || e[23] !== l.newOptions || e[24] !== l.showOptions || e[25] !== o || e[26] !== g || e[27] !== b ? (r = l.showOptions && /* @__PURE__ */ c("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm border-zinc-200 overflow-hidden", children: /* @__PURE__ */ c(D, { className: o, inputRef: m, wrapperRef: y, options: l.newOptions, placeholder: g, placeholderClassName: b, onClick: l.handleSelectValue }) }), e[22] = l.handleSelectValue, e[23] = l.newOptions, e[24] = l.showOptions, e[25] = o, e[26] = g, e[27] = b, e[28] = r) : r = e[28];
+  let h;
+  return e[29] !== n || e[30] !== r || e[31] !== a || e[32] !== x ? (h = /* @__PURE__ */ _("div", { ref: y, className: "relative flex flex-col gap-2", "data-theme": x, children: [
+    a,
+    n,
+    r
+  ] }), e[29] = n, e[30] = r, e[31] = a, e[32] = x, e[33] = h) : h = e[33], h;
+});
+G.displayName = "Autocomplete";
 export {
-  y as Autocomplete
+  G as Autocomplete
 };

package/dist/components/Autocomplete/Autocomplete.variants.js

@@ -1,25 +1,5 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
-  "flex",
-  "w-full",
-  "rounded-md",
-  "border",
-  "border-zinc-200",
-  "bg-transparent",
-  "text-zinc-700",
-  "transition-colors",
-  "placeholder:text-muted-foreground",
-  "focus-visible:outline-none",
-  "focus-visible:ring-1",
-  "focus-visible:ring-ring",
-  "disabled:cursor-not-allowed",
-  "disabled:opacity-50",
-  "shadow-2xs",
-  "py-1",
-  "px-2",
-  "focus:ring-aurora-500",
-  "kubefirst:focus:ring-kubefirst-primary"
-]), i = r(["pl-1", "text-base", "cursor-pointer"]);
+const e = r(["flex", "w-full", "rounded-md", "border", "border-zinc-200", "bg-transparent", "text-zinc-700", "transition-colors", "placeholder:text-muted-foreground", "focus-visible:outline-none", "focus-visible:ring-1", "focus-visible:ring-ring", "disabled:cursor-not-allowed", "disabled:opacity-50", "shadow-2xs", "py-1", "px-2", "focus:ring-aurora-500", "kubefirst:focus:ring-kubefirst-primary"]), i = r(["pl-1", "text-base", "cursor-pointer"]);
 export {
   e as autocompleteVariants,
   i as labelVariants

package/dist/components/Autocomplete/components/List/List.js

@@ -1,48 +1,51 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useRef as f } from "react";
-import { cn as r } from "../../../../utils/index.js";
-import { emptyListVariants as p, buttonVariants as u, listItemVariants as b, listVariants as N } from "./List.variants.js";
-import { useNavigationUlList as d } from "../../hooks/useNavigationList.js";
-const y = ({
-  className: n,
-  inputRef: a,
-  options: s,
-  placeholder: l,
-  placeholderClassName: o,
-  wrapperRef: m,
-  onClick: c
-}) => {
-  const i = f(null);
-  return d({ ulRef: i, inputRef: a, wrapperRef: m, options: s }), s.length === 0 ? /* @__PURE__ */ t(
-    "span",
-    {
-      className: r(
-        p({
-          className: o
-        })
-      ),
-      children: l
-    }
-  ) : /* @__PURE__ */ t("ul", { ref: i, role: "listbox", className: r(N({ className: n })), children: s.map(({ value: e }) => /* @__PURE__ */ t(
-    "li",
-    {
-      role: "option",
-      tabIndex: 0,
-      className: r(b()),
-      children: /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          role: "button",
-          className: r(u()),
-          onClick: () => c(e),
-          children: e
-        }
-      )
-    },
-    e
-  )) });
+import { jsx as m } from "react/jsx-runtime";
+import { c as R } from "../../../../compiler-runtime-DA41awpA.js";
+import { useRef as V } from "react";
+import { cn as c } from "../../../../utils/index.js";
+import { emptyListVariants as C, listVariants as L, buttonVariants as g, listItemVariants as k } from "./List.variants.js";
+import { useNavigationUlList as v } from "../../hooks/useNavigationList.js";
+const $ = (x) => {
+  const e = R.c(19), {
+    className: p,
+    inputRef: f,
+    options: l,
+    placeholder: u,
+    placeholderClassName: N,
+    wrapperRef: d,
+    onClick: r
+  } = x, b = V(null);
+  let a;
+  if (e[0] !== f || e[1] !== l || e[2] !== d ? (a = {
+    ulRef: b,
+    inputRef: f,
+    wrapperRef: d,
+    options: l
+  }, e[0] = f, e[1] = l, e[2] = d, e[3] = a) : a = e[3], v(a), l.length === 0) {
+    let t;
+    e[4] !== N ? (t = c(C({
+      className: N
+    })), e[4] = N, e[5] = t) : t = e[5];
+    let o;
+    return e[6] !== u || e[7] !== t ? (o = /* @__PURE__ */ m("span", { className: t, children: u }), e[6] = u, e[7] = t, e[8] = o) : o = e[8], o;
+  }
+  let s;
+  e[9] !== p ? (s = c(L({
+    className: p
+  })), e[9] = p, e[10] = s) : s = e[10];
+  let i;
+  if (e[11] !== r || e[12] !== l) {
+    let t;
+    e[14] !== r ? (t = (o) => {
+      const {
+        value: h
+      } = o;
+      return /* @__PURE__ */ m("li", { role: "option", tabIndex: 0, className: c(k()), children: /* @__PURE__ */ m("button", { type: "button", role: "button", className: c(g()), onClick: () => r(h), children: h }) }, h);
+    }, e[14] = r, e[15] = t) : t = e[15], i = l.map(t), e[11] = r, e[12] = l, e[13] = i;
+  } else
+    i = e[13];
+  let n;
+  return e[16] !== s || e[17] !== i ? (n = /* @__PURE__ */ m("ul", { ref: b, role: "listbox", className: s, children: i }), e[16] = s, e[17] = i, e[18] = n) : n = e[18], n;
 };
 export {
-  y as List
+  $ as List
 };

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

@@ -1,33 +1,5 @@
 import { c as r } from "../../../../index-D29mdTf5.js";
-const o = r([
-  "max-h-[250px]",
-  "overflow-y-auto",
-  "bg-white"
-]), e = r([
-  "p-1",
-  "text-center",
-  "w-full",
-  "block",
-  "bg-white"
-]), s = r([
-  "focus-visible:outline-none",
-  "kubefirst:focus:bg-purple-100",
-  "kubefirst:hover:bg-purple-100",
-  "border-transparent",
-  "focus:bg-aurora-50",
-  "hover:bg-aurora-50"
-]), u = r([
-  "cursor-pointer",
-  "focus-visible:outline-none",
-  "px-3",
-  "py-1.5",
-  "w-full",
-  "text-left",
-  "focus:bg-aurora-50",
-  "hover:bg-aurora-50",
-  "kubefirst:focus:bg-purple-100",
-  "kubefirst:hover:bg-purple-100"
-]);
+const o = r(["max-h-[250px]", "overflow-y-auto", "bg-white"]), e = r(["p-1", "text-center", "w-full", "block", "bg-white"]), s = r(["focus-visible:outline-none", "kubefirst:focus:bg-purple-100", "kubefirst:hover:bg-purple-100", "border-transparent", "focus:bg-aurora-50", "hover:bg-aurora-50"]), u = r(["cursor-pointer", "focus-visible:outline-none", "px-3", "py-1.5", "w-full", "text-left", "focus:bg-aurora-50", "hover:bg-aurora-50", "kubefirst:focus:bg-purple-100", "kubefirst:hover:bg-purple-100"]);
 export {
   u as buttonVariants,
   e as emptyListVariants,

package/dist/components/Autocomplete/hooks/useAutocomplete.js

@@ -1,76 +1,92 @@
-import { useState as i, useEffect as d, useCallback as g } from "react";
-import { filterByValue as k } from "../../../utils/index.js";
-const A = ({
-  options: l,
-  inputRef: n,
-  wrapperRef: o,
-  onChange: a
-}) => {
-  const [f, m] = i(() => l ?? []), [h, s] = i(!1), [E, b] = i("");
-  d(() => {
+import { c as B } from "../../../compiler-runtime-DA41awpA.js";
+import { useState as S, useEffect as V } from "react";
+import { filterByValue as K } from "../../../utils/index.js";
+const z = (a) => {
+  const e = B.c(27), {
+    options: r,
+    inputRef: n,
+    wrapperRef: o,
+    onChange: l
+  } = a;
+  let u;
+  e[0] !== r ? (u = () => r ?? [], e[0] = r, e[1] = u) : u = e[1];
+  const [C, x] = S(u), [O, i] = S(!1), [y, F] = S("");
+  let f, d;
+  e[2] !== n ? (f = () => {
     const t = new AbortController();
-    return n.current?.addEventListener("focus", () => s(!0), {
+    return n.current?.addEventListener("focus", () => i(!0), {
       signal: t.signal
     }), () => {
       t.abort();
     };
-  }, [n]), d(() => {
-    const t = new AbortController(), r = (e) => {
-      e.key === "Escape" && (s(!1), n.current?.blur());
-    }, u = (e) => {
-      o.current?.contains(e.target) || s(!1);
+  }, d = [n], e[2] = n, e[3] = f, e[4] = d) : (f = e[3], d = e[4]), V(f, d);
+  let p, g;
+  e[5] !== n || e[6] !== o ? (p = () => {
+    const t = new AbortController(), c = (R) => {
+      R.key === "Escape" && (i(!1), n.current?.blur());
+    }, k = (R) => {
+      o.current?.contains(R.target) || i(!1);
     };
-    return document.addEventListener("keydown", r, {
+    return document.addEventListener("keydown", c, {
       signal: t.signal
-    }), document.addEventListener("mousedown", u, {
+    }), document.addEventListener("mousedown", k, {
       signal: t.signal
     }), () => {
       t.abort();
     };
-  }, [n, o]), d(() => {
+  }, g = [n, o], e[5] = n, e[6] = o, e[7] = p, e[8] = g) : (p = e[7], g = e[8]), V(p, g);
+  let m, h;
+  e[9] !== o ? (m = () => {
     const t = new AbortController();
-    return o.current?.addEventListener(
-      "focusout",
-      (r) => {
-        o.current?.contains(r.relatedTarget) || s(!1);
-      },
-      { signal: t.signal }
-    ), () => {
+    return o.current?.addEventListener("focusout", (c) => {
+      o.current?.contains(c.relatedTarget) || i(!1);
+    }, {
+      signal: t.signal
+    }), () => {
       t.abort();
     };
-  }, [o]);
-  const c = g(
-    (t) => {
-      if (t.length === 0)
-        m(l);
-      else {
-        const r = l.map(({ value: e }) => e), u = k(r, t).map(
-          (e) => ({ value: e })
-        );
-        m(u);
-      }
-    },
-    [l]
-  ), v = g(
-    (t) => {
-      b(t.target.value), c(t.target.value), a?.(t.target.value);
-    },
-    [c, a]
-  ), O = g(
-    (t) => {
-      b(t), c(t), a?.(t), s(!1);
-    },
-    [c, a]
-  );
-  return {
+  }, h = [o], e[9] = o, e[10] = m, e[11] = h) : (m = e[10], h = e[11]), V(m, h);
+  let w;
+  e[12] !== r ? (w = (t) => {
+    if (t.length === 0)
+      x(r);
+    else {
+      const c = r.map(P), k = K(c, t).map(T);
+      x(k);
+    }
+  }, e[12] = r, e[13] = w) : w = e[13];
+  const s = w;
+  let b;
+  e[14] !== s || e[15] !== l ? (b = (t) => {
+    F(t.target.value), s(t.target.value), l?.(t.target.value);
+  }, e[14] = s, e[15] = l, e[16] = b) : b = e[16];
+  const A = b;
+  let E;
+  e[17] !== s || e[18] !== l ? (E = (t) => {
+    F(t), s(t), l?.(t), i(!1);
+  }, e[17] = s, e[18] = l, e[19] = E) : E = e[19];
+  const L = E;
+  let v;
+  return e[20] !== A || e[21] !== L || e[22] !== n || e[23] !== C || e[24] !== O || e[25] !== y ? (v = {
     inputRef: n,
-    newOptions: f,
-    showOptions: h,
-    value: E,
-    handleChange: v,
-    handleSelectValue: O
-  };
+    newOptions: C,
+    showOptions: O,
+    value: y,
+    handleChange: A,
+    handleSelectValue: L
+  }, e[20] = A, e[21] = L, e[22] = n, e[23] = C, e[24] = O, e[25] = y, e[26] = v) : v = e[26], v;
 };
+function P(a) {
+  const {
+    value: e
+  } = a;
+  return e;
+}
+function T(a) {
+  return {
+    value: a
+  };
+}
 export {
-  A as useAutocomplete
+  z as useAutocomplete
 };

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

@@ -1,70 +1,76 @@
-import { useRef as b, useEffect as l } from "react";
-const w = ({
-  ulRef: t,
-  inputRef: o,
-  wrapperRef: u,
-  options: a
-}) => {
-  const r = b(0);
-  l(() => {
-    const e = t.current?.querySelectorAll("li") ?? [], c = new AbortController(), n = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, i = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, o.current?.focus());
+import { c as y } from "../../../compiler-runtime-DA41awpA.js";
+import { useRef as A, useEffect as d } from "react";
+const q = (w) => {
+  const e = y.c(18), {
+    ulRef: r,
+    inputRef: t,
+    wrapperRef: u,
+    options: c
+  } = w, n = A(0);
+  let i;
+  e[0] !== t || e[1] !== r ? (i = () => {
+    const o = r.current?.querySelectorAll("li") ?? [], s = new AbortController(), l = () => {
+      n.current < o.length - 1 ? (n.current = n.current + 1, o[n.current].focus()) : (n.current = 0, o[0].focus());
+    }, k = () => {
+      n.current > 0 ? (n.current = n.current - 1, o[n.current].focus()) : (n.current = 0, t.current?.focus());
     };
-    return t.current?.addEventListener(
-      "keydown",
-      (s) => {
-        switch (s.preventDefault(), s.key) {
-          case "ArrowDown": {
-            n();
-            break;
-          }
-          case "Tab": {
-            s.shiftKey ? i() : n();
-            break;
-          }
-          case "ArrowUp": {
-            r.current === 0 ? o.current?.focus() : i();
-            break;
-          }
-          case "Enter": {
-            e[r.current].querySelector("button")?.click();
-            break;
-          }
+    return r.current?.addEventListener("keydown", (g) => {
+      g.preventDefault();
+      e: switch (g.key) {
+        case "ArrowDown": {
+          l();
+          break e;
         }
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
-    };
-  }, [o, t, a, r]), l(() => {
-    const e = new AbortController();
-    return o.current?.addEventListener(
-      "keydown",
-      (c) => {
-        if (c.key === "ArrowDown") {
-          const n = t.current?.querySelector("li");
-          n && n.focus();
+        case "Tab": {
+          g.shiftKey ? k() : l();
+          break e;
+        }
+        case "ArrowUp": {
+          n.current === 0 ? t.current?.focus() : k();
+          break e;
         }
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
+        case "Enter":
+          o[n.current].querySelector("button")?.click();
+      }
+    }, {
+      signal: s.signal
+    }), () => {
+      s.abort();
+    };
+  }, e[0] = t, e[1] = r, e[2] = i) : i = e[2];
+  let f;
+  e[3] !== t || e[4] !== c || e[5] !== r ? (f = [t, r, c, n], e[3] = t, e[4] = c, e[5] = r, e[6] = f) : f = e[6], d(i, f);
+  let a;
+  e[7] !== t || e[8] !== r ? (a = () => {
+    const o = new AbortController();
+    return t.current?.addEventListener("keydown", (s) => {
+      if (s.key === "ArrowDown") {
+        const l = r.current?.querySelector("li");
+        l && l.focus();
+      }
+    }, {
+      signal: o.signal
+    }), () => {
+      o.abort();
     };
-  }, [o, t, a]), l(() => {
-    const e = new AbortController();
-    return u.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
+  }, e[7] = t, e[8] = r, e[9] = a) : a = e[9];
+  let b;
+  e[10] !== t || e[11] !== c || e[12] !== r ? (b = [t, r, c], e[10] = t, e[11] = c, e[12] = r, e[13] = b) : b = e[13], d(a, b);
+  let m, p;
+  e[14] !== r || e[15] !== u ? (m = () => {
+    const o = new AbortController();
+    return u.current?.addEventListener("mouseenter", () => {
+      (r.current?.querySelectorAll("li") ?? []).forEach(E);
+    }, {
+      signal: o.signal
+    }), () => {
+      o.abort();
     };
-  }, [t, u]);
+  }, p = [r, u], e[14] = r, e[15] = u, e[16] = m, e[17] = p) : (m = e[16], p = e[17]), d(m, p);
 };
+function E(w) {
+  return w.blur();
+}
 export {
-  w as useNavigationUlList
+  q as useNavigationUlList
 };