@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.40

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

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

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { S as k } from "../../index-DQH6odE9.js";
+import { S as k } from "../../index-BtQfgaSF.js";
 import { useState as x, useCallback as C } from "react";
 import { cn as r } from "../../utils/index.js";
 import { Radio as G } from "../Radio/Radio.js";

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-DpW9ExsS.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/Sidebar.variants.js

@@ -10,8 +10,8 @@ const e = r([
   "px-4",
   "relative",
   "transition-all",
-  "w-[72px]",
-  "md:w-[256px]",
+  "w-18",
+  "md:w-64",
   "bg-kubefirst-dark-blue-900"
 ]), o = r([
   "absolute",

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-DpW9ExsS.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,10 +1,10 @@
 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 N } from "../../index-DQH6odE9.js";
-import { u as F, a as L } from "../../index-CZnD2QxM.js";
-import { P } from "../../index-C9T9HQaa.js";
+import { a as A, c as U, P as N, b as q } from "../../index-CIAmiWcw.js";
+import { u as P } from "../../index-DLcqcWxM.js";
+import { u as F } from "../../index-BZPx6jYI.js";
+import { u as L } from "../../index-ohdbKsws.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), y = h.forwardRef(
@@ -20,7 +20,7 @@ var b = "Switch", [D, se] = U(b), [W, X] = D(b), y = h.forwardRef(
       onCheckedChange: m,
       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({
+    } = e, [p, f] = h.useState(null), w = P(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,
@@ -28,7 +28,7 @@ var b = "Switch", [D, se] = U(b), [W, X] = D(b), y = h.forwardRef(
     });
     return /* @__PURE__ */ C(W, { scope: t, checked: S, disabled: r, children: [
       /* @__PURE__ */ i(
-        P.button,
+        N.button,
         {
           type: "button",
           role: "switch",
@@ -67,7 +67,7 @@ var g = "SwitchThumb", E = h.forwardRef(
   (e, l) => {
     const { __scopeSwitch: t, ...s } = e, o = X(g, t);
     return /* @__PURE__ */ i(
-      P.span,
+      N.span,
       {
         "data-state": I(o.checked),
         "data-disabled": o.disabled ? "" : void 0,
@@ -86,7 +86,7 @@ var G = "SwitchBubbleInput", _ = h.forwardRef(
     bubbles: s = !0,
     ...o
   }, d) => {
-    const u = h.useRef(null), r = N(u, d), c = F(t), m = L(l);
+    const u = h.useRef(null), r = P(u, d), c = F(t), m = L(l);
     return h.useEffect(() => {
       const n = u.current;
       if (!n) return;

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

@@ -1,7 +1,7 @@
 import { c as a } from "../../index-D29mdTf5.js";
 const r = a([
-  "w-[40px]",
-  "h-[20px]",
+  "w-10",
+  "h-5",
   "flex",
   "items-center",
   "rounded-full",
@@ -17,8 +17,8 @@ const r = a([
   "kubefirst:bg-kubefirst-primary"
 ]), e = a([
   "block",
-  "w-[16px]",
-  "h-[16px]",
+  "w-4",
+  "h-4",
   "bg-white",
   "dark:bg-gray-400",
   "dark:data-[state=checked]:bg-white",

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-DH2Fnov1.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

@@ -40,7 +40,7 @@ const r = t([""], {
     "after:bottom-0",
     "after:left-0",
     "after:right-0",
-    "after:h-[2px]",
+    "after:h-0.5",
     "after:bg-aurora-500",
     "after:origin-bottom",
     'after:content-[""]',

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-DH2Fnov1.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-DH2Fnov1.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,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { T as e } from "../../../index-BAraV3ai.js";
+import { T as e } from "../../../index-DH2Fnov1.js";
 import { Typography as m } from "../../Typography/Typography.js";
 import { cn as n } from "../../../utils/index.js";
 import { triggerVariants as p } from "../Tabs.variants.js";

package/dist/components/Tag/Tag.js

@@ -1,5 +1,5 @@
 import { jsxs as n, jsx as a } from "react/jsx-runtime";
-import { S as r } from "../../index-DQH6odE9.js";
+import { S as r } from "../../index-BtQfgaSF.js";
 import { cn as o } from "../../utils/index.js";
 import { tagVariants as c } from "./Tag.variants.js";
 const u = ({

package/dist/components/Tag/Tag.variants.js

@@ -15,6 +15,7 @@ const f = e(
     variants: {
       color: {
         gray: ["bg-[#f4f4f5]", "text-[#71717a]"],
+        "gray-800": ["bg-gray-100", "text-gray-800"],
         cyan: ["bg-[#ecfeff]", "text-[#0e7490]"],
         gold: ["bg-[#fef9c3]", "text-[#a16207]"],
         green: ["bg-[#dcfce7]", "text-[#15803d]"],

package/dist/components/TagSelect/components/Wrapper/Wrapper.js

@@ -1,135 +1,86 @@
 import "../Item/Item.js";
-import { List as j } from "../List/List.js";
-import { jsxs as g, jsx as i } from "react/jsx-runtime";
-import b, { forwardRef as w, useId as k, useImperativeHandle as T } from "react";
-import { Tag as P } from "../../../Tag/Tag.js";
-import { cn as l } from "../../../../utils/index.js";
-import { useTagSelect as C } from "../../hooks/useTagSelect.js";
-import { labelVariants as S, tagSelectVariants as z, wrapperVariants as R } from "../../TagSelect.variants.js";
-import { X as _ } from "../../../../x-BPcqkRZd.js";
-import { P as p } from "../../../../index-h-Ul0anl.js";
-import { useTagSelect as I } from "../../contexts/TagSelect.hook.js";
-function u() {
-  return u = Object.assign || function(e) {
-    for (var o = 1; o < arguments.length; o++) {
-      var t = arguments[o];
-      for (var r in t)
-        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
-    }
-    return e;
-  }, u.apply(this, arguments);
-}
-function L(e, o) {
-  if (e == null) return {};
-  var t = W(e, o), r, n;
-  if (Object.getOwnPropertySymbols) {
-    var a = Object.getOwnPropertySymbols(e);
-    for (n = 0; n < a.length; n++)
-      r = a[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
-  }
-  return t;
-}
-function W(e, o) {
-  if (e == null) return {};
-  var t = {}, r = Object.keys(e), n, a;
-  for (a = 0; a < r.length; a++)
-    n = r[a], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
-  return t;
-}
-var d = w(function(e, o) {
-  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, a = n === void 0 ? 24 : n, c = L(e, ["color", "size"]);
-  return /* @__PURE__ */ b.createElement("svg", u({
-    ref: o,
-    xmlns: "http://www.w3.org/2000/svg",
-    width: a,
-    height: a,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: r,
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ b.createElement("polyline", {
-    points: "18 15 12 9 6 15"
-  }));
-});
-d.propTypes = {
-  color: p.string,
-  size: p.oneOfType([p.string, p.number])
-};
-d.displayName = "ChevronUp";
-const G = w(
+import { List as g } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { forwardRef as w, useId as T, useImperativeHandle as b } from "react";
+import { Tag as C } from "../../../Tag/Tag.js";
+import { cn as r } from "../../../../utils/index.js";
+import { useTagSelect as S } from "../../hooks/useTagSelect.js";
+import { labelVariants as k, tagSelectVariants as R, wrapperVariants as I } from "../../TagSelect.variants.js";
+import { X as O } from "../../../../x-DPU9OdYH.js";
+import { C as V } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
+const B = w(
   ({
-    label: e,
-    labelClassName: o,
+    label: o,
+    labelClassName: c,
     name: t,
-    placeholder: r = "Select a value...",
-    theme: n,
-    wrapperClassName: a
-  }, c) => {
-    const h = k(), { selectedTags: v, isOpen: m, onOpen: x, onRemoveTag: y, inputRef: f } = I(), { wrapperRef: O, handleOpen: N } = C();
-    return T(c, () => f.current, [f]), /* @__PURE__ */ g(
+    placeholder: p = "Select a value...",
+    theme: d,
+    wrapperClassName: f
+  }, h) => {
+    const i = T(), { selectedTags: n, isOpen: s, onOpen: u, onRemoveTag: x, inputRef: l } = j(), { wrapperRef: N, handleOpen: v } = S();
+    return b(h, () => l.current, [l]), /* @__PURE__ */ m(
       "div",
       {
-        ref: O,
-        className: l(
-          R({
-            className: a
+        ref: N,
+        className: r(
+          I({
+            className: f
           })
         ),
-        "data-theme": n,
+        "data-theme": d,
         children: [
-          e ? /* @__PURE__ */ i(
+          o ? /* @__PURE__ */ e(
             "label",
             {
-              htmlFor: t ?? h,
-              className: l(
-                S({
-                  className: o
+              htmlFor: t ?? i,
+              className: r(
+                k({
+                  className: c
                 })
               ),
-              onClick: () => x(!0),
-              children: e
+              onClick: () => u(!0),
+              children: o
             }
           ) : null,
-          /* @__PURE__ */ g(
+          /* @__PURE__ */ m(
             "div",
             {
-              id: t ?? h,
-              className: l(z()),
+              id: t ?? i,
+              className: r(R()),
               role: "combobox",
-              onClick: N,
-              "aria-expanded": m,
+              onClick: v,
+              "aria-expanded": s,
               children: [
-                v.length === 0 ? /* @__PURE__ */ i("span", { className: "text-base text-inherit select-none", children: r }) : /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1.5", children: v.map((s) => /* @__PURE__ */ i(
-                  P,
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: p }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: n.map((a) => /* @__PURE__ */ e(
+                  C,
                   {
-                    ...s,
+                    ...a,
                     className: "select-none",
-                    rightIcon: /* @__PURE__ */ i(_, { className: "w-3 h-3", onClick: () => y(s) }),
-                    "data-value": s.label
+                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
+                    "data-value": a.label
                   },
-                  s.id
+                  a.id
                 )) }),
-                /* @__PURE__ */ i(
-                  d,
+                /* @__PURE__ */ e(
+                  V,
                   {
-                    className: l(
+                    className: r(
                       "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
-                      m ? "rotate-0" : "rotate-180"
+                      s ? "rotate-0" : "rotate-180"
                     )
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ i("input", { ref: f, type: "text", name: t, className: "hidden" }),
-          m ? /* @__PURE__ */ i(j, {}) : null
+          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
+          s ? /* @__PURE__ */ e(g, {}) : null
         ]
       }
     );
   }
 );
 export {
-  G as Wrapper
+  B as Wrapper
 };

package/dist/components/TimePicker/TimePicker.variants.js

@@ -21,8 +21,8 @@ const t = r([
   "flex",
   "flex-col"
 ]), n = r([
-  "w-[60px]",
-  "h-[40px]",
+  "w-15",
+  "h-10",
   "snap-start",
   "rounded",
   "transition-all",

package/dist/components/TimePicker/components/Wrapper/Wrapper.js

@@ -3,7 +3,7 @@ import { useId as N, useState as y, useRef as E, useCallback as O, useEffect as
 import { cn as m } from "../../../../utils/index.js";
 import { timePickerVariants as L } from "../../TimePicker.variants.js";
 import { WrapperList as j } from "../WrapperList/WrapperList.js";
-import { C as P } from "../../../../chevron-down-BLZPftpV.js";
+import { C as P } from "../../../../chevron-down-DgT-uSF9.js";
 import { useTimePickerContext as R } from "../../contexts/time-picker.hook.js";
 const V = ({
   name: d,
@@ -35,7 +35,7 @@ const V = ({
       ref: l,
       className: m(
         "w-max text-slate-800 text-sm flex flex-col gap-2",
-        g === "12" ? "w-[208px]" : "w-[140px]"
+        g === "12" ? "w-52" : "w-[140px]"
       ),
       children: [
         i ? /* @__PURE__ */ t("label", { htmlFor: s, className: "text-slate-500 font-medium", children: [