@konstructio/ui 0.0.12-alpha.1 → 0.0.12-alpha.10

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

@@ -1,8 +1,8 @@
 import { c as t } from "../../../../index-BNmRGtA6.js";
-const s = t(
+const o = t(
   [
-    "px-4",
-    "py-5",
+    "md:px-4",
+    "md:py-5",
     "flex",
     "flex-col",
     "items-center",
@@ -12,18 +12,12 @@ const s = t(
     "group",
     "relative",
     "mb-8",
-    "[&>span]:text-gray-100",
-    "[&>span]:text-xs",
-    "[&>span]:font-semibold",
-    "[&>span]:pl-14",
-    "[&>span]:-mt-2",
+    "[&>p]:pl-14",
+    "[&>p]:-mt-2",
     "[&>img]:pt-3",
-    "[&>*>span]:text-gray-100",
-    "[&>*>span]:text-xs",
-    "[&>*>span]:font-semibold",
-    "[&>*>span]:absolute",
-    "[&>*>span]:bottom-0",
-    "[&>*>span]:-mt-2",
+    "[&>*>p]:absolute",
+    "[&>*>p]:bottom-0",
+    "[&>*>p]:-mt-2",
     "[&>*>img]:pt-3",
     "cursor-pointer"
   ],
@@ -41,5 +35,5 @@ const s = t(
   }
 );
 export {
-  s as logoVariants
+  o as logoVariants
 };

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

@@ -1,5 +1,5 @@
-import { c as t } from "../../../../index-BNmRGtA6.js";
-const e = t(["flex", "flex-col"], {
+import { c as a } from "../../../../index-BNmRGtA6.js";
+const e = a(["flex", "flex-col", "gap-1"], {
   variants: {
     theme: {
       colony: "",

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

@@ -1,5 +1,5 @@
-import { c as e } from "../../../../index-BNmRGtA6.js";
-const a = e(
+import { c as t } from "../../../../index-BNmRGtA6.js";
+const a = t(
   [
     "[&>a]:flex",
     "[&>a]:gap-2",
@@ -11,9 +11,10 @@ const a = e(
     "font-normal",
     "font-normal",
     "gap-2",
-    "hover:rounded-xl",
-    "px-4",
-    "py-2.5",
+    "rounded-xl",
+    "md:px-4",
+    "md:py-2.5",
+    "p-2",
     "text-black",
     "w-full"
   ],

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

@@ -8,7 +8,7 @@ import "../NavigationTitle/NavigationTitle.js";
 import { jsxs as T, jsx as V } from "react/jsx-runtime";
 import { useRef as d, useCallback as l, useMemo as s, Children as i, isValidElement as v, useEffect as b } from "react";
 import { cn as E } from "../../../../utils/index.js";
-import { wrapperSiderbarVariants as j, dragVariants as z } from "../../Sidebar.variants.js";
+import { dragVariants as j, wrapperSiderbarVariants as z } from "../../Sidebar.variants.js";
 import { useTheme as k } from "../../../../contexts/theme.hook.js";
 const K = ({
   canResize: M = !0,
@@ -61,7 +61,7 @@ const K = ({
     {
       ref: u,
       className: E(
-        j({
+        z({
           className: w,
           theme: g
         })
@@ -74,7 +74,7 @@ const K = ({
           "div",
           {
             ref: r,
-            className: E(z({ theme: g })),
+            className: E(j({ theme: g })),
             onMouseDown: R
           }
         )

package/dist/components/Slider/Slider.js

@@ -1,15 +1,15 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
-import { R as v, T, a as V } from "../../index-CJsYodgi.js";
-import { forwardRef as R, useRef as b, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
-import { cn as r } from "../../utils/index.js";
-import { sliderVariants as y, trackVariants as C, thumbVariants as S } from "./Slider.variants.js";
+import { R as v, T, b as V } from "../../index-BzaHYXkt.js";
+import { forwardRef as b, useRef as R, useState as g, useImperativeHandle as j, useEffect as k, useCallback as w } from "react";
+import { cn as a } from "../../utils/index.js";
+import { trackVariants as y, thumbVariants as C, sliderVariants as S } from "./Slider.variants.js";
 import { useTheme as E } from "../../contexts/theme.hook.js";
-const F = R(
+const F = b(
   ({ label: s, defaultValue: c = [0], name: i, theme: o, size: m, showValue: u, ...f }, h) => {
-    const e = b(null), [a, d] = g(c), { theme: p } = E(), n = o ?? p;
+    const e = R(null), [r, d] = g(c), { theme: p } = E(), n = o ?? p;
     j(h, () => e.current, [e]), k(() => {
-      e.current && (e.current.value = a.toString());
-    }, [a]);
+      e.current && (e.current.value = r.toString());
+    }, [r]);
     const x = w(
       (N) => d(N),
       []
@@ -18,13 +18,13 @@ const F = R(
       /* @__PURE__ */ l(
         "div",
         {
-          className: r(
+          className: a(
             "flex items-center",
             s ? "justify-between" : "justify-end"
           ),
           children: [
             s ? /* @__PURE__ */ t("label", { children: s }) : null,
-            u ? /* @__PURE__ */ t("span", { className: "text-xs", children: a }) : null
+            u ? /* @__PURE__ */ t("span", { className: "text-xs", children: r }) : null
           ]
         }
       ),
@@ -32,13 +32,13 @@ const F = R(
       /* @__PURE__ */ l(
         v,
         {
-          value: a,
-          className: r(y({ theme: n })),
+          value: r,
+          className: a(S({ theme: n })),
           onValueChange: x,
           ...f,
           children: [
-            /* @__PURE__ */ t(T, { className: r(C({ theme: n, size: m })) }),
-            /* @__PURE__ */ t(V, { className: r(S({ theme: n, size: m })) })
+            /* @__PURE__ */ t(T, { className: a(y({ theme: n, size: m })) }),
+            /* @__PURE__ */ t(V, { className: a(C({ theme: n, size: m })) })
           ]
         }
       )

package/dist/components/Switch/Switch.js

@@ -1,14 +1,14 @@
 import { jsxs as P, jsx as u } from "react/jsx-runtime";
 import * as p 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-1GLoikpT.js";
+import { a as B, c as q, b as F } from "../../index-Cva-e5M4.js";
+import { u as O } from "../../index-B_6_jmOO.js";
+import { u as V, a as D } from "../../index-4ecjw_Aj.js";
+import { P as g } from "../../index-D7QNmo_D.js";
 import { cn as x } from "../../utils/index.js";
-import { switchVariants as L, thumbVariants as U } from "./Switch.variants.js";
+import { thumbVariants as L, switchVariants as U } from "./Switch.variants.js";
 import { useTheme as W } from "../../contexts/theme.hook.js";
-var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
+var k = "Switch", [X, ie] = q(k), [G, J] = X(k), R = p.forwardRef(
   (e, s) => {
     const {
       __scopeSwitch: t,
@@ -20,8 +20,8 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       value: i = "on",
       onCheckedChange: m,
       form: r,
-      ...d
-    } = e, [l, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = l ? r || !!l.closest("form") : !0, [S = !1, T] = q({
+      ...l
+    } = e, [d, b] = p.useState(null), v = O(s, (C) => b(C)), f = p.useRef(!1), w = d ? r || !!d.closest("form") : !0, [S = !1, T] = B({
       prop: n,
       defaultProp: h,
       onChange: m
@@ -38,7 +38,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
           "data-disabled": a ? "" : void 0,
           disabled: a,
           value: i,
-          ...d,
+          ...l,
           ref: v,
           onClick: F(e.onClick, (C) => {
             T((I) => !I), w && (f.current = C.isPropagationStopped(), f.current || C.stopPropagation());
@@ -48,7 +48,7 @@ var k = "Switch", [X, ie] = B(k), [G, J] = X(k), R = p.forwardRef(
       w && /* @__PURE__ */ u(
         K,
         {
-          control: l,
+          control: d,
           bubbles: !f.current,
           name: c,
           value: i,
@@ -81,10 +81,10 @@ N.displayName = y;
 var K = (e) => {
   const { control: s, checked: t, bubbles: c = !0, ...n } = e, h = p.useRef(null), o = V(t), a = D(s);
   return p.useEffect(() => {
-    const i = h.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 i = h.current, m = window.HTMLInputElement.prototype, l = Object.getOwnPropertyDescriptor(m, "checked").set;
+    if (o !== t && l) {
+      const d = new Event("click", { bubbles: c });
+      l.call(i, t), i.dispatchEvent(d);
     }
   }, [o, t, c]), /* @__PURE__ */ u(
     "input",
@@ -120,7 +120,7 @@ const ue = _(
     className: h,
     label: o
   }, a) => {
-    const [i, m] = H(s ?? !1), r = A(null), d = M(), { theme: l } = W(), b = c ?? l, v = e ? `${d}-${e}` : d;
+    const [i, m] = H(s ?? !1), r = A(null), l = M(), { theme: d } = W(), b = c ?? d, v = e ? `${l}-${e}` : l;
     $(a, () => r.current, [r]), j(() => {
       r.current && (r.current.value = `${i}`);
     }, [i]);
@@ -151,12 +151,12 @@ const ue = _(
               id: v,
               defaultChecked: s,
               onCheckedChange: f,
-              className: x(L({ theme: b, className: h })),
+              className: x(U({ theme: b, className: h })),
               "aria-label": o,
               children: /* @__PURE__ */ u(
                 Y,
                 {
-                  className: U({
+                  className: L({
                     theme: b,
                     className: n
                   })

package/dist/components/Tag/Tag.js

@@ -1,7 +1,19 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as i } from "../../utils/index.js";
-import { tagVariants as m } from "./Tag.variants.js";
-const n = ({ label: t, color: a }) => /* @__PURE__ */ r("div", { className: i(m({ color: a })), children: /* @__PURE__ */ r("span", { className: "text-inherit", children: t }) });
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
+import { S as r } from "../../index-B_6_jmOO.js";
+import { cn as o } from "../../utils/index.js";
+import { tagVariants as c } from "./Tag.variants.js";
+const u = ({
+  label: i,
+  color: s,
+  rightIcon: t,
+  leftIcon: e,
+  className: l,
+  "data-value": m
+}) => /* @__PURE__ */ n("div", { className: o(c({ color: s, className: l })), "data-value": m, children: [
+  e ? /* @__PURE__ */ a(r, { className: "text-inherit", children: e }) : null,
+  /* @__PURE__ */ a("span", { className: "text-inherit", children: i }),
+  t ? /* @__PURE__ */ a(r, { className: "text-inherit", children: t }) : null
+] });
 export {
-  n as Tag
+  u as Tag
 };

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

@@ -1,6 +1,16 @@
 import { c as e } from "../../index-BNmRGtA6.js";
 const f = e(
-  ["px-2", "py-1", "rounded-md", "w-max", "text-xs"],
+  [
+    "px-2",
+    "py-1",
+    "rounded-md",
+    "w-max",
+    "text-xs",
+    "flex",
+    "items-center",
+    "justify-center",
+    "gap-1"
+  ],
   {
     variants: {
       color: {

package/dist/components/TagSelect/TagSelect.js

@@ -1,73 +1,8 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { forwardRef as g, useId as w, useRef as C, useImperativeHandle as T, useEffect as R } from "react";
-import { cn as r } from "../../utils/index.js";
-import { Tag as d } from "../Tag/Tag.js";
-import { useTagSelect as S } from "./hooks/useTagSelect.js";
-import { tagSelectVariants as k, tagListVariants as I, tagItemVariants as V } from "./TagSelect.variants.js";
-import { C as j } from "../../chevron-up-DgLBQCKD.js";
-import { useTheme as y } from "../../contexts/theme.hook.js";
-const z = g(({ label: s, name: l, options: f, placeholder: h = "Select a value...", theme: o }, x) => {
-  const c = w(), { theme: a } = y(), t = C(null), {
-    isOpen: n,
-    selectedTag: m,
-    value: p,
-    wrapperRef: b,
-    handleClickTag: N,
-    handleOpenDropdown: v
-  } = S();
-  return T(x, () => t.current, [t]), R(() => {
-    t.current && (t.current.value = p);
-  }, [p]), /* @__PURE__ */ u("div", { ref: b, className: "flex flex-col w-full relative", children: [
-    s ? /* @__PURE__ */ e("label", { className: "m-2 cursor-pointer", htmlFor: l ?? c, children: s }) : null,
-    /* @__PURE__ */ u(
-      "div",
-      {
-        id: l ?? c,
-        className: r(k({ theme: o ?? a })),
-        role: "combobox",
-        onClick: v,
-        "aria-expanded": n,
-        children: [
-          m ? /* @__PURE__ */ e(d, { ...m }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
-          /* @__PURE__ */ e(
-            j,
-            {
-              className: r(
-                "w-4 h-4 text-inherit transition-all duration-50",
-                n ? "rotate-0" : "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e("input", { ref: t, type: "text", name: l, className: "hidden" }),
-    n ? /* @__PURE__ */ e(
-      "ul",
-      {
-        role: "listbox",
-        className: r(I({ theme: o ?? a })),
-        children: f.map((i) => /* @__PURE__ */ e(
-          "li",
-          {
-            className: r(V({ theme: o ?? a })),
-            role: "option",
-            children: /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                role: "button",
-                className: "m-0 p-0 w-full",
-                onClick: () => N(i),
-                children: /* @__PURE__ */ e(d, { label: i.label, color: i.color })
-              }
-            )
-          }
-        ))
-      }
-    ) : null
-  ] });
-});
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { TagSelectProvider as f } from "./contexts/TagSelect.provider.js";
+import { Wrapper as i } from "./components/Wrapper/Wrapper.js";
+const n = p(({ options: o, multiselect: e, ...t }, m) => /* @__PURE__ */ r(f, { defaultOptions: o, multiselect: e, children: /* @__PURE__ */ r(i, { ref: m, ...t }) }));
 export {
-  z as TagSelect
+  n as TagSelect
 };

package/dist/components/TagSelect/TagSelect.variants.js

@@ -1,27 +1,11 @@
 import { c as e } from "../../index-BNmRGtA6.js";
-const t = e(
-  [
-    "border",
-    "cursor-pointer",
-    "duration-250",
-    "ease-in-out",
-    "flex",
-    "items-center",
-    "justify-between",
-    "px-3",
-    "py-1",
-    "rounded-md",
-    "transition-all",
-    "w-full"
-  ],
+const r = e(
+  ["flex", "flex-col", "w-full", "relative", "text-zinc-500"],
   {
     variants: {
       theme: {
-        colony: ["aria-expanded:border-red-400", "aria-expanded:text-red-400"],
-        kubefirst: [
-          "aria-expanded:border-kubefirst-primary",
-          "aria-expanded:text-kubefirst-secondary"
-        ],
+        colony: "",
+        kubefirst: "",
         civo: ""
       }
     },
@@ -29,42 +13,37 @@ const t = e(
       theme: "kubefirst"
     }
   }
-), a = e(
+), a = e(["my-2", "cursor-pointer"], {
+  variants: {
+    theme: {
+      colony: "",
+      kubefirst: "",
+      civo: ""
+    }
+  },
+  defaultVariants: {
+    theme: "kubefirst"
+  }
+}), i = e(
   [
-    "absolute",
-    "bg-white",
     "border",
-    "duration-100",
+    "cursor-pointer",
+    "duration-250",
     "ease-in-out",
     "flex",
-    "flex-col",
-    "mt-1",
-    "rounded-md",
-    "shadow-sm",
-    "top-full",
+    "items-center",
+    "justify-between",
+    "px-2",
+    "py-1",
+    "rounded",
     "transition-all",
-    "w-full",
-    "z-10"
+    "w-full"
   ],
   {
     variants: {
       theme: {
-        colony: ["border-red-400"],
-        kubefirst: ["border-kubefirst-primary"],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), i = e(
-  ["cursor-pointer", "py-1", "px-2", "last:mb-2", "first:mt-2", "h-full"],
-  {
-    variants: {
-      theme: {
-        colony: "hover:bg-red-100",
-        kubefirst: "hover:bg-purple-100",
+        colony: "",
+        kubefirst: "",
         civo: ""
       }
     },
@@ -74,7 +53,7 @@ const t = e(
   }
 );
 export {
-  i as tagItemVariants,
-  a as tagListVariants,
-  t as tagSelectVariants
+  a as labelVariants,
+  i as tagSelectVariants,
+  r as wrapperVariants
 };

package/dist/components/TagSelect/components/Item/Item.js

@@ -0,0 +1,23 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Tag as i } from "../../../Tag/Tag.js";
+import { cn as c } from "../../../../utils/index.js";
+import { wrapperVariants as n } from "./Item.variants.js";
+import { useTagSelect as s } from "../../contexts/TagSelect.hook.js";
+import { useTheme as h } from "../../../../contexts/theme.hook.js";
+const g = ({ option: e, theme: r }) => {
+  const { theme: m } = h(), { onSelectTag: o } = s();
+  return /* @__PURE__ */ t(
+    "li",
+    {
+      role: "option",
+      className: c(
+        n({ theme: r ?? m, isSelected: e.isSelected })
+      ),
+      onClick: () => o(e),
+      children: /* @__PURE__ */ t(i, { ...e })
+    }
+  );
+};
+export {
+  g as Item
+};

package/dist/components/TagSelect/components/Item/Item.variants.js

@@ -0,0 +1,31 @@
+import { c as e } from "../../../../index-BNmRGtA6.js";
+const r = e(
+  ["cursor-pointer", "py-1.5", "px-2", "last:pb-2", "first:pt-2", "h-full"],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: ["hover:bg-purple-100"],
+        civo: ""
+      },
+      isSelected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        theme: "kubefirst",
+        isSelected: !0,
+        class: ["bg-purple-100"]
+      }
+    ],
+    defaultVariants: {
+      theme: "kubefirst",
+      isSelected: !1
+    }
+  }
+);
+export {
+  r as wrapperVariants
+};

package/dist/components/TagSelect/components/List/List.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../../../utils/index.js";
+import { Item as n } from "../Item/Item.js";
+import { wrapperVariants as p } from "./List.variants.js";
+import { useTagSelect as a } from "../../contexts/TagSelect.hook.js";
+import { useTheme as c } from "../../../../contexts/theme.hook.js";
+const d = ({ theme: m }) => {
+  const { tags: t } = a(), { theme: s } = c(), o = m ?? s;
+  return /* @__PURE__ */ e("ul", { role: "listbox", className: i(p({ theme: o })), children: t.length > 0 ? t.map((r) => /* @__PURE__ */ e(n, { theme: o, option: r }, r.id)) : /* @__PURE__ */ e("span", { className: "text-center text-sm px-4 py-2", children: "There is not options available" }) });
+};
+export {
+  d as List
+};

package/dist/components/TagSelect/components/List/List.variants.js

@@ -0,0 +1,37 @@
+import { c as e } from "../../../../index-BNmRGtA6.js";
+const t = e(
+  [
+    "absolute",
+    "bg-white",
+    "border",
+    "duration-100",
+    "flex",
+    "flex-col",
+    "mt-0.5",
+    "rounded",
+    "shadow-sm",
+    "top-full",
+    "transition-all",
+    "w-full",
+    "z-10",
+    "animate-in",
+    "fade-in-60",
+    "zoom-in-95",
+    "overflow-hidden"
+  ],
+  {
+    variants: {
+      theme: {
+        colony: "",
+        kubefirst: "",
+        civo: ""
+      }
+    },
+    defaultVariants: {
+      theme: "kubefirst"
+    }
+  }
+);
+export {
+  t as wrapperVariants
+};