@konstructio/ui 0.1.2-alpha.38 → 0.1.2-alpha.39

package/dist/chevron-up-CRyLc5Ml.js

@@ -0,0 +1,54 @@
+import l, { forwardRef as c } from "react";
+import { P as a } from "./index--V_ZsiQe.js";
+function p() {
+  return p = 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;
+  }, p.apply(this, arguments);
+}
+function u(e, o) {
+  if (e == null) return {};
+  var t = v(e, o), r, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      r = i[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
+  }
+  return t;
+}
+function v(e, o) {
+  if (e == null) return {};
+  var t = {}, r = Object.keys(e), n, i;
+  for (i = 0; i < r.length; i++)
+    n = r[i], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
+  return t;
+}
+var s = c(function(e, o) {
+  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, i = n === void 0 ? 24 : n, f = u(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", p({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: r,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, f), /* @__PURE__ */ l.createElement("polyline", {
+    points: "18 15 12 9 6 15"
+  }));
+});
+s.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+s.displayName = "ChevronUp";
+export {
+  s as C
+};

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { MultiSelectDropdownProvider as c } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as n } from "./components/Wrapper/Wrapper.js";
+const x = l(
+  ({ options: t, multiselect: p, value: e, onChange: i, onBlur: f, name: r, ...m }, d) => /* @__PURE__ */ o(
+    c,
+    {
+      defaultOptions: t,
+      multiselect: p,
+      value: e,
+      onChange: i,
+      onBlur: f,
+      name: r,
+      children: /* @__PURE__ */ o(n, { ref: d, ...m, name: r })
+    }
+  )
+);
+export {
+  x as MultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -0,0 +1,34 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([
+  "flex",
+  "flex-col",
+  "w-full",
+  "relative",
+  "text-slate-500",
+  "mb-1",
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]), a = t(["cursor-pointer", "mb-1"]), o = t([
+  "h-9",
+  "border",
+  "cursor-pointer",
+  "duration-250",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-1",
+  "rounded-md",
+  "transition-all",
+  "w-full",
+  "border-gray-200"
+]);
+export {
+  a as labelVariants,
+  o as multiSelectDropdownVariants,
+  r as wrapperVariants
+};

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -0,0 +1,33 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { wrapperVariants as i } from "./Item.variants.js";
+import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { Tag as p } from "../../../Tag/Tag.js";
+const x = ({ option: r, theme: a, isSelected: o }) => {
+  const { onSelectOption: e } = s();
+  return /* @__PURE__ */ l(
+    "li",
+    {
+      role: "option",
+      "data-theme": a,
+      className: m(i({ isSelected: o })),
+      onClick: () => e(r),
+      children: [
+        /* @__PURE__ */ t(c, { variant: "body2", className: "text-slate-800", children: r.label }),
+        /* @__PURE__ */ t(
+          p,
+          {
+            id: r.id,
+            label: r.tagLabel,
+            color: r.tagColor,
+            isSelected: o
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  x as Item
+};

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

@@ -0,0 +1,38 @@
+import { c as e } from "../../../../index-D29mdTf5.js";
+const r = e(
+  [
+    "cursor-pointer",
+    "py-1.5",
+    "px-2",
+    "last:pb-2",
+    "first:pt-2",
+    "h-full",
+    "hover:bg-gray-50",
+    "focus:bg-gray-50",
+    "dark:hover:bg-slate-700",
+    "dark:focus:bg-slate-700",
+    "flex",
+    "items-center",
+    "gap-4"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        isSelected: !0,
+        class: ["bg-slate-50"]
+      }
+    ],
+    defaultVariants: {
+      isSelected: !1
+    }
+  }
+);
+export {
+  r as wrapperVariants
+};

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../../../utils/index.js";
+import { Item as a } from "../Item/Item.js";
+import { wrapperVariants as p } from "./List.variants.js";
+import { useMultiSelectDropdown as l } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+const y = ({ theme: o }) => {
+  const { options: r, selectedOptions: i } = l();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": o, className: s(p()), children: r.length > 0 ? r.map((t) => /* @__PURE__ */ e(
+    a,
+    {
+      option: t,
+      isSelected: i.some(
+        (m) => m.id === t.id
+      )
+    },
+    t.id
+  )) : /* @__PURE__ */ e(
+    c,
+    {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-slate-50 italic px-2 py-2",
+      children: "No options"
+    }
+  ) });
+};
+export {
+  y as List
+};

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

