@konstructio/ui 0.1.2-alpha.103 → 0.1.2-alpha.104

package/dist/Wrapper-BhqUVI1G.js

@@ -0,0 +1,171 @@
+import { t as r } from "./utils-Cx-WzRZF.js";
+import { LoaderIcon as le } from "./assets/icons/components/Loader.js";
+import { t as se } from "./createLucideIcon-MbzNWCaI.js";
+import { t as oe } from "./chevron-up-Bjpvg6ui.js";
+import { Typography as ie } from "./components/Typography/Typography.js";
+import { useSelectContext as ce } from "./components/Select/contexts/select.hook.js";
+import { List as me } from "./components/Select/components/List/List.js";
+import { inputVariants as pe, labelVariants as ue, selectVariants as fe } from "./components/Select/Select.variants.js";
+import { useSelect as de } from "./components/Select/hooks/useSelect.js";
+import { forwardRef as xe, useEffect as he, useId as ve, useImperativeHandle as Ne, useMemo as ge, useRef as x } from "react";
+import { jsx as n, jsxs as o } from "react/jsx-runtime";
+var Ce = [["path", {
+  d: "m21 21-4.34-4.34",
+  key: "14j7rj"
+}], ["circle", {
+  cx: "11",
+  cy: "11",
+  r: "8",
+  key: "4ej97u"
+}]], we = se("search", Ce), Fe = xe(({ additionalOptions: z, className: R, defaultValue: h, disabled: t = !1, error: f, groupedOptions: T, iconClassName: F, inputClassName: S, isInfiniteScrollEnabled: E = !1, isLoading: k, isRequired: v, label: N, labelAction: M, labelClassName: W, labelWrapperClassName: _, listClassName: $, listItemClassName: H, listItemSecondRowClassName: P, name: d, noOptionsText: U, placeholder: g, searchable: y = !1, showSearchIcon: C, theme: q, visibleItems: A, wrapperClassName: B, onFetchMoreOptions: D, onBlur: G, onSearchChange: J, ...I }, K) => {
+  const j = ve(), i = x(null), L = x(null), O = x(null), Q = x(0), { isOpen: c, options: l, searchTerm: X, value: s, setCanFilter: Y, setSearchTerm: Z, setValue: m, toggleOpen: ee } = ce(), e = ge(() => l.find(({ value: a }) => a === s), [l, s]), { wrapperRef: te, wrapperInputRef: V, handleOpen: w } = de({
+    ulRef: O,
+    inputRef: i,
+    searchInputRef: L,
+    disabled: t,
+    internalValue: e,
+    onBlur: G
+  }), ae = () => {
+    if (!t) {
+      if (c) {
+        ee(!1);
+        return;
+      }
+      w();
+    }
+  }, p = d ? `${j}-${d}` : j;
+  Ne(K, () => i.current, [i]), he(() => {
+    if (h && !s) {
+      const a = l && l.find((u) => u.value === h);
+      a && m(a.value);
+    }
+  }, [
+    h,
+    l,
+    m,
+    s
+  ]);
+  const re = (a) => {
+    const u = a.target.value;
+    Y(!0), m(""), Z(u ?? ""), J?.(u);
+    const b = l.find((ne) => ne.value.toLocaleLowerCase() === u.toLocaleLowerCase());
+    m(b ? b.value : e?.value ?? "");
+  };
+  return /* @__PURE__ */ o("div", {
+    ref: te,
+    className: r("flex flex-col gap-2 w-full relative", B),
+    "data-theme": q,
+    children: [
+      N ? /* @__PURE__ */ o("div", {
+        className: r("flex items-center justify-between", _),
+        children: [/* @__PURE__ */ o("label", {
+          id: p,
+          className: r(ue({ className: W })),
+          htmlFor: p,
+          onClick: () => !t && w(),
+          children: [N, v && /* @__PURE__ */ n("span", {
+            className: "text-red-600 dark:text-red-500 ml-1",
+            children: "*"
+          })]
+        }), M]
+      }) : null,
+      /* @__PURE__ */ o("div", {
+        ref: V,
+        id: p,
+        className: r(fe({
+          className: R,
+          hasError: !!f,
+          disabled: t
+        })),
+        role: "combobox",
+        onClick: ae,
+        "aria-expanded": c,
+        tabIndex: Q.current,
+        "aria-labelledby": p,
+        children: [/* @__PURE__ */ o("div", {
+          className: "flex gap-2.5 items-center flex-1",
+          children: [
+            e?.leftIcon && !C && /* @__PURE__ */ n("span", {
+              className: "w-4 h-4 flex justify-center items-center dark:text-metal-50",
+              children: e.leftIcon
+            }),
+            C && /* @__PURE__ */ n(we, { className: r("w-4", "h-4", "text-zinc-500", "select-none", "transition-colors", "duration-300", "dark:text-metal-300", "dark:group-focus-within:text-metal-50") }),
+            y ? /* @__PURE__ */ n("input", {
+              ref: L,
+              type: "text",
+              value: c ? X : e?.label ?? s ?? "",
+              onChange: re,
+              placeholder: g,
+              className: r(pe({ className: S }), { "text-red-700 placeholder:text-red-700": !!f }),
+              onClick: (a) => {
+                a.stopPropagation(), t || w();
+              },
+              "aria-label": N || g,
+              "aria-labelledby": p,
+              required: v,
+              autoComplete: "off",
+              autoCapitalize: "words",
+              disabled: t,
+              tabIndex: -1,
+              ...I
+            }) : /* @__PURE__ */ o(ie, {
+              variant: "body2",
+              className: r("flex-1 text-zinc-400 text-sm dark:text-metal-400 flex gap-2 items-center", {
+                "text-red-700": !!f,
+                "select-none": !e,
+                "text-metal-800 dark:text-metal-50": e,
+                "text-metal-400/50 dark:text-metal-50/50": t
+              }, e?.wrapperClassNameOnSelectedValue),
+              children: [
+                e?.label || g,
+                " ",
+                e?.showRightComponentOnselectedValue ? e?.rightComponent : null
+              ]
+            })
+          ]
+        }), k ? /* @__PURE__ */ n(le, {
+          size: 16,
+          className: "text-metal-400 animate-spin select-none"
+        }) : !C && /* @__PURE__ */ n(oe, {
+          "data-state": c ? "open" : "closed",
+          className: r("w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-metal-50", F, {
+            "text-red-700": !!f,
+            "text-metal-400/50 dark:group-focus-within:text-zinc-500": t
+          })
+        })]
+      }),
+      /* @__PURE__ */ n("input", {
+        ref: i,
+        type: "text",
+        name: d,
+        className: "hidden",
+        "aria-hidden": "true",
+        required: v,
+        inert: !0,
+        defaultValue: e?.value ?? s ?? void 0,
+        ...I
+      }),
+      c && /* @__PURE__ */ n(me, {
+        ref: O,
+        additionalOptions: z,
+        className: $,
+        groupedOptions: T,
+        itemClassName: H,
+        name: d,
+        wrapperInputRef: V,
+        inputRef: i,
+        options: l,
+        isLoading: !!k,
+        searchable: y,
+        listItemSecondRowClassName: P,
+        isInfiniteScrollEnabled: E,
+        onFetchMoreOptions: D,
+        noOptionsText: U,
+        visibleItems: A
+      })
+    ]
+  });
+});
+export {
+  Fe as t
+};

