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

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,25 +1,23 @@
-import { useRef as k, useEffect as a } from "react";
+import { useRef as m, useEffect as a } from "react";
 import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-import "react/jsx-runtime";
-import "../contexts/dropdown.context.js";
-const h = ({
+const w = ({
   ulRef: n,
   wrapperRef: f,
   wrapperInputRef: u
 }) => {
-  const r = k(0), { isOpen: b } = d();
+  const r = m(0), { isOpen: b } = d();
   a(() => {
-    var s, m;
+    var s, g;
     const e = ((s = n.current) == null ? void 0 : s.querySelectorAll("li")) ?? [], c = new AbortController(), i = () => {
       r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
     }, o = () => {
       var t;
       r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, (t = u.current) == null || t.focus());
     };
-    return (m = n.current) == null || m.addEventListener(
+    return (g = n.current) == null || g.addEventListener(
       "keydown",
       (t) => {
-        var g;
+        var k;
         switch (t.preventDefault(), t.key) {
           case "ArrowDown": {
             i();
@@ -30,7 +28,7 @@ const h = ({
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? (g = u.current) == null || g.focus() : o();
+            r.current === 0 ? (k = u.current) == null || k.focus() : o();
             break;
           }
           case "Enter": {
@@ -62,5 +60,5 @@ const h = ({
   }, [b]);
 };
 export {
-  h as useNavigationUlList
+  w as useNavigationUlList
 };

package/dist/components/Input/Input.js

@@ -1,24 +1,22 @@
-import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import s, { forwardRef as m, useId as b } from "react";
-import { cn as w } from "../../utils/index.js";
-import "../../contexts/theme.context.js";
-import { useTheme as j } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
+import { jsxs as O, jsx as c } from "react/jsx-runtime";
+import l, { forwardRef as p, useState as E, useId as k } from "react";
+import { cn as z } from "../../utils/index.js";
 import { inputVariants as N } from "./Input.variants.js";
-import { P as l } from "../../index-D68N8v8R.js";
-function p() {
-  return p = Object.assign || function(e) {
+import { P as a } from "../../index-C5psggHV.js";
+import { useTheme as $ } from "../../contexts/theme.hook.js";
+function u() {
+  return u = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, p.apply(this, arguments);
+  }, u.apply(this, arguments);
 }
-function P(e, o) {
+function _(e, o) {
   if (e == null) return {};
-  var r = k(e, o), t, n;
+  var r = L(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (n = 0; n < i.length; n++)
@@ -26,16 +24,16 @@ function P(e, o) {
   }
   return r;
 }
-function k(e, o) {
+function L(e, o) {
   if (e == null) return {};
   var r = {}, t = Object.keys(e), n, i;
   for (i = 0; i < t.length; i++)
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var u = m(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, c = P(e, ["color", "size"]);
-  return /* @__PURE__ */ s.createElement("svg", p({
+var y = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = _(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", u({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -46,40 +44,40 @@ var u = m(function(e, o) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ s.createElement("circle", {
+  }, s), /* @__PURE__ */ l.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "10"
-  }), /* @__PURE__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "12",
     y1: "8",
     x2: "12",
     y2: "12"
-  }), /* @__PURE__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "12",
     y1: "16",
     x2: "12.01",
     y2: "16"
   }));
 });
-u.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
+y.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
 };
-u.displayName = "AlertCircle";
-function f() {
-  return f = Object.assign || function(e) {
+y.displayName = "AlertCircle";
+function m() {
+  return m = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
       var r = arguments[o];
       for (var t in r)
         Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
     }
     return e;
-  }, f.apply(this, arguments);
+  }, m.apply(this, arguments);
 }
-function E(e, o) {
+function W(e, o) {
   if (e == null) return {};
-  var r = z(e, o), t, n;
+  var r = T(e, o), t, n;
   if (Object.getOwnPropertySymbols) {
     var i = Object.getOwnPropertySymbols(e);
     for (n = 0; n < i.length; n++)
@@ -87,16 +85,16 @@ function E(e, o) {
   }
   return r;
 }
-function z(e, o) {
+function T(e, o) {
   if (e == null) return {};
   var r = {}, t = Object.keys(e), n, i;
   for (i = 0; i < t.length; i++)
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var h = m(function(e, o) {
-  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, c = E(e, ["color", "size"]);
-  return /* @__PURE__ */ s.createElement("svg", f({
+var v = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = W(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", m({
     ref: o,
     xmlns: "http://www.w3.org/2000/svg",
     width: i,
@@ -107,21 +105,74 @@ var h = m(function(e, o) {
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ s.createElement("path", {
+  }, s), /* @__PURE__ */ l.createElement("path", {
     d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-  }), /* @__PURE__ */ s.createElement("line", {
+  }), /* @__PURE__ */ l.createElement("line", {
     x1: "1",
     y1: "1",
     x2: "23",
     y2: "23"
   }));
 });
-h.propTypes = {
-  color: l.string,
-  size: l.oneOfType([l.string, l.number])
+v.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
 };
-h.displayName = "EyeOff";
-const _ = m(
+v.displayName = "EyeOff";
+function h() {
+  return h = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, h.apply(this, arguments);
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = I(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function I(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var g = p(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, s = C(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", h({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, s), /* @__PURE__ */ l.createElement("path", {
+    d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
+  }), /* @__PURE__ */ l.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3"
+  }));
+});
+g.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+g.displayName = "Eye";
+const S = p(
   ({
     className: e,
     error: o,
@@ -129,50 +180,42 @@ const _ = m(
     labelClassName: t,
     name: n,
     type: i,
-    theme: c,
-    onClickIcon: g,
-    ...d
-  }, x) => {
-    const v = b(), { theme: O } = j();
-    return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
-      r ? /* @__PURE__ */ a(
-        "label",
-        {
-          htmlFor: v,
-          className: w("pl-1 cursor-pointer", t),
-          children: r
-        }
-      ) : null,
-      /* @__PURE__ */ y("div", { className: "relative", children: [
-        /* @__PURE__ */ a(
+    theme: s,
+    ...w
+  }, b) => {
+    const [f, x] = E(!1), d = k(), { theme: j } = $(), P = f ? g : v;
+    return /* @__PURE__ */ O("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      r ? /* @__PURE__ */ c("label", { htmlFor: d, className: z("cursor-pointer", t), children: r }) : null,
+      /* @__PURE__ */ O("div", { className: "relative", children: [
+        /* @__PURE__ */ c(
           "input",
           {
-            id: v,
-            ref: x,
+            id: d,
+            ref: b,
             name: n,
-            type: i,
+            type: f ? "text" : i,
             className: N({
               className: e,
-              theme: c ?? O,
+              theme: s ?? j,
               variant: o ? "error" : "default"
             }),
-            ...d
+            ...w
           }
         ),
-        o ? /* @__PURE__ */ a("i", { className: "absolute right-2 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ a(u, { className: "w-5 h-5" }) }) : null,
-        i === "password" ? /* @__PURE__ */ a("i", { className: "absolute right-2 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ a(
-          h,
+        o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(y, { className: "w-5 h-5" }) }) : null,
+        i === "password" && !o ? /* @__PURE__ */ c("i", { className: "absolute right-3 text-slate-400 top-0 translate-y-[40%]", children: /* @__PURE__ */ c(
+          P,
           {
             className: "w-5 h-5 cursor-pointer",
-            onClick: g
+            onClick: () => x(!f)
           }
         ) }) : null
       ] }),
-      o ? /* @__PURE__ */ a("span", { className: "text-xs text-red-600 -mt-0.5 pl-2", children: o }) : null
+      o ? /* @__PURE__ */ c("span", { className: "text-xs text-red-600 -mt-0.5", children: o }) : null
     ] });
   }
 );
-_.displayName = "Input";
+S.displayName = "Input";
 export {
-  _ as Input
+  S as Input
 };

package/dist/components/Input/Input.variants.js

@@ -1,5 +1,5 @@
 import { c as r } from "../../index-BNmRGtA6.js";
-const t = r(
+const o = r(
   [
     "bg-transparent",
     "border",
@@ -11,12 +11,11 @@ const t = r(
     "focus-visible:ring-1",
     "h-9",
     "placeholder:text-muted-foreground",
-    "px-3",
+    "pl-3",
+    "pr-10",
     "py-1",
     "rounded-md",
     "shadow-sm",
-    "text-base",
-    "text-zinc-700",
     "transition-colors",
     "w-full"
   ],
@@ -24,7 +23,7 @@ const t = r(
     variants: {
       variant: {
         default: "",
-        error: ["border-red-600", "pr-8", "focus-visible:ring-transparent"]
+        error: "!border-red-600 pr-8 focus-visible:ring-transparent"
       },
       theme: {
         kubefirst: "focus:ring-kubefirst-primary",
@@ -39,5 +38,5 @@ const t = r(
   }
 );
 export {
-  t as inputVariants
+  o as inputVariants
 };

package/dist/components/Loading/Loading.js

@@ -0,0 +1,109 @@
+import { jsx as f } from "react/jsx-runtime";
+import { cn as h } from "../../utils/index.js";
+import { loadingVariants as g } from "./Loading.variants.js";
+import { forwardRef as s, createElement as i } from "react";
+import { useTheme as w } from "../../contexts/theme.hook.js";
+/**
+* @license lucide-react v0.477.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const C = (r) => r.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), m = (...r) => r.filter((e, o, t) => !!e && e.trim() !== "" && t.indexOf(e) === o).join(" ").trim();
+/**
+* @license lucide-react v0.477.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+var L = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+/**
+* @license lucide-react v0.477.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const k = s(
+  ({
+    color: r = "currentColor",
+    size: e = 24,
+    strokeWidth: o = 2,
+    absoluteStrokeWidth: t,
+    className: a = "",
+    children: n,
+    iconNode: c,
+    ...d
+  }, l) => i(
+    "svg",
+    {
+      ref: l,
+      ...L,
+      width: e,
+      height: e,
+      stroke: r,
+      strokeWidth: t ? Number(o) * 24 / Number(e) : o,
+      className: m("lucide", a),
+      ...d
+    },
+    [
+      ...c.map(([u, p]) => i(u, p)),
+      ...Array.isArray(n) ? n : [n]
+    ]
+  )
+);
+/**
+* @license lucide-react v0.477.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const x = (r, e) => {
+  const o = s(
+    ({ className: t, ...a }, n) => i(k, {
+      ref: n,
+      iconNode: e,
+      className: m(`lucide-${C(r)}`, t),
+      ...a
+    })
+  );
+  return o.displayName = `${r}`, o;
+};
+/**
+* @license lucide-react v0.477.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const b = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], y = x("LoaderCircle", b), N = ({
+  className: r,
+  theme: e,
+  ...o
+}) => {
+  const { theme: t } = w();
+  return /* @__PURE__ */ f(
+    y,
+    {
+      className: h(
+        g({
+          className: r,
+          theme: e ?? t
+        })
+      ),
+      ...o
+    }
+  );
+};
+N.displayName = "Loading";
+export {
+  N as Loading
+};

package/dist/components/Loading/Loading.variants.js

@@ -0,0 +1,19 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t(
+  ["h-8", "w-8", "animate-spin", "text-inherit"],
+  {
+    variants: {
+      theme: {
+        kubefirst: "text-kubefirst-primary",
+        colony: "text-colony-primary",
+        civo: "text-civo-primary"
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  r as loadingVariants
+};

package/dist/components/Modal/Modal.js

@@ -1,10 +1,10 @@
 import "react/jsx-runtime";
-import "../../index-BaNV0qac.js";
+import "react";
+import "../../index-D7QNmo_D.js";
+import { M as d } from "../../Modal-B-E9uaA6.js";
+import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";
-import "./components/Header/Header.js";
-import { M as d } from "../../Modal-L73dmnHv.js";
-import "./hooks/useModal.js";
 export {
   d as Modal
 };

package/dist/components/Modal/components/Body/Body.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const i = ({ children: o, asChild: t, className: m }) => /* @__PURE__ */ r(t ? n : "div", { className: e("flex-1", m), children: o });
 export {

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const a = ({ children: o, asChild: t, className: r }) => /* @__PURE__ */ m(t ? n : "div", { className: e(r), children: o });
 export {

package/dist/components/Modal/components/Header/Header.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DoOsnuB6.js";
+import { S as n } from "../../../../index-B_6_jmOO.js";
 import { cn as e } from "../../../../utils/index.js";
 const i = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e(t), children: o });
 export {

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,15 +1,12 @@
 import "react/jsx-runtime";
-import "../../../../index-BtibbG81.js";
+import "../../../../index-CbTU3cnP.js";
 import "react";
-import { W as c } from "../../../../Modal-L73dmnHv.js";
-import "../../../../Combination-Cmu9JRkv.js";
-import "../../../../contexts/theme.context.js";
-import "../../../../contexts/theme.hook.js";
-import "../../../../js.cookie-OLEfuq_g.js";
+import { W as s } from "../../../../Modal-B-E9uaA6.js";
+import "../../../../Combination-b348x__d.js";
 import "../../../../utils/index.js";
-import "../../hooks/useModal.js";
 import "./Wrapper.variants.js";
-import "../../../../x-CRBgmX1Q.js";
+import "../../../../x-DU-Zw-L_.js";
+import "../../../../contexts/theme.hook.js";
 export {
-  c as Wrapper
+  s as Wrapper
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-L73dmnHv.js";
+import { W as a } from "../../../Modal-B-E9uaA6.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/Modal/contexts/Modal.provider.js

@@ -1,13 +1,13 @@
 import { jsx as i } from "react/jsx-runtime";
 import { useState as t, useCallback as n } from "react";
-import { useToggle as f } from "../../../hooks/useToggle.js";
-import { ModalContext as h } from "./Modal.context.js";
+import { ModalContext as f } from "./Modal.context.js";
+import { useToggle as h } from "../../../hooks/useToggle.js";
 const x = ({ children: s }) => {
-  const [r, l] = t(!0), [a, o] = f(!1), [u, c] = t(), e = n(() => o(!0), [o]), d = n(() => o(!1), [o]), p = (m, C = !0) => {
+  const [r, l] = t(!0), [a, o] = h(!1), [u, c] = t(), e = n(() => o(!0), [o]), d = n(() => o(!1), [o]), p = (m, C = !0) => {
     c(m), e(), l(C);
   };
   return /* @__PURE__ */ i(
-    h.Provider,
+    f.Provider,
     {
       value: {
         content: u,

package/dist/components/NumberInput/NumberInput.js

@@ -1,12 +1,10 @@
 import { jsxs as y, jsx as u } from "react/jsx-runtime";
-import { R as j } from "../../index-BtibbG81.js";
+import { R as j } from "../../index-CbTU3cnP.js";
 import p, { forwardRef as d, useId as E, useState as T, useCallback as x } from "react";
-import "../../contexts/theme.context.js";
-import { useTheme as $ } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
 import { cn as h } from "../../utils/index.js";
-import { labelVariants as L, buttonVariants as P, numberInputVariants as W } from "./NumberInput.variants.js";
-import { P as a } from "../../index-D68N8v8R.js";
+import { labelVariants as $, buttonVariants as P, numberInputVariants as L } from "./NumberInput.variants.js";
+import { P as a } from "../../index-C5psggHV.js";
+import { useTheme as W } from "../../contexts/theme.hook.js";
 function v() {
   return v = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
@@ -116,7 +114,7 @@ g.propTypes = {
   size: a.oneOfType([a.string, a.number])
 };
 g.displayName = "Plus";
-const Q = d(
+const J = d(
   ({
     className: e,
     init: o,
@@ -127,7 +125,7 @@ const Q = d(
     theme: f,
     onChange: s
   }, k) => {
-    const { theme: I } = $(), m = f ?? I, N = E(), [c, w] = T(() => o || 0), z = x(() => {
+    const { theme: I } = W(), m = f ?? I, N = E(), [c, w] = T(() => o || 0), z = x(() => {
       let l = 0;
       n === 1 / 0 ? l = c - 1 : l = Math.max(n, c - 1), w(l), s == null || s(l);
     }, [c, n, s]), _ = x(() => {
@@ -140,7 +138,7 @@ const Q = d(
         {
           htmlFor: i ?? N,
           className: h(
-            L({
+            $({
               theme: m
             })
           ),
@@ -170,7 +168,7 @@ const Q = d(
             value: c,
             name: i,
             className: h(
-              W({ className: e, theme: m })
+              L({ className: e, theme: m })
             ),
             readOnly: !0,
             "aria-label": r
@@ -195,5 +193,5 @@ const Q = d(
   }
 );
 export {
-  Q as NumberInput
+  J as NumberInput
 };