@konstructio/ui 0.0.12-alpha.9 → 0.0.13-alpha.1

package/dist/components/Alert/Alert.js

@@ -1,58 +1,53 @@
-import { jsx as o, jsxs as m } from "react/jsx-runtime";
-import { useRef as V, useState as v, useMemo as x, isValidElement as k, useCallback as w, useEffect as y } from "react";
-import { V as A } from "../../index-CbTU3cnP.js";
-import { cn as c } from "../../utils/index.js";
-import { closeButtonVariants as E, alertVariants as T } from "./Alert.variants.js";
-import { useTheme as g } from "../../contexts/theme.hook.js";
-import { X as j } from "../../x-DU-Zw-L_.js";
-const I = ({
-  theme: u,
-  type: s,
+import { jsx as l, jsxs as i } from "react/jsx-runtime";
+import { useRef as b, useState as C, useMemo as V, isValidElement as v, useCallback as k, useEffect as w } from "react";
+import { V as x } from "../../index-CWKdynYu.js";
+import { cn as m } from "../../utils/index.js";
+import { closeButtonVariants as y, alertVariants as A } from "./Alert.variants.js";
+import { X as E } from "../../x-DU-Zw-L_.js";
+const B = ({
+  theme: c,
+  type: o,
   content: t,
   isVisible: n = !0,
   showCloseButton: d = !1
 }) => {
-  const r = V(null), [p, f] = v(n), { theme: h } = g(), l = u ?? h, b = x(
-    () => k(t) ? t : /* @__PURE__ */ o("p", { children: t }),
+  const r = b(null), [u, p] = C(n), f = V(
+    () => v(t) ? t : /* @__PURE__ */ l("p", { children: t }),
     [t]
-  ), C = w(() => {
+  ), h = k(() => {
     const e = r.current;
     e && e.setAttribute("data-state", "hidden");
   }, []);
-  return y(() => {
-    var i;
+  return w(() => {
+    var s;
     const e = new AbortController();
-    return (i = r.current) == null || i.addEventListener(
+    return (s = r.current) == null || s.addEventListener(
       "animationend",
       () => {
         var a;
-        (a = r.current) == null || a.style.setProperty("display", "none"), f(!1);
+        (a = r.current) == null || a.style.setProperty("display", "none"), p(!1);
       },
       { signal: e.signal }
     ), () => e.abort();
-  }, []), p ? /* @__PURE__ */ m(
+  }, []), u ? /* @__PURE__ */ i(
     "div",
     {
       ref: r,
-      className: c(T({ theme: l, type: s, isVisible: n })),
+      className: m(A({ type: o, isVisible: n })),
       "data-state": n ? "visible" : "hidden",
+      "data-theme": c,
       role: "alert",
       "aria-live": "polite",
       children: [
-        b,
-        d ? /* @__PURE__ */ m("button", { role: "button", onClick: C, children: [
-          /* @__PURE__ */ o(
-            j,
-            {
-              className: c(E({ theme: l, type: s }))
-            }
-          ),
-          /* @__PURE__ */ o(A, { children: "Dismiss alert" })
+        f,
+        d ? /* @__PURE__ */ i("button", { role: "button", onClick: h, children: [
+          /* @__PURE__ */ l(E, { className: m(y({ type: o })) }),
+          /* @__PURE__ */ l(x, { children: "Dismiss alert" })
         ] }) : null
       ]
     }
   ) : null;
 };
 export {
-  I as Alert
+  B as Alert
 };

package/dist/components/Alert/Alert.variants.js

@@ -23,11 +23,6 @@ const a = t(
   ],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       type: {
         sucess: "",
         info: [
@@ -46,28 +41,27 @@ const a = t(
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       isVisible: !0
     }
   }
 ), s = t(
-  ["w-4", "h-4", "absolute", "right-2", "top-2", "text-inherit"],
+  [
+    "w-4",
+    "h-4",
+    "absolute",
+    "right-2",
+    "top-2",
+    "text-inherit",
+    "cursor-pointer"
+  ],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       type: {
         sucess: "",
         info: ["text-blue-600"],
         warning: "",
         danger: ""
       }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
     }
   }
 );

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,58 +1,71 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { R as C, A as b, P as y, O as N, C as O, T as A, D, a as T, b as v } from "../../index-DUA6Y_AE.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { R as u, A as b, P as y, O as N, C as O, T as A, D, a as v, b as j } from "../../index-AM3avohj.js";
+import { Button as n } from "../Button/Button.js";
 import { cn as l } from "../../utils/index.js";
-import { Button as r } from "../Button/Button.js";
-import { useAlertDialog as j } from "./hooks/useAlertDialog.js";
-import { useTheme as k } from "../../contexts/theme.hook.js";
-const z = ({
-  buttonCancelClassName: o,
-  buttonCancelText: i = "Cancel",
+import { useAlertDialog as k } from "./hooks/useAlertDialog.js";
+const B = ({
+  buttonTriggerClassName: i,
+  buttonCancelClassName: r,
+  buttonCancelText: o = "Cancel",
   buttonConfirmClassName: s,
   buttonConfirmText: c = "OK",
   buttonText: d,
   description: m,
-  theme: a,
-  title: h,
-  onConfirm: p
+  theme: t,
+  title: p,
+  onConfirm: f
 }) => {
-  const { theme: n } = k(), { isOpen: f, handleCancel: x, handleConfirm: g, handleOpen: u } = j({
-    onConfirm: p
+  const { isOpen: h, handleCancel: x, handleConfirm: g, handleOpen: C } = k({
+    onConfirm: f
   });
-  return /* @__PURE__ */ t(C, { open: f, children: [
-    /* @__PURE__ */ e(b, { text: d, theme: a, onOpen: u }),
-    /* @__PURE__ */ t(y, { children: [
-      /* @__PURE__ */ e(N, { className: "bg-black opacity-75 inset-0 fixed" }),
-      /* @__PURE__ */ t(O, { className: "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-6", children: [
-        /* @__PURE__ */ e(A, { className: "font-bold text-center text-2xl", children: h }),
-        /* @__PURE__ */ e(D, { children: m }),
-        /* @__PURE__ */ t("div", { className: "flex flex-row gap-5 justify-end", children: [
-          /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(
-            r,
-            {
-              type: "button",
-              theme: a ?? n,
-              variant: "secondary",
-              className: l(o),
-              onClick: x,
-              children: i
-            }
-          ) }),
-          /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-            r,
-            {
-              type: "button",
-              theme: a ?? n,
-              variant: "danger",
-              className: l(s),
-              onClick: g,
-              children: c
-            }
-          ) })
-        ] })
-      ] })
+  return /* @__PURE__ */ a(u, { open: h, children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        className: i,
+        text: d,
+        "data-theme": t,
+        onOpen: C
+      }
+    ),
+    /* @__PURE__ */ a(y, { children: [
+      /* @__PURE__ */ e(N, { className: "bg-black opacity-75 inset-0 fixed animate-in fade-in-0" }),
+      /* @__PURE__ */ a(
+        O,
+        {
+          "data-theme": t,
+          className: "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-6 animate-in fade-in-0 zoom-in-85",
+          children: [
+            /* @__PURE__ */ e(A, { className: "font-bold text-center text-2xl", children: p }),
+            /* @__PURE__ */ e(D, { children: m }),
+            /* @__PURE__ */ a("div", { className: "flex flex-row gap-5 justify-end", children: [
+              /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
+                n,
+                {
+                  type: "button",
+                  variant: "secondary",
+                  className: l(r),
+                  onClick: x,
+                  children: o
+                }
+              ) }),
+              /* @__PURE__ */ e(j, { asChild: !0, children: /* @__PURE__ */ e(
+                n,
+                {
+                  type: "button",
+                  variant: "danger",
+                  className: l(s),
+                  onClick: g,
+                  children: c
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
     ] })
   ] });
 };
 export {
-  z as AlertDialog
+  B as AlertDialog
 };

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

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
-import { A as p } from "../../../index-DUA6Y_AE.js";
+import { A as p } from "../../../index-AM3avohj.js";
 import "../../Button/Button.js";
-import "../../../contexts/theme.hook.js";
+import "../../../utils/index.js";
 export {
   p as AlertDialogTrigger
 };

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

@@ -1,4 +1,4 @@
-import { A as g } from "../../../index-DUA6Y_AE.js";
+import { A as g } from "../../../index-AM3avohj.js";
 export {
   g as AlertDialogTrigger
 };

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,88 +1,92 @@
-import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { forwardRef as A, useRef as i, useId as O, useImperativeHandle as T } from "react";
+import { jsxs as v, jsx as l } from "react/jsx-runtime";
+import { forwardRef as C, useRef as i, useId as R, useImperativeHandle as A } from "react";
 import { cn as p } from "../../utils/index.js";
-import { labelVariants as V, autocompleteVariants as g } from "./Autocomplete.variants.js";
-import { useAutocomplete as j } from "./hooks/useAutocomplete.js";
-import { List as y } from "./components/List/List.js";
-import { useTheme as I } from "../../contexts/theme.hook.js";
-const k = A(
+import { labelVariants as O, autocompleteVariants as V } from "./Autocomplete.variants.js";
+import { useAutocomplete as g } from "./hooks/useAutocomplete.js";
+import { List as j } from "./components/List/List.js";
+const y = C(
   ({
-    autoComplete: u = "off",
+    autoComplete: c = "off",
     className: a,
     label: n,
     labelClassName: d,
-    name: l,
-    options: f,
+    name: t,
+    options: u,
+    placeholder: f,
     placeHolderEmptyValues: h = "No values...",
-    placeHolderEmptyValuesClassName: x,
-    placeholder: w,
-    theme: N,
+    placeHolderEmptyValuesClassName: w,
+    theme: x,
     variant: r,
-    onChange: b
-  }, v) => {
-    const s = i(null), o = i(null), c = O(), { theme: C } = I(), m = N ?? C;
-    T(v, () => o.current, [o]);
-    const e = j({
-      options: f,
+    onChange: N
+  }, b) => {
+    const s = i(null), o = i(null), m = R();
+    A(b, () => o.current, [o]);
+    const e = g({
+      options: u,
       inputRef: o,
       wrapperRef: s,
-      onChange: b
+      onChange: N
     });
-    return /* @__PURE__ */ R("div", { ref: s, className: "relative flex flex-col", children: [
-      n ? /* @__PURE__ */ t(
-        "label",
-        {
-          htmlFor: l ?? c,
-          className: p(
-            V({
-              theme: m,
-              variant: r,
-              className: d
-            })
+    return /* @__PURE__ */ v(
+      "div",
+      {
+        ref: s,
+        className: "relative flex flex-col",
+        "data-theme": x,
+        children: [
+          n ? /* @__PURE__ */ l(
+            "label",
+            {
+              htmlFor: t ?? m,
+              className: p(
+                O({
+                  variant: r,
+                  className: d
+                })
+              ),
+              children: n
+            }
+          ) : null,
+          /* @__PURE__ */ l(
+            "input",
+            {
+              ref: o,
+              id: t ?? m,
+              type: "text",
+              name: t,
+              role: "combobox",
+              autoComplete: c,
+              className: p(
+                V({
+                  variant: r,
+                  className: a
+                })
+              ),
+              onChange: e.handleChange,
+              value: e.value,
+              placeholder: f,
+              "aria-expanded": e.showOptions ? "true" : "false"
+            }
           ),
-          children: n
-        }
-      ) : null,
-      /* @__PURE__ */ t(
-        "input",
-        {
-          ref: o,
-          id: l ?? c,
-          type: "text",
-          name: l,
-          role: "combobox",
-          autoComplete: u,
-          className: p(
-            g({
-              theme: m,
+          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: a,
+              inputRef: o,
+              wrapperRef: s,
+              options: e.newOptions,
+              placeholder: h,
+              placeholderClassName: w,
               variant: r,
-              className: a
-            })
-          ),
-          onChange: e.handleChange,
-          value: e.value,
-          placeholder: w,
-          "aria-expanded": e.showOptions ? "true" : "false"
-        }
-      ),
-      e.showOptions && /* @__PURE__ */ t("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm", children: /* @__PURE__ */ t(
-        y,
-        {
-          className: a,
-          inputRef: o,
-          wrapperRef: s,
-          options: e.newOptions,
-          placeholder: h,
-          placeholderClassName: x,
-          variant: r,
-          theme: m,
-          onClick: e.handleSelectValue
-        }
-      ) })
-    ] });
+              onClick: e.handleSelectValue
+            }
+          ) })
+        ]
+      }
+    );
   }
 );
-k.displayName = "Autocomplete";
+y.displayName = "Autocomplete";
 export {
-  k as Autocomplete
+  y as Autocomplete
 };

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

@@ -1,5 +1,5 @@
-import { c as e } from "../../index-BNmRGtA6.js";
-const r = e(
+import { c as a } from "../../index-BNmRGtA6.js";
+const t = a(
   [
     "flex",
     "w-full",
@@ -15,46 +15,37 @@ const r = e(
     "focus-visible:ring-ring",
     "disabled:cursor-not-allowed",
     "disabled:opacity-50",
-    "shadow-sm",
+    "shadow-2xs",
     "py-1",
-    "px-2"
+    "px-2",
+    "focus:ring-kubefirst-primary",
+    "colony:focus:focus:ring-red-400",
+    "civo:focus:focus:ring-blue-400"
   ],
   {
     variants: {
       variant: {
         default: ""
-      },
-      theme: {
-        kubefirst: ["focus:ring-kubefirst-primary"],
-        colony: ["focus:focus:ring-red-400"],
-        civo: ""
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       variant: "default"
     }
   }
-), a = e(
+), o = a(
   ["pl-1", "mb-2", "text-base", "cursor-pointer"],
   {
     variants: {
       variant: {
         default: ""
-      },
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
       }
     },
     defaultVariants: {
-      variant: "default",
-      theme: "kubefirst"
+      variant: "default"
     }
   }
 );
 export {
-  r as autocompleteVariants,
-  a as labelVariants
+  t as autocompleteVariants,
+  o as labelVariants
 };

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

@@ -1,60 +1,58 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as u } from "react";
-import { cn as l } from "../../../../utils/index.js";
-import { emptyListVariants as b, buttonVariants as N, listItemVariants as d, listVariants as x } from "./List.variants.js";
-import { useNavigationUlList as V } from "../../hooks/useNavigationList.js";
-const R = ({
-  className: e,
-  inputRef: a,
-  options: o,
+import { jsx as r } from "react/jsx-runtime";
+import { useRef as p } from "react";
+import { cn as s } from "../../../../utils/index.js";
+import { emptyListVariants as u, buttonVariants as b, listItemVariants as N, listVariants as d } from "./List.variants.js";
+import { useNavigationUlList as h } from "../../hooks/useNavigationList.js";
+const I = ({
+  className: i,
+  inputRef: n,
+  options: e,
   placeholder: m,
-  placeholderClassName: c,
+  placeholderClassName: a,
   variant: t,
-  theme: r,
-  wrapperRef: f,
-  onClick: p
+  wrapperRef: c,
+  onClick: f
 }) => {
-  const n = u(null);
-  return V({ ulRef: n, inputRef: a, wrapperRef: f, options: o }), o.length === 0 ? /* @__PURE__ */ s(
+  const o = p(null);
+  return h({ ulRef: o, inputRef: n, wrapperRef: c, options: e }), e.length === 0 ? /* @__PURE__ */ r(
     "span",
     {
-      className: l(
-        b({
-          theme: r,
+      className: s(
+        u({
           variant: t,
-          className: c
+          className: a
         })
       ),
       children: m
     }
-  ) : /* @__PURE__ */ s(
+  ) : /* @__PURE__ */ r(
     "ul",
     {
-      ref: n,
+      ref: o,
       role: "listbox",
-      className: l(x({ variant: t, theme: r, className: e })),
-      children: o.map(({ value: i }) => /* @__PURE__ */ s(
+      className: s(d({ variant: t, className: i })),
+      children: e.map(({ value: l }) => /* @__PURE__ */ r(
         "li",
         {
           role: "option",
           tabIndex: 0,
-          className: l(d({ theme: r, variant: t })),
-          children: /* @__PURE__ */ s(
+          className: s(N({ variant: t })),
+          children: /* @__PURE__ */ r(
             "button",
             {
               type: "button",
               role: "button",
-              className: l(N({ theme: r, variant: t })),
-              onClick: () => p(i),
-              children: i
+              className: s(b({ variant: t })),
+              onClick: () => f(l),
+              children: l
             }
           )
         },
-        i
+        l
       ))
     }
   );
 };
 export {
-  R as List
+  I as List
 };