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

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

@@ -1,20 +1,18 @@
 import { useRef as u, useEffect as f, useCallback as p } from "react";
-import { useDropdownContext as w } from "../contexts/dropdown.hook.js";
-import "react/jsx-runtime";
-import "../contexts/dropdown.context.js";
-const k = ({ ulRef: a }) => {
-  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = w();
+import { useDropdownContext as m } from "../contexts/dropdown.hook.js";
+const E = ({ ulRef: i }) => {
+  const l = u(null), o = u(null), { isOpen: c, toggleOpen: e } = m();
   f(() => {
     var r;
     const n = new AbortController(), s = (t) => {
       t.key === "Escape" && e(!1);
-    }, i = (t) => {
+    }, a = (t) => {
       var d;
       (d = l.current) != null && d.contains(t.target) || e(!1);
     };
     return document.addEventListener("keydown", s, {
       signal: n.signal
-    }), document.addEventListener("mousedown", i, {
+    }), document.addEventListener("mousedown", a, {
       signal: n.signal
     }), document.addEventListener(
       "visibilitychange",
@@ -38,10 +36,10 @@ const k = ({ ulRef: a }) => {
     const n = new AbortController();
     return (s = o.current) == null || s.addEventListener(
       "keydown",
-      (i) => {
+      (a) => {
         var r;
-        if (i.key === "ArrowDown") {
-          const t = (r = a.current) == null ? void 0 : r.querySelector("li");
+        if (a.key === "ArrowDown") {
+          const t = (r = i.current) == null ? void 0 : r.querySelector("li");
           t && t.focus();
         }
       },
@@ -49,17 +47,17 @@ const k = ({ ulRef: a }) => {
     ), () => {
       n.abort();
     };
-  }, [o, a]);
-  const g = p(() => e(!0), [e]), m = p(() => {
+  }, [o, i]);
+  const g = p(() => e(!0), [e]), w = p(() => {
     c || e(!1);
   }, [c, e]);
   return {
     wrapperRef: l,
     wrapperInputRef: o,
     handleOpen: g,
-    handleOpenIfClosed: m
+    handleOpenIfClosed: w
   };
 };
 export {
-  k as useDropdown
+  E as useDropdown
 };

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,11 +1,9 @@
 import { jsxs as y, jsx as a } from "react/jsx-runtime";
-import s, { forwardRef as m, useId as b } from "react";
+import s, { forwardRef as u, 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 { inputVariants as N } from "./Input.variants.js";
-import { P as l } from "../../index-D68N8v8R.js";
+import { inputVariants as j } from "./Input.variants.js";
+import { P as l } from "../../index-C5psggHV.js";
+import { useTheme as N } from "../../contexts/theme.hook.js";
 function p() {
   return p = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
@@ -33,7 +31,7 @@ function k(e, o) {
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var u = m(function(e, o) {
+var m = u(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({
     ref: o,
@@ -62,11 +60,11 @@ var u = m(function(e, o) {
     y2: "16"
   }));
 });
-u.propTypes = {
+m.propTypes = {
   color: l.string,
   size: l.oneOfType([l.string, l.number])
 };
-u.displayName = "AlertCircle";
+m.displayName = "AlertCircle";
 function f() {
   return f = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {
@@ -94,7 +92,7 @@ function z(e, o) {
     n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
   return r;
 }
-var h = m(function(e, o) {
+var h = u(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({
     ref: o,
@@ -121,7 +119,7 @@ h.propTypes = {
   size: l.oneOfType([l.string, l.number])
 };
 h.displayName = "EyeOff";
-const _ = m(
+const _ = u(
   ({
     className: e,
     error: o,
@@ -133,7 +131,7 @@ const _ = m(
     onClickIcon: g,
     ...d
   }, x) => {
-    const v = b(), { theme: O } = j();
+    const v = b(), { theme: O } = N();
     return /* @__PURE__ */ y("div", { className: "flex flex-col gap-1.5", children: [
       r ? /* @__PURE__ */ a(
         "label",
@@ -151,7 +149,7 @@ const _ = m(
             ref: x,
             name: n,
             type: i,
-            className: N({
+            className: j({
               className: e,
               theme: c ?? O,
               variant: o ? "error" : "default"
@@ -159,7 +157,7 @@ const _ = m(
             ...d
           }
         ),
-        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,
+        o ? /* @__PURE__ */ a("i", { className: "absolute right-2 text-red-600 top-0 translate-y-[40%]", children: /* @__PURE__ */ a(m, { 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,
           {

package/dist/components/Loading/Loading.js

@@ -0,0 +1,28 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useId as m } from "react";
+import { loadingVariants as a } from "./Loading.variants.js";
+import { useTheme as d } from "../../contexts/theme.hook.js";
+const c = "data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='currentColor'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3cpath%20d='M21%2012a9%209%200%201%201-6.219-8.56'%20/%3e%3c/svg%3e", l = ({
+  className: e,
+  theme: o,
+  variant: t,
+  ...r
+}) => {
+  const i = m(), { theme: s } = d();
+  return /* @__PURE__ */ n(
+    c,
+    {
+      id: i,
+      className: a({
+        className: e,
+        theme: o ?? s,
+        variant: t
+      }),
+      ...r
+    }
+  );
+};
+l.displayName = "Loading";
+export {
+  l as Loading
+};

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

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

package/dist/components/Modal/Modal.js

@@ -1,9 +1,9 @@
 import "react/jsx-runtime";
-import "../../index-BaNV0qac.js";
+import "../../index-BTeAm7mx.js";
+import { M as d } from "../../Modal-DZUwNzSW.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,13 @@
 import "react/jsx-runtime";
-import "../../../../index-BtibbG81.js";
+import "../../../../index-Z1voPZOH.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 x } from "../../../../Modal-DZUwNzSW.js";
+import "../../../../Combination-b348x__d.js";
 import "../../../../utils/index.js";
-import "../../hooks/useModal.js";
 import "./Wrapper.variants.js";
-import "../../../../x-CRBgmX1Q.js";
+import "../../hooks/useModal.js";
+import "../../../../x-DU-Zw-L_.js";
+import "../../../../contexts/theme.hook.js";
 export {
-  c as Wrapper
+  x 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-DZUwNzSW.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-Z1voPZOH.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
 };

package/dist/components/ProgressBar/ProgressBar.js

@@ -1,21 +1,18 @@
-import { jsxs as e, jsx as i } from "react/jsx-runtime";
-import "../../contexts/theme.context.js";
-import { useTheme as l } from "../../contexts/theme.hook.js";
-import "react";
-import "../../js.cookie-OLEfuq_g.js";
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
 import { cn as o } from "../../utils/index.js";
-import { progressBarVariants as d, progressBarProgress as c } from "./ProgressBar.variants.js";
-const j = ({
-  label: r,
+import { progressBarProgress as l, progressBarVariants as d } from "./ProgressBar.variants.js";
+import { useTheme as c } from "../../contexts/theme.hook.js";
+const p = ({
+  label: e,
   theme: m,
   percent: s,
   status: n
 }) => {
-  const { theme: a } = l(), t = m ?? a;
-  return /* @__PURE__ */ e("div", { className: "w-full", children: [
-    /* @__PURE__ */ e("div", { className: o("flex", r ? "justify-between" : "justify-end"), children: [
-      r ? /* @__PURE__ */ i("label", { className: "font-semibold", children: r }) : null,
-      /* @__PURE__ */ e("span", { className: "font-semibold", children: [
+  const { theme: a } = c(), t = m ?? a;
+  return /* @__PURE__ */ r("div", { className: "w-full", children: [
+    /* @__PURE__ */ r("div", { className: o("flex", e ? "justify-between" : "justify-end"), children: [
+      e ? /* @__PURE__ */ i("label", { className: "font-semibold", children: e }) : null,
+      /* @__PURE__ */ r("span", { className: "font-semibold", children: [
         s,
         "%"
       ] })
@@ -24,7 +21,7 @@ const j = ({
       "div",
       {
         className: o(
-          c({ theme: t, status: n }),
+          l({ theme: t, status: n }),
           s > 0 && s < 99 ? "transition-width duration-500" : "transition-colors duration-0"
         ),
         style: { width: `${s}%` }
@@ -33,5 +30,5 @@ const j = ({
   ] });
 };
 export {
-  j as ProgressBar
+  p as ProgressBar
 };

package/dist/components/Radio/Radio.js

@@ -1,61 +1,79 @@
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import { forwardRef as x, useId as N, useCallback as b } 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 F } from "../../utils/index.js";
-import { radioVariants as R } from "./Radio.variants.js";
-const q = x(
+import { jsxs as T, jsx as e } from "react/jsx-runtime";
+import { forwardRef as V, useId as j, useCallback as w } from "react";
+import { cn as r } from "../../utils/index.js";
+import { radioVariants as F, labelRadioVariants as $, wrapperRadioVariants as y } from "./Radio.variants.js";
+import { useTheme as I } from "../../contexts/theme.hook.js";
+const D = V(
   ({
-    checked: m = !1,
-    className: i,
-    defaultChecked: a,
-    label: c,
-    name: t,
-    theme: l,
-    value: s,
-    onChange: e
-  }, p) => {
-    const d = N(), { theme: n } = j(), o = `${d}-${t}`, f = b(
-      (h) => {
-        e == null || e(h);
+    checked: t = !1,
+    className: c,
+    defaultChecked: o,
+    disabled: a,
+    label: d,
+    labelTextClassName: p,
+    name: i,
+    theme: n,
+    value: m,
+    wrapperClassName: f,
+    onChange: s
+  }, h) => {
+    const N = j(), { theme: u } = I(), l = `${N}-${i}`, x = n ?? u, R = w(
+      (b) => {
+        s == null || s(b);
       },
-      [e]
+      [s]
     );
-    return /* @__PURE__ */ u(
+    return /* @__PURE__ */ T(
       "label",
       {
-        htmlFor: o,
-        className: "inline-flex items-center cursor-pointer",
+        htmlFor: l,
+        className: r(
+          y({
+            className: f,
+            disabled: a || !1
+          })
+        ),
         children: [
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ e(
             "input",
             {
-              ref: p,
-              id: o,
+              ref: h,
+              id: l,
               type: "radio",
-              name: t,
-              value: s,
-              checked: m,
-              defaultChecked: a,
+              name: i,
+              value: m,
+              checked: t,
+              defaultChecked: o,
               className: "hidden peer",
-              onChange: () => f(s)
+              onChange: () => R(m),
+              disabled: a
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ e(
             "span",
             {
-              className: F(
-                R({ className: i, theme: l ?? n })
+              className: r(
+                F({
+                  className: c,
+                  theme: x,
+                  disabled: a || !1,
+                  checked: t || o || !1
+                })
               )
             }
           ),
-          /* @__PURE__ */ r("span", { className: "ml-2", children: c })
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: r($({ className: p })),
+              children: d
+            }
+          )
         ]
       }
     );
   }
 );
 export {
-  q as Radio
+  D as Radio
 };