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

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,84 +1,60 @@
-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,
+"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,
-    placeholder: f,
-    placeHolderEmptyValues: h = "No values...",
-    placeHolderEmptyValuesClassName: v,
-    theme: w,
+    inputRef: o,
+    wrapperRef: r,
     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
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
+  });
+  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
+        })
+      })
+    ]
+  });
+});
 y.displayName = "Autocomplete";
 export {
   y as Autocomplete

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

@@ -1,5 +1,5 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const e = r([
+import { t as r } from "../../dist-DtEbXv47.js";
+var e = r([
   "flex",
   "w-full",
   "rounded-md",
@@ -19,7 +19,11 @@ const e = r([
   "px-2",
   "focus:ring-aurora-500",
   "kubefirst:focus:ring-kubefirst-primary"
-]), i = r(["pl-1", "text-base", "cursor-pointer"]);
+]), i = r([
+  "pl-1",
+  "text-base",
+  "cursor-pointer"
+]);
 export {
   e as autocompleteVariants,
   i as labelVariants

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

@@ -1,47 +1,35 @@
-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",
-    {
+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: r(b()),
-      children: /* @__PURE__ */ t(
-        "button",
-        {
-          type: "button",
-          role: "button",
-          className: r(u()),
-          onClick: () => c(e),
-          children: e
-        }
-      )
-    },
-    e
-  )) });
+      className: t(b()),
+      children: /* @__PURE__ */ r("button", {
+        type: "button",
+        role: "button",
+        className: t(p()),
+        onClick: () => c(a),
+        children: a
+      })
+    }, a))
+  });
 };
 export {
   y as List

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

@@ -1,15 +1,15 @@
-import { c as r } from "../../../../index-D29mdTf5.js";
-const o = r([
+import { t as r } from "../../../../dist-DtEbXv47.js";
+var t = r([
   "max-h-[250px]",
   "overflow-y-auto",
   "bg-white"
-]), e = r([
+]), o = r([
   "p-1",
   "text-center",
   "w-full",
   "block",
   "bg-white"
-]), s = r([
+]), a = r([
   "focus-visible:outline-none",
   "kubefirst:focus:bg-purple-100",
   "kubefirst:hover:bg-purple-100",
@@ -30,7 +30,7 @@ const o = r([
 ]);
 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,76 +1,45 @@
-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 { 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", () => s(!0), {
-      signal: t.signal
-    }), () => {
+    return n.current?.addEventListener("focus", () => l(!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);
+  }, [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", r, {
-      signal: t.signal
-    }), document.addEventListener("mousedown", u, {
-      signal: t.signal
-    }), () => {
+    return document.addEventListener("keydown", e, { signal: t.signal }), document.addEventListener("mousedown", E, { signal: t.signal }), () => {
       t.abort();
     };
-  }, [n, o]), d(() => {
+  }, [n, r]), i(() => {
     const t = new AbortController();
-    return o.current?.addEventListener(
-      "focusout",
-      (r) => {
-        o.current?.contains(r.relatedTarget) || s(!1);
-      },
-      { signal: t.signal }
-    ), () => {
+    return r.current?.addEventListener("focusout", (e) => {
+      r.current?.contains(e.relatedTarget) || l(!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]
-  );
+  }, [r]);
+  const a = u((t) => {
+    t.length === 0 ? g(s) : g(O(s.map(({ value: e }) => e), t).map((e) => ({ value: e })));
+  }, [s]);
   return {
     inputRef: n,
-    newOptions: f,
-    showOptions: h,
-    value: E,
-    handleChange: v,
-    handleSelectValue: O
+    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 {
-  A as useAutocomplete
+  w as useAutocomplete
 };

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

@@ -1,70 +1,58 @@
-import { useRef as b, useEffect as l } from "react";
-const w = ({
-  ulRef: t,
-  inputRef: o,
-  wrapperRef: u,
-  options: a
-}) => {
+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") ?? [], c = new AbortController(), n = () => {
+    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, o.current?.focus());
+      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, c.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;
-          }
-        }
-      },
-      { signal: c.signal }
-    ), () => {
-      c.abort();
+    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":
+          e[r.current].querySelector("button")?.click();
+          break;
+      }
+    }, { signal: n.signal }), () => {
+      n.abort();
     };
-  }, [o, t, a, r]), l(() => {
+  }, [
+    c,
+    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 }
-    ), () => {
+    return c.current?.addEventListener("keydown", (n) => {
+      if (n.key === "ArrowDown") {
+        const o = t.current?.querySelector("li");
+        o && o.focus();
+      }
+    }, { signal: e.signal }), () => {
       e.abort();
     };
-  }, [o, t, a]), l(() => {
+  }, [
+    c,
+    t,
+    a
+  ]), l(() => {
     const e = new AbortController();
-    return u.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
-      },
-      { signal: e.signal }
-    ), () => {
+    return u.current?.addEventListener("mouseenter", () => {
+      (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
+    }, { signal: e.signal }), () => {
       e.abort();
     };
   }, [t, u]);
 };
 export {
-  w as useNavigationUlList
+  k as useNavigationUlList
 };

package/dist/components/Badge/Badge.js

@@ -1,79 +1,64 @@
-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(() => {
+import { t as u } from "../../dist-DXJSck4j.js";
+import { t as c } from "../../utils-DHuiYnx1.js";
+import { LoaderIcon as g } from "../../assets/icons/components/Loader.js";
+import { t as w } from "../../x-a0ouxoIM.js";
+import { badgeVariants as x, buttonDismissVariants as V } from "./Badge.variants.js";
+import { useCallback as D, useEffect as j, useRef as E, useState as L } from "react";
+import { jsx as s, jsxs as p } from "react/jsx-runtime";
+var $ = ({ className: b, dismissible: f = !1, isSelectable: h = !0, label: r, leftIcon: i, loading: n = !1, rightIcon: o, size: l, variant: m, onClick: e, onDismiss: d }) => {
+  const a = E(null), [v, N] = L("visible"), y = D((t) => {
+    t.stopPropagation(), d?.(), N("hidden");
+  }, [d]);
+  return j(() => {
     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
+    return a.current?.addEventListener("animationend", () => {
+      a.current?.style.setProperty("display", "none"), a.current?.remove();
+    }, { signal: t.signal }), () => t.abort();
+  }, []), /* @__PURE__ */ p("span", {
+    ref: a,
+    className: c(x({
+      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": v,
+    children: [
+      n && /* @__PURE__ */ s(g, {
+        size: 12,
+        className: "animate-spin animate-duration-time-2"
       }),
-      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
-      ]
-    }
-  );
+      i ? /* @__PURE__ */ s(u, {
+        className: "h-3 w-3",
+        children: i
+      }) : null,
+      r,
+      f ? /* @__PURE__ */ p("button", {
+        type: "button",
+        className: c(V({
+          size: l,
+          variant: m
+        })),
+        onClick: y,
+        "aria-label": "Dismiss",
+        children: [/* @__PURE__ */ s(w, { className: "h-full w-full" }), /* @__PURE__ */ s("span", {
+          className: "sr-only",
+          children: "Dismiss"
+        })]
+      }) : o ? /* @__PURE__ */ s(u, {
+        className: "h-3 w-3",
+        children: o
+      }) : null
+    ]
+  });
 };
 export {
   $ as Badge