@konstructio/ui 0.0.12-alpha.0 → 0.0.12-alpha.1

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/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-BVppSRDQ.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-BVppSRDQ.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-BVppSRDQ.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, listVariants as N, listItemVariants as d, buttonVariants 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(N({ 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(x({ 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 { breadcrumbWrapperVariants as x, breadcrumbVariants as P, chevronVariants 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(
+        x({
+          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(T({ 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
 };

package/dist/components/Breadcrumb/components/Item/Item.js

@@ -0,0 +1,61 @@
+import { jsx as r, Fragment as p } from "react/jsx-runtime";
+import { cn as n } from "../../../../utils/index.js";
+import { u as b, L as k } from "../../../../useBreadcrumb-CojbXFVD.js";
+import { breadcrumbItemVariants as L, breadcrumbLinkVariants as c, breadcrumbLabelVariants as N } from "./Item.variants.js";
+import { useTheme as x } from "../../../../contexts/theme.hook.js";
+const j = ({
+  isActive: e,
+  isLast: o,
+  label: s,
+  size: d,
+  target: t,
+  theme: h,
+  to: a
+}) => {
+  const { theme: l } = x(), { isInsideRouter: u } = b(), m = h ?? l, i = (f) => {
+    a === "#" && f.preventDefault();
+  };
+  return /* @__PURE__ */ r(
+    "li",
+    {
+      "aria-current": o ? "page" : void 0,
+      className: n(L({ theme: m, size: d })),
+      children: a ? /* @__PURE__ */ r(p, { children: u ? /* @__PURE__ */ r(
+        k,
+        {
+          to: a,
+          target: t,
+          className: n(
+            c({ theme: m, isActive: e })
+          ),
+          "aria-disabled": e ? "true" : "false",
+          onClick: i,
+          children: s
+        }
+      ) : /* @__PURE__ */ r(
+        "a",
+        {
+          href: a,
+          target: t,
+          className: n(
+            c({ theme: m, isActive: e })
+          ),
+          "aria-disabled": e ? "true" : "false",
+          onClick: i,
+          children: s
+        }
+      ) }) : /* @__PURE__ */ r(
+        "span",
+        {
+          className: n(
+            N({ theme: m, isActive: e })
+          ),
+          children: s
+        }
+      )
+    }
+  );
+};
+export {
+  j as Item
+};

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

@@ -0,0 +1,90 @@
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const i = t(
+  ["group", "font-semibold", "text-inherit"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "",
+        colony: "",
+        civo: ""
+      },
+      size: {
+        sm: "text-xs",
+        base: "text-sm",
+        lg: "text-base",
+        xl: "text-lg"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst",
+      size: "base"
+    }
+  }
+), o = t(["text-inherit"], {
+  variants: {
+    theme: {
+      kubefirst: "",
+      colony: "",
+      civo: ""
+    },
+    isActive: {
+      true: "",
+      false: ["text-slate-400", "cursor-auto"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    isActive: !0
+  },
+  compoundVariants: [
+    {
+      isActive: !0,
+      class: [
+        "group-focus-within:no-underline",
+        "group-focus-within:outline",
+        "group-focus-within:outline-8",
+        "group-focus-within:outline-offset-4",
+        "group-focus-within:outline-slate-500",
+        "group-focus-within:rounded-sm",
+        "group-hover:rounded-sm",
+        "hover:no-underline",
+        "hover:text-slate-500"
+      ]
+    },
+    {
+      isActive: void 0,
+      class: [
+        "group-focus-within:no-underline",
+        "group-focus-within:outline",
+        "group-focus-within:outline-8",
+        "group-focus-within:outline-offset-4",
+        "group-focus-within:outline-slate-500",
+        "group-focus-within:rounded-sm",
+        "group-hover:rounded-sm",
+        "hover:no-underline",
+        "hover:text-slate-500"
+      ]
+    }
+  ]
+}), s = t(["text-inherit"], {
+  variants: {
+    theme: {
+      kubefirst: "",
+      colony: "",
+      civo: ""
+    },
+    isActive: {
+      true: "",
+      false: ["text-slate-400"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    isActive: !0
+  }
+});
+export {
+  i as breadcrumbItemVariants,
+  s as breadcrumbLabelVariants,
+  o as breadcrumbLinkVariants
+};

package/dist/components/Breadcrumb/components/index.js

@@ -0,0 +1,4 @@
+import { Item as o } from "./Item/Item.js";
+export {
+  o as Item
+};

package/dist/components/Breadcrumb/hooks/useBreadcrumb.js

@@ -1,5 +1,4 @@
-import "react";
-import { u as o } from "../../../useBreadcrumb-DxYsZvj_.js";
+import { u } from "../../../useBreadcrumb-CojbXFVD.js";
 export {
-  o as useBreadcrumb
+  u as useBreadcrumb
 };