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

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,34 +1,28 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { MultiSelectDropdownProvider as s } from "./contexts/MultiSelectDropdown.provider.js";
-import { Wrapper as u } from "./components/Wrapper/Wrapper.js";
-const a = n(
-  ({
-    isLoading: t,
-    multiselect: e,
-    name: o,
-    noOptionsText: p,
-    options: i,
-    value: l,
-    onChange: d,
-    onBlur: m,
-    ...f
-  }, c) => /* @__PURE__ */ r(
-    s,
-    {
-      defaultOptions: i,
-      multiselect: e,
-      value: l,
-      onChange: d,
-      onBlur: m,
-      name: o,
-      isLoading: t,
-      noOptionsText: p,
-      children: /* @__PURE__ */ r(u, { ref: c, name: o, ...f })
-    }
-  )
-);
-a.displayName = "KonstructMultiSelectDropdown";
+import { jsx as f } from "react/jsx-runtime";
+import { c as w } from "../../compiler-runtime-DA41awpA.js";
+import { forwardRef as x } from "react";
+import { Wrapper as g } from "./components/Wrapper/Wrapper.js";
+import { MultiSelectDropdownProvider as D } from "./contexts/MultiSelectDropdown.provider.js";
+const M = x((d, u) => {
+  const e = w.c(24);
+  let o, l, r, t, i, n, p, m, s;
+  e[0] !== d ? ({
+    isLoading: l,
+    multiselect: r,
+    name: t,
+    noOptionsText: i,
+    options: m,
+    value: s,
+    onChange: p,
+    onBlur: n,
+    ...o
+  } = d, e[0] = d, e[1] = o, e[2] = l, e[3] = r, e[4] = t, e[5] = i, e[6] = n, e[7] = p, e[8] = m, e[9] = s) : (o = e[1], l = e[2], r = e[3], t = e[4], i = e[5], n = e[6], p = e[7], m = e[8], s = e[9]);
+  let a;
+  e[10] !== o || e[11] !== t || e[12] !== u ? (a = /* @__PURE__ */ f(g, { ref: u, name: t, ...o }), e[10] = o, e[11] = t, e[12] = u, e[13] = a) : a = e[13];
+  let c;
+  return e[14] !== l || e[15] !== r || e[16] !== t || e[17] !== i || e[18] !== n || e[19] !== p || e[20] !== m || e[21] !== a || e[22] !== s ? (c = /* @__PURE__ */ f(D, { defaultOptions: m, multiselect: r, value: s, onChange: p, onBlur: n, name: t, isLoading: l, noOptionsText: i, children: a }), e[14] = l, e[15] = r, e[16] = t, e[17] = i, e[18] = n, e[19] = p, e[20] = m, e[21] = a, e[22] = s, e[23] = c) : c = e[23], c;
+});
+M.displayName = "KonstructMultiSelectDropdown";
 export {
-  a as MultiSelectDropdown
+  M as MultiSelectDropdown
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.types.d.ts

@@ -43,7 +43,7 @@ type OnBlurFn = (event: {
  * />
  * ```
  */
-export interface MultiSelectDropdownProps extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+export interface Props extends VariantProps<typeof multiSelectDropdownVariants>, Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
     /** Whether the dropdown is in a loading state */
     isLoading?: boolean;
     /** Whether the field is required */
@@ -73,4 +73,6 @@ export interface MultiSelectDropdownProps extends VariantProps<typeof multiSelec
     /** Callback fired when the input loses focus */
     onBlur?: OnBlurFn;
 }
+/** @deprecated Use Props instead */
+export type MultiSelectDropdownProps = Props;
 export {};

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

@@ -1,29 +1,5 @@
 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,30 +1,35 @@
-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 })
-      ]
-    }
-  );
+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;
 };
 export {
-  x as Item
+  C as Item
 };

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

@@ -1,38 +1,19 @@
 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: ""
-      }
-    },
-    compoundVariants: [
-      {
-        isSelected: !0,
-        class: ["bg-slate-50", "dark:bg-metal-700"]
-      }
-    ],
-    defaultVariants: {
-      isSelected: !1
+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
   }
-);
+});
 export {
   t as itemVariants
 };

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

@@ -1,30 +1,29 @@
-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" }) }) });
+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;
 };
 export {
-  y as List
+  _ as List
 };

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

@@ -1,25 +1,5 @@
 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,126 +1,76 @@
 import "../Item/Item.js";
-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";
+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";
 export {
-  B as Wrapper
+  Y as Wrapper
 };

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.types.d.ts

@@ -1,6 +1,6 @@
 import { ForwardedRef } from 'react';
 import { Theme } from '../../../../domain/theme';
-import { MultiSelectDropdownProps } from '../../MultiSelectDropdown.types';
+import { Props as MultiSelectDropdownProps } from '../../MultiSelectDropdown.types';
 export type WrapperProps = Omit<MultiSelectDropdownProps, 'options' | 'multiselect'> & {
     ref?: ForwardedRef<HTMLInputElement>;
     theme?: Theme;

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

@@ -3,9 +3,7 @@ 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 {