@konstructio/ui 0.0.12-alpha.0 → 0.0.12-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,58 @@
+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-Z1voPZOH.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,
+  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 }),
+    [t]
+  ), C = w(() => {
+    const e = r.current;
+    e && e.setAttribute("data-state", "hidden");
+  }, []);
+  return y(() => {
+    var i;
+    const e = new AbortController();
+    return (i = r.current) == null || i.addEventListener(
+      "animationend",
+      () => {
+        var a;
+        (a = r.current) == null || a.style.setProperty("display", "none"), f(!1);
+      },
+      { signal: e.signal }
+    ), () => e.abort();
+  }, []), p ? /* @__PURE__ */ m(
+    "div",
+    {
+      ref: r,
+      className: c(T({ theme: l, type: s, isVisible: n })),
+      "data-state": n ? "visible" : "hidden",
+      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" })
+        ] }) : null
+      ]
+    }
+  ) : null;
+};
+export {
+  I as Alert
+};

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

@@ -0,0 +1,77 @@
+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: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      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: {
+      theme: "kubefirst",
+      isVisible: !0
+    }
+  }
+), s = t(
+  ["w-4", "h-4", "absolute", "right-2", "top-2", "text-inherit"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      type: {
+        sucess: "",
+        info: ["text-blue-600"],
+        warning: "",
+        danger: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  a as alertVariants,
+  s as closeButtonVariants
+};

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,52 +1,49 @@
 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 { useAlertDialog as k } from "./hooks/useAlertDialog.js";
-const G = ({
+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-3jTPaVvh.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",
   buttonConfirmClassName: s,
   buttonConfirmText: c = "OK",
-  buttonText: m,
-  description: d,
+  buttonText: d,
+  description: m,
   theme: a,
-  title: p,
-  onConfirm: h
+  title: h,
+  onConfirm: p
 }) => {
-  const { theme: n } = j(), { isOpen: f, handleCancel: x, handleConfirm: g, handleOpen: u } = k({
-    onConfirm: h
+  const { theme: n } = k(), { isOpen: f, handleCancel: x, handleConfirm: g, handleOpen: u } = j({
+    onConfirm: p
   });
   return /* @__PURE__ */ t(C, { open: f, children: [
-    /* @__PURE__ */ e(b, { text: m, theme: a, onOpen: u }),
+    /* @__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: p }),
-        /* @__PURE__ */ e(D, { children: d }),
+        /* @__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(
-            l,
+            r,
             {
               type: "button",
               theme: a ?? n,
               variant: "secondary",
-              className: r(o),
+              className: l(o),
               onClick: x,
               children: i
             }
           ) }),
           /* @__PURE__ */ e(v, { asChild: !0, children: /* @__PURE__ */ e(
-            l,
+            r,
             {
               type: "button",
               theme: a ?? n,
               variant: "danger",
-              className: r(s),
+              className: l(s),
               onClick: g,
               children: c
             }
@@ -57,5 +54,5 @@ const G = ({
   ] });
 };
 export {
-  G as AlertDialog
+  z 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-3jTPaVvh.js";
 import "../../Button/Button.js";
+import "../../../contexts/theme.hook.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-3jTPaVvh.js";
 export {
   g as AlertDialogTrigger
 };

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,12 +1,10 @@
 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 { 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";
+import { forwardRef as A, useRef as i, useId as O, useImperativeHandle as T } 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(
   ({
     autoComplete: u = "off",
@@ -22,9 +20,9 @@ const k = A(
     variant: r,
     onChange: b
   }, v) => {
-    const s = p(null), o = p(null), i = O(), { theme: C } = V(), m = N ?? C;
+    const s = i(null), o = i(null), c = O(), { theme: C } = I(), m = N ?? C;
     T(v, () => o.current, [o]);
-    const e = g({
+    const e = j({
       options: f,
       inputRef: o,
       wrapperRef: s,
@@ -34,9 +32,9 @@ const k = A(
       n ? /* @__PURE__ */ t(
         "label",
         {
-          htmlFor: l ?? i,
-          className: c(
-            y({
+          htmlFor: l ?? c,
+          className: p(
+            V({
               theme: m,
               variant: r,
               className: d
@@ -49,13 +47,13 @@ const k = A(
         "input",
         {
           ref: o,
-          id: l ?? i,
+          id: l ?? c,
           type: "text",
           name: l,
           role: "combobox",
           autoComplete: u,
-          className: c(
-            I({
+          className: p(
+            g({
               theme: m,
               variant: r,
               className: a
@@ -68,7 +66,7 @@ const k = A(
         }
       ),
       e.showOptions && /* @__PURE__ */ t("div", { className: "absolute z-10 top-full w-full rounded-md mt-1 border shadow-sm", children: /* @__PURE__ */ t(
-        j,
+        y,
         {
           className: a,
           inputRef: o,

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

@@ -1,8 +1,8 @@
 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";
+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,
@@ -15,11 +15,11 @@ const R = ({
   onClick: p
 }) => {
   const n = u(null);
-  return b({ ulRef: n, inputRef: a, wrapperRef: f, options: o }), o.length === 0 ? /* @__PURE__ */ s(
+  return V({ ulRef: n, inputRef: a, wrapperRef: f, options: o }), o.length === 0 ? /* @__PURE__ */ s(
     "span",
     {
       className: l(
-        N({
+        b({
           theme: r,
           variant: t,
           className: c
@@ -32,19 +32,19 @@ const R = ({
     {
       ref: n,
       role: "listbox",
-      className: l(d({ variant: t, theme: r, className: e })),
+      className: l(x({ variant: t, theme: r, className: e })),
       children: o.map(({ value: i }) => /* @__PURE__ */ s(
         "li",
         {
           role: "option",
           tabIndex: 0,
-          className: l(x({ theme: r, variant: t })),
+          className: l(d({ theme: r, variant: t })),
           children: /* @__PURE__ */ s(
             "button",
             {
               type: "button",
               role: "button",
-              className: l(V({ theme: r, variant: t })),
+              className: l(N({ theme: r, variant: t })),
               onClick: () => p(i),
               children: i
             }

package/dist/components/Breadcrumb/Breadcrumb.js

@@ -1,110 +1,109 @@
-import { jsx as a, jsxs as g, Fragment as b } from "react/jsx-runtime";
-import d, { forwardRef as y, Fragment as O } from "react";
-import "../../contexts/theme.context.js";
-import { useTheme as j } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as h } from "../../utils/index.js";
-import { breadcrumbVariants as w, breadcrumbItemVariants as x, chevronVariants as P } from "./Breadcrumb.variants.js";
-import { u as k, L as N } from "../../useBreadcrumb-DxYsZvj_.js";
-import { P as c } from "../../index-D68N8v8R.js";
-function f() {
-  return f = Object.assign || function(e) {
+import { jsx as a, jsxs as y } from "react/jsx-runtime";
+import d, { forwardRef as O, useId as j, Fragment as w } from "react";
+import { cn as c } from "../../utils/index.js";
+import { chevronVariants as x, breadcrumbVariants as P, breadcrumbWrapperVariants as T } from "./Breadcrumb.variants.js";
+import { Item as k } from "./components/Item/Item.js";
+import { P as s } from "../../index-C5psggHV.js";
+import { useTheme as N } from "../../contexts/theme.hook.js";
+function h() {
+  return h = Object.assign || function(e) {
     for (var n = 1; n < arguments.length; n++) {
-      var t = arguments[n];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
+      var r = arguments[n];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, f.apply(this, arguments);
+  }, h.apply(this, arguments);
 }
-function T(e, n) {
+function _(e, n) {
   if (e == null) return {};
-  var t = L(e, n), r, o;
+  var r = L(e, n), t, o;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (o = 0; o < i.length; o++)
-      r = i[o], !(n.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
+      t = i[o], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
   }
-  return t;
+  return r;
 }
 function L(e, n) {
   if (e == null) return {};
-  var t = {}, r = Object.keys(e), o, i;
-  for (i = 0; i < r.length; i++)
-    o = r[i], !(n.indexOf(o) >= 0) && (t[o] = e[o]);
-  return t;
+  var r = {}, t = Object.keys(e), o, i;
+  for (i = 0; i < t.length; i++)
+    o = t[i], !(n.indexOf(o) >= 0) && (r[o] = e[o]);
+  return r;
 }
-var p = y(function(e, n) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, o = e.size, i = o === void 0 ? 24 : o, s = T(e, ["color", "size"]);
-  return /* @__PURE__ */ d.createElement("svg", f({
+var p = O(function(e, n) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, o = e.size, i = o === void 0 ? 24 : o, l = _(e, ["color", "size"]);
+  return /* @__PURE__ */ d.createElement("svg", h({
     ref: n,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
     height: i,
     viewBox: "0 0 24 24",
     fill: "none",
-    stroke: r,
+    stroke: t,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, s), /* @__PURE__ */ d.createElement("polyline", {
+  }, l), /* @__PURE__ */ d.createElement("polyline", {
     points: "9 18 15 12 9 6"
   }));
 });
 p.propTypes = {
-  color: c.string,
-  size: c.oneOfType([c.string, c.number])
+  color: s.string,
+  size: s.oneOfType([s.string, s.number])
 };
 p.displayName = "ChevronRight";
-const W = ({
+const V = ({
   className: e,
   size: n,
-  steps: t,
-  theme: r
+  steps: r,
+  theme: t,
+  "aria-label": o = "breadcrumb",
+  wrapperClassName: i,
+  ...l
 }) => {
-  const { theme: o } = j(), { isInsideRouter: i } = k(), s = r ?? o;
-  return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", children: /* @__PURE__ */ a(
-    "ol",
+  const g = j(), { theme: v } = N(), m = t ?? v;
+  return /* @__PURE__ */ a(
+    "nav",
     {
-      className: h(
-        w({ theme: s, className: e, size: n })
+      "aria-label": o,
+      className: c(
+        T({
+          className: i,
+          theme: m
+        })
       ),
-      children: t.map(({ label: m, to: l, target: u }, v) => /* @__PURE__ */ g(O, { children: [
-        /* @__PURE__ */ a(
-          "li",
-          {
-            className: h(
-              x({ theme: s, size: n })
-            ),
-            children: l ? /* @__PURE__ */ a(b, { children: i ? /* @__PURE__ */ a(
-              N,
+      children: /* @__PURE__ */ a(
+        "ol",
+        {
+          className: c(
+            P({ theme: m, className: e, size: n })
+          ),
+          ...l,
+          children: r.map(({ label: f, ...b }, u) => /* @__PURE__ */ y(w, { children: [
+            /* @__PURE__ */ a(
+              k,
               {
-                to: l,
-                target: u,
-                className: "hover:underline hover:underline-offset-2",
-                children: m
+                ...b,
+                label: f,
+                isLast: u === r.length - 1,
+                size: n,
+                theme: m
               }
-            ) : /* @__PURE__ */ a(
-              "a",
+            ),
+            u !== r.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", children: /* @__PURE__ */ a(
+              p,
               {
-                href: l,
-                target: u,
-                className: "hover:underline hover:underline-offset-2",
-                children: m
+                className: c(x({ size: n, theme: m }))
               }
-            ) }) : /* @__PURE__ */ a("span", { "aria-current": "page", children: m })
-          }
-        ),
-        v !== t.length - 1 && /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a(
-          p,
-          {
-            className: h(P({ size: n, theme: s }))
-          }
-        ) })
-      ] }, m))
+            ) })
+          ] }, `${g}-${f}`))
+        }
+      )
     }
-  ) });
+  );
 };
 export {
-  W as Breadcrumb
+  V as Breadcrumb
 };

package/dist/components/Breadcrumb/Breadcrumb.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const s = e(["flex", "gap-1.5", "items-center"], {
+const a = e(["text-slate-500"], {
   variants: {
     theme: {
       kubefirst: "",
@@ -14,10 +14,9 @@ const s = e(["flex", "gap-1.5", "items-center"], {
     }
   },
   defaultVariants: {
-    theme: "kubefirst",
-    size: "base"
+    theme: "kubefirst"
   }
-}), a = e(["text-slate-400", "font-semibold"], {
+}), s = e(["flex", "gap-1", "items-center"], {
   variants: {
     theme: {
       kubefirst: "",
@@ -25,28 +24,28 @@ const s = e(["flex", "gap-1.5", "items-center"], {
       civo: ""
     },
     size: {
-      sm: "text-sm",
-      base: "text-base",
-      lg: "text-lg",
-      xl: "text-xl"
+      sm: "",
+      base: "",
+      lg: "",
+      xl: ""
     }
   },
   defaultVariants: {
     theme: "kubefirst",
     size: "base"
   }
-}), i = e("", {
+}), r = e("text-[#abadc6]", {
   variants: {
     theme: {
-      kubefirst: "text-kubefirst-primary",
-      colony: "text-red-500",
+      kubefirst: "",
+      colony: "",
       civo: ""
     },
     size: {
-      sm: ["w-2", "h-2"],
-      base: ["w-3", "h-3"],
-      lg: ["w-4", "h-4"],
-      xl: ["w-5", "h-5"]
+      sm: ["w-3", "h-3"],
+      base: ["w-4", "h-4"],
+      lg: ["w-5", "h-5"],
+      xl: ["w-6", "h-6"]
     }
   },
   defaultVariants: {
@@ -55,7 +54,7 @@ const s = e(["flex", "gap-1.5", "items-center"], {
   }
 });
 export {
-  a as breadcrumbItemVariants,
   s as breadcrumbVariants,
-  i as chevronVariants
+  a as breadcrumbWrapperVariants,
+  r as chevronVariants
 };