@konstructio/ui 0.0.12 → 0.0.13-alpha.1

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
+    }
+  }
+), c = 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,61 @@ 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: [
+      disabled: {
+        true: "",
+        false: ""
+      },
+      checked: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        disabled: !1,
+        checked: [!0, !1],
+        class: [
           "peer-checked:border-kubefirst-primary",
           "peer-checked:before:bg-kubefirst-primary"
-        ],
-        civo: ""
+        ]
+      },
+      {
+        disabled: !0,
+        checked: !0,
+        class: [
+          "peer-checked:border-zinc-400",
+          "peer-checked:before:bg-zinc-400",
+          "cursor-not-allowed",
+          "[&+span]:cursor-not-allowed"
+        ]
+      },
+      {
+        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"
+      disabled: !1
     }
   }
-);
+), o = e(["text-sm", "text-zinc-700"]);
 export {
-  o as radioVariants
+  o as labelRadioVariants,
+  c as radioVariants,
+  a as wrapperRadioVariants
 };

package/dist/components/RadioCard/RadioCard.js

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

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

@@ -0,0 +1,10 @@
+import { c as r } from "../../index-BNmRGtA6.js";
+const e = r([
+  "flex",
+  "items-center",
+  "p-0",
+  "border-2"
+]);
+export {
+  e as radioCardVariants
+};

package/dist/components/RadioCardGroup/RadioCardGroup.js

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

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

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

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,41 +1,50 @@
-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,
+import { jsx as r } from "react/jsx-runtime";
+import { S as x } from "../../index-Bk324h27.js";
+import { useState as G, useCallback as R } from "react";
+import { cn as m } from "../../utils/index.js";
+import { Radio as b } from "../Radio/Radio.js";
+import { radioGroupVariants as j } from "./RadioGroup.variants.js";
+const B = ({
+  asChild: s,
   className: c,
-  defaultValue: s,
+  defaultChecked: e,
   name: i,
-  options: p,
-  theme: d,
-  wrapperClassName: f,
-  onValueChange: m
+  options: d,
+  theme: p,
+  wrapperClassName: a,
+  direction: f,
+  onValueChange: o
 }) => {
-  const S = r ? R : "div", { theme: h } = b(), [n, x] = T(s), l = a(
+  const S = s ? x : "div", [n, N] = G(
+    () => e
+  ), k = R(
     (t) => {
-      x(t), m == null || m(t);
+      N(t), o == null || o(t);
     },
-    [m]
+    [o]
   );
-  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__ */ r(
+    S,
     {
-      value: t,
-      theme: d ?? h,
-      name: i,
-      className: e(c),
-      checked: n === t,
-      onChange: () => l(t),
-      ...k
-    },
-    t
-  )) }) });
+      className: m(
+        j({ className: a, direction: f })
+      ),
+      "data-theme": p,
+      children: d.map(({ value: t, ...l }) => /* @__PURE__ */ r(
+        b,
+        {
+          value: t,
+          name: i,
+          className: m(c),
+          checked: n === t,
+          onChange: () => k(t),
+          ...l
+        },
+        t
+      ))
+    }
+  );
 };
 export {
-  D as RadioGroup
+  B as RadioGroup
 };

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

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

package/dist/components/Range/Range.js

