@konstructio/ui 0.0.12 → 0.0.13-alpha.2

package/dist/{chevron-up-CvquEaNg.js → chevron-up-DgLBQCKD.js}

@@ -1,5 +1,5 @@
 import l, { forwardRef as c } from "react";
-import { P as a } from "./index-D68N8v8R.js";
+import { P as a } from "./index-C5psggHV.js";
 function p() {
   return p = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {

package/dist/components/Alert/Alert.js

@@ -0,0 +1,53 @@
+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 = b(null), [u, p] = C(n), f = V(
+    () => v(t) ? t : /* @__PURE__ */ l("p", { children: t }),
+    [t]
+  ), h = k(() => {
+    const e = r.current;
+    e && e.setAttribute("data-state", "hidden");
+  }, []);
+  return w(() => {
+    var s;
+    const e = new AbortController();
+    return (s = r.current) == null || s.addEventListener(
+      "animationend",
+      () => {
+        var a;
+        (a = r.current) == null || a.style.setProperty("display", "none"), p(!1);
+      },
+      { signal: e.signal }
+    ), () => e.abort();
+  }, []), u ? /* @__PURE__ */ i(
+    "div",
+    {
+      ref: r,
+      className: m(A({ type: o, isVisible: n })),
+      "data-state": n ? "visible" : "hidden",
+      "data-theme": c,
+      role: "alert",
+      "aria-live": "polite",
+      children: [
+        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 {
+  B as Alert
+};

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

@@ -0,0 +1,71 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const a = t(
+  [
+    "relative",
+    "border",
+    "py-4",
+    "px-5",
+    "rounded",
+    "flex",
+    "gap-2",
+    "items-center",
+    "justify-start",
+    "[&>*]:flex",
+    "[&>*]:gap-2",
+    "[&>*]:items-center",
+    "[&>*]:justify-start",
+    "text-sm",
+    "shadow-sm",
+    "duration-300",
+    "data-[state=hidden]:animate-out",
+    "data-[state=hidden]:fade-out-0",
+    "data-[state=hidden]:zoom-out-95"
+  ],
+  {
+    variants: {
+      type: {
+        sucess: "",
+        info: [
+          "border-blue-100",
+          "bg-blue-50",
+          "text-zinc-700",
+          "[&>*>svg]:text-blue-600",
+          "shadow-blue-50/40"
+        ],
+        warning: "",
+        danger: ""
+      },
+      isVisible: {
+        true: "",
+        false: "hidden"
+      }
+    },
+    defaultVariants: {
+      isVisible: !0
+    }
+  }
+), s = t(
+  [
+    "w-4",
+    "h-4",
+    "absolute",
+    "right-2",
+    "top-2",
+    "text-inherit",
+    "cursor-pointer"
+  ],
+  {
+    variants: {
+      type: {
+        sucess: "",
+        info: ["text-blue-600"],
+        warning: "",
+        danger: ""
+      }
+    }
+  }
+);
+export {
+  a as alertVariants,
+  s as closeButtonVariants
+};

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,61 +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 "../../AlertDialogTrigger-D4Tm_9M0.js";
-import "../../contexts/theme.context.js";
-import { useTheme as j } from "../../contexts/theme.hook.js";
-import "react";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as r } from "../../utils/index.js";
-import { Button as l } from "../Button/Button.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 { useAlertDialog as k } from "./hooks/useAlertDialog.js";
-const G = ({
-  buttonCancelClassName: o,
-  buttonCancelText: i = "Cancel",
+const B = ({
+  buttonTriggerClassName: i,
+  buttonCancelClassName: r,
+  buttonCancelText: o = "Cancel",
   buttonConfirmClassName: s,
   buttonConfirmText: c = "OK",
-  buttonText: m,
-  description: d,
-  theme: a,
+  buttonText: d,
+  description: m,
+  theme: t,
   title: p,
-  onConfirm: h
+  onConfirm: f
 }) => {
-  const { theme: n } = j(), { isOpen: f, handleCancel: x, handleConfirm: g, handleOpen: u } = k({
-    onConfirm: h
+  const { isOpen: h, handleCancel: x, handleConfirm: g, handleOpen: C } = k({
+    onConfirm: f
   });
-  return /* @__PURE__ */ t(C, { open: f, children: [
-    /* @__PURE__ */ e(b, { text: m, 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: p }),
-        /* @__PURE__ */ e(D, { children: d }),
-        /* @__PURE__ */ t("div", { className: "flex flex-row gap-5 justify-end", children: [
-          /* @__PURE__ */ e(T, { asChild: !0, children: /* @__PURE__ */ e(
-            l,
-            {
-              type: "button",
-              theme: a ?? n,
-              variant: "secondary",
-              className: r(o),
-              onClick: x,
-              children: i
-            }
-          ) }),
-          /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-            l,
-            {
-              type: "button",
-              theme: a ?? n,
-              variant: "danger",
-              className: r(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 {
-  G as AlertDialog
+  B as AlertDialog
 };

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

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

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

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

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,90 +1,92 @@
-import { jsxs as R, jsx as t } from "react/jsx-runtime";
-import { forwardRef as A, useRef as p, useId as O, useImperativeHandle as T } from "react";
-import "../../contexts/theme.context.js";
-import { useTheme as V } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as c } from "../../utils/index.js";
+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 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";
-import { labelVariants as y, autocompleteVariants as I } from "./Autocomplete.variants.js";
-const k = A(
+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 = p(null), o = p(null), i = O(), { theme: C } = V(), m = N ?? C;
-    T(v, () => o.current, [o]);
+    onChange: N
+  }, b) => {
+    const s = i(null), o = i(null), m = R();
+    A(b, () => o.current, [o]);
     const e = g({
-      options: f,
+      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 ?? i,
-          className: c(
-            y({
-              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 ?? i,
-          type: "text",
-          name: l,
-          role: "combobox",
-          autoComplete: u,
-          className: c(
-            I({
-              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(
-        j,
-        {
-          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",
@@ -7,7 +7,6 @@ const r = e(
     "border",
     "border-zinc-200",
     "bg-transparent",
-    "text-base",
     "text-zinc-700",
     "transition-colors",
     "placeholder:text-muted-foreground",
@@ -16,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 { useNavigationUlList as b } from "../../hooks/useNavigationList.js";
-import { emptyListVariants as N, listVariants as d, listItemVariants as x, buttonVariants as V } from "./List.variants.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 b({ 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(
-        N({
-          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(d({ 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(x({ theme: r, variant: t })),
-          children: /* @__PURE__ */ s(
+          className: s(N({ variant: t })),
+          children: /* @__PURE__ */ r(
             "button",
             {
               type: "button",
               role: "button",
-              className: l(V({ 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
 };