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

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,57 +1,61 @@
-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;
+"use client";
+import { t as s } from "../../utils-DHuiYnx1.js";
+import { autocompleteVariants as b, labelVariants as C } from "./Autocomplete.variants.js";
+import { useAutocomplete as R } from "./hooks/useAutocomplete.js";
+import { List as g } from "./components/List/List.js";
+import { forwardRef as A, useId as O, useImperativeHandle as V, useRef as d } from "react";
+import { jsx as l, jsxs as j } from "react/jsx-runtime";
+var y = A(({ autoComplete: m = "off", className: i, label: t, labelClassName: c, labelWrapperClassName: p, name: a, options: u, placeholder: f, placeHolderEmptyValues: h = "No values...", placeHolderEmptyValuesClassName: v, theme: w, onChange: x }, N) => {
+  const r = d(null), o = d(null), n = O();
+  V(N, () => o.current, [o]);
+  const e = R({
+    options: u,
+    inputRef: o,
+    wrapperRef: r,
+    onChange: x
+  });
+  return /* @__PURE__ */ j("div", {
+    ref: r,
+    className: "relative flex flex-col gap-2",
+    "data-theme": w,
+    children: [
+      t ? /* @__PURE__ */ l("div", {
+        className: s(p),
+        children: /* @__PURE__ */ l("label", {
+          htmlFor: a ?? n,
+          className: s(C({ className: c })),
+          children: t
+        })
+      }) : null,
+      /* @__PURE__ */ l("input", {
+        ref: o,
+        id: t ? a ?? n : void 0,
+        type: "text",
+        name: a,
+        role: "combobox",
+        autoComplete: m,
+        className: s(b({ className: i })),
+        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(g, {
+          className: i,
+          inputRef: o,
+          wrapperRef: r,
+          options: e.newOptions,
+          placeholder: h,
+          placeholderClassName: v,
+          onClick: e.handleSelectValue
+        })
+      })
+    ]
+  });
 });
-G.displayName = "Autocomplete";
+y.displayName = "Autocomplete";
 export {
-  G as Autocomplete
+  y as Autocomplete
 };

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

@@ -1,5 +1,29 @@
-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"]);
+import { t as r } from "../../dist-DtEbXv47.js";
+var 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,51 +1,36 @@
-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;
+import { t } from "../../../../utils-DHuiYnx1.js";
+import { useNavigationUlList as f } from "../../hooks/useNavigationList.js";
+import { buttonVariants as p, emptyListVariants as u, listItemVariants as b, listVariants as N } from "./List.variants.js";
+import { useRef as d } from "react";
+import { jsx as r } from "react/jsx-runtime";
+var y = ({ className: i, inputRef: l, options: s, placeholder: n, placeholderClassName: o, wrapperRef: m, onClick: c }) => {
+  const e = d(null);
+  return f({
+    ulRef: e,
+    inputRef: l,
+    wrapperRef: m,
+    options: s
+  }), s.length === 0 ? /* @__PURE__ */ r("span", {
+    className: t(u({ className: o })),
+    children: n
+  }) : /* @__PURE__ */ r("ul", {
+    ref: e,
+    role: "listbox",
+    className: t(N({ className: i })),
+    children: s.map(({ value: a }) => /* @__PURE__ */ r("li", {
+      role: "option",
+      tabIndex: 0,
+      className: t(b()),
+      children: /* @__PURE__ */ r("button", {
+        type: "button",
+        role: "button",
+        className: t(p()),
+        onClick: () => c(a),
+        children: a
+      })
+    }, a))
+  });
 };
 export {
-  $ as List
+  y as List
 };

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

@@ -1,8 +1,36 @@
-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"]);
+import { t as r } from "../../../../dist-DtEbXv47.js";
+var t = r([
+  "max-h-[250px]",
+  "overflow-y-auto",
+  "bg-white"
+]), o = r([
+  "p-1",
+  "text-center",
+  "w-full",
+  "block",
+  "bg-white"
+]), a = 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,
-  s as listItemVariants,
-  o as listVariants
+  o as emptyListVariants,
+  a as listItemVariants,
+  t as listVariants
 };

package/dist/components/Autocomplete/components/index.js

@@ -1,4 +1,4 @@
-import { List as t } from "./List/List.js";
+import { List as r } from "./List/List.js";
 export {
-  t as List
+  r as List
 };

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

