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

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

@@ -1,51 +1,48 @@
-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 { 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
+  )) });
 };
 export {
-  $ as List
+  y as List
 };

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

@@ -1,5 +1,33 @@
 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,92 +1,76 @@
-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 { 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(() => {
     const t = new AbortController();
-    return n.current?.addEventListener("focus", () => i(!0), {
+    return n.current?.addEventListener("focus", () => s(!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]), d(() => {
+    const t = new AbortController(), r = (e) => {
+      e.key === "Escape" && (s(!1), n.current?.blur());
+    }, u = (e) => {
+      o.current?.contains(e.target) || s(!1);
     };
-    return document.addEventListener("keydown", c, {
+    return document.addEventListener("keydown", r, {
       signal: t.signal
-    }), document.addEventListener("mousedown", k, {
+    }), document.addEventListener("mousedown", u, {
       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, o]), d(() => {
     const t = new AbortController();
-    return o.current?.addEventListener("focusout", (c) => {
-      o.current?.contains(c.relatedTarget) || i(!1);
-    }, {
-      signal: t.signal
-    }), () => {
+    return o.current?.addEventListener(
+      "focusout",
+      (r) => {
+        o.current?.contains(r.relatedTarget) || s(!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) {
+  }, [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 {
-    value: a
+    inputRef: n,
+    newOptions: f,
+    showOptions: h,
+    value: E,
+    handleChange: v,
+    handleSelectValue: O
   };
-}
+};
 export {
-  z as useAutocomplete
+  A as useAutocomplete
 };

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

@@ -1,76 +1,70 @@
-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 { 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());
     };
-    return r.current?.addEventListener("keydown", (g) => {
-      g.preventDefault();
-      e: switch (g.key) {
-        case "ArrowDown": {
-          l();
-          break e;
+    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;
+          }
         }
-        case "Tab": {
-          g.shiftKey ? k() : l();
-          break e;
-        }
-        case "ArrowUp": {
-          n.current === 0 ? t.current?.focus() : k();
-          break e;
-        }
-        case "Enter":
-          o[n.current].querySelector("button")?.click();
-      }
-    }, {
-      signal: s.signal
-    }), () => {
-      s.abort();
+      },
+      { signal: c.signal }
+    ), () => {
+      c.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, 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();
+        }
+      },
+      { 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();
+  }, [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();
     };
-  }, 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
+  w as useNavigationUlList
 };

package/dist/components/Badge/Badge.js

@@ -1,69 +1,80 @@
-import { jsxs as k, jsx as c } from "react/jsx-runtime";
-import { c as $ } from "../../compiler-runtime-DA41awpA.js";
-import { useRef as A, useState as B, useEffect as X } from "react";
-import { cn as z } from "../../utils/index.js";
-import { badgeVariants as q, buttonDismissVariants as F } from "./Badge.variants.js";
-import { S as L } from "../../index-BvoZGpli.js";
-import { X as G } from "../../x-B9bYxG31.js";
-import { LoaderIcon as H } from "../../assets/icons/components/Loader.js";
-const Y = (P) => {
-  const e = $.c(32), {
-    className: N,
-    dismissible: E,
-    isSelectable: R,
-    label: m,
-    leftIcon: d,
-    loading: j,
-    rightIcon: f,
-    size: s,
-    variant: i,
-    onClick: t,
-    onDismiss: y
-  } = P, S = E === void 0 ? !1 : E, x = R === void 0 ? !0 : R, l = j === void 0 ? !1 : j, b = A(null), [D, _] = B("visible");
-  let u;
-  e[0] !== y ? (u = (g) => {
-    g.stopPropagation(), y?.(), _("hidden");
-  }, e[0] = y, e[1] = u) : u = e[1];
-  const I = u;
-  let p, h;
-  e[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (p = () => {
-    const g = new AbortController();
-    return b.current?.addEventListener("animationend", () => {
-      b.current?.style.setProperty("display", "none"), b.current?.remove();
-    }, {
-      signal: g.signal
-    }), () => g.abort();
-  }, h = [], e[2] = p, e[3] = h) : (p = e[2], h = e[3]), X(p, h);
-  let o;
-  e[4] !== N || e[5] !== x || e[6] !== t || e[7] !== s || e[8] !== i ? (o = z(q({
-    variant: i,
-    size: s,
-    className: N
-  }), {
-    "select-none": !x,
-    "cursor-pointer": t
-  }), e[4] = N, e[5] = x, e[6] = t, e[7] = s, e[8] = i, e[9] = o) : o = e[9];
-  const w = t ? "button" : void 0, V = t ? 0 : void 0, C = t ? `${m} badge` : void 0;
-  let n;
-  e[10] !== l ? (n = l && /* @__PURE__ */ c(H, { size: 12, className: "animate-spin animate-duration-time-2" }), e[10] = l, e[11] = n) : n = e[11];
-  let a;
-  e[12] !== d ? (a = d ? /* @__PURE__ */ c(L, { className: "h-3 w-3", children: d }) : null, e[12] = d, e[13] = a) : a = e[13];
-  let r;
-  e[14] !== S || e[15] !== I || e[16] !== f || e[17] !== s || e[18] !== i ? (r = S ? /* @__PURE__ */ k("button", { type: "button", className: z(F({
-    size: s,
-    variant: i
-  })), onClick: I, "aria-label": "Dismiss", children: [
-    /* @__PURE__ */ c(G, { className: "h-full w-full" }),
-    /* @__PURE__ */ c("span", { className: "sr-only", children: "Dismiss" })
-  ] }) : f ? /* @__PURE__ */ c(L, { className: "h-3 w-3", children: f }) : null, e[14] = S, e[15] = I, e[16] = f, e[17] = s, e[18] = i, e[19] = r) : r = e[19];
-  let v;
-  return e[20] !== D || e[21] !== m || e[22] !== l || e[23] !== t || e[24] !== C || e[25] !== n || e[26] !== a || e[27] !== r || e[28] !== o || e[29] !== w || e[30] !== V ? (v = /* @__PURE__ */ k("span", { ref: b, className: o, role: w, onClick: t, tabIndex: V, "aria-label": C, "aria-busy": l, "aria-live": "polite", "data-state": D, children: [
-    n,
-    a,
-    m,
-    r
-  ] }), e[20] = D, e[21] = m, e[22] = l, e[23] = t, e[24] = C, e[25] = n, e[26] = a, e[27] = r, e[28] = o, e[29] = w, e[30] = V, e[31] = v) : v = e[31], v;
+import { jsxs as d, jsx as s } from "react/jsx-runtime";
+import { useRef as g, useState as w, useCallback as x, useEffect as V } from "react";
+import { cn as u } from "../../utils/index.js";
+import { buttonDismissVariants as D, badgeVariants as S } from "./Badge.variants.js";
+import { S as p } from "../../index-BvoZGpli.js";
+import { LoaderIcon as j } from "../../assets/icons/components/Loader.js";
+import { X as E } from "../../x-B9bYxG31.js";
+const $ = ({
+  className: b,
+  dismissible: f = !1,
+  isSelectable: h = !0,
+  label: r,
+  leftIcon: i,
+  loading: n = !1,
+  rightIcon: o,
+  size: l,
+  variant: m,
+  onClick: e,
+  onDismiss: c
+}) => {
+  const a = g(null), [N, v] = w("visible"), y = x(
+    (t) => {
+      t.stopPropagation(), c?.(), v("hidden");
+    },
+    [c]
+  );
+  return V(() => {
+    const t = new AbortController();
+    return a.current?.addEventListener(
+      "animationend",
+      () => {
+        a.current?.style.setProperty("display", "none"), a.current?.remove();
+      },
+      { signal: t.signal }
+    ), () => t.abort();
+  }, []), /* @__PURE__ */ d(
+    "span",
+    {
+      ref: a,
+      className: u(S({ variant: m, size: l, className: b }), {
+        "select-none": !h,
+        "cursor-pointer": e
+      }),
+      role: e ? "button" : void 0,
+      onClick: e,
+      tabIndex: e ? 0 : void 0,
+      "aria-label": e ? `${r} badge` : void 0,
+      "aria-busy": n,
+      "aria-live": "polite",
+      "data-state": N,
+      children: [
+        n && /* @__PURE__ */ s(
+          j,
+          {
+            size: 12,
+            className: "animate-spin animate-duration-time-2"
+          }
+        ),
+        i ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: i }) : null,
+        r,
+        f ? /* @__PURE__ */ d(
+          "button",
+          {
+            type: "button",
+            className: u(D({ size: l, variant: m })),
+            onClick: y,
+            "aria-label": "Dismiss",
+            children: [
+              /* @__PURE__ */ s(E, { className: "h-full w-full" }),
+              /* @__PURE__ */ s("span", { className: "sr-only", children: "Dismiss" })
+            ]
+          }
+        ) : o ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: o }) : null
+      ]
+    }
+  );
 };
 export {
-  Y as Badge
+  $ as Badge
 };