@konstructio/ui 0.1.2-alpha.77 → 0.1.2-alpha.78

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

@@ -1,5 +1,29 @@
 import { c as r } from "../../index-D29mdTf5.js";
-const t = r(["flex", "flex-col", "gap-2", "w-full", "relative", "cursor-pointer"]), o = r(["cursor-pointer", "select-none"]), a = r(["min-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", "dark:border-metal-700", "dark:bg-metal-800"]);
+const t = r([
+  "flex",
+  "flex-col",
+  "gap-2",
+  "w-full",
+  "relative",
+  "cursor-pointer"
+]), o = r(["cursor-pointer", "select-none"]), a = r([
+  "min-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",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
 export {
   o as labelVariants,
   a as multiSelectDropdownVariants,

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

@@ -1,35 +1,30 @@
-import { jsx as p, jsxs as d } from "react/jsx-runtime";
-import { c as b } from "../../../../compiler-runtime-DA41awpA.js";
-import { Badge as g } from "../../../Badge/Badge.js";
-import { Typography as h } from "../../../Typography/Typography.js";
-import { cn as u } from "../../../../utils/index.js";
-import { itemVariants as x } from "./Item.variants.js";
-import { useMultiSelectDropdown as y } from "../../contexts/MultiSelectDropdown.hook.js";
-const C = (f) => {
-  const e = b.c(16), {
-    option: t,
-    theme: a,
-    isSelected: s,
-    className: n
-  } = f, {
-    onSelectOption: c
-  } = y();
-  let o;
-  e[0] !== n || e[1] !== s ? (o = u(x({
-    isSelected: s
-  }), n), e[0] = n, e[1] = s, e[2] = o) : o = e[2];
-  let l;
-  e[3] !== c || e[4] !== t ? (l = () => c(t), e[3] = c, e[4] = t, e[5] = l) : l = e[5];
-  let i;
-  e[6] !== t.label ? (i = /* @__PURE__ */ p(h, { variant: "body2", children: t.label }), e[6] = t.label, e[7] = i) : i = e[7];
-  let r;
-  e[8] !== t.badge ? (r = t.badge && /* @__PURE__ */ p(g, { label: t.badge }), e[8] = t.badge, e[9] = r) : r = e[9];
-  let m;
-  return e[10] !== o || e[11] !== l || e[12] !== i || e[13] !== r || e[14] !== a ? (m = /* @__PURE__ */ d("li", { role: "option", "data-theme": a, className: o, onClick: l, children: [
-    i,
-    r
-  ] }), e[10] = o, e[11] = l, e[12] = i, e[13] = r, e[14] = a, e[15] = m) : m = e[15], m;
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Badge as l } from "../../../Badge/Badge.js";
+import { Typography as n } from "../../../Typography/Typography.js";
+import { cn as c } from "../../../../utils/index.js";
+import { itemVariants as p } from "./Item.variants.js";
+import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
+const x = ({
+  option: r,
+  theme: o,
+  isSelected: t,
+  className: m
+}) => {
+  const { onSelectOption: a } = s();
+  return /* @__PURE__ */ i(
+    "li",
+    {
+      role: "option",
+      "data-theme": o,
+      className: c(p({ isSelected: t }), m),
+      onClick: () => a(r),
+      children: [
+        /* @__PURE__ */ e(n, { variant: "body2", children: r.label }),
+        r.badge && /* @__PURE__ */ e(l, { label: r.badge })
+      ]
+    }
+  );
 };
 export {
-  C as Item
+  x as Item
 };

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

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

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

@@ -1,29 +1,30 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as h } from "../../../../compiler-runtime-DA41awpA.js";
-import { cn as g } from "../../../../utils/index.js";
-import { Item as p } from "../Item/Item.js";
-import { listVariants as x } from "./List.variants.js";
-import { Typography as u } from "../../../Typography/Typography.js";
-import { useMultiSelectDropdown as y } from "../../contexts/MultiSelectDropdown.hook.js";
-const _ = (d) => {
-  const e = h.c(9), {
-    theme: n
-  } = d, {
-    options: i,
-    selectedOptions: r,
-    isLoading: m,
-    noOptionsText: a
-  } = y();
-  let s;
-  e[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (s = g(x()), e[0] = s) : s = e[0];
-  let t;
-  e[1] !== m || e[2] !== a || e[3] !== i || e[4] !== r ? (t = m ? /* @__PURE__ */ o(p, { option: {
-    id: "loading",
-    label: "Loading..."
-  }, className: "select-none pointer-events-none", isSelected: !1 }, "loading") : i.length > 0 ? i.map((c) => /* @__PURE__ */ o(p, { option: c, isSelected: r.some((f) => f.id === c.id) }, c.id)) : /* @__PURE__ */ o("li", { className: "select-none", children: /* @__PURE__ */ o(u, { variant: "body2", className: "italic px-2 py-2", children: a ?? "No options" }) }), e[1] = m, e[2] = a, e[3] = i, e[4] = r, e[5] = t) : t = e[5];
-  let l;
-  return e[6] !== t || e[7] !== n ? (l = /* @__PURE__ */ o("ul", { role: "listbox", "data-theme": n, className: s, children: t }), e[6] = t, e[7] = n, e[8] = l) : l = e[8], l;
+import { jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { Item as t } from "../Item/Item.js";
+import { listVariants as c } from "./List.variants.js";
+import { Typography as d } from "../../../Typography/Typography.js";
+import { useMultiSelectDropdown as p } from "../../contexts/MultiSelectDropdown.hook.js";
+const y = ({ theme: s }) => {
+  const { options: i, selectedOptions: n, isLoading: l, noOptionsText: r } = p();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(c()), children: l ? /* @__PURE__ */ e(
+    t,
+    {
+      option: { id: "loading", label: "Loading..." },
+      className: "select-none pointer-events-none",
+      isSelected: !1
+    },
+    "loading"
+  ) : i.length > 0 ? i.map((o) => /* @__PURE__ */ e(
+    t,
+    {
+      option: o,
+      isSelected: n.some(
+        (a) => a.id === o.id
+      )
+    },
+    o.id
+  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(d, { variant: "body2", className: "italic px-2 py-2", children: r ?? "No options" }) }) });
 };
 export {
-  _ as List
+  y as List
 };

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

@@ -1,5 +1,25 @@
 import { c as a } from "../../../../index-D29mdTf5.js";
-const o = a(["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", "dark:border-metal-700", "dark:bg-metal-800"]);
+const o = a([
+  "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",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
 export {
   o as listVariants
 };

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -1,76 +1,126 @@
 import "../Item/Item.js";
-import { List as z } from "../List/List.js";
-import { jsx as t, jsxs as V } from "react/jsx-runtime";
-import { c as B } from "../../../../compiler-runtime-DA41awpA.js";
-import { forwardRef as E, useId as F, useImperativeHandle as H } from "react";
-import { Badge as T } from "../../../Badge/Badge.js";
-import { Typography as $ } from "../../../Typography/Typography.js";
-import { cn as f } from "../../../../utils/index.js";
-import { useMultiSelectDropdown as U } from "../../hooks/useMultiSelectDropdown.js";
-import { wrapperVariants as X, labelVariants as A, multiSelectDropdownVariants as G } from "../../MultiSelectDropdown.variants.js";
-import { X as J } from "../../../../x-B9bYxG31.js";
-import { LoaderIcon as K } from "../../../../assets/icons/components/Loader.js";
-import { C as P } from "../../../../chevron-up-DEfvgPCw.js";
-import { useMultiSelectDropdown as Q } from "../../contexts/MultiSelectDropdown.hook.js";
-const Y = E((j, _) => {
-  const e = B.c(39), {
-    isRequired: g,
-    label: h,
-    labelClassName: y,
-    labelWrapperClassName: C,
-    name: u,
-    placeholder: W,
-    theme: k,
-    wrapperClassName: O
-  } = j, R = W === void 0 ? "" : W, q = F(), r = u ? `${q}-name` : "id", {
-    inputRef: a,
-    isLoading: S,
-    isOpen: l,
-    selectedOptions: N,
-    onOpen: D,
-    onRemoveOption: I
-  } = Q(), {
-    wrapperRef: L,
-    handleOpen: M
-  } = U();
-  let x, b;
-  e[0] !== a ? (x = () => a.current, b = [a], e[0] = a, e[1] = x, e[2] = b) : (x = e[1], b = e[2]), H(_, x, b);
-  let s;
-  e[3] !== O ? (s = f(X({
-    className: O
-  })), e[3] = O, e[4] = s) : s = e[4];
-  let o;
-  e[5] !== r || e[6] !== g || e[7] !== h || e[8] !== y || e[9] !== C || e[10] !== D ? (o = h ? /* @__PURE__ */ t("div", { className: f(C), children: /* @__PURE__ */ V($, { component: "label", variant: "labelLarge", htmlFor: r, className: f(A({
-    className: y
-  })), onClick: () => D(!0), children: [
-    h,
-    " ",
-    g && /* @__PURE__ */ t($, { component: "span", className: "text-red-500 dark:text-red-500 text-sm font-normal", children: "*" })
-  ] }) }) : null, e[5] = r, e[6] = g, e[7] = h, e[8] = y, e[9] = C, e[10] = D, e[11] = o) : o = e[11];
-  let v;
-  e[12] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel") ? (v = f(G()), e[12] = v) : v = e[12];
-  let i;
-  e[13] !== I || e[14] !== R || e[15] !== N ? (i = N.length === 0 ? /* @__PURE__ */ t("span", { className: "text-base text-inherit select-none", children: R }) : /* @__PURE__ */ t("div", { className: "flex flex-wrap gap-2", children: N.map((d) => /* @__PURE__ */ t(T, { "data-value": d.label, label: d.value ?? d.label ?? "", className: "select-none", rightIcon: /* @__PURE__ */ t(J, { onClick: () => I(d) }) }, d.id)) }), e[13] = I, e[14] = R, e[15] = N, e[16] = i) : i = e[16];
-  let n;
-  e[17] !== S || e[18] !== l ? (n = S ? /* @__PURE__ */ t(K, { size: 16, className: "animate-spin shrink-0 text-gray-400" }) : /* @__PURE__ */ t(P, { className: f("w-4 h-4 transition-all duration-50 shrink-0 text-gray-400", l ? "rotate-0" : "rotate-180") }), e[17] = S, e[18] = l, e[19] = n) : n = e[19];
-  let m;
-  e[20] !== M || e[21] !== r || e[22] !== l || e[23] !== i || e[24] !== n ? (m = /* @__PURE__ */ V("div", { id: r, className: v, role: "combobox", onClick: M, "aria-expanded": l, children: [
-    i,
-    n
-  ] }), e[20] = M, e[21] = r, e[22] = l, e[23] = i, e[24] = n, e[25] = m) : m = e[25];
-  let c;
-  e[26] !== a || e[27] !== u ? (c = /* @__PURE__ */ t("input", { ref: a, type: "text", name: u, className: "hidden", readOnly: !0 }), e[26] = a, e[27] = u, e[28] = c) : c = e[28];
-  let p;
-  e[29] !== l ? (p = l ? /* @__PURE__ */ t(z, {}) : null, e[29] = l, e[30] = p) : p = e[30];
-  let w;
-  return e[31] !== c || e[32] !== p || e[33] !== s || e[34] !== o || e[35] !== m || e[36] !== k || e[37] !== L ? (w = /* @__PURE__ */ V("div", { ref: L, className: s, "data-theme": k, children: [
-    o,
-    m,
-    c,
-    p
-  ] }), e[31] = c, e[32] = p, e[33] = s, e[34] = o, e[35] = m, e[36] = k, e[37] = L, e[38] = w) : w = e[38], w;
-});
-Y.displayName = "MultiSelectDropdownWrapper";
+import { List as O } from "../List/List.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C, useId as D, useImperativeHandle as S } from "react";
+import { Badge as I } from "../../../Badge/Badge.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as L } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as M, multiSelectDropdownVariants as R, wrapperVariants as V } from "../../MultiSelectDropdown.variants.js";
+import { X as j } from "../../../../x-B9bYxG31.js";
+import { LoaderIcon as W } from "../../../../assets/icons/components/Loader.js";
+import { C as $ } from "../../../../chevron-up-DEfvgPCw.js";
+import { useMultiSelectDropdown as z } from "../../contexts/MultiSelectDropdown.hook.js";
+const B = C(
+  ({
+    isRequired: c,
+    label: n,
+    labelClassName: d,
+    labelWrapperClassName: f,
+    name: s,
+    placeholder: u = "",
+    theme: h,
+    wrapperClassName: x
+  }, N) => {
+    const v = D(), i = s ? `${v}-name` : "id", {
+      inputRef: t,
+      isLoading: w,
+      isOpen: o,
+      selectedOptions: m,
+      onOpen: g,
+      onRemoveOption: b
+    } = z(), { wrapperRef: y, handleOpen: k } = L();
+    return S(N, () => t.current, [t]), /* @__PURE__ */ l(
+      "div",
+      {
+        ref: y,
+        className: a(
+          V({
+            className: x
+          })
+        ),
+        "data-theme": h,
+        children: [
+          n ? /* @__PURE__ */ e("div", { className: a(f), children: /* @__PURE__ */ l(
+            p,
+            {
+              component: "label",
+              variant: "labelLarge",
+              htmlFor: i,
+              className: a(
+                M({
+                  className: d
+                })
+              ),
+              onClick: () => g(!0),
+              children: [
+                n,
+                " ",
+                c && /* @__PURE__ */ e(
+                  p,
+                  {
+                    component: "span",
+                    className: "text-red-500 dark:text-red-500 text-sm font-normal",
+                    children: "*"
+                  }
+                )
+              ]
+            }
+          ) }) : null,
+          /* @__PURE__ */ l(
+            "div",
+            {
+              id: i,
+              className: a(R()),
+              role: "combobox",
+              onClick: k,
+              "aria-expanded": o,
+              children: [
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: u }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
+                  I,
+                  {
+                    "data-value": r.label,
+                    label: r.value ?? r.label ?? "",
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(j, { onClick: () => b(r) })
+                  },
+                  r.id
+                )) }),
+                w ? /* @__PURE__ */ e(
+                  W,
+                  {
+                    size: 16,
+                    className: "animate-spin shrink-0 text-gray-400"
+                  }
+                ) : /* @__PURE__ */ e(
+                  $,
+                  {
+                    className: a(
+                      "w-4 h-4 transition-all duration-50 shrink-0 text-gray-400",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: t,
+              type: "text",
+              name: s,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          o ? /* @__PURE__ */ e(O, {}) : null
+        ]
+      }
+    );
+  }
+);
+B.displayName = "MultiSelectDropdownWrapper";
 export {
-  Y as Wrapper
+  B as Wrapper
 };

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

@@ -3,7 +3,9 @@ import { MultiSelectDropdownContext as e } from "./MultiSelectDropdown.context.j
 const i = () => {
   const t = o(e);
   if (!t)
-    throw new Error("useMultiSelectDropdown must be used within a MultiSelectDropdownProvider");
+    throw new Error(
+      "useMultiSelectDropdown must be used within a MultiSelectDropdownProvider"
+    );
   return t;
 };
 export {