@@ -0,0 +1,23 @@
+import { c as o } from "../../../../index-D29mdTf5.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/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -0,0 +1,96 @@
+import "../Item/Item.js";
+import { List as v } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { forwardRef as N, useId as b, useImperativeHandle as C } from "react";
+import { Tag as O } from "../../../Tag/Tag.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as R } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as S, multiSelectDropdownVariants as k, wrapperVariants as D } from "../../MultiSelectDropdown.variants.js";
+import { C as M } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useMultiSelectDropdown as y } from "../../contexts/MultiSelectDropdown.hook.js";
+const I = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" })), Z = N(
+  ({ label: r, labelClassName: p, name: l, placeholder: d = "", theme: h, wrapperClassName: f }, u) => {
+    const i = b(), { selectedOptions: n, isOpen: o, onOpen: w, onRemoveOption: L, inputRef: s } = y(), { wrapperRef: g, handleOpen: x } = R();
+    return C(u, () => s.current, [s]), /* @__PURE__ */ m(
+      "div",
+      {
+        ref: g,
+        className: a(
+          D({
+            className: f
+          })
+        ),
+        "data-theme": h,
+        children: [
+          r ? /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: l ?? i,
+              className: a(
+                S({
+                  className: p
+                })
+              ),
+              onClick: () => w(!0),
+              children: r
+            }
+          ) : null,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              id: l ?? i,
+              className: a(k()),
+              role: "combobox",
+              onClick: x,
+              "aria-expanded": o,
+              children: [
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: n.map((t) => /* @__PURE__ */ e(
+                  O,
+                  {
+                    id: t.id,
+                    label: t.tagLabel,
+                    color: t.tagColor || "gray-800",
+                    className: "select-none gap-2",
+                    rightIcon: /* @__PURE__ */ e(
+                      I,
+                      {
+                        className: "w-2 h-2",
+                        onClick: () => L(t)
+                      }
+                    ),
+                    "data-value": t.label
+                  },
+                  t.id
+                )) }),
+                /* @__PURE__ */ e(
+                  M,
+                  {
+                    className: a(
+                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: s,
+              type: "text",
+              name: l,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          o ? /* @__PURE__ */ e(v, {}) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Z as Wrapper
+};

package/dist/components/MultiSelectDropdown/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/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -0,0 +1,19 @@
+import { createContext as t } from "react";
+const n = {
+  options: [],
+  selectedOptions: [],
+  isOpen: !1,
+  inputRef: null,
+  onSelectOption() {
+    throw new Error("Function not implemented.");
+  },
+  onRemoveOption() {
+    throw new Error("Function not implemented.");
+  },
+  onOpen() {
+    throw new Error("Function not implemented.");
+  }
+}, o = t(n);
+export {
+  o as MultiSelectDropdownContext
+};

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

@@ -0,0 +1,13 @@
+import { useContext as o } from "react";
+import { MultiSelectDropdownContext as e } from "./MultiSelectDropdown.context.js";
+const i = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "useMultiSelectDropdown must be used within a MultiSelectDropdownProvider"
+    );
+  return t;
+};
+export {
+  i as useMultiSelectDropdown
+};

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

@@ -0,0 +1,119 @@
+import { jsx as P } from "react/jsx-runtime";
+import { useRef as V, useState as R, useEffect as b, useCallback as p } from "react";
+import { MultiSelectDropdownContext as k } from "./MultiSelectDropdown.context.js";
+import { useToggle as y } from "../../../hooks/useToggle.js";
+const T = ({
+  children: x,
+  defaultOptions: o = [],
+  multiselect: c = !0,
+  value: a,
+  onChange: f,
+  onBlur: S,
+  name: I
+}) => {
+  const m = V(null), [u, h] = y(!1), [g, O] = R(o), [i, v] = R([]), r = a !== void 0;
+  b(() => {
+    if (r) {
+      const t = a || [];
+      v(t);
+      const n = new Set(t.map((s) => s.id));
+      O(
+        c ? o.filter((s) => !n.has(s.id)) : o.map((s) => ({
+          ...s,
+          isSelected: n.has(s.id)
+        }))
+      );
+    }
+  }, [a, r, o, c]);
+  const d = p(
+    (t) => {
+      const n = t.map(({ id: e, value: w, label: M }) => ({
+        id: e,
+        value: w ?? M
+      })), s = JSON.stringify(n);
+      m.current && (m.current.value = s), f && f({
+        target: {
+          value: t,
+          name: I ?? ""
+        }
+      });
+    },
+    [f, I]
+  ), l = p(
+    (t) => {
+      const n = u;
+      h(t), n && t === !1 && S && S();
+    },
+    [u, h, S]
+  ), j = p(
+    (t) => {
+      if (r) {
+        const e = [
+          ...c ? i : [],
+          t
+        ];
+        d(e), l(!1);
+        return;
+      }
+      const n = [
+        ...c ? i : [],
+        t
+      ];
+      v(n);
+      const s = n.map((e) => e.id);
+      O(() => c ? o.filter(
+        (e) => !s.includes(e.id)
+      ) : o.map((e) => ({
+        ...e,
+        isSelected: s.includes(e.id)
+      }))), d(n), l(!1);
+    },
+    [
+      o,
+      d,
+      c,
+      i,
+      l,
+      r
+    ]
+  ), D = p(
+    (t) => {
+      if (r) {
+        const e = i.filter(
+          (w) => w.id !== t.id
+        );
+        d(e);
+        return;
+      }
+      const n = i.filter(
+        (e) => e.id !== t.id
+      );
+      v(n);
+      const s = n.map((e) => e.id);
+      O(
+        () => o.filter(
+          (e) => !s.includes(e.id)
+        )
+      ), d(n);
+    },
+    [o, d, i, r]
+  );
+  return /* @__PURE__ */ P(
+    k.Provider,
+    {
+      value: {
+        options: g,
+        selectedOptions: i,
+        isOpen: u,
+        inputRef: m,
+        onSelectOption: j,
+        onRemoveOption: D,
+        onOpen: l
+      },
+      children: x
+    }
+  );
+};
+export {
+  T as MultiSelectDropdownProvider
+};

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

@@ -0,0 +1,6 @@
+import { useMultiSelectDropdown as r } from "./MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as l } from "./MultiSelectDropdown.provider.js";
+export {
+  l as MultiSelectDropdownProvider,
+  r as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -0,0 +1,32 @@
+import { useRef as l, useEffect as c, useCallback as u } from "react";
+import { useMultiSelectDropdown as i } from "../contexts/MultiSelectDropdown.hook.js";
+const f = () => {
+  const n = l(null), { onOpen: e } = i();
+  c(() => {
+    const t = new AbortController(), a = (o) => {
+      o.key === "Escape" && e(!1);
+    }, r = (o) => {
+      n.current?.contains(o.target) || e(!1);
+    };
+    return document.addEventListener("keydown", a, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", r, {
+      signal: t.signal
+    }), () => {
+      t.abort();
+    };
+  }, [e, n]);
+  const s = u(
+    (t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    },
+    [e]
+  );
+  return {
+    wrapperRef: n,
+    handleOpen: s
+  };
+};
+export {
+  f as useMultiSelectDropdown
+};

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-DPU9OdYH.js";
-import { P as p } from "../../../../index--V_ZsiQe.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/index.js

@@ -3,100 +3,102 @@ import { AlertDialog as p } from "./AlertDialog/AlertDialog.js";
 import { Autocomplete as x } from "./Autocomplete/Autocomplete.js";
 import { Badge as a } from "./Badge/Badge.js";
 import { Breadcrumb as d } from "./Breadcrumb/Breadcrumb.js";
-import { Button as g } from "./Button/Button.js";
+import { Button as l } from "./Button/Button.js";
 import { Card as u } from "./Card/Card.js";
 import { Checkbox as c } from "./Checkbox/Checkbox.js";
 import { DatePicker as D } from "./Datepicker/DatePicker.js";
-import { Divider as B } from "./Divider/Divider.js";
-import { Dropdown as N } from "./Dropdown/Dropdown.js";
+import { Divider as s } from "./Divider/Divider.js";
+import { Dropdown as C } from "./Dropdown/Dropdown.js";
 import { DropdownButton as h } from "./DropdownButton/DropdownButton.js";
-import { Filter as P } from "./Filter/Filter.js";
-import { Input as w } from "./Input/Input.js";
-import { Loading as k } from "./Loading/Loading.js";
-import { M as G } from "../Modal-CtAG97Ts.js";
-import { NumberInput as L } from "./NumberInput/NumberInput.js";
-import { PhoneNumberInput as y } from "./PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as O } from "./PieChart/PieChart.js";
-import { ProgressBar as j } from "./ProgressBar/ProgressBar.js";
-import { Radio as E } from "./Radio/Radio.js";
-import { RadioCard as J } from "./RadioCard/RadioCard.js";
-import { RadioCardGroup as Q } from "./RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as W } from "./RadioGroup/RadioGroup.js";
-import { Range as Y } from "./Range/Range.js";
-import { Sidebar as _ } from "./Sidebar/Sidebar.js";
-import { Slider as oo } from "./Slider/Slider.js";
-import { Switch as eo } from "./Switch/Switch.js";
-import { Table as po } from "./Table/Table.js";
-import { Tabs as xo } from "./Tabs/Tabs.js";
-import { Tag as ao } from "./Tag/Tag.js";
-import { TagSelect as no } from "./TagSelect/TagSelect.js";
-import { TextArea as lo } from "./TextArea/TextArea.js";
-import { TimePicker as To } from "./TimePicker/TimePicker.js";
-import { Toast as bo } from "./Toast/Toast.js";
-import { Tooltip as so } from "./Tooltip/Tooltip.js";
-import { Typography as Co } from "./Typography/Typography.js";
-import { VirtualizedTable as So } from "./VirtualizedTable/VirtualizedTable.js";
-import { BadgeMultiSelect as vo } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as Ro } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { Footer as Ao } from "./Sidebar/components/Footer/Footer.js";
-import { Logo as Fo } from "./Sidebar/components/Logo/Logo.js";
-import { Navigation as Io } from "./Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as Mo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as zo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as Vo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Content as qo } from "./Tabs/components/Content.js";
-import { List as Ho } from "./Tabs/components/List.js";
-import { Trigger as Ko } from "./Tabs/components/Trigger.js";
-import { TruncateText as Uo } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
+import { Filter as w } from "./Filter/Filter.js";
+import { Input as R } from "./Input/Input.js";
+import { Loading as M } from "./Loading/Loading.js";
+import { M as F } from "../Modal-CtAG97Ts.js";
+import { MultiSelectDropdown as I } from "./MultiSelectDropdown/MultiSelectDropdown.js";
+import { NumberInput as y } from "./NumberInput/NumberInput.js";
+import { PhoneNumberInput as O } from "./PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as j } from "./PieChart/PieChart.js";
+import { ProgressBar as E } from "./ProgressBar/ProgressBar.js";
+import { Radio as J } from "./Radio/Radio.js";
+import { RadioCard as Q } from "./RadioCard/RadioCard.js";
+import { RadioCardGroup as W } from "./RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as Y } from "./RadioGroup/RadioGroup.js";
+import { Range as _ } from "./Range/Range.js";
+import { Sidebar as oo } from "./Sidebar/Sidebar.js";
+import { Slider as eo } from "./Slider/Slider.js";
+import { Switch as po } from "./Switch/Switch.js";
+import { Table as xo } from "./Table/Table.js";
+import { Tabs as ao } from "./Tabs/Tabs.js";
+import { Tag as no } from "./Tag/Tag.js";
+import { TagSelect as go } from "./TagSelect/TagSelect.js";
+import { TextArea as To } from "./TextArea/TextArea.js";
+import { TimePicker as bo } from "./TimePicker/TimePicker.js";
+import { Toast as So } from "./Toast/Toast.js";
+import { Tooltip as Bo } from "./Tooltip/Tooltip.js";
+import { Typography as No } from "./Typography/Typography.js";
+import { VirtualizedTable as vo } from "./VirtualizedTable/VirtualizedTable.js";
+import { BadgeMultiSelect as Po } from "./Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as Ao } from "./Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Footer as ko } from "./Sidebar/components/Footer/Footer.js";
+import { Logo as Go } from "./Sidebar/components/Logo/Logo.js";
+import { Navigation as Lo } from "./Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as zo } from "./Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as Vo } from "./Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as qo } from "./Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Content as Ho } from "./Tabs/components/Content.js";
+import { List as Ko } from "./Tabs/components/List.js";
+import { Trigger as Uo } from "./Tabs/components/Trigger.js";
+import { TruncateText as Xo } from "./VirtualizedTable/components/TruncateText/TruncateText.js";
 export {
   e as Alert,
   p as AlertDialog,
   x as Autocomplete,
   a as Badge,
-  vo as BadgeMultiSelect,
+  Po as BadgeMultiSelect,
   d as Breadcrumb,
-  g as Button,
+  l as Button,
   u as Card,
   c as Checkbox,
-  qo as Content,
-  Ro as DateFilterDropdown,
+  Ho as Content,
+  Ao as DateFilterDropdown,
   D as DatePicker,
-  B as Divider,
-  N as Dropdown,
+  s as Divider,
+  C as Dropdown,
   h as DropdownButton,
-  P as Filter,
-  Ao as Footer,
-  w as Input,
-  Ho as List,
-  k as Loading,
-  Fo as Logo,
-  G as Modal,
-  Io as Navigation,
-  Mo as NavigationGroup,
-  zo as NavigationOption,
-  Vo as NavigationSeparator,
-  L as NumberInput,
-  y as PhoneNumberInput,
-  O as PieChart,
-  j as ProgressBar,
-  E as Radio,
-  J as RadioCard,
-  Q as RadioCardGroup,
-  W as RadioGroup,
-  Y as Range,
-  _ as Sidebar,
-  oo as Slider,
-  eo as Switch,
-  po as Table,
-  xo as Tabs,
-  ao as Tag,
-  no as TagSelect,
-  lo as TextArea,
-  To as TimePicker,
-  bo as Toast,
-  so as Tooltip,
-  Ko as Trigger,
-  Uo as TruncateText,
-  Co as Typography,
-  So as VirtualizedTable
+  w as Filter,
+  ko as Footer,
+  R as Input,
+  Ko as List,
+  M as Loading,
+  Go as Logo,
+  F as Modal,
+  I as MultiSelectDropdown,
+  Lo as Navigation,
+  zo as NavigationGroup,
+  Vo as NavigationOption,
+  qo as NavigationSeparator,
+  y as NumberInput,
+  O as PhoneNumberInput,
+  j as PieChart,
+  E as ProgressBar,
+  J as Radio,
+  Q as RadioCard,
+  W as RadioCardGroup,
+  Y as RadioGroup,
+  _ as Range,
+  oo as Sidebar,
+  eo as Slider,
+  po as Switch,
+  xo as Table,
+  ao as Tabs,
+  no as Tag,
+  go as TagSelect,
+  To as TextArea,
+  bo as TimePicker,
+  So as Toast,
+  Bo as Tooltip,
+  Uo as Trigger,
+  Xo as TruncateText,
+  No as Typography,
+  vo as VirtualizedTable
 };

