@konstructio/ui 0.1.2-alpha.111 → 0.1.2-alpha.113

package/dist/components-B_SWqhCL.js

@@ -0,0 +1,147 @@
+import { n as W } from "./Wrapper-JmStmade.js";
+import { n as z, t as n } from "./utils-DnIJruo0.js";
+import { LoaderIcon as E } from "./assets/icons/components/Loader.js";
+import { t as F } from "./x-C8O1IsaM.js";
+import { Badge as K } from "./components/Badge/Badge.js";
+import { Typography as h } from "./components/Typography/Typography.js";
+import { useMultiSelectDropdown as I } from "./components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as P } from "./components/MultiSelectDropdown/contexts/MultiSelectDropdown.provider.js";
+import { Item as k } from "./components/MultiSelectDropdown/components/Item/Item.js";
+import { listVariants as U } from "./components/MultiSelectDropdown/components/List/List.variants.js";
+import { useMultiSelectDropdown as X } from "./components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js";
+import { labelVariants as q, multiSelectDropdownVariants as A, wrapperVariants as G } from "./components/MultiSelectDropdown/MultiSelectDropdown.variants.js";
+import { forwardRef as O, useId as J, useImperativeHandle as Q } from "react";
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+var Y = ({ theme: a }) => {
+  const { options: r, selectedOptions: l, isLoading: o, noOptionsText: s, loadingText: i } = I();
+  return /* @__PURE__ */ e("ul", {
+    role: "listbox",
+    "data-theme": a,
+    className: n(U()),
+    children: o ? /* @__PURE__ */ e(k, {
+      option: {
+        id: "loading",
+        label: i ?? "Loading..."
+      },
+      className: "select-none pointer-events-none",
+      isSelected: !1
+    }, "loading") : r.length > 0 ? r.map((t) => /* @__PURE__ */ e(k, {
+      option: t,
+      isSelected: l.some((d) => d.id === t.id)
+    }, t.id)) : /* @__PURE__ */ e("li", {
+      className: "select-none",
+      children: /* @__PURE__ */ e(h, {
+        variant: "body2",
+        className: "italic px-2 py-2",
+        children: s ?? "No options"
+      })
+    })
+  });
+}, D = O(({ disabled: a = !1, error: r, errorClassName: l, helperText: o, helperTextClassName: s, isRequired: i, label: t, labelClassName: d, labelWrapperClassName: x, name: u, placeholder: M = "", theme: L, wrapperClassName: $ }, C) => {
+  const c = J(), g = u ? `${c}-name` : "id", b = `${c}-error`, y = `${c}-helper-text`, m = typeof r == "string" && r.length > 0, w = !m && !!o, T = z(m && b, w && y), { inputRef: f, isLoading: V, isOpen: v, selectedOptions: S, onOpen: R, onRemoveOption: j } = I(), { wrapperRef: B, handleOpen: H } = X();
+  return Q(C, () => f.current, [f]), /* @__PURE__ */ N("div", {
+    ref: B,
+    className: n(G({ className: $ })),
+    "data-theme": L,
+    children: [
+      t ? /* @__PURE__ */ e("div", {
+        className: n(x),
+        children: /* @__PURE__ */ N(h, {
+          component: "label",
+          variant: "labelLarge",
+          id: `${c}-label`,
+          htmlFor: g,
+          className: n(q({ className: d })),
+          onClick: () => {
+            a || R(!0);
+          },
+          children: [
+            t,
+            " ",
+            i && /* @__PURE__ */ e(h, {
+              component: "span",
+              className: "text-red-500 dark:text-red-500 text-sm font-normal",
+              children: "*"
+            })
+          ]
+        })
+      }) : null,
+      /* @__PURE__ */ N("div", {
+        id: g,
+        className: n(A({
+          hasError: m,
+          disabled: a
+        })),
+        role: "combobox",
+        onClick: a ? void 0 : H,
+        "aria-expanded": v,
+        "aria-labelledby": t ? `${c}-label` : void 0,
+        "aria-invalid": m || void 0,
+        "aria-describedby": T,
+        "aria-disabled": a || void 0,
+        "aria-required": i || void 0,
+        children: [S.length === 0 ? /* @__PURE__ */ e("span", {
+          className: "text-base text-inherit select-none",
+          children: M
+        }) : /* @__PURE__ */ e("div", {
+          className: "flex flex-wrap gap-2",
+          children: S.map((p) => /* @__PURE__ */ e(K, {
+            "data-value": p.label,
+            label: p.value ?? p.label ?? "",
+            className: "select-none",
+            rightIcon: /* @__PURE__ */ e(F, { onClick: () => {
+              a || j(p);
+            } })
+          }, p.id))
+        }), V ? /* @__PURE__ */ e(E, {
+          size: 16,
+          className: "animate-spin shrink-0 text-gray-400"
+        }) : /* @__PURE__ */ e(W, { className: n("w-4 h-4 transition-all duration-50 shrink-0 text-gray-400", v ? "rotate-0" : "rotate-180") })]
+      }),
+      /* @__PURE__ */ e("input", {
+        ref: f,
+        type: "text",
+        name: u,
+        className: "hidden",
+        tabIndex: -1,
+        "aria-hidden": "true",
+        readOnly: !0
+      }),
+      v && !a ? /* @__PURE__ */ e(Y, {}) : null,
+      m ? /* @__PURE__ */ e(h, {
+        component: "span",
+        id: b,
+        className: n("text-xs tracking-normal text-red-700 dark:text-red-400", l),
+        children: r
+      }) : null,
+      w ? /* @__PURE__ */ e(h, {
+        component: "span",
+        id: y,
+        className: n("text-xs text-slate-600 dark:text-slate-200", s),
+        children: o
+      }) : null
+    ]
+  });
+});
+D.displayName = "MultiSelectDropdownWrapper";
+var Z = O(({ isLoading: a, multiselect: r, name: l, noOptionsText: o, options: s, value: i, onChange: t, onBlur: d, ...x }, u) => /* @__PURE__ */ e(P, {
+  defaultOptions: s,
+  multiselect: r,
+  value: i,
+  onChange: t,
+  onBlur: d,
+  name: l,
+  isLoading: a,
+  noOptionsText: o,
+  children: /* @__PURE__ */ e(D, {
+    ref: u,
+    name: l,
+    ...x
+  })
+}));
+Z.displayName = "KonstructMultiSelectDropdown";
+export {
+  D as n,
+  Y as r,
+  Z as t
+};