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

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
+};

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

@@ -0,0 +1,88 @@
+import "../Item/Item.js";
+import { List as w } from "../List/List.js";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useId as b, useImperativeHandle as S } from "react";
+import { Tag as k } from "../../../Tag/Tag.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useTagSelect as R } from "../../hooks/useTagSelect.js";
+import { labelVariants as I, tagSelectVariants as O, wrapperVariants as V } from "../../TagSelect.variants.js";
+import { X as j } from "../../../../x-DU-Zw-L_.js";
+import { C as y } from "../../../../chevron-up-DgLBQCKD.js";
+import { useTheme as F } from "../../../../contexts/theme.hook.js";
+import { useTagSelect as H } from "../../contexts/TagSelect.hook.js";
+const J = C(
+  ({
+    label: n,
+    labelClassName: p,
+    name: s,
+    placeholder: h = "Select a value...",
+    theme: d,
+    wrapperClassName: f
+  }, u) => {
+    const l = b(), { theme: x } = F(), { selectedTags: m, isOpen: o, onOpen: N, onRemoveTag: v, inputRef: i } = H(), { wrapperRef: T, handleOpen: g } = R(), t = d ?? x;
+    return S(u, () => i.current, [i]), /* @__PURE__ */ c(
+      "div",
+      {
+        ref: T,
+        className: a(
+          V({
+            theme: t,
+            className: f
+          })
+        ),
+        children: [
+          n ? /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: s ?? l,
+              className: a(
+                I({
+                  theme: t,
+                  className: p
+                })
+              ),
+              onClick: () => N(!0),
+              children: n
+            }
+          ) : null,
+          /* @__PURE__ */ c(
+            "div",
+            {
+              id: s ?? l,
+              className: a(O({ theme: t })),
+              role: "combobox",
+              onClick: g,
+              "aria-expanded": o,
+              children: [
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: h }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1.5", children: m.map((r) => /* @__PURE__ */ e(
+                  k,
+                  {
+                    ...r,
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(j, { className: "w-3 h-3", onClick: () => v(r) }),
+                    "data-value": r.label
+                  },
+                  r.id
+                )) }),
+                /* @__PURE__ */ e(
+                  y,
+                  {
+                    className: a(
+                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("input", { ref: i, type: "text", name: s, className: "hidden" }),
+          o ? /* @__PURE__ */ e(w, { theme: t }) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  J as Wrapper
+};

package/dist/components/TagSelect/components/index.js

@@ -0,0 +1,8 @@
+import { Item as e } from "./Item/Item.js";
+import { List as t } from "./List/List.js";
+import { Wrapper as f } from "./Wrapper/Wrapper.js";
+export {
+  e as Item,
+  t as List,
+  f as Wrapper
+};

package/dist/components/TagSelect/contexts/TagSelect.context.js

@@ -0,0 +1,19 @@
+import { createContext as e } from "react";
+const t = {
+  tags: [],
+  selectedTags: [],
+  isOpen: !1,
+  inputRef: null,
+  onSelectTag() {
+    throw new Error("Function not implemented.");
+  },
+  onRemoveTag() {
+    throw new Error("Function not implemented.");
+  },
+  onOpen() {
+    throw new Error("Function not implemented.");
+  }
+}, o = e(t);
+export {
+  o as TagSelectContext
+};

package/dist/components/TagSelect/contexts/TagSelect.hook.js

@@ -0,0 +1,11 @@
+import { useContext as t } from "react";
+import { TagSelectContext as o } from "./TagSelect.context.js";
+const c = () => {
+  const e = t(o);
+  if (!e)
+    throw new Error("useTagSelect must be used within a TagSelectProvider");
+  return e;
+};
+export {
+  c as useTagSelect
+};

package/dist/components/TagSelect/contexts/TagSelect.provider.js

@@ -0,0 +1,69 @@
+import { jsx as I } from "react/jsx-runtime";
+import { useRef as R, useState as T, useCallback as l } from "react";
+import { TagSelectContext as x } from "./TagSelect.context.js";
+import { useToggle as w } from "../../../hooks/useToggle.js";
+const k = ({
+  children: m,
+  defaultOptions: n = [],
+  multiselect: d = !0
+}) => {
+  const i = R(null), [p, a] = w(!1), [S, g] = T(n), [r, u] = T([]), o = l((t) => {
+    if (i.current) {
+      const s = t.map(({ id: c, label: e }) => ({
+        id: c,
+        value: e
+      }));
+      i.current.value = JSON.stringify(s);
+    }
+  }, []), f = l(
+    (t) => {
+      const s = [...d ? r : [], t];
+      u(s);
+      const c = s.map((e) => e.id);
+      g(() => d ? n.filter(
+        (e) => !c.includes(e.id)
+      ) : n.map((e) => ({
+        ...e,
+        isSelected: c.includes(e.id)
+      }))), o(s), a(!1);
+    },
+    [
+      n,
+      o,
+      d,
+      r,
+      a
+    ]
+  ), v = l(
+    (t) => {
+      const s = r.filter((e) => e.id !== t.id);
+      u(s);
+      const c = s.map((e) => e.id);
+      g(
+        () => n.filter((e) => !c.includes(e.id))
+      ), o(s);
+    },
+    [n, o, r]
+  ), h = l(
+    (t) => a(t),
+    [a]
+  );
+  return /* @__PURE__ */ I(
+    x.Provider,
+    {
+      value: {
+        tags: S,
+        selectedTags: r,
+        isOpen: p,
+        inputRef: i,
+        onSelectTag: f,
+        onRemoveTag: v,
+        onOpen: h
+      },
+      children: m
+    }
+  );
+};
+export {
+  k as TagSelectProvider
+};

package/dist/components/TagSelect/contexts/index.js

@@ -0,0 +1,6 @@
+import { useTagSelect as o } from "./TagSelect.hook.js";
+import { TagSelectProvider as a } from "./TagSelect.provider.js";
+export {
+  a as TagSelectProvider,
+  o as useTagSelect
+};

package/dist/components/TagSelect/hooks/useTagSelect.js

@@ -1,39 +1,34 @@
-import { useRef as b, useState as o, useEffect as k, useCallback as a } from "react";
-import { useToggle as w } from "../../../hooks/useToggle.js";
-const C = () => {
-  const t = b(null), [r, e] = w(!1), [c, d] = o(null), [u, i] = o("");
-  k(() => {
-    const n = new AbortController(), p = (s) => {
+import { useRef as c, useEffect as u, useCallback as i } from "react";
+import { useTagSelect as d } from "../contexts/TagSelect.hook.js";
+const g = () => {
+  const a = c(null), { onOpen: e } = d();
+  u(() => {
+    const t = new AbortController(), n = (s) => {
       s.key === "Escape" && e(!1);
-    }, m = (s) => {
-      var l;
-      (l = t.current) != null && l.contains(s.target) || e(!1);
+    }, o = (s) => {
+      var r;
+      (r = a.current) != null && r.contains(s.target) || e(!1);
     };
-    return document.addEventListener("keydown", p, {
-      signal: n.signal
-    }), document.addEventListener("mousedown", m, {
-      signal: n.signal
+    return document.addEventListener("keydown", n, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", o, {
+      signal: t.signal
     }), () => {
-      n.abort();
+      t.abort();
     };
-  }, [e, t]);
-  const f = a(() => {
-    e();
-  }, [e]), g = a(
-    (n) => {
-      d(n), e(!1), i(n.label);
+  }, [e, a]);
+  const l = i(
+    (t) => {
+      const n = t.target;
+      (n == null ? void 0 : n.closest("[data-value]")) || e(!0);
     },
     [e]
   );
   return {
-    isOpen: r,
-    selectedTag: c,
-    value: u,
-    wrapperRef: t,
-    handleClickTag: g,
-    handleOpenDropdown: f
+    wrapperRef: a,
+    handleOpen: l
   };
 };
 export {
-  C as useTagSelect
+  g as useTagSelect
 };

package/dist/components/Toast/Toast.js

@@ -1,15 +1,15 @@
-import { jsxs as D, jsx as c, Fragment as se } from "react/jsx-runtime";
-import { u as ae, S as j } from "../../index-DoOsnuB6.js";
+import { jsx as c, jsxs as D, Fragment as se } from "react/jsx-runtime";
+import { u as ae, S as j } from "../../index-B_6_jmOO.js";
 import * as s from "react";
 import { useState as Re, useRef as be, useEffect as ge, useMemo as oe, isValidElement as re, useCallback as Se } from "react";
-import { P as L, r as Ie, d as Ne } from "../../index-1GLoikpT.js";
-import { c as Ae, a as Fe, b as X, d as b, u as _e } from "../../index-8vgf-x5i.js";
-import { c as De } from "../../index-BBjak_0p.js";
-import { B as Le, R as Oe, P as Me } from "../../index-CoqDsznq.js";
-import { P as ke } from "../../index-D4Q2rMby.js";
-import { V as ie, R as Ve } from "../../index-KEdwcThH.js";
+import { P as L, r as Ie, d as Ne } from "../../index-D7QNmo_D.js";
+import { c as Ae, a as Fe, b, d as X, u as _e } from "../../index-Cva-e5M4.js";
+import { c as De } from "../../index-BbsJ0VIJ.js";
+import { B as Le, R as Oe, P as Me } from "../../index-D_76wh4w.js";
+import { P as ke } from "../../index-Dj1pom3_.js";
+import { V as ie, R as Ve } from "../../index-CbTU3cnP.js";
 import { cn as q } from "../../utils/index.js";
-import { toastVariants as Ke, closeToastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
+import { closeToastVariants as Ke, toastVariants as He, viewportToastVariants as We } from "./Toast.variants.js";
 import { X as Xe } from "../../x-DU-Zw-L_.js";
 import { useTheme as $e } from "../../contexts/theme.hook.js";
 var Z = "ToastProvider", [ee, Ue, Ye] = De("Toast"), [ce, gt] = Ae("Toast", [Ye]), [Be, $] = ce(Z), ue = (e) => {
@@ -452,14 +452,14 @@ const St = ({
     /* @__PURE__ */ D(
       ut,
       {
-        className: q(Ke({ theme: R, className: v })),
+        className: q(He({ theme: R, className: v })),
         open: n,
         onOpenChange: w,
         children: [
           /* @__PURE__ */ c(lt, { asChild: !0, className: "text-lg mb-2 font-semibold", children: g }),
           /* @__PURE__ */ c(dt, { asChild: !0, children: l }),
           m && /* @__PURE__ */ c(ft, { asChild: !0, altText: "Close the toast", children: /* @__PURE__ */ D("button", { type: "button", className: "absolute right-1.5 top-1.5", children: [
-            /* @__PURE__ */ c(Xe, { className: q(He({ theme: R })) }),
+            /* @__PURE__ */ c(Xe, { className: q(Ke({ theme: R })) }),
             /* @__PURE__ */ c(Ve, { children: "Close toast" })
           ] }) })
         ]

package/dist/components/Tooltip/Tooltip.js

@@ -1,8 +1,8 @@
 import { jsx as e, jsxs as i } from "react/jsx-runtime";
 import { forwardRef as N, useRef as w, useImperativeHandle as x, useMemo as R, isValidElement as T } from "react";
-import { S as a } from "../../index-DoOsnuB6.js";
+import { S as a } from "../../index-B_6_jmOO.js";
 import { cn as o } from "../../utils/index.js";
-import { tooltipVariants as V, arrowVariants as b } from "./Tooltip.variants.js";
+import { arrowVariants as V, tooltipVariants as b } from "./Tooltip.variants.js";
 import { useTooltip as j } from "./hooks/useTooltip.js";
 import { useTheme as C } from "../../contexts/theme.hook.js";
 const q = N(
@@ -19,13 +19,13 @@ const q = N(
         "div",
         {
           ref: d,
-          className: o(V({ theme: m, position: s })),
+          className: o(b({ theme: m, position: s })),
           "data-visible": u,
           children: [
             /* @__PURE__ */ e(
               "span",
               {
-                className: o(b({ theme: m, position: s }))
+                className: o(V({ theme: m, position: s }))
               }
             ),
             /* @__PURE__ */ e(a, { children: l })

package/dist/components/Typography/Typography.js

@@ -0,0 +1,31 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useId as d } from "react";
+import { typographyVariants as f } from "./Typography.variants.js";
+import { useTheme as n } from "../../contexts/theme.hook.js";
+const u = ({
+  className: e,
+  theme: m,
+  children: p,
+  variant: o,
+  component: s,
+  ...t
+}) => {
+  const r = d(), { theme: h } = n(), y = s ?? (o != null && o.includes("h") ? o : "p");
+  return /* @__PURE__ */ c(
+    y,
+    {
+      id: r,
+      className: f({
+        className: e,
+        theme: m ?? h,
+        variant: o
+      }),
+      ...t,
+      children: p
+    }
+  );
+};
+u.displayName = "Typography";
+export {
+  u as Typography
+};