package/dist/index.d.ts

@@ -373,6 +373,31 @@ declare interface ModalProps extends PropsWithChildren, VariantProps<typeof moda
 
 declare const modalVariants: (props?: ClassProp | undefined) => string;
 
+export declare const MultiSelectDropdown: FC<MultiSelectDropdownProps>;
+
+declare type MultiSelectDropdownOption = {
+    id: string | number;
+    label: string;
+    tagLabel: string;
+    tagColor?: TagProps['color'];
+    value?: string;
+};
+
+declare interface MultiSelectDropdownProps extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    label?: string;
+    options: MultiSelectDropdownOption[];
+    name?: string;
+    placeholder?: string;
+    labelClassName?: string;
+    wrapperClassName?: string;
+    multiselect?: boolean;
+    value?: MultiSelectDropdownOption[];
+    onChange?: OnChangeFn_2;
+    onBlur?: VoidFunction;
+}
+
+declare const multiSelectDropdownVariants: (props?: ClassProp | undefined) => string;
+
 declare type MultiSelectFilter = {
     key: string;
     label: string;
@@ -468,6 +493,13 @@ declare type OnChangeFn = (params: {
     };
 }) => void;
 
+declare type OnChangeFn_2 = (params: {
+    target: {
+        value: MultiSelectDropdownOption[];
+        name: string;
+    };
+}) => void;
+
 declare type Option_2 = {
     value: string;
 };
