@konstructio/ui 0.1.1-alpha.6 → 0.1.2-alpha.10

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

@@ -51,10 +51,10 @@ const a = e(
         disabled: !1,
         checked: [!0, !1],
         class: [
-          "peer-checked:border-kubefirst-primary",
-          "peer-checked:before:bg-kubefirst-primary",
-          "civo:peer-checked:border-aurora-500",
-          "civo:peer-checked:before:bg-aurora-500"
+          "kubefirst:peer-checked:border-kubefirst-primary",
+          "kubefirst:peer-checked:before:bg-kubefirst-primary",
+          "peer-checked:border-aurora-500",
+          "peer-checked:before:bg-aurora-500"
         ]
       },
       {

package/dist/components/Range/Range.js

@@ -1,5 +1,5 @@
 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-DB2XhXHn.js";
+import { R as g, T as R, a as V, b as c } from "../../index-l3NwplN0.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";

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

@@ -1,37 +1,38 @@
-import { Footer as A } from "../Footer/Footer.js";
-import { Logo as b } from "../Logo/Logo.js";
-import { Navigation as C } from "../Navigation/Navigation.js";
+import { Footer as b } 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 D, jsx as V } from "react/jsx-runtime";
+import { jsxs as V, jsx as j } 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 z = ({
+import { dragVariants as x, wrapperSiderbarVariants as z } from "../../Sidebar.variants.js";
+const S = ({
   canResize: g = !0,
   children: v,
+  dividerClassName: L,
   maxWith: i = 300,
   minWith: m = 240,
-  theme: L,
-  wrapperClassName: M
+  theme: M,
+  wrapperClassName: N
 }) => {
-  const r = d(null), u = d(null), c = d(!1), n = f(
+  const r = d(null), c = d(null), u = d(!1), n = f(
     (e) => {
-      if (!c.current) {
+      if (!u.current) {
         r.current && (r.current.style.opacity = "0");
         return;
       }
       let o = e.clientX;
-      o < m && (o = m), o > i && (o = i), u.current && r.current && (u.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
+      o < m && (o = m), o > i && (o = i), c.current && r.current && (c.current.style.width = `${o}px`, r.current.classList.add("opacity-100"));
     },
     [i, m]
   ), p = f(() => {
-    c.current = !1, r.current && r.current.classList.remove("opacity-100"), document.removeEventListener("mousemove", n), document.removeEventListener("mouseup", p);
+    u.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(), c.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
+      e.preventDefault(), e.stopPropagation(), u.current = !0, document.addEventListener("mousemove", n), document.addEventListener("mouseup", p);
     },
     [n, p]
   ), t = s(
@@ -39,39 +40,39 @@ const z = ({
     [v]
   ), E = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === b
+      (e) => l(e) && e.type === C
     ),
     [t]
-  ), N = s(
+  ), R = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === C
+      (e) => l(e) && e.type === D
     ),
     [t]
-  ), R = s(
+  ), A = s(
     () => a.toArray(t).find(
-      (e) => l(e) && e.type === A
+      (e) => l(e) && e.type === b
     ),
     [t]
   );
-  return /* @__PURE__ */ D(
+  return /* @__PURE__ */ V(
     "aside",
     {
-      ref: u,
+      ref: c,
       className: y(
-        x({
-          className: M
+        z({
+          className: N
         })
       ),
-      "data-theme": L,
+      "data-theme": M,
       children: [
         E,
-        N,
         R,
-        g && /* @__PURE__ */ V(
+        A,
+        g && /* @__PURE__ */ j(
           "div",
           {
             ref: r,
-            className: y(j()),
+            className: y(x({ className: L })),
             onMouseDown: w
           }
         )
@@ -79,7 +80,7 @@ const z = ({
     }
   );
 };
-z.displayName = "Sidebar.Wrapper";
+S.displayName = "Sidebar.Wrapper";
 export {
-  z as Wrapper
+  S as Wrapper
 };

package/dist/components/Slider/Slider.js

@@ -1,5 +1,5 @@
 import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import { R as x, T as N, b as v } from "../../index-DB2XhXHn.js";
+import { R as x, T as N, b as v } from "../../index-l3NwplN0.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";

package/dist/components/Switch/Switch.js

@@ -1,112 +1,113 @@
-import { jsxs as x, jsx as n } from "react/jsx-runtime";
-import * as p from "react";
+import { jsxs as C, jsx as i } from "react/jsx-runtime";
+import * as h from "react";
 import { forwardRef as H, useRef as M, useId as $, useImperativeHandle as j, useEffect as z } from "react";
 import { a as A, c as U, b as q } from "../../index-BfXxHr_2.js";
-import { u as P } from "../../index-DQH6odE9.js";
-import { u as F, a as L } from "../../index-CZnD2QxM.js";
-import { P as y } from "../../index-C9T9HQaa.js";
+import { u as N } from "../../index-DQH6odE9.js";
+import { u as F } from "../../index-BZPx6jYI.js";
+import { u as L } from "../../index-BAEWsOG1.js";
+import { P } from "../../index-BVRIAMfe.js";
 import { cn as R } from "../../utils/index.js";
 import { thumbVariants as O, switchVariants as V } from "./Switch.variants.js";
-var b = "Switch", [D, se] = U(b), [W, X] = D(b), N = p.forwardRef(
-  (t, i) => {
+var b = "Switch", [D, ce] = U(b), [W, X] = D(b), y = h.forwardRef(
+  (e, l) => {
     const {
-      __scopeSwitch: r,
+      __scopeSwitch: t,
       name: s,
       checked: o,
       defaultChecked: d,
       required: u,
-      disabled: c,
-      value: a = "on",
+      disabled: r,
+      value: c = "on",
       onCheckedChange: m,
-      form: e,
-      ...f
-    } = t, [l, h] = p.useState(null), v = P(i, (S) => h(S)), C = p.useRef(!1), k = l ? e || !!l.closest("form") : !0, [w, B] = A({
+      form: n,
+      ...a
+    } = e, [p, f] = h.useState(null), w = N(l, (v) => f(v)), x = h.useRef(!1), k = p ? n || !!p.closest("form") : !0, [S, B] = A({
       prop: o,
       defaultProp: d ?? !1,
       onChange: m,
       caller: b
     });
-    return /* @__PURE__ */ x(W, { scope: r, checked: w, disabled: c, children: [
-      /* @__PURE__ */ n(
-        y.button,
+    return /* @__PURE__ */ C(W, { scope: t, checked: S, disabled: r, children: [
+      /* @__PURE__ */ i(
+        P.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": w,
+          "aria-checked": S,
           "aria-required": u,
-          "data-state": I(w),
-          "data-disabled": c ? "" : void 0,
-          disabled: c,
-          value: a,
-          ...f,
-          ref: v,
-          onClick: q(t.onClick, (S) => {
-            B((T) => !T), k && (C.current = S.isPropagationStopped(), C.current || S.stopPropagation());
+          "data-state": I(S),
+          "data-disabled": r ? "" : void 0,
+          disabled: r,
+          value: c,
+          ...a,
+          ref: w,
+          onClick: q(e.onClick, (v) => {
+            B((T) => !T), k && (x.current = v.isPropagationStopped(), x.current || v.stopPropagation());
           })
         }
       ),
-      k && /* @__PURE__ */ n(
+      k && /* @__PURE__ */ i(
         _,
         {
-          control: l,
-          bubbles: !C.current,
+          control: p,
+          bubbles: !x.current,
           name: s,
-          value: a,
-          checked: w,
+          value: c,
+          checked: S,
           required: u,
-          disabled: c,
-          form: e,
+          disabled: r,
+          form: n,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-N.displayName = b;
-var g = "SwitchThumb", E = p.forwardRef(
-  (t, i) => {
-    const { __scopeSwitch: r, ...s } = t, o = X(g, r);
-    return /* @__PURE__ */ n(
-      y.span,
+y.displayName = b;
+var g = "SwitchThumb", E = h.forwardRef(
+  (e, l) => {
+    const { __scopeSwitch: t, ...s } = e, o = X(g, t);
+    return /* @__PURE__ */ i(
+      P.span,
       {
         "data-state": I(o.checked),
         "data-disabled": o.disabled ? "" : void 0,
         ...s,
-        ref: i
+        ref: l
       }
     );
   }
 );
 E.displayName = g;
-var G = "SwitchBubbleInput", _ = p.forwardRef(
+var G = "SwitchBubbleInput", _ = h.forwardRef(
   ({
-    __scopeSwitch: t,
-    control: i,
-    checked: r,
+    __scopeSwitch: e,
+    control: l,
+    checked: t,
     bubbles: s = !0,
     ...o
   }, d) => {
-    const u = p.useRef(null), c = P(u, d), a = F(r), m = L(i);
-    return p.useEffect(() => {
-      const e = u.current;
-      if (!e) return;
-      const f = window.HTMLInputElement.prototype, h = Object.getOwnPropertyDescriptor(
-        f,
+    const u = h.useRef(null), r = N(u, d), c = F(t), m = L(l);
+    return h.useEffect(() => {
+      const n = u.current;
+      if (!n) return;
+      const a = window.HTMLInputElement.prototype, f = Object.getOwnPropertyDescriptor(
+        a,
         "checked"
       ).set;
-      if (a !== r && h) {
-        const v = new Event("click", { bubbles: s });
-        h.call(e, r), e.dispatchEvent(v);
+      if (c !== t && f) {
+        const w = new Event("click", { bubbles: s });
+        f.call(n, t), n.dispatchEvent(w);
       }
-    }, [a, r, s]), /* @__PURE__ */ n(
+    }, [c, t, s]), /* @__PURE__ */ i(
       "input",
       {
         type: "checkbox",
         "aria-hidden": !0,
-        defaultChecked: r,
+        defaultChecked: t,
         ...o,
         tabIndex: -1,
-        ref: c,
+        ref: r,
         style: {
           ...o.style,
           ...m,
@@ -120,53 +121,45 @@ var G = "SwitchBubbleInput", _ = p.forwardRef(
   }
 );
 _.displayName = G;
-function I(t) {
-  return t ? "checked" : "unchecked";
+function I(e) {
+  return e ? "checked" : "unchecked";
 }
-var J = N, K = E;
-const ce = H(
+var J = y, K = E;
+const ne = H(
   ({
-    name: t,
-    alignment: i = "horizontal",
-    theme: r,
+    name: e,
+    alignment: l = "horizontal",
+    theme: t,
     thumbClassName: s,
     className: o,
     label: d,
     defaultChecked: u,
-    onChange: c,
-    value: a
-  }, m) => {
-    const e = M(null), f = $(), l = t ? `${f}-${t}` : f;
-    return j(m, () => e.current, [e]), z(() => {
-      e.current && (e.current.value = `${a}`);
-    }, [a]), /* @__PURE__ */ x(
+    value: r,
+    helperText: c,
+    onChange: m
+  }, n) => {
+    const a = M(null), p = $(), f = e ? `${p}-${e}` : p;
+    return j(n, () => a.current, [a]), z(() => {
+      a.current && (a.current.value = `${r}`);
+    }, [r]), /* @__PURE__ */ C(
       "div",
       {
         className: R(
           "w-full flex gap-3",
-          i === "vertical" ? "flex-col" : "flex-row"
+          l === "vertical" ? "flex-col" : "flex-row"
         ),
-        "data-theme": r,
+        "data-theme": t,
         children: [
-          d ? /* @__PURE__ */ n(
-            "label",
-            {
-              className: "text-base",
-              htmlFor: l,
-              style: { paddingRight: 15 },
-              children: d
-            }
-          ) : null,
-          /* @__PURE__ */ n(
+          /* @__PURE__ */ i(
             J,
             {
-              id: l,
+              id: f,
               defaultChecked: u,
-              checked: a,
-              onCheckedChange: (h) => c?.(h),
+              checked: r,
+              onCheckedChange: (w) => m?.(w),
               className: R(V({ className: o })),
               "aria-label": d,
-              children: /* @__PURE__ */ n(
+              children: /* @__PURE__ */ i(
                 K,
                 {
                   className: O({
@@ -176,11 +169,23 @@ const ce = H(
               )
             }
           ),
-          /* @__PURE__ */ n(
+          d ? /* @__PURE__ */ C(
+            "label",
+            {
+              className: "flex flex-col text-slate-800 dark:text-white text-sm",
+              htmlFor: f,
+              style: { paddingRight: 15 },
+              children: [
+                d,
+                c ? /* @__PURE__ */ i("span", { className: "text-slate-600 dark:text-slate-400 text-xs", children: c }) : null
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ i(
             "input",
             {
-              ref: e,
-              name: t,
+              ref: a,
+              name: e,
               type: "text",
               className: "hidden",
               "aria-hidden": "true"
@@ -192,5 +197,5 @@ const ce = H(
   }
 );
 export {
-  ce as Switch
+  ne as Switch
 };

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

@@ -1,32 +1,36 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const e = t([
-  "w-[44px]",
-  "h-[22px]",
+import { c as a } from "../../index-D29mdTf5.js";
+const r = a([
+  "w-[40px]",
+  "h-[20px]",
   "flex",
   "items-center",
   "rounded-full",
   "shadow",
   "focus:shadow-md",
-  "data-[state=unchecked]:bg-zinc-200",
+  "data-[state=unchecked]:bg-gray-300",
+  "dark:data-[state=unchecked]:bg-gray-600",
   "transition-all",
   "delay-10",
   "duration-250",
   "cursor-pointer",
-  "bg-kubefirst-primary"
-]), r = t([
+  "bg-aurora-500",
+  "kubefirst:bg-kubefirst-primary"
+]), e = a([
   "block",
-  "w-[18px]",
-  "h-[18px]",
+  "w-[16px]",
+  "h-[16px]",
   "bg-white",
+  "dark:bg-gray-400",
+  "dark:data-[state=checked]:bg-white",
   "rounded-full",
   "shadow-md",
   "transition-all",
   "translate-x-1",
-  "data-[state=checked]:translate-x-5.5",
+  "data-[state=checked]:translate-x-5",
   "delay-10",
   "duration-300"
 ]);
 export {
-  e as switchVariants,
-  r as thumbVariants
+  r as switchVariants,
+  e as thumbVariants
 };

package/dist/components/Tabs/Tabs.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { R as e } from "../../index-BAraV3ai.js";
+import { R as e } from "../../index-DQJhMz8c.js";
 import { cn as n } from "../../utils/index.js";
 import { rootVariants as p } from "./Tabs.variants.js";
 import { Content as f } from "./components/Content.js";

package/dist/components/Tabs/Tabs.variants.js

@@ -1,5 +1,5 @@
-import { c as a } from "../../index-D29mdTf5.js";
-const r = a([""], {
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([""], {
   variants: {
     variant: {
       horizontal: "",
@@ -9,7 +9,7 @@ const r = a([""], {
   defaultVariants: {
     variant: "horizontal"
   }
-}), i = a([""], {
+}), e = t([""], {
   variants: {
     variant: {
       default: ""
@@ -18,7 +18,7 @@ const r = a([""], {
   defaultVariants: {
     variant: "default"
   }
-}), n = a(["flex"], {
+}), i = t(["flex"], {
   variants: {
     variant: {
       default: "flex gap-6",
@@ -29,28 +29,49 @@ const r = a([""], {
   defaultVariants: {
     variant: "default"
   }
-}), e = a(["cursor-pointer", "h-[27px]", "w-fit"], {
-  variants: {
-    variant: {
-      default: "",
-      active: [
-        "text-zinc-700",
-        "font-[600]",
-        "civo:border-b-2",
-        "civo:border-aurora-500",
-        "kubefirst:border-b-2",
-        "kubefirst:border-kubefirst-primary"
-      ],
-      inactive: "text-slate-500 font-[600]"
+}), n = t(
+  [
+    "cursor-pointer",
+    "h-[27px]",
+    "w-fit",
+    "block",
+    "relative",
+    "after:absolute",
+    "after:bottom-0",
+    "after:left-0",
+    "after:right-0",
+    "after:h-[2px]",
+    "after:bg-aurora-500",
+    "after:origin-bottom",
+    'after:content-[""]',
+    "after:scale-y-0",
+    "after:transition-transform",
+    "after:duration-500",
+    "after:transform-gpu",
+    "after:will-change-transform",
+    "kubefirst:after:bg-kubefirst-primary"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "",
+        active: [
+          "text-zinc-700",
+          "font-semibold",
+          "after:scale-y-100",
+          "hover:after:scale-y-140"
+        ],
+        inactive: "text-slate-500 font-[600]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 export {
-  i as contentVariants,
-  n as listVariants,
+  e as contentVariants,
+  i as listVariants,
   r as rootVariants,
-  e as triggerVariants
+  n as triggerVariants
 };

package/dist/components/Tabs/components/Content.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { C as a } from "../../../index-BAraV3ai.js";
+import { C as a } from "../../../index-DQJhMz8c.js";
 import { cn as m } from "../../../utils/index.js";
 import { contentVariants as s } from "../Tabs.variants.js";
 const e = ({ children: t, className: o, ...n }) => /* @__PURE__ */ r(

package/dist/components/Tabs/components/List.js

@@ -1,5 +1,5 @@
 import { jsx as t } from "react/jsx-runtime";
-import { L as n } from "../../../index-BAraV3ai.js";
+import { L as n } from "../../../index-DQJhMz8c.js";
 import { cn as a } from "../../../utils/index.js";
 import { listVariants as s } from "../Tabs.variants.js";
 const c = ({

package/dist/components/Tabs/components/Trigger.js

@@ -1,14 +1,15 @@
 import { jsx as r } from "react/jsx-runtime";
-import { T as e } from "../../../index-BAraV3ai.js";
+import { T as e } from "../../../index-DQJhMz8c.js";
 import { Typography as m } from "../../Typography/Typography.js";
-import { cn as g } from "../../../utils/index.js";
-import { triggerVariants as n } from "../Tabs.variants.js";
-const p = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
+import { cn as n } from "../../../utils/index.js";
+import { triggerVariants as p } from "../Tabs.variants.js";
+const s = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r(e, { value: i, children: /* @__PURE__ */ r(
   m,
   {
     variant: "body2",
-    className: g(
-      n({
+    component: "span",
+    className: n(
+      p({
         variant: o ? "active" : "inactive",
         className: t
       })
@@ -16,7 +17,7 @@ const p = ({ tab: i, label: a, isActive: o, className: t }) => /* @__PURE__ */ r
     children: a
   }
 ) });
-p.displayName = "KonstructTabsTrigger";
+s.displayName = "KonstructTabsTrigger";
 export {
-  p as Trigger
+  s as Trigger
 };