@@ -1,40 +1,37 @@
-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 { 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 { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { R as g, T as R, a as V, b as c } from "../../index-BOx5P4tS.js";
+import { forwardRef as v, useRef as b, useState as j, useImperativeHandle as k, useEffect as w, useCallback as y } from "react";
+import { cn as a } from "../../utils/index.js";
+import { rangeOutsideVariants as C, trackVariants as T, thumbVariants as i, rangeVariants as S } from "./Range.variants.js";
+const q = v(
   ({
-    label: m,
-    defaultValue: o = [0, 100],
-    name: u,
-    theme: h,
+    label: n,
+    defaultValue: u = [0, 100],
+    name: m,
+    theme: o,
     size: l,
     showValue: f,
     ...d
-  }, p) => {
-    const a = j(null), [s, x] = k(o), { theme: N } = S(), r = h ?? N;
-    w(p, () => a.current, [a]), y(() => {
-      a.current && (a.current.value = `[${s.toString()}]`);
+  }, h) => {
+    const t = b(null), [s, p] = j(u);
+    k(h, () => t.current, [t]), w(() => {
+      t.current && (t.current.value = `[${s.toString()}]`);
     }, [s]);
-    const g = C(
-      (R) => x(R),
+    const x = y(
+      (N) => p(N),
       []
     );
-    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", "data-theme": o, children: [
+      /* @__PURE__ */ r(
         "div",
         {
-          className: t(
+          className: a(
             "flex items-center",
-            m ? "justify-between" : "justify-end"
+            n ? "justify-between" : "justify-end"
           ),
           children: [
-            m ? /* @__PURE__ */ e("label", { children: m }) : null,
-            f ? /* @__PURE__ */ n("span", { className: "text-xs", children: [
+            n ? /* @__PURE__ */ e("label", { children: n }) : null,
+            f ? /* @__PURE__ */ r("span", { className: "text-xs", children: [
               s[0],
               " - ",
               s[1]
@@ -42,23 +39,18 @@ const J = b(
           ]
         }
       ),
-      /* @__PURE__ */ e("input", { ref: a, name: u, className: "hidden", type: "text" }),
-      /* @__PURE__ */ n(
-        V,
+      /* @__PURE__ */ e("input", { ref: t, name: m, className: "hidden", type: "text" }),
+      /* @__PURE__ */ r(
+        g,
         {
           value: s,
-          className: t($({ theme: r })),
-          onValueChange: g,
+          className: a(S()),
+          onValueChange: x,
           ...d,
           children: [
-            /* @__PURE__ */ e(v, { className: t(E({ theme: r, size: l })), children: /* @__PURE__ */ e(
-              T,
-              {
-                className: t(H({ theme: r }))
-              }
-            ) }),
-            /* @__PURE__ */ e(c, { className: t(i({ theme: r, size: l })) }),
-            /* @__PURE__ */ e(c, { className: t(i({ theme: r, size: l })) })
+            /* @__PURE__ */ e(R, { className: a(T({ size: l })), children: /* @__PURE__ */ e(V, { className: a(C()) }) }),
+            /* @__PURE__ */ e(c, { className: a(i({ size: l })) }),
+            /* @__PURE__ */ e(c, { className: a(i({ size: l })) })
           ]
         }
       )
@@ -66,5 +58,5 @@ const J = b(
   }
 );
 export {
-  J as Range
+  q as Range
 };

package/dist/components/Range/Range.variants.js

@@ -1,47 +1,22 @@
-import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
-  [
-    "relative",
-    "flex",
-    "items-center",
-    "w-full",
-    "border",
-    "border-gray-200",
-    "rounded-full",
-    "shadow-sm"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), a = e(["absolute", "h-full"], {
-  variants: {
-    theme: {
-      kubefirst: ["bg-kubefirst-secondary"],
-      colony: ["bg-red-500"],
-      civo: ""
-    }
-  },
-  defaultVariants: {
-    theme: "kubefirst"
-  }
-}), s = e(
+import { c as r } from "../../index-BNmRGtA6.js";
+const a = r([
+  "relative",
+  "flex",
+  "items-center",
+  "w-full",
+  "border",
+  "border-gray-200",
+  "rounded-full",
+  "shadow-sm"
+]), s = r([
+  "absolute",
+  "h-full",
+  "bg-kubefirst-secondary",
+  "colony:bg-red-500"
+]), t = r(
   ["relative", "flex-grow", "bg-gray-100", "rounded-full"],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       size: {
         sm: ["h-1"],
         md: ["h-2"],
@@ -49,11 +24,10 @@ const t = e(
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       size: "md"
     }
   }
-), i = e(
+), o = r(
   [
     "block",
     "w-5",
@@ -68,11 +42,6 @@ const t = e(
   ],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       size: {
         sm: ["w-5", "h-5"],
         md: ["w-6", "h-6"],
@@ -80,14 +49,13 @@ const t = e(
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       size: "md"
     }
   }
 );
 export {
-  a as rangeOutsideVariants,
-  t as rangeVariants,
-  i as thumbVariants,
-  s as trackVariants
+  s as rangeOutsideVariants,
+  a as rangeVariants,
+  o as thumbVariants,
+  t as trackVariants
 };

package/dist/components/Sidebar/Sidebar.js

@@ -1,27 +1,24 @@
-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 { jsx as i } from "react/jsx-runtime";
+import { Wrapper as t } from "./components/Wrapper/Wrapper.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 { Logo as p } from "./components/Logo/Logo.js";
+import { Navigation as m } 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 }) });
+import { NavigationOption as g } from "./components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as f } from "./components/NavigationSeparator/NavigationSeparator.js";
+const o = (r) => /* @__PURE__ */ i(t, { ...r });
 o.Footer = a;
-o.Logo = m;
-o.Navigation = p;
+o.Logo = p;
+o.Navigation = m;
 o.NavigationGroup = n;
-o.NavigationOption = e;
-o.NavigationSeparator = g;
+o.NavigationOption = g;
+o.NavigationSeparator = f;
 export {
   a as Footer,
-  m as Logo,
-  p as Navigation,
+  p as Logo,
+  m as Navigation,
   n as NavigationGroup,
-  e as NavigationOption,
-  g as NavigationSeparator,
+  g as NavigationOption,
+  f as NavigationSeparator,
   o as Sidebar
 };

package/dist/components/Sidebar/Sidebar.variants.js

@@ -1,57 +1,32 @@
-import { c as a } from "../../index-BNmRGtA6.js";
-const r = a(
-  [
-    "duration-200",
-    "ease-linear",
-    "flex",
-    "flex-col",
-    "flex-shrink-0",
-    "group/sidebar",
-    "h-full",
-    "px-4",
-    "relative",
-    "transition-all",
-    "w-[256px]"
-  ],
-  {
-    variants: {
-      theme: {
-        colony: "",
-        kubefirst: ["bg-kubefirst-dark-blue-900"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), t = a(
-  [
-    "absolute",
-    "top-0",
-    "right-0",
-    "h-full",
-    "opacity-0",
-    "group-hover/sidebar:opacity-100",
-    "cursor-col-resize",
-    "w-[2px]",
-    "shadow",
-    "shadow-slate-200"
-  ],
-  {
-    variants: {
-      theme: {
-        colony: "",
-        kubefirst: ["bg-slate-200"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+import { c as r } from "../../index-BNmRGtA6.js";
+const e = r([
+  "duration-200",
+  "ease-linear",
+  "flex",
+  "flex-col",
+  "flex-shrink-0",
+  "group/sidebar",
+  "h-full",
+  "px-4",
+  "relative",
+  "transition-all",
+  "w-[72px]",
+  "md:w-[256px]",
+  "bg-kubefirst-dark-blue-900"
+]), o = r([
+  "absolute",
+  "top-0",
+  "right-0",
+  "h-full",
+  "opacity-0",
+  "group-hover/sidebar:opacity-100",
+  "cursor-col-resize",
+  "w-[2px]",
+  "shadow",
+  "shadow-slate-200",
+  "bg-slate-200"
+]);
 export {
-  t as dragVariants,
-  r as wrapperSiderbarVariants
+  o as dragVariants,
+  e as wrapperSiderbarVariants
 };