@@ -862,7 +894,7 @@ declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
-    color?: 'gray' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
+    color?: 'gray' | 'gray-800' | 'cyan' | 'gold' | 'green' | 'light blue' | 'lime' | 'pink' | 'purple' | 'emerald' | 'fuscia' | 'indigo' | 'light-orange' | 'dark-sky-blue' | 'mistery';
     id: string | number;
     label: string;
     rightIcon?: ReactNode;

package/dist/index.js

@@ -4,109 +4,111 @@ import { AlertDialog as x } from "./components/AlertDialog/AlertDialog.js";
 import { Autocomplete as a } from "./components/Autocomplete/Autocomplete.js";
 import { Badge as n } from "./components/Badge/Badge.js";
 import { Breadcrumb as g } from "./components/Breadcrumb/Breadcrumb.js";
-import { Button as T } from "./components/Button/Button.js";
+import { Button as u } from "./components/Button/Button.js";
 import { Card as c } from "./components/Card/Card.js";
 import { Checkbox as h } from "./components/Checkbox/Checkbox.js";
-import { DatePicker as C } from "./components/Datepicker/DatePicker.js";
-import { Divider as v } from "./components/Divider/Divider.js";
-import { Dropdown as N } from "./components/Dropdown/Dropdown.js";
-import { DropdownButton as S } from "./components/DropdownButton/DropdownButton.js";
-import { Filter as w } from "./components/Filter/Filter.js";
-import { BadgeMultiSelect as k } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
-import { DateFilterDropdown as G } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
-import { Input as L } from "./components/Input/Input.js";
+import { DatePicker as D } from "./components/Datepicker/DatePicker.js";
+import { Divider as S } from "./components/Divider/Divider.js";
+import { Dropdown as B } from "./components/Dropdown/Dropdown.js";
+import { DropdownButton as P } from "./components/DropdownButton/DropdownButton.js";
+import { Filter as R } from "./components/Filter/Filter.js";
+import { BadgeMultiSelect as M } from "./components/Filter/components/BadgeDropdown/BadgeMultiSelect.js";
+import { DateFilterDropdown as F } from "./components/Filter/components/DateFilterDropdown/DateFilterDropdown.js";
+import { Input as I } from "./components/Input/Input.js";
 import { Loading as y } from "./components/Loading/Loading.js";
 import { M as O } from "./Modal-CtAG97Ts.js";
