@konstructio/ui 0.0.12 → 0.0.13-alpha.2

package/dist/components/Sidebar/components/Wrapper/Wrapper.js

@@ -1,24 +1,25 @@
-import { jsxs as x, jsx as C } from "react/jsx-runtime";
-import { useRef as d, useCallback as l, useMemo as s, Children as a, isValidElement as v, useEffect as D } from "react";
-import "../../../../contexts/theme.context.js";
-import { useTheme as T } from "../../../../contexts/theme.hook.js";
-import "../../../../js.cookie-OLEfuq_g.js";
-import { cn as E } from "../../../../utils/index.js";
-import { wrapperSiderbarVariants as V, dragVariants as b } from "../../Sidebar.variants.js";
-import { Footer as j } from "../Footer/Footer.js";
-import { Logo as z } from "../Logo/Logo.js";
-import { Navigation as k } from "../Navigation/Navigation.js";
-const I = ({
-  canResize: M = !0,
-  children: y,
+import { Footer as N } from "../Footer/Footer.js";
+import { Logo as C } from "../Logo/Logo.js";
+import { Navigation as D } from "../Navigation/Navigation.js";
+import "../NavigationGroup/NavigationGroup.js";
+import "../NavigationOption/NavigationOption.js";
+import "../NavigationSeparator/NavigationSeparator.js";
+import "../NavigationTitle/NavigationTitle.js";
+import { jsxs as V, jsx as b } from "react/jsx-runtime";
+import { useRef as d, useCallback as f, useMemo as s, Children as a, isValidElement as l } from "react";
+import { cn as y } from "../../../../utils/index.js";
+import { dragVariants as j, wrapperSiderbarVariants as x } from "../../Sidebar.variants.js";
+const G = ({
+  canResize: g = !0,
+  children: v,
   maxWith: i = 300,
   minWith: m = 240,
-  theme: c,
-  wrapperClassName: w
+  theme: L,
+  wrapperClassName: M
 }) => {
-  const r = d(null), u = d(null), f = d(!1), { theme: g, setTheme: L } = T(), n = l(
+  const r = d(null), u = d(null), c = d(!1), n = f(
     (e) => {
-      if (!f.current) {
+      if (!c.current) {
         r.current && (r.current.style.opacity = "0");
         return;
       }
@@ -26,54 +27,52 @@ const I = ({
       o < m && (o = m), o > i && (o = i), u.current && r.current && (u.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
     },
     [i, m]
-  ), p = l(() => {
-    f.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
-  }, [n]), R = l(
+  ), p = f(() => {
+    c.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
+  }, [n]), w = f(
     (e) => {
-      e.preventDefault(), e.stopPropagation(), f.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
+      e.preventDefault(), e.stopPropagation(), c.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
     },
     [n, p]
   ), t = s(
-    () => a.toArray(y),
-    [y]
-  ), h = s(
+    () => a.toArray(v),
+    [v]
+  ), E = s(
     () => a.toArray(t).find(
-      (e) => v(e) && e.type === z
+      (e) => l(e) && e.type === C
     ),
     [t]
-  ), A = s(
+  ), R = s(
     () => a.toArray(t).find(
-      (e) => v(e) && e.type === k
+      (e) => l(e) && e.type === D
     ),
     [t]
-  ), N = s(
+  ), A = s(
     () => a.toArray(t).find(
-      (e) => v(e) && e.type === j
+      (e) => l(e) && e.type === N
     ),
     [t]
   );
-  return D(() => {
-    c && L(c);
-  }, [L, c]), /* @__PURE__ */ x(
+  return /* @__PURE__ */ V(
     "aside",
     {
       ref: u,
-      className: E(
-        V({
-          className: w,
-          theme: g
+      className: y(
+        x({
+          className: M
         })
       ),
+      "data-theme": L,
       children: [
-        h,
+        E,
+        R,
         A,
-        N,
-        M && /* @__PURE__ */ C(
+        g && /* @__PURE__ */ b(
           "div",
           {
             ref: r,
-            className: E(b({ theme: g })),
-            onMouseDown: R
+            className: y(j()),
+            onMouseDown: w
           }
         )
       ]
@@ -81,5 +80,5 @@ const I = ({
   );
 };
 export {
-  I as Wrapper
+  G as Wrapper
 };

package/dist/components/Slider/Slider.js

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

package/dist/components/Slider/Slider.variants.js

@@ -1,36 +1,30 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const r = e(
-  ["relative", "flex", "items-center", "w-full"],
+const s = e([
+  "relative",
+  "flex",
+  "items-center",
+  "w-full"
+]), a = e(
+  [
+    "relative",
+    "flex-grow",
+    "rounded-full",
+    "bg-kubefirst-secondary",
+    "colony:bg-red-500"
+  ],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
+      size: {
+        sm: ["h-1"],
+        md: ["h-2"],
+        lg: ["h-3"]
       }
     },
     defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), i = e(["relative", "flex-grow", "rounded-full"], {
-  variants: {
-    theme: {
-      kubefirst: ["bg-kubefirst-secondary"],
-      colony: ["bg-red-500"],
-      civo: ""
-    },
-    size: {
-      sm: ["h-1"],
-      md: ["h-2"],
-      lg: ["h-3"]
+      size: "md"
     }
-  },
-  defaultVariants: {
-    theme: "kubefirst",
-    size: "md"
   }
-}), s = e(
+), t = e(
   [
     "block",
     "w-5",
@@ -45,11 +39,6 @@ const r = e(
   ],
   {
     variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      },
       size: {
         sm: ["w-5", "h-5"],
         md: ["w-6", "h-6"],
@@ -57,13 +46,12 @@ const r = e(
       }
     },
     defaultVariants: {
-      theme: "kubefirst",
       size: "md"
     }
   }
 );
 export {
-  r as sliderVariants,
-  s as thumbVariants,
-  i as trackVariants
+  s as sliderVariants,
+  t as thumbVariants,
+  a as trackVariants
 };

package/dist/components/Switch/Switch.js

@@ -1,63 +1,60 @@
-import { jsxs as P, jsx as u } from "react/jsx-runtime";
+import { jsxs as x, jsx as d } from "react/jsx-runtime";
 import * as h from "react";
-import { forwardRef as _, useState as H, useRef as A, useId as M, useImperativeHandle as $, useEffect as j, useCallback as z } from "react";
-import { c as B, a as q, d as F } from "../../index-8vgf-x5i.js";
-import { u as O } from "../../index-DoOsnuB6.js";
-import { u as V, a as D } from "../../index-BxeV34ij.js";
-import { P as g } from "../../index-BaNV0qac.js";
-import "../../contexts/theme.context.js";
-import { useTheme as L } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as x } from "../../utils/index.js";
-import { switchVariants as U, thumbVariants as W } from "./Switch.variants.js";
-var k = "Switch", [X, de] = B(k), [G, J] = X(k), R = h.forwardRef(
-  (e, s) => {
+import { forwardRef as _, useRef as H, useId as M, useImperativeHandle as $, useEffect as j } from "react";
+import { a as z, c as B, b as q } from "../../index-bYyfdsls.js";
+import { u as A } from "../../index-Bk324h27.js";
+import { u as F, a as O } from "../../index-Bry5AFQ2.js";
+import { P } from "../../index-g-TFwd6Y.js";
+import { cn as C } from "../../utils/index.js";
+import { thumbVariants as V, switchVariants as D } from "./Switch.variants.js";
+var k = "Switch", [L, ce] = B(k), [U, W] = L(k), R = h.forwardRef(
+  (e, u) => {
     const {
       __scopeSwitch: t,
-      name: c,
-      checked: n,
-      defaultChecked: p,
-      required: o,
-      disabled: a,
-      value: i = "on",
-      onCheckedChange: m,
-      form: r,
-      ...d
-    } = e, [l, b] = h.useState(null), v = O(s, (C) => b(C)), f = h.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, T] = q({
-      prop: n,
-      defaultProp: p,
-      onChange: m
+      name: s,
+      checked: a,
+      defaultChecked: n,
+      required: l,
+      disabled: r,
+      value: o = "on",
+      onCheckedChange: f,
+      form: c,
+      ...p
+    } = e, [i, w] = h.useState(null), g = A(u, (b) => w(b)), v = h.useRef(!1), S = i ? c || !!i.closest("form") : !0, [m = !1, I] = z({
+      prop: a,
+      defaultProp: n,
+      onChange: f
     });
-    return /* @__PURE__ */ P(G, { scope: t, checked: S, disabled: a, children: [
-      /* @__PURE__ */ u(
-        g.button,
+    return /* @__PURE__ */ x(U, { scope: t, checked: m, disabled: r, children: [
+      /* @__PURE__ */ d(
+        P.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": S,
-          "aria-required": o,
-          "data-state": E(S),
-          "data-disabled": a ? "" : void 0,
-          disabled: a,
-          value: i,
-          ...d,
-          ref: v,
-          onClick: F(e.onClick, (C) => {
-            T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
+          "aria-checked": m,
+          "aria-required": l,
+          "data-state": E(m),
+          "data-disabled": r ? "" : void 0,
+          disabled: r,
+          value: o,
+          ...p,
+          ref: g,
+          onClick: q(e.onClick, (b) => {
+            I((T) => !T), S && (v.current = b.isPropagationStopped(), v.current || b.stopPropagation());
           })
         }
       ),
-      w && /* @__PURE__ */ u(
-        K,
+      S && /* @__PURE__ */ d(
+        X,
         {
-          control: l,
-          bubbles: !f.current,
-          name: c,
-          value: i,
-          checked: S,
-          required: o,
-          disabled: a,
-          form: r,
+          control: i,
+          bubbles: !v.current,
+          name: s,
+          value: o,
+          checked: m,
+          required: l,
+          disabled: r,
+          form: c,
           style: { transform: "translateX(-100%)" }
         }
       )
@@ -66,40 +63,40 @@ var k = "Switch", [X, de] = B(k), [G, J] = X(k), R = h.forwardRef(
 );
 R.displayName = k;
 var y = "SwitchThumb", N = h.forwardRef(
-  (e, s) => {
-    const { __scopeSwitch: t, ...c } = e, n = J(y, t);
-    return /* @__PURE__ */ u(
-      g.span,
+  (e, u) => {
+    const { __scopeSwitch: t, ...s } = e, a = W(y, t);
+    return /* @__PURE__ */ d(
+      P.span,
       {
-        "data-state": E(n.checked),
-        "data-disabled": n.disabled ? "" : void 0,
-        ...c,
-        ref: s
+        "data-state": E(a.checked),
+        "data-disabled": a.disabled ? "" : void 0,
+        ...s,
+        ref: u
       }
     );
   }
 );
 N.displayName = y;
-var K = (e) => {
-  const { control: s, checked: t, bubbles: c = !0, ...n } = e, p = h.useRef(null), o = V(t), a = D(s);
+var X = (e) => {
+  const { control: u, checked: t, bubbles: s = !0, ...a } = e, n = h.useRef(null), l = F(t), r = O(u);
   return h.useEffect(() => {
-    const i = p.current, m = window.HTMLInputElement.prototype, d = Object.getOwnPropertyDescriptor(m, "checked").set;
-    if (o !== t && d) {
-      const l = new Event("click", { bubbles: c });
-      d.call(i, t), i.dispatchEvent(l);
+    const o = n.current, f = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(f, "checked").set;
+    if (l !== t && p) {
+      const i = new Event("click", { bubbles: s });
+      p.call(o, t), o.dispatchEvent(i);
     }
-  }, [o, t, c]), /* @__PURE__ */ u(
+  }, [l, t, s]), /* @__PURE__ */ d(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
       defaultChecked: t,
-      ...n,
+      ...a,
       tabIndex: -1,
-      ref: p,
+      ref: n,
       style: {
         ...e.style,
-        ...a,
+        ...r,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -111,65 +108,63 @@ var K = (e) => {
 function E(e) {
   return e ? "checked" : "unchecked";
 }
-var Q = R, Y = N;
-const le = _(
+var G = R, J = N;
+const se = _(
   ({
     name: e,
-    defaultChecked: s,
-    alignment: t = "horizontal",
-    theme: c,
-    thumbClassName: n,
-    className: p,
-    label: o
-  }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), d = M(), { theme: l } = L(), b = c ?? l, v = e ? `${d}-${e}` : d;
-    $(a, () => r.current, [r]), j(() => {
-      r.current && (r.current.value = `${i}`);
-    }, [i]);
-    const f = z(
-      (w) => m(w),
-      []
-    );
-    return /* @__PURE__ */ P(
+    alignment: u = "horizontal",
+    theme: t,
+    thumbClassName: s,
+    className: a,
+    label: n,
+    defaultChecked: l,
+    onChange: r,
+    value: o
+  }, f) => {
+    const c = H(null), p = M(), i = e ? `${p}-${e}` : p;
+    return $(f, () => c.current, [c]), j(() => {
+      c.current && (c.current.value = `${o}`);
+    }, [o]), /* @__PURE__ */ x(
       "div",
       {
-        className: x(
+        className: C(
           "w-full flex gap-3",
-          t === "vertical" ? "flex-col" : "flex-row"
+          u === "vertical" ? "flex-col" : "flex-row"
         ),
+        "data-theme": t,
         children: [
-          o ? /* @__PURE__ */ u(
+          n ? /* @__PURE__ */ d(
             "label",
             {
               className: "text-base",
-              htmlFor: v,
+              htmlFor: i,
               style: { paddingRight: 15 },
-              children: o
+              children: n
             }
           ) : null,
-          /* @__PURE__ */ u(
-            Q,
+          /* @__PURE__ */ d(
+            G,
             {
-              id: v,
-              defaultChecked: s,
-              onCheckedChange: f,
-              className: x(U({ theme: b, className: p })),
-              "aria-label": o,
-              children: /* @__PURE__ */ u(
-                Y,
+              id: i,
+              defaultChecked: l,
+              checked: o,
+              onCheckedChange: (w) => r == null ? void 0 : r(w),
+              className: C(D({ className: a })),
+              "aria-label": n,
+              children: /* @__PURE__ */ d(
+                J,
                 {
-                  className: W({
-                    theme: b,
-                    className: n
+                  className: V({
+                    className: s
                   })
                 }
               )
             }
           ),
-          /* @__PURE__ */ u(
+          /* @__PURE__ */ d(
             "input",
             {
-              ref: r,
+              ref: c,
               name: e,
               type: "text",
               className: "hidden",
@@ -182,5 +177,5 @@ const le = _(
   }
 );
 export {
-  le as Switch
+  se as Switch
 };

package/dist/components/Switch/Switch.variants.js

@@ -1,57 +1,32 @@
 import { c as t } from "../../index-BNmRGtA6.js";
-const e = t(
-  [
-    "w-12",
-    "h-7",
-    "flex",
-    "items-center",
-    "rounded-full",
-    "shadow",
-    "focus:shadow-md",
-    "data-[state=unchecked]:bg-zinc-200",
-    "transition-all",
-    "delay-10",
-    "duration-250"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: "bg-kubefirst-primary",
-        colony: "bg-red-600",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), r = t(
-  [
-    "block",
-    "w-6",
-    "h-6",
-    "bg-white",
-    "rounded-full",
-    "shadow-md",
-    "transition-all",
-    "translate-x-1",
-    "data-[state=checked]:translate-x-5",
-    "delay-10",
-    "duration-300"
-  ],
-  {
-    variants: {
-      theme: {
-        kubefirst: "",
-        colony: "",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+const e = t([
+  "w-[44px]",
+  "h-[22px]",
+  "flex",
+  "items-center",
+  "rounded-full",
+  "shadow",
+  "focus:shadow-md",
+  "data-[state=unchecked]:bg-zinc-200",
+  "transition-all",
+  "delay-10",
+  "duration-250",
+  "cursor-pointer",
+  "bg-kubefirst-primary",
+  "colony:bg-red-600"
+]), r = t([
+  "block",
+  "w-[18px]",
+  "h-[18px]",
+  "bg-white",
+  "rounded-full",
+  "shadow-md",
+  "transition-all",
+  "translate-x-1",
+  "data-[state=checked]:translate-x-5.5",
+  "delay-10",
+  "duration-300"
+]);
 export {
   e as switchVariants,
   r as thumbVariants