package/dist/Wrapper-CVJSuYWx.js

@@ -0,0 +1,114 @@
+import { o as k } from "./rolldown-runtime-Ck3dxwZt.js";
+import { t as _ } from "./prop-types-CfEYxTbR.js";
+import { t as T } from "./x-BI9jmc7e.js";
+import { t as l } from "./utils-Cx-WzRZF.js";
+import { Tag as S } from "./components/Tag/Tag.js";
+import { useTagSelect as C } from "./components/TagSelect/contexts/TagSelect.hook.js";
+import { List as z } from "./components/TagSelect/components/List/List.js";
+import { useTagSelect as I } from "./components/TagSelect/hooks/useTagSelect.js";
+import { labelVariants as P, tagSelectVariants as R, wrapperVariants as $ } from "./components/TagSelect/TagSelect.variants.js";
+import g, { forwardRef as y, useId as E, useImperativeHandle as L } from "react";
+import { jsx as i, jsxs as b } from "react/jsx-runtime";
+var c = /* @__PURE__ */ k(_());
+function u() {
+  return u = Object.assign || function(e) {
+    for (var n = 1; n < arguments.length; n++) {
+      var r = arguments[n];
+      for (var t in r) Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, u.apply(this, arguments);
+}
+function W(e, n) {
+  if (e == null) return {};
+  var r = V(e, n), t, a;
+  if (Object.getOwnPropertySymbols) {
+    var o = Object.getOwnPropertySymbols(e);
+    for (a = 0; a < o.length; a++)
+      t = o[a], !(n.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function V(e, n) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), a, o;
+  for (o = 0; o < t.length; o++)
+    a = t[o], !(n.indexOf(a) >= 0) && (r[a] = e[a]);
+  return r;
+}
+var h = y(function(e, n) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, a = e.size, o = a === void 0 ? 24 : a, m = W(e, ["color", "size"]);
+  return /* @__PURE__ */ g.createElement("svg", u({
+    ref: n,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: o,
+    height: o,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, m), /* @__PURE__ */ g.createElement("polyline", { points: "18 15 12 9 6 15" }));
+});
+h.propTypes = {
+  color: c.default.string,
+  size: c.default.oneOfType([c.default.string, c.default.number])
+};
+h.displayName = "ChevronUp";
+var K = y(({ label: e, labelClassName: n, labelWrapperClassName: r, name: t, placeholder: a = "Select a value...", theme: o, wrapperClassName: m }, x) => {
+  const s = E(), { selectedTags: v, isOpen: d, onOpen: w, onRemoveTag: O, inputRef: f } = C(), { wrapperRef: N, handleOpen: j } = I();
+  return L(x, () => f.current, [f]), /* @__PURE__ */ b("div", {
+    ref: N,
+    className: l($({ className: m })),
+    "data-theme": o,
+    children: [
+      e ? /* @__PURE__ */ i("div", {
+        className: l(r),
+        children: /* @__PURE__ */ i("label", {
+          id: `${s}-label`,
+          htmlFor: t ?? s,
+          className: l(P({ className: n })),
+          onClick: () => w(!0),
+          children: e
+        })
+      }) : null,
+      /* @__PURE__ */ b("div", {
+        id: t ?? s,
+        className: l(R()),
+        role: "combobox",
+        onClick: j,
+        "aria-expanded": d,
+        "aria-labelledby": e ? `${s}-label` : void 0,
+        children: [v.length === 0 ? /* @__PURE__ */ i("span", {
+          className: "text-base text-inherit select-none",
+          children: a
+        }) : /* @__PURE__ */ i("div", {
+          className: "flex flex-wrap gap-1.5",
+          children: v.map((p) => /* @__PURE__ */ i(S, {
+            ...p,
+            className: "select-none",
+            rightIcon: /* @__PURE__ */ i(T, {
+              className: "w-3 h-3",
+              onClick: () => O(p)
+            }),
+            "data-value": p.label
+          }, p.id))
+        }), /* @__PURE__ */ i(h, { className: l("w-4 h-4 text-inherit transition-all duration-50 shrink-0", d ? "rotate-0" : "rotate-180") })]
+      }),
+      /* @__PURE__ */ i("input", {
+        ref: f,
+        type: "text",
+        name: t,
+        className: "hidden",
+        tabIndex: -1,
+        "aria-hidden": "true"
+      }),
+      d ? /* @__PURE__ */ i(z, {}) : null
+    ]
+  });
+});
+export {
+  h as n,
+  K as t
+};