@konstructio/ui 0.1.2-alpha.106 → 0.1.2-alpha.108

package/dist/Wrapper-2AUlYAHQ.js

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

package/dist/{Wrapper-CvDRHgN4.js → Wrapper-CyHxGs4E.js}

@@ -1,7 +1,7 @@
 import { o as k } from "./rolldown-runtime-Dw9YIBcH.js";
 import { t as _ } from "./prop-types-BCUW56rg.js";
 import { t as T } from "./x-Ierxf0uI.js";
-import { t as l } from "./utils-Cx-WzRZF.js";
+import { t as l } from "./utils-B-6R7kNE.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";