@konstructio/ui 0.0.12 → 0.0.13-alpha.1

package/dist/components/Table/Table.js

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/index.js";
+import { tableVariants as p } from "./Table.variants.js";
+import { Body as f } from "./components/Body.js";
+import { Filter as l } from "./components/Filter.js";
+import { Head as d } from "./components/Head.js";
+import { Row as s } from "./components/Row.js";
+const o = ({ children: r, className: m, theme: t, ...a }) => /* @__PURE__ */ e(
+  "table",
+  {
+    className: i(
+      p({
+        className: m
+      })
+    ),
+    "data-theme": t,
+    ...a,
+    children: r
+  }
+);
+o.Body = f;
+o.Filter = l;
+o.Head = d;
+o.Row = s;
+export {
+  o as Table
+};

package/dist/components/Table/Table.variants.js

@@ -0,0 +1,40 @@
+import { c as t } from "../../index-BNmRGtA6.js";
+const r = t([
+  "table-auto",
+  "w-full",
+  "border-collapse",
+  "border-spacing-0",
+  "rounded",
+  "shadow-sm"
+]), a = t(
+  [
+    "h-8",
+    "text-inherit",
+    "[&>td]:py-3",
+    "[&>td]:px-4",
+    "text-slate-700",
+    "hover:bg-zinc-100",
+    "hover:cursor-pointer"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "bg-purple-50",
+        false: ""
+      }
+    }
+  }
+), s = t([
+  "h-[18px]",
+  "bg-slate-100",
+  "[&>tr>th]:py-3",
+  "[&>tr>th]:px-4",
+  "[&>tr>th]:uppercase",
+  "text-left"
+]), o = t([]);
+export {
+  o as bodyVariants,
+  s as headVariants,
+  a as rowVariants,
+  r as tableVariants
+};

package/dist/components/Table/components/Body.js

@@ -0,0 +1,18 @@
+import { jsx as t } from "react/jsx-runtime";
+import { cn as s } from "../../../utils/index.js";
+import { bodyVariants as a } from "../Table.variants.js";
+const d = ({ children: o, className: r, ...m }) => /* @__PURE__ */ t(
+  "tbody",
+  {
+    className: s(
+      a({
+        className: r
+      })
+    ),
+    ...m,
+    children: o
+  }
+);
+export {
+  d as Body
+};

package/dist/components/Table/components/Filter.js

@@ -0,0 +1,9 @@
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import { Input as i } from "../../Input/Input.js";
+const o = ({ children: e, ...r }) => /* @__PURE__ */ t("div", { className: "flex px-4 py-6 rounded-t", children: [
+  /* @__PURE__ */ s(i, { className: "!w-1/3", ...r }),
+  /* @__PURE__ */ s("div", { className: "w-1/4 flex justify-end", children: e })
+] });
+export {
+  o as Filter
+};

package/dist/components/Table/components/Head.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import { cn as t } from "../../../utils/index.js";
+import { headVariants as e } from "../Table.variants.js";
+const c = ({ children: o, className: r, ...a }) => /* @__PURE__ */ m(
+  "thead",
+  {
+    className: t(
+      e({
+        className: r
+      })
+    ),
+    ...a,
+    children: o
+  }
+);
+export {
+  c as Head
+};

package/dist/components/Table/components/Row.js

@@ -0,0 +1,28 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cn as c } from "../../../utils/index.js";
+import { rowVariants as n } from "../Table.variants.js";
+const l = ({
+  children: o,
+  className: r,
+  width: t,
+  isSelected: m,
+  onSelect: s,
+  ...i
+}) => /* @__PURE__ */ a(
+  "tr",
+  {
+    style: { width: t },
+    onClick: s,
+    className: c(
+      n({
+        className: r,
+        isSelected: m
+      })
+    ),
+    ...i,
+    children: o
+  }
+);
+export {
+  l as Row
+};

package/dist/components/Table/components/index.js