-import { NumberInput as j } from "./components/NumberInput/NumberInput.js";
-import { PhoneNumberInput as E } from "./components/PhoneNumberInput/PhoneNumberInput.js";
-import { PieChart as J } from "./components/PieChart/PieChart.js";
-import { ProgressBar as Q } from "./components/ProgressBar/ProgressBar.js";
-import { Radio as W } from "./components/Radio/Radio.js";
-import { RadioCard as Y } from "./components/RadioCard/RadioCard.js";
-import { RadioCardGroup as _ } from "./components/RadioCardGroup/RadioCardGroup.js";
-import { RadioGroup as oo } from "./components/RadioGroup/RadioGroup.js";
-import { Range as eo } from "./components/Range/Range.js";
-import { Footer as po } from "./components/Sidebar/components/Footer/Footer.js";
-import { Logo as xo } from "./components/Sidebar/components/Logo/Logo.js";
-import { Navigation as ao } from "./components/Sidebar/components/Navigation/Navigation.js";
-import { NavigationGroup as no } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
-import { NavigationOption as uo } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
-import { NavigationSeparator as lo } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
-import { Sidebar as bo } from "./components/Sidebar/Sidebar.js";
-import { Slider as so } from "./components/Slider/Slider.js";
-import { Switch as Do } from "./components/Switch/Switch.js";
-import { Table as Bo } from "./components/Table/Table.js";
-import { Content as Po } from "./components/Tabs/components/Content.js";
-import { List as Ro } from "./components/Tabs/components/List.js";
-import { Tabs as Ao } from "./components/Tabs/Tabs.js";
-import { Trigger as Fo } from "./components/Tabs/components/Trigger.js";
-import { Tag as Io } from "./components/Tag/Tag.js";
-import { TagSelect as Mo } from "./components/TagSelect/TagSelect.js";
-import { TextArea as zo } from "./components/TextArea/TextArea.js";
-import { TimePicker as Vo } from "./components/TimePicker/TimePicker.js";
-import { Toast as qo } from "./components/Toast/Toast.js";
-import { Tooltip as Ho } from "./components/Tooltip/Tooltip.js";
-import { Typography as Ko } from "./components/Typography/Typography.js";
-import { TruncateText as Uo } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
-import { VirtualizedTable as Xo } from "./components/VirtualizedTable/VirtualizedTable.js";
-import { ThemeContext as Zo } from "./contexts/theme.context.js";
-import { useTheme as $o } from "./contexts/theme.hook.js";
-import { ThemeProvider as rr } from "./contexts/theme.provider.js";
-import { useToggle as tr } from "./hooks/useToggle.js";
+import { MultiSelectDropdown as j } from "./components/MultiSelectDropdown/MultiSelectDropdown.js";
+import { NumberInput as E } from "./components/NumberInput/NumberInput.js";
+import { PhoneNumberInput as J } from "./components/PhoneNumberInput/PhoneNumberInput.js";
+import { PieChart as Q } from "./components/PieChart/PieChart.js";
+import { ProgressBar as W } from "./components/ProgressBar/ProgressBar.js";
+import { Radio as Y } from "./components/Radio/Radio.js";
+import { RadioCard as _ } from "./components/RadioCard/RadioCard.js";
+import { RadioCardGroup as oo } from "./components/RadioCardGroup/RadioCardGroup.js";
+import { RadioGroup as eo } from "./components/RadioGroup/RadioGroup.js";
+import { Range as po } from "./components/Range/Range.js";
+import { Footer as xo } from "./components/Sidebar/components/Footer/Footer.js";
+import { Logo as ao } from "./components/Sidebar/components/Logo/Logo.js";
+import { Navigation as no } from "./components/Sidebar/components/Navigation/Navigation.js";
+import { NavigationGroup as lo } from "./components/Sidebar/components/NavigationGroup/NavigationGroup.js";
+import { NavigationOption as To } from "./components/Sidebar/components/NavigationOption/NavigationOption.js";
+import { NavigationSeparator as bo } from "./components/Sidebar/components/NavigationSeparator/NavigationSeparator.js";
+import { Sidebar as so } from "./components/Sidebar/Sidebar.js";
+import { Slider as Co } from "./components/Slider/Slider.js";
+import { Switch as vo } from "./components/Switch/Switch.js";
+import { Table as No } from "./components/Table/Table.js";
+import { Content as wo } from "./components/Tabs/components/Content.js";
+import { List as Ao } from "./components/Tabs/components/List.js";
+import { Tabs as ko } from "./components/Tabs/Tabs.js";
+import { Trigger as Go } from "./components/Tabs/components/Trigger.js";
+import { Tag as Lo } from "./components/Tag/Tag.js";
+import { TagSelect as zo } from "./components/TagSelect/TagSelect.js";
+import { TextArea as Vo } from "./components/TextArea/TextArea.js";
+import { TimePicker as qo } from "./components/TimePicker/TimePicker.js";
+import { Toast as Ho } from "./components/Toast/Toast.js";
+import { Tooltip as Ko } from "./components/Tooltip/Tooltip.js";
+import { Typography as Uo } from "./components/Typography/Typography.js";
+import { TruncateText as Xo } from "./components/VirtualizedTable/components/TruncateText/TruncateText.js";
+import { VirtualizedTable as Zo } from "./components/VirtualizedTable/VirtualizedTable.js";
+import { ThemeContext as $o } from "./contexts/theme.context.js";
+import { useTheme as rr } from "./contexts/theme.hook.js";
+import { ThemeProvider as tr } from "./contexts/theme.provider.js";
+import { useToggle as mr } from "./hooks/useToggle.js";
 export {
   p as Alert,
   x as AlertDialog,
   a as Autocomplete,
   n as Badge,
-  k as BadgeMultiSelect,
+  M as BadgeMultiSelect,
   g as Breadcrumb,
-  T as Button,
+  u as Button,
   c as Card,
   h as Checkbox,
-  Po as Content,
-  G as DateFilterDropdown,
-  C as DatePicker,
-  v as Divider,
-  N as Dropdown,
-  S as DropdownButton,
-  w as Filter,
-  po as Footer,
-  L as Input,
-  Ro as List,
+  wo as Content,
+  F as DateFilterDropdown,
+  D as DatePicker,
+  S as Divider,
+  B as Dropdown,
+  P as DropdownButton,
+  R as Filter,
+  xo as Footer,
+  I as Input,
+  Ao as List,
   y as Loading,
-  xo as Logo,
+  ao as Logo,
   O as Modal,
-  ao as Navigation,
-  no as NavigationGroup,
-  uo as NavigationOption,
-  lo as NavigationSeparator,
-  j as NumberInput,
-  E as PhoneNumberInput,
-  J as PieChart,
-  Q as ProgressBar,
-  W as Radio,
-  Y as RadioCard,
-  _ as RadioCardGroup,
-  oo as RadioGroup,
-  eo as Range,
-  bo as Sidebar,
-  so as Slider,
-  Do as Switch,
-  Bo as Table,
-  Ao as Tabs,
-  Io as Tag,
-  Mo as TagSelect,
-  zo as TextArea,
-  Zo as ThemeContext,
-  rr as ThemeProvider,
-  Vo as TimePicker,
-  qo as Toast,
-  Ho as Tooltip,
-  Fo as Trigger,
-  Uo as TruncateText,
-  Ko as Typography,
-  Xo as VirtualizedTable,
+  j as MultiSelectDropdown,
+  no as Navigation,
+  lo as NavigationGroup,
+  To as NavigationOption,
+  bo as NavigationSeparator,
+  E as NumberInput,
+  J as PhoneNumberInput,
+  Q as PieChart,
+  W as ProgressBar,
+  Y as Radio,
+  _ as RadioCard,
+  oo as RadioCardGroup,
+  eo as RadioGroup,
+  po as Range,
+  so as Sidebar,
+  Co as Slider,
+  vo as Switch,
+  No as Table,
+  ko as Tabs,
+  Lo as Tag,
+  zo as TagSelect,
+  Vo as TextArea,
+  $o as ThemeContext,
+  tr as ThemeProvider,
+  qo as TimePicker,
+  Ho as Toast,
+  Ko as Tooltip,
+  Go as Trigger,
+  Xo as TruncateText,
+  Uo as Typography,
+  Zo as VirtualizedTable,
   e as cn,
-  $o as useTheme,
-  tr as useToggle
+  rr as useTheme,
+  mr as useToggle
 };

package/dist/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.37",
+  "version": "0.1.2-alpha.38",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",

package/package.json

@@ -2,7 +2,7 @@
   "name": "@konstructio/ui",
   "description": "A set of reusable and customizable React components built for konstruct.io",
   "private": false,
-  "version": "0.1.2-alpha.38",
+  "version": "0.1.2-alpha.39",
   "type": "module",
   "license": "MIT",
   "main": "dist/index.js",