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

package/dist/{Loading-DUh9PMJN.js → Loading-DO8JOWBV.js}

@@ -1,4 +1,4 @@
-import { t as e } from "./utils-Cx-WzRZF.js";
+import { t as e } from "./utils-B-6R7kNE.js";
 import { t as i } from "./createLucideIcon-MbzNWCaI.js";
 import { loadingVariants as t } from "./components/Loading/Loading.variants.js";
 import { jsx as d } from "react/jsx-runtime";

package/dist/{Modal-CkAf9UY7.js → Modal-Dq9BHD_9.js}

@@ -1,8 +1,8 @@
 import { t as F } from "./x-Ierxf0uI.js";
 import { t as N } from "./dist-DX0sBG3Q.js";
-import { t as h } from "./utils-Cx-WzRZF.js";
+import { t as h } from "./utils-B-6R7kNE.js";
 import { t as k } from "./Combination-CnMM05mt.js";
-import { t as w } from "./react-B6Nc0Fib.js";
+import { t as w } from "./react-7zQ6bvbE.js";
 import { t as A } from "./es2015-B_07N-UL.js";
 import { Body as R } from "./components/Modal/components/Body/Body.js";
 import { Footer as x } from "./components/Modal/components/Footer/Footer.js";

package/dist/{Spinner-CUwE2bLm.js → Spinner-BJE79VTl.js}

@@ -1,5 +1,5 @@
 import { n as m } from "./dist-DX0sBG3Q.js";
-import { t as L } from "./utils-Cx-WzRZF.js";
+import { t as L } from "./utils-B-6R7kNE.js";
 import { Typography as d } from "./components/Typography/Typography.js";
 import { spinnerIconVariants as k, spinnerVariants as g } from "./components/Spinner/Spinner.variants.js";
 import { jsx as e, jsxs as _ } from "react/jsx-runtime";

package/dist/{StepIndicatorContent-CjbjVjS1.js → StepIndicatorContent-BGDvxLzV.js}

@@ -1,4 +1,4 @@
-import { t as d } from "./utils-Cx-WzRZF.js";
+import { t as d } from "./utils-B-6R7kNE.js";
 import { ExclamationIcon as m } from "./assets/icons/components/Exclamation.js";
 import { t as p } from "./createLucideIcon-MbzNWCaI.js";
 import { CHECK_ICON_SIZE_MAP as a, ICON_SIZE_MAP as c } from "./components/Stepper/constants/index.js";

package/dist/{Switch-CyJXptgc.js → Switch-C7286Bcu.js}

@@ -1,9 +1,9 @@
 import { a as H } from "./dist-xCbHbMLA.js";
 import { t as y } from "./dist-CCdbu9GU.js";
-import { t as x } from "./utils-Cx-WzRZF.js";
+import { t as x } from "./utils-B-6R7kNE.js";
 import { i as D, r as $, t as G } from "./dist-D-yS0HN8.js";
 import { Typography as U } from "./components/Typography/Typography.js";
-import { t as V } from "./dist-pWlMx4Fi2.js";
+import { t as V } from "./dist-pWlMx4Fi.js";
 import { switchVariants as W, thumbVariants as X } from "./components/Switch/Switch.variants.js";
 import * as r from "react";
 import { forwardRef as J, useEffect as K, useId as Q, useImperativeHandle as Y, useRef as Z } from "react";

package/dist/{Toast-DLJDExxw.js → Toast-jSx3Lao8.js}

@@ -2,7 +2,7 @@ import { t as Ce } from "./x-Ierxf0uI.js";
 import { a as ce, t as q } from "./dist-xCbHbMLA.js";
 import { n as xe, t as I } from "./dist-CCdbu9GU.js";
 import { n as ue, t as Pe } from "./dist-DX0sBG3Q.js";
-import { t as X } from "./utils-Cx-WzRZF.js";
+import { t as X } from "./utils-B-6R7kNE.js";
 import { CheckCircleFilledIcon as ye } from "./assets/icons/components/CheckCircleFilled.js";
 import { ErrorIcon as Re } from "./assets/icons/components/Error.js";
 import { InformationOutlineIcon as ge } from "./assets/icons/components/InformationOutline.js";
@@ -12,7 +12,7 @@ import { t as Y } from "./dist-D5XYRjmR.js";
 import { r as De, t as Ie } from "./dist-DKryKPmP.js";
 import { t as Ne } from "./dist-C4j75TwZ.js";
 import { t as Fe } from "./dist-BUocnzkM.js";
-import { t as Le } from "./dist-DwxO2RoR2.js";
+import { t as Le } from "./dist-DwxO2RoR.js";
 import { closeToastVariants as ke, toastVariants as Me, viewportToastVariants as Oe } from "./components/Toast/Toast.variants.js";
 import * as s from "react";
 import { isValidElement as G, useEffect as Ve, useRef as Ke } from "react";

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";