@@ -0,0 +1,10 @@
+import { Body as e } from "./Body.js";
+import { Filter as f } from "./Filter.js";
+import { Head as p } from "./Head.js";
+import { Row as d } from "./Row.js";
+export {
+  e as Body,
+  f as Filter,
+  p as Head,
+  d as Row
+};

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-Bk324h27.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,75 +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 "../../contexts/theme.context.js";
-import { useTheme as S } from "../../contexts/theme.hook.js";
-import "../../js.cookie-OLEfuq_g.js";
-import { cn as r } from "../../utils/index.js";
-import { Tag as d } from "../Tag/Tag.js";
-import { useTagSelect as k } from "./hooks/useTagSelect.js";
-import { tagSelectVariants as I, tagListVariants as V, tagItemVariants as j } from "./TagSelect.variants.js";
-import { C as y } from "../../chevron-up-CvquEaNg.js";
-const B = g(({ label: s, name: l, options: f, placeholder: h = "Select a value...", theme: o }, x) => {
-  const c = w(), { theme: a } = S(), t = C(null), {
-    isOpen: i,
-    selectedTag: m,
-    value: p,
-    wrapperRef: b,
-    handleClickTag: N,
-    handleOpenDropdown: v
-  } = k();
-  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(I({ theme: o ?? a })),
-        role: "combobox",
-        onClick: v,
-        "aria-expanded": i,
-        children: [
-          m ? /* @__PURE__ */ e(d, { ...m }) : /* @__PURE__ */ e("span", { className: "text-base text-inherit", children: h }),
-          /* @__PURE__ */ e(
-            y,
-            {
-              className: r(
-                "w-4 h-4 text-inherit transition-all duration-50",
-                i ? "rotate-0" : "rotate-180"
-              )
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ e("input", { ref: t, type: "text", name: l, className: "hidden" }),
-    i ? /* @__PURE__ */ e(
-      "ul",
-      {
-        role: "listbox",
-        className: r(V({ theme: o ?? a })),
-        children: f.map((n) => /* @__PURE__ */ e(
-          "li",
-          {
-            className: r(j({ theme: o ?? a })),
-            role: "option",
-            children: /* @__PURE__ */ e(
-              "button",
-              {
-                type: "button",
-                role: "button",
-                className: "m-0 p-0 w-full",
-                onClick: () => N(n),
-                children: /* @__PURE__ */ e(d, { label: n.label, color: n.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 {
-  B as TagSelect
+  n as TagSelect
 };

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

@@ -1,80 +1,27 @@
 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"
-  ],
-  {
-    variants: {
-      theme: {
-        colony: ["aria-expanded:border-red-400", "aria-expanded:text-red-400"],
-        kubefirst: [
-          "aria-expanded:border-kubefirst-primary",
-          "aria-expanded:text-kubefirst-secondary"
-        ],
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-), a = e(
-  [
-    "absolute",
-    "bg-white",
-    "border",
-    "duration-100",
-    "ease-in-out",
-    "flex",
-    "flex-col",
-    "mt-1",
-    "rounded-md",
-    "shadow-sm",
-    "top-full",
-    "transition-all",
-    "w-full",
-    "z-10"
-  ],
-  {
-    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",
-        civo: ""
-      }
-    },
-    defaultVariants: {
-      theme: "kubefirst"
-    }
-  }
-);
+const t = e([
+  "flex",
+  "flex-col",
+  "w-full",
+  "relative",
+  "text-zinc-500"
+]), a = e(["my-2", "cursor-pointer"]), o = e([
+  "border",
+  "cursor-pointer",
+  "duration-250",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-1",
+  "rounded",
+  "transition-all",
+  "w-full",
+  "border-gray-200"
+]);
 export {
-  i as tagItemVariants,
-  a as tagListVariants,
-  t as tagSelectVariants
+  a as labelVariants,
+  o as tagSelectVariants,
+  t as wrapperVariants
 };

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

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

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

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

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

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

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

@@ -0,0 +1,23 @@
+import { c as o } from "../../../../index-BNmRGtA6.js";
+const a = o([
+  "absolute",
+  "bg-white",
+  "border",
+  "duration-100",
+  "flex",
+  "flex-col",
+  "mt-0.5",
+  "rounded",
+  "shadow-xs",
+  "top-full",
+  "transition-all",
+  "w-full",
+  "z-10",
+  "animate-in",
+  "fade-in-50",
+  "overflow-hidden",
+  "border-gray-200"
+]);
+export {
+  a as wrapperVariants
+};

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

@@ -0,0 +1,86 @@
+import "../Item/Item.js";
+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-DU-Zw-L_.js";
+import { C as V } from "../../../../chevron-up-DgLBQCKD.js";
+import { useTagSelect as j } from "../../contexts/TagSelect.hook.js";
+const B = w(
+  ({
+    label: o,
+    labelClassName: c,
+    name: t,
+    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: N,
+        className: r(
+          I({
+            className: f
+          })
+        ),
+        "data-theme": d,
+        children: [
+          o ? /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: t ?? i,
+              className: r(
+                k({
+                  className: c
+                })
+              ),
+              onClick: () => u(!0),
+              children: o
+            }
+          ) : null,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              id: t ?? i,
+              className: r(R()),
+              role: "combobox",
+              onClick: v,
+              "aria-expanded": s,
+              children: [
+                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,
+                  {
+                    ...a,
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(O, { className: "w-3 h-3", onClick: () => x(a) }),
+                    "data-value": a.label
+                  },
+                  a.id
+                )) }),
+                /* @__PURE__ */ e(
+                  V,
+                  {
+                    className: r(
+                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
+                      s ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e("input", { ref: l, type: "text", name: t, className: "hidden" }),
+          s ? /* @__PURE__ */ e(g, {}) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  B 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
+};