@konstructio/ui 0.0.11 → 0.0.12-alpha.1

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

@@ -1,15 +1,13 @@
 import "react/jsx-runtime";
-import "../../../../index-BtibbG81.js";
+import "../../../../index-KEdwcThH.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-W2GbkC_F.js";
+import "../../../../Combination-BQYb0Gw7.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-W2GbkC_F.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-KEdwcThH.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,30 +1,27 @@
-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 { progressBarVariants as l, progressBarProgress 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,
         "%"
       ] })
     ] }),
-    /* @__PURE__ */ i("div", { className: o(d({ theme: t })), children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i("div", { className: o(l({ theme: t })), children: /* @__PURE__ */ i(
       "div",
       {
         className: o(
-          c({ theme: t, status: n }),
+          d({ 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 { wrapperRadioVariants as F, radioVariants as $, labelRadioVariants 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(
+          F({
+            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(
+                $({
+                  className: c,
+                  theme: x,
+                  disabled: a || !1,
+                  checked: t || o || !1
+                })
               )
             }
           ),
-          /* @__PURE__ */ r("span", { className: "ml-2", children: c })
+          /* @__PURE__ */ e(
+            "span",
+            {
+              className: r(y({ className: p })),
+              children: d
+            }
+          )
         ]
       }
     );
   }
 );
 export {
-  q as Radio
+  D as Radio
 };

package/dist/components/Radio/Radio.variants.js

@@ -1,14 +1,25 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const o = e(
+const a = e(
+  ["inline-flex", "items-center", "cursor-pointer", "gap-2", "w-max"],
+  {
+    variants: {
+      disabled: {
+        true: ["cursor-not-allowed"],
+        false: ["cursor-pointer"]
+      }
+    },
+    defaultVariants: {
+      disabled: !1
+    }
+  }
+), o = e(
   [
-    "border-2",
-    "border-gray-400",
+    "border",
+    "border-zinc-400",
     "duration-300",
-    "h-4",
     "inline-block",
     "rounded-full",
     "transition-all",
-    "w-4",
     "flex",
     "flex-col",
     "items-center",
@@ -19,28 +30,70 @@ const o = e(
     "before:h-0",
     "before:duration-100",
     "before:transition-all",
+    "h-4",
+    "w-4",
     "peer-checked:before:h-[70%]",
     "peer-checked:before:w-[70%]"
   ],
   {
     variants: {
       theme: {
-        colony: [
-          "peer-checked:border-red-700",
-          "peer-checked:before:bg-red-700"
-        ],
-        kubefirst: [
-          "peer-checked:border-kubefirst-primary",
-          "peer-checked:before:bg-kubefirst-primary"
-        ],
+        colony: "",
+        kubefirst: "",
         civo: ""
+      },
+      disabled: {
+        true: "",
+        false: ""
+      },
+      checked: {
+        true: "",
+        false: ""
       }
     },
+    compoundVariants: [
+      {
+        theme: "kubefirst",
+        disabled: !1,
+        checked: [!0, !1],
+        class: [
+          "peer-checked:border-kubefirst-primary",
+          "peer-checked:before:bg-kubefirst-primary"
+        ]
+      },
+      {
+        theme: "kubefirst",
+        disabled: !0,
+        checked: !0,
+        class: [
+          "peer-checked:border-zinc-400",
+          "peer-checked:before:bg-zinc-400",
+          "cursor-not-allowed",
+          "[&+span]:cursor-not-allowed"
+        ]
+      },
+      {
+        theme: "kubefirst",
+        disabled: !0,
+        checked: !1,
+        class: [
+          "peer-checked:border-zinc-300",
+          "peer-checked:border-zinc-300",
+          "peer-checked:before:bg-zinc-300",
+          "cursor-not-allowed",
+          "[&+span]:cursor-not-allowed",
+          "bg-zinc-50"
+        ]
+      }
+    ],
     defaultVariants: {
-      theme: "kubefirst"
+      theme: "kubefirst",
+      disabled: !1
     }
   }
-);
+), t = e(["text-sm", "text-zinc-700"]);
 export {
-  o as radioVariants
+  t as labelRadioVariants,
+  o as radioVariants,
+  a as wrapperRadioVariants
 };

package/dist/components/RadioCard/RadioCard.js

@@ -0,0 +1,41 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as a } from "../../utils/index.js";
+import { Card as h } from "../Card/Card.js";
+import { Radio as l } from "../Radio/Radio.js";
+import { radioCardVariants as n } from "./RadioCard.variants.js";
+import { useTheme as f } from "../../contexts/theme.hook.js";
+const N = ({
+  wrapperClassName: o,
+  theme: t,
+  labelWrapperClassName: i,
+  checked: r,
+  ...s
+}) => {
+  const { theme: p } = f(), e = t ?? p;
+  return /* @__PURE__ */ m(
+    h,
+    {
+      className: a(
+        n({
+          className: o,
+          theme: e
+        })
+      ),
+      wrapperClassName: "w-max",
+      theme: e,
+      isActive: r,
+      children: /* @__PURE__ */ m(
+        l,
+        {
+          theme: e,
+          wrapperClassName: a("w-full h-full p-3 gap-3", i),
+          checked: r,
+          ...s
+        }
+      )
+    }
+  );
+};
+export {
+  N as RadioCard
+};

package/dist/components/RadioCard/RadioCard.variants.js

@@ -0,0 +1,19 @@
+import { c as e } from "../../index-BNmRGtA6.js";
+const t = e(
+  ["flex", "items-center", "p-0", "border-2"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  t as radioCardVariants
+};

package/dist/components/RadioCardGroup/RadioCardGroup.js

@@ -0,0 +1,47 @@
+import { jsx as e, Fragment as S } from "react/jsx-runtime";
+import { useState as k, useCallback as l } from "react";
+import { cn as m } from "../../utils/index.js";
+import { RadioCard as G } from "../RadioCard/RadioCard.js";
+import { radioCardGroupVariants as R } from "./RadioCardGroup.variants.js";
+import { useTheme as T } from "../../contexts/theme.hook.js";
+const z = ({
+  className: o,
+  defaultChecked: c,
+  direction: s,
+  name: d,
+  options: i,
+  theme: p,
+  wrapperClassName: a,
+  onValueChange: t
+}) => {
+  const { theme: f } = T(), [h, n] = k(c), x = l(
+    (r) => {
+      n(r), t == null || t(r);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: m(
+        R({ className: a, direction: s })
+      ),
+      children: /* @__PURE__ */ e(S, { children: i.map(({ value: r, ...N }) => /* @__PURE__ */ e(
+        G,
+        {
+          value: r,
+          theme: p ?? f,
+          name: d,
+          className: m(o),
+          checked: h === r,
+          onChange: () => x(r),
+          ...N
+        },
+        r
+      )) })
+    }
+  );
+};
+export {
+  z as RadioCardGroup
+};

package/dist/components/RadioCardGroup/RadioCardGroup.variants.js

@@ -0,0 +1,21 @@
+import { c as o } from "../../index-BNmRGtA6.js";
+const a = o(["flex"], {
+  variants: {
+    theme: {
+      colony: "",
+      kubefirst: "",
+      civo: ""
+    },
+    direction: {
+      row: ["flex-row", "gap-8"],
+      col: ["flex-col", "gap-4"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    direction: "col"
+  }
+});
+export {
+  a as radioCardGroupVariants
+};

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,41 +1,51 @@
-import { jsx as o, Fragment as N } from "react/jsx-runtime";
-import { S as R } from "../../index-DoOsnuB6.js";
-import { useState as T, useCallback as a } from "react";
-import "../../contexts/theme.context.js";
-import { useTheme as b } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as e } from "../../utils/index.js";
-import { Radio as j } from "../Radio/Radio.js";
-const D = ({
-  asChild: r,
-  className: c,
-  defaultValue: s,
+import { jsx as o, Fragment as k } from "react/jsx-runtime";
+import { S as G } from "../../index-DoOsnuB6.js";
+import { useState as R, useCallback as T } from "react";
+import { cn as r } from "../../utils/index.js";
+import { Radio as b } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+import { useTheme as F } from "../../contexts/theme.hook.js";
+const E = ({
+  asChild: e,
+  className: s,
+  defaultChecked: c,
   name: i,
   options: p,
   theme: d,
   wrapperClassName: f,
+  direction: a,
   onValueChange: m
 }) => {
-  const S = r ? R : "div", { theme: h } = b(), [n, x] = T(s), l = a(
+  const n = e ? G : "div", { theme: S } = F(), [h, l] = R(
+    () => c
+  ), x = T(
     (t) => {
-      x(t), m == null || m(t);
+      l(t), m == null || m(t);
     },
     [m]
   );
-  return /* @__PURE__ */ o(S, { className: e("flex gap-2", f), children: /* @__PURE__ */ o(N, { children: p.map(({ value: t, ...k }) => /* @__PURE__ */ o(
-    j,
+  return /* @__PURE__ */ o(
+    n,
     {
-      value: t,
-      theme: d ?? h,
-      name: i,
-      className: e(c),
-      checked: n === t,
-      onChange: () => l(t),
-      ...k
-    },
-    t
-  )) }) });
+      className: r(
+        j({ className: f, direction: a })
+      ),
+      children: /* @__PURE__ */ o(k, { children: p.map(({ value: t, ...N }) => /* @__PURE__ */ o(
+        b,
+        {
+          value: t,
+          theme: d ?? S,
+          name: i,
+          className: r(s),
+          checked: h === t,
+          onChange: () => x(t),
+          ...N
+        },
+        t
+      )) })
+    }
+  );
 };
 export {
-  D as RadioGroup
+  E as RadioGroup
 };

package/dist/components/RadioGroup/RadioGroup.variants.js

@@ -0,0 +1,21 @@
+import { c as o } from "../../index-BNmRGtA6.js";
+const e = o(["flex"], {
+  variants: {
+    theme: {
+      colony: "",
+      kubefirst: "",
+      civo: ""
+    },
+    direction: {
+      row: ["flex-row", "gap-8"],
+      col: ["flex-col", "gap-4"]
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst",
+    direction: "col"
+  }
+});
+export {
+  e as radioGroupVariants
+};