@konstructio/ui 0.1.2-alpha.1 → 0.1.2-alpha.101

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,85 +1,74 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { R as A, A as D, P as v, O as j, C as k, T, D as w, a as P, b as R } from "../../index-Oq5GlCHP.js";
-import { Button as l } from "../Button/Button.js";
-import { cn as t } from "../../utils/index.js";
-import { useAlertDialog as z } from "./hooks/useAlertDialog.js";
-const G = ({
-  buttonCancel: {
-    className: s,
-    text: i = "Cancel",
-    ...r
-  } = {},
-  buttonConfirm: {
-    className: o,
-    text: c = "OK",
-    ...m
-  } = {},
-  buttonTriggerClassName: d,
-  buttonTriggerText: p,
-  description: f,
-  showCancelButton: h = !0,
-  theme: n,
-  title: x,
-  wrapperClassName: u,
-  onConfirm: C,
-  ...b
-}) => {
-  const { isOpen: N, handleCancel: g, handleConfirm: y, handleOpen: O } = z({
-    onConfirm: C
+"use client";
+import { t as n } from "../../utils-Cx-WzRZF.js";
+import { a as T, c as z, i as B, l as E, n as P, o as S, r as q, s as F, t as G } from "../../AlertDialogTrigger-HhbFOOUE.js";
+import { Button as i } from "../Button/Button.js";
+import { useAlertDialog as H } from "./hooks/useAlertDialog.js";
+import { useEffect as I, useRef as J, useState as L } from "react";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+var M = ({ buttonCancel: { className: o, text: c = "Cancel", ...d } = {}, buttonConfirm: { className: m, text: f = "OK", ...p } = {}, buttonTriggerClassName: u, buttonTriggerText: h, buttonTriggerVariant: x, description: b, isDescriptionChild: C, isTitleChild: g, showCancelButton: N = !0, theme: a, title: y, wrapperClassName: k, onClick: v, onConfirm: A, ...l }) => {
+  const r = J(null), [D, O] = L(null), { isOpen: j, handleCancel: R, handleConfirm: w, handleOpen: K } = H({ onConfirm: A });
+  return I(() => {
+    if (!r.current || a) return;
+    const s = r.current.closest("[data-theme]");
+    s && O(s);
+  }, []), /* @__PURE__ */ t(z, {
+    open: j,
+    ...l,
+    children: [/* @__PURE__ */ e(G, {
+      ref: r,
+      className: u,
+      variant: x,
+      text: h,
+      "data-theme": a,
+      onOpen: K,
+      onClick: v,
+      ...l
+    }), /* @__PURE__ */ t(F, {
+      container: D,
+      children: [/* @__PURE__ */ e(S, { className: "bg-black opacity-70 dark:opacity-85 inset-0 fixed animate-in fade-in-0" }), /* @__PURE__ */ t(B, {
+        "data-theme": a,
+        className: n("bg-white", "rounded-md", "fixed", "top-1/2", "left-1/2", "-translate-y-2/4", "-translate-x-2/4", "flex", "flex-col", "gap-6", "p-8", "animate-in", "fade-in-0", "zoom-in-85", "border", "border-transparent", "dark:bg-metal-800", "dark:border-metal-700", "dark:border-slate-700", k),
+        children: [
+          /* @__PURE__ */ e(E, {
+            asChild: g,
+            className: "text-base text-slate-700 font-semibold",
+            children: y
+          }),
+          /* @__PURE__ */ e(T, {
+            asChild: C,
+            className: "text-sm text-slate-800",
+            children: b
+          }),
+          /* @__PURE__ */ t("div", {
+            className: "flex flex-row gap-2 justify-end",
+            children: [N && /* @__PURE__ */ e(q, {
+              asChild: !0,
+              children: /* @__PURE__ */ e(i, {
+                type: "button",
+                variant: "secondary",
+                className: n(o),
+                onClick: R,
+                ...d,
+                children: c
+              })
+            }), /* @__PURE__ */ e(P, {
+              asChild: !0,
+              children: /* @__PURE__ */ e(i, {
+                type: "button",
+                variant: "primary",
+                className: n(m),
+                onClick: w,
+                ...p,
+                children: f
+              })
+            })]
+          })
+        ]
+      })]
+    })]
   });
-  return /* @__PURE__ */ a(A, { open: N, ...b, children: [
-    /* @__PURE__ */ e(
-      D,
-      {
-        className: d,
-        text: p,
-        "data-theme": n,
-        onOpen: O
-      }
-    ),
-    /* @__PURE__ */ a(v, { children: [
-      /* @__PURE__ */ e(j, { className: "bg-black opacity-70 inset-0 fixed animate-in fade-in-0" }),
-      /* @__PURE__ */ a(
-        k,
-        {
-          "data-theme": n,
-          className: t(
-            "bg-white rounded-md fixed top-1/2 left-1/2 -translate-y-2/4 -translate-x-2/4 flex flex-col gap-8 p-8 animate-in fade-in-0 zoom-in-85",
-            u
-          ),
-          children: [
-            /* @__PURE__ */ e(T, { className: "text-base text-slate-700 font-semibold", children: x }),
-            /* @__PURE__ */ e(w, { className: "text-sm text-slate-800", children: f }),
-            /* @__PURE__ */ a("div", { className: "flex flex-row gap-5 justify-end", children: [
-              h && /* @__PURE__ */ e(P, { asChild: !0, children: /* @__PURE__ */ e(
-                l,
-                {
-                  type: "button",
-                  variant: "secondary",
-                  className: t(s),
-                  onClick: g,
-                  ...r,
-                  children: i
-                }
-              ) }),
-              /* @__PURE__ */ e(R, { asChild: !0, children: /* @__PURE__ */ e(
-                l,
-                {
-                  type: "button",
-                  variant: "primary",
-                  className: t(o),
-                  onClick: y,
-                  ...m,
-                  children: c
-                }
-              ) })
-            ] })
-          ]
-        }
-      )
-    ] })
-  ] });
 };
+M.displayName = "KonstructAlertDialog";
 export {
-  G as AlertDialog
+  M as AlertDialog
 };

package/dist/components/AlertDialog/components/AlertDialogTrigger.js

@@ -1,7 +1,4 @@
-import "react/jsx-runtime";
-import { A as p } from "../../../index-Oq5GlCHP.js";
-import "../../Button/Button.js";
-import "../../../utils/index.js";
+import { t as o } from "../../../AlertDialogTrigger-HhbFOOUE.js";
 export {
-  p as AlertDialogTrigger
+  o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/components/index.js

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-Oq5GlCHP.js";
+import { t as o } from "../../../AlertDialogTrigger-HhbFOOUE.js";
 export {
-  g as AlertDialogTrigger
+  o as AlertDialogTrigger
 };

package/dist/components/AlertDialog/hooks/useAlertDialog.js

@@ -1,10 +1,15 @@
-import { useState as c, useCallback as s } from "react";
-const p = ({ onConfirm: t }) => {
-  const [n, e] = c(!1), a = s(() => e(!0), []), l = s(() => e(!1), []), o = s(() => {
-    t?.(), e(!1);
-  }, [t]);
-  return { isOpen: n, handleCancel: l, handleConfirm: o, handleOpen: a };
+import { useCallback as a, useState as n } from "react";
+var o = ({ onConfirm: l }) => {
+  const [s, e] = n(!1), t = a(() => e(!0), []);
+  return {
+    isOpen: s,
+    handleCancel: a(() => e(!1), []),
+    handleConfirm: a(() => {
+      l?.(), e(!1);
+    }, [l]),
+    handleOpen: t
+  };
 };
 export {
-  p as useAlertDialog
+  o as useAlertDialog
 };

package/dist/components/Autocomplete/Autocomplete.js

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

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