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

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-B_6_jmOO.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
+};

package/dist/components/Range/Range.js

@@ -1,22 +1,20 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { R as V, T as v, a as T, b as c } from "../../index-z-AJyzdv.js";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { R as V, T as v, a as T, b as c } from "../../index-C6WtlN_F.js";
 import { forwardRef as b, useRef as j, useState as k, useImperativeHandle as w, useEffect as y, useCallback as C } from "react";
-import "../../contexts/theme.context.js";
-import { useTheme as S } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
 import { cn as t } from "../../utils/index.js";
-import { rangeVariants as $, trackVariants as E, rangeOutsideVariants as H, thumbVariants as i } from "./Range.variants.js";
-const J = b(
+import { rangeOutsideVariants as S, trackVariants as $, thumbVariants as i, rangeVariants as E } from "./Range.variants.js";
+import { useTheme as H } from "../../contexts/theme.hook.js";
+const F = b(
   ({
-    label: m,
+    label: l,
     defaultValue: o = [0, 100],
     name: u,
     theme: h,
-    size: l,
+    size: m,
     showValue: f,
     ...d
   }, p) => {
-    const a = j(null), [s, x] = k(o), { theme: N } = S(), r = h ?? N;
+    const a = j(null), [s, x] = k(o), { theme: N } = H(), n = h ?? N;
     w(p, () => a.current, [a]), y(() => {
       a.current && (a.current.value = `[${s.toString()}]`);
     }, [s]);
@@ -24,17 +22,17 @@ const J = b(
       (R) => x(R),
       []
     );
-    return /* @__PURE__ */ n("div", { className: "w-full relative flex flex-col gap-3", children: [
-      /* @__PURE__ */ n(
+    return /* @__PURE__ */ r("div", { className: "w-full relative flex flex-col gap-3", children: [
+      /* @__PURE__ */ r(
         "div",
         {
           className: t(
             "flex items-center",
-            m ? "justify-between" : "justify-end"
+            l ? "justify-between" : "justify-end"
           ),
           children: [
-            m ? /* @__PURE__ */ e("label", { children: m }) : null,
-            f ? /* @__PURE__ */ n("span", { className: "text-xs", children: [
+            l ? /* @__PURE__ */ e("label", { children: l }) : null,
+            f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
               s[0],
               " - ",
               s[1]
@@ -43,22 +41,22 @@ const J = b(
         }
       ),
       /* @__PURE__ */ e("input", { ref: a, name: u, className: "hidden", type: "text" }),
-      /* @__PURE__ */ n(
+      /* @__PURE__ */ r(
         V,
         {
           value: s,
-          className: t($({ theme: r })),
+          className: t(E({ theme: n })),
           onValueChange: g,
           ...d,
           children: [
-            /* @__PURE__ */ e(v, { className: t(E({ theme: r, size: l })), children: /* @__PURE__ */ e(
+            /* @__PURE__ */ e(v, { className: t($({ theme: n, size: m })), children: /* @__PURE__ */ e(
               T,
               {
-                className: t(H({ theme: r }))
+                className: t(S({ theme: n }))
               }
             ) }),
-            /* @__PURE__ */ e(c, { className: t(i({ theme: r, size: l })) }),
-            /* @__PURE__ */ e(c, { className: t(i({ theme: r, size: l })) })
+            /* @__PURE__ */ e(c, { className: t(i({ theme: n, size: m })) }),
+            /* @__PURE__ */ e(c, { className: t(i({ theme: n, size: m })) })
           ]
         }
       )
@@ -66,5 +64,5 @@ const J = b(
   }
 );
 export {
-  J as Range
+  F as Range
 };

package/dist/components/Sidebar/Sidebar.js

@@ -1,27 +1,25 @@
 import { jsx as r } from "react/jsx-runtime";
-import "../../contexts/theme.context.js";
-import "react";
 import { ThemeProvider as t } from "../../contexts/theme.provider.js";
-import { Footer as a } from "./components/Footer/Footer.js";
-import { Logo as m } from "./components/Logo/Logo.js";
-import { Navigation as p } from "./components/Navigation/Navigation.js";
-import { NavigationGroup as n } from "./components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as e } from "./components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as g } from "./components/NavigationSeparator/NavigationSeparator.js";
-import { Wrapper as f } from "./components/Wrapper/Wrapper.js";
-const o = (i) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(f, { ...i }) });
-o.Footer = a;
-o.Logo = m;
-o.Navigation = p;
-o.NavigationGroup = n;
-o.NavigationOption = e;
-o.NavigationSeparator = g;
+import { Wrapper as a } from "./components/Wrapper/Wrapper.js";
+import { Footer as m } from "./components/Footer/Footer.js";
+import { Logo as p } from "./components/Logo/Logo.js";
+import { Navigation as n } from "./components/Navigation/Navigation.js";
+import { NavigationGroup as e } from "./components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as f } from "./components/NavigationSeparator/NavigationSeparator.js";
+const o = (i) => /* @__PURE__ */ r(t, { children: /* @__PURE__ */ r(a, { ...i }) });
+o.Footer = m;
+o.Logo = p;
+o.Navigation = n;
+o.NavigationGroup = e;
+o.NavigationOption = g;
+o.NavigationSeparator = f;
 export {
-  a as Footer,
-  m as Logo,
-  p as Navigation,
-  n as NavigationGroup,
-  e as NavigationOption,
-  g as NavigationSeparator,
+  m as Footer,
+  p as Logo,
+  n as Navigation,
+  e as NavigationGroup,
+  g as NavigationOption,
+  f as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/components/Footer/Footer.js

@@ -1,22 +1,19 @@
 import { jsx as m } from "react/jsx-runtime";
-import "../../../../contexts/theme.context.js";
-import { useTheme as i } from "../../../../contexts/theme.hook.js";
-import "react";
-import "../../../../js.cookie-OLEfuq_g.js";
-import { cn as p } from "../../../../utils/index.js";
-import { footerVariants as s } from "./Footer.variants.js";
-const T = ({ theme: o, className: t, children: r }) => {
-  const { theme: e } = i();
+import { cn as s } from "../../../../utils/index.js";
+import { footerVariants as f } from "./Footer.variants.js";
+import { useTheme as n } from "../../../../contexts/theme.hook.js";
+const h = ({ theme: o, className: e, children: t }) => {
+  const { theme: r } = n();
   return /* @__PURE__ */ m(
     "footer",
     {
-      className: p(
-        s({ theme: o ?? e, className: t })
+      className: s(
+        f({ theme: o ?? r, className: e })
       ),
-      children: r
+      children: t
     }
   );
 };
 export {
-  T as Footer
+  h as Footer
 };

package/dist/components/Sidebar/components/Logo/Logo.js

@@ -1,20 +1,17 @@
-import { jsx as e } from "react/jsx-runtime";
-import "../../../../contexts/theme.context.js";
-import { useTheme as i } from "../../../../contexts/theme.hook.js";
-import "react";
-import "../../../../js.cookie-OLEfuq_g.js";
-import { cn as p } from "../../../../utils/index.js";
-import { logoVariants as s } from "./Logo.variants.js";
-const l = ({ children: o, theme: m, className: r }) => {
-  const { theme: t } = i();
-  return /* @__PURE__ */ e(
+import { jsx as t } from "react/jsx-runtime";
+import { cn as s } from "../../../../utils/index.js";
+import { logoVariants as n } from "./Logo.variants.js";
+import { useTheme as a } from "../../../../contexts/theme.hook.js";
+const f = ({ children: o, theme: e, className: m }) => {
+  const { theme: r } = a();
+  return /* @__PURE__ */ t(
     "header",
     {
-      className: p(s({ theme: m ?? t, className: r })),
+      className: s(n({ theme: e ?? r, className: m })),
       children: o
     }
   );
 };
 export {
-  l as Logo
+  f as Logo
 };

package/dist/components/Sidebar/components/Navigation/Navigation.js

@@ -1,34 +1,31 @@
 import { jsx as m } from "react/jsx-runtime";
-import "../../../../contexts/theme.context.js";
-import { useTheme as n } from "../../../../contexts/theme.hook.js";
-import "react";
-import "../../../../js.cookie-OLEfuq_g.js";
-import { cn as p } from "../../../../utils/index.js";
+import { cn as n } from "../../../../utils/index.js";
 import { NavigationGroup as e } from "../NavigationGroup/NavigationGroup.js";
-import { NavigationOption as v } from "../NavigationOption/NavigationOption.js";
-import { NavigationSeparator as g } from "../NavigationSeparator/NavigationSeparator.js";
-import { NavigationTitle as N } from "../NavigationTitle/NavigationTitle.js";
-import { navigationVariants as f } from "./Navigation.variants.js";
+import { NavigationOption as p } from "../NavigationOption/NavigationOption.js";
+import { NavigationSeparator as v } from "../NavigationSeparator/NavigationSeparator.js";
+import { NavigationTitle as g } from "../NavigationTitle/NavigationTitle.js";
+import { navigationVariants as N } from "./Navigation.variants.js";
+import { useTheme as f } from "../../../../contexts/theme.hook.js";
 const o = ({
   className: i,
   theme: t,
   children: a
 }) => {
-  const { theme: r } = n();
+  const { theme: r } = f();
   return /* @__PURE__ */ m(
     "nav",
     {
-      className: p(
-        f({ theme: t ?? r, className: i })
+      className: n(
+        N({ theme: t ?? r, className: i })
       ),
       children: a
     }
   );
 };
 o.NavigationGroup = e;
-o.NavigationOption = v;
-o.NavigationSeparator = g;
-o.NavigationTitle = N;
+o.NavigationOption = p;
+o.NavigationSeparator = v;
+o.NavigationTitle = g;
 export {
   o as Navigation
 };

package/dist/components/Sidebar/components/NavigationGroup/NavigationGroup.js

@@ -1,35 +1,32 @@
-import { jsxs as p, Fragment as u, jsx as o } from "react/jsx-runtime";
-import { cn as l } from "../../../../utils/index.js";
+import { jsxs as u, Fragment as l, jsx as o } from "react/jsx-runtime";
+import { cn as p } from "../../../../utils/index.js";
 import { NavigationTitle as c } from "../NavigationTitle/NavigationTitle.js";
 import { navigationGroupsVariants as f } from "./NavigationGroup.variants.js";
-import "../../../../contexts/theme.context.js";
 import { useTheme as h } from "../../../../contexts/theme.hook.js";
-import "react";
-import "../../../../js.cookie-OLEfuq_g.js";
-const F = ({
+const j = ({
   children: t,
   title: r,
-  className: m,
-  theme: e,
-  titleClassName: i,
-  isVisible: n = !0,
+  className: e,
+  theme: m,
+  titleClassName: n,
+  isVisible: i = !0,
   ...a
 }) => {
   const { theme: s } = h();
-  return n ? /* @__PURE__ */ p(u, { children: [
+  return i ? /* @__PURE__ */ u(l, { children: [
     r ? /* @__PURE__ */ o(
       c,
       {
         title: r,
-        className: i,
+        className: n,
         ...a
       }
     ) : null,
     /* @__PURE__ */ o(
       "ul",
       {
-        className: l(
-          f({ theme: e ?? s, className: m })
+        className: p(
+          f({ theme: m ?? s, className: e })
         ),
         children: t
       }
@@ -37,5 +34,5 @@ const F = ({
   ] }) : null;
 };
 export {
-  F as NavigationGroup
+  j as NavigationGroup
 };