@@ -1,92 +1,45 @@
-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 = () => {
+import { n as O } from "../../../utils-DHuiYnx1.js";
+import { useCallback as u, useEffect as i, useState as d } from "react";
+var w = ({ options: s, inputRef: n, wrapperRef: r, onChange: o }) => {
+  const [b, g] = d(() => s ?? []), [f, l] = d(!1), [h, m] = d("");
+  i(() => {
     const t = new AbortController();
-    return n.current?.addEventListener("focus", () => i(!0), {
-      signal: t.signal
-    }), () => {
+    return n.current?.addEventListener("focus", () => l(!0), { signal: t.signal }), () => {
       t.abort();
     };
-  }, 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);
+  }, [n]), i(() => {
+    const t = new AbortController(), e = (c) => {
+      c.key === "Escape" && (l(!1), n.current?.blur());
+    }, E = (c) => {
+      r.current?.contains(c.target) || l(!1);
     };
-    return document.addEventListener("keydown", c, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", k, {
-      signal: t.signal
-    }), () => {
+    return document.addEventListener("keydown", e, { signal: t.signal }), document.addEventListener("mousedown", E, { signal: t.signal }), () => {
       t.abort();
     };
-  }, 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 = () => {
+  }, [n, r]), i(() => {
     const t = new AbortController();
-    return o.current?.addEventListener("focusout", (c) => {
-      o.current?.contains(c.relatedTarget) || i(!1);
-    }, {
-      signal: t.signal
-    }), () => {
+    return r.current?.addEventListener("focusout", (e) => {
+      r.current?.contains(e.relatedTarget) || l(!1);
+    }, { signal: t.signal }), () => {
       t.abort();
     };
-  }, 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: 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) {
+  }, [r]);
+  const a = u((t) => {
+    t.length === 0 ? g(s) : g(O(s.map(({ value: e }) => e), t).map((e) => ({ value: e })));
+  }, [s]);
   return {
-    value: a
+    inputRef: n,
+    newOptions: b,
+    showOptions: f,
+    value: h,
+    handleChange: u((t) => {
+      m(t.target.value), a(t.target.value), o?.(t.target.value);
+    }, [a, o]),
+    handleSelectValue: u((t) => {
+      m(t), a(t), o?.(t), l(!1);
+    }, [a, o])
   };
-}
+};
 export {
-  z as useAutocomplete
+  w as useAutocomplete
 };

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

@@ -1,76 +1,58 @@
-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());
+import { useEffect as l, useRef as b } from "react";
+var k = ({ ulRef: t, inputRef: c, wrapperRef: u, options: a }) => {
+  const r = b(0);
+  l(() => {
+    const e = t.current?.querySelectorAll("li") ?? [], n = new AbortController(), o = () => {
+      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, c.current?.focus());
     };
-    return r.current?.addEventListener("keydown", (g) => {
-      g.preventDefault();
-      e: switch (g.key) {
-        case "ArrowDown": {
-          l();
-          break e;
-        }
-        case "Tab": {
-          g.shiftKey ? k() : l();
-          break e;
-        }
-        case "ArrowUp": {
-          n.current === 0 ? t.current?.focus() : k();
-          break e;
-        }
+    return t.current?.addEventListener("keydown", (s) => {
+      switch (s.preventDefault(), s.key) {
+        case "ArrowDown":
+          o();
+          break;
+        case "Tab":
+          s.shiftKey ? i() : o();
+          break;
+        case "ArrowUp":
+          r.current === 0 ? c.current?.focus() : i();
+          break;
         case "Enter":
-          o[n.current].querySelector("button")?.click();
+          e[r.current].querySelector("button")?.click();
+          break;
       }
-    }, {
-      signal: s.signal
-    }), () => {
-      s.abort();
+    }, { signal: n.signal }), () => {
+      n.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();
+  }, [
+    c,
+    t,
+    a,
+    r
+  ]), l(() => {
+    const e = new AbortController();
+    return c.current?.addEventListener("keydown", (n) => {
+      if (n.key === "ArrowDown") {
+        const o = t.current?.querySelector("li");
+        o && o.focus();
       }
-    }, {
-      signal: o.signal
-    }), () => {
-      o.abort();
+    }, { 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();
+  }, [
+    c,
+    t,
+    a
+  ]), l(() => {
+    const e = new AbortController();
     return u.current?.addEventListener("mouseenter", () => {
-      (r.current?.querySelectorAll("li") ?? []).forEach(E);
-    }, {
-      signal: o.signal
-    }), () => {
-      o.abort();
+      (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
+    }, { signal: e.signal }), () => {
+      e.abort();
     };
-  }, p = [r, u], e[14] = r, e[15] = u, e[16] = m, e[17] = p) : (m = e[16], p = e[17]), d(m, p);
+  }, [t, u]);
 };
-function E(w) {
-  return w.blur();
-}
 export {
-  q as useNavigationUlList
+  k as useNavigationUlList
 };