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

package/dist/Toast-3NEz7LLa.js

@@ -0,0 +1,460 @@
+import { t as Ce } from "./x-BI9jmc7e.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 { 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";
+import { WarningTriangleIcon as be } from "./assets/icons/components/WarningTriangle.js";
+import { i as Se, n as Ae, r as A, t as _e } from "./dist-D-yS0HN8.js";
+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-CzKqHuqJ2.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";
+import * as We from "react-dom";
+import { Fragment as le, jsx as r, jsxs as D } from "react/jsx-runtime";
+var He = Object.defineProperty, u = (a, e) => He(a, "name", {
+  value: e,
+  configurable: !0
+}), de = "ToastProvider", [Z, fe, $e] = Le("Toast"), [pe, Ft] = Se("Toast", [$e]), [Xe, z] = pe(de), Ue = /* @__PURE__ */ u((a) => {
+  const { __scopeToast: e, label: t = "Notification", duration: o = 5e3, swipeDirection: n = "right", swipeThreshold: l = 50, announcerContainer: E, children: m } = a, [v, C] = s.useState(null), [c, h] = s.useState(0), T = s.useRef(!1);
+  return t.trim() || console.error(`Invalid prop \`label\` supplied to \`${de}\`. Expected non-empty \`string\`.`), /* @__PURE__ */ r(Z.Provider, {
+    scope: e,
+    children: /* @__PURE__ */ r(Xe, {
+      scope: e,
+      label: t,
+      duration: o,
+      swipeDirection: n,
+      swipeThreshold: l,
+      toastCount: c,
+      viewport: v,
+      onViewportChange: C,
+      onToastAdd: s.useCallback(() => h((S) => S + 1), []),
+      onToastRemove: s.useCallback(() => h((S) => S - 1), []),
+      isClosePausedRef: T,
+      announcerContainer: E,
+      children: m
+    })
+  });
+}, "ToastProvider"), Ye = "ToastViewport", ze = ["F8"], J = "toast.viewportPause", Q = "toast.viewportResume", je = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, hotkey: n = ze, label: l = "Notifications ({hotkey})", ...E } = e, m = z(Ye, o), v = fe(o), C = s.useRef(null), c = s.useRef(null), h = s.useRef(null), T = s.useRef(null), S = ce(t, T, m.onViewportChange), N = n.join("+").replace(/Key/g, "").replace(/Digit/g, ""), y = m.toastCount > 0;
+  s.useEffect(() => {
+    const d = /* @__PURE__ */ u((w) => {
+      n.length !== 0 && n.every((p) => w[p] || w.code === p) && T.current?.focus();
+    }, "handleKeyDown");
+    return document.addEventListener("keydown", d), () => document.removeEventListener("keydown", d);
+  }, [n]), s.useEffect(() => {
+    const d = C.current, w = T.current;
+    if (y && d && w) {
+      const p = /* @__PURE__ */ u(() => {
+        if (!m.isClosePausedRef.current) {
+          const P = new CustomEvent(J);
+          w.dispatchEvent(P), m.isClosePausedRef.current = !0;
+        }
+      }, "handlePause"), g = /* @__PURE__ */ u(() => {
+        if (m.isClosePausedRef.current) {
+          const P = new CustomEvent(Q);
+          w.dispatchEvent(P), m.isClosePausedRef.current = !1;
+        }
+      }, "handleResume"), x = /* @__PURE__ */ u((P) => {
+        d.contains(P.relatedTarget) || g();
+      }, "handleFocusOutResume"), R = /* @__PURE__ */ u(() => {
+        d.contains(document.activeElement) || g();
+      }, "handlePointerLeaveResume");
+      return d.addEventListener("focusin", p), d.addEventListener("focusout", x), d.addEventListener("pointermove", p), d.addEventListener("pointerleave", R), window.addEventListener("blur", p), window.addEventListener("focus", g), () => {
+        d.removeEventListener("focusin", p), d.removeEventListener("focusout", x), d.removeEventListener("pointermove", p), d.removeEventListener("pointerleave", R), window.removeEventListener("blur", p), window.removeEventListener("focus", g);
+      };
+    }
+  }, [y, m.isClosePausedRef]);
+  const f = s.useCallback(({ tabbingDirection: d }) => {
+    const w = v().map((p) => {
+      const g = p.ref.current, x = [g, ...we(g)];
+      return d === "forwards" ? x : x.reverse();
+    });
+    return (d === "forwards" ? w.reverse() : w).flat();
+  }, [v]);
+  return s.useEffect(() => {
+    const d = T.current;
+    if (d) {
+      const w = /* @__PURE__ */ u((p) => {
+        const g = p.altKey || p.ctrlKey || p.metaKey;
+        if (p.key === "Tab" && !g) {
+          const x = document.activeElement, R = p.shiftKey;
+          if (p.target === d && R) {
+            c.current?.focus();
+            return;
+          }
+          const P = f({ tabbingDirection: R ? "backwards" : "forwards" }), V = P.findIndex((F) => F === x);
+          U(P.slice(V + 1)) ? p.preventDefault() : R ? c.current?.focus() : h.current?.focus();
+        }
+      }, "handleKeyDown");
+      return d.addEventListener("keydown", w), () => d.removeEventListener("keydown", w);
+    }
+  }, [v, f]), /* @__PURE__ */ D(Ie, {
+    ref: C,
+    role: "region",
+    "aria-label": l.replace("{hotkey}", N),
+    tabIndex: -1,
+    style: { pointerEvents: y ? void 0 : "none" },
+    children: [
+      y && /* @__PURE__ */ r(se, {
+        ref: c,
+        onFocusFromOutsideViewport: () => {
+          U(f({ tabbingDirection: "forwards" }));
+        }
+      }),
+      /* @__PURE__ */ r(Z.Slot, {
+        scope: o,
+        children: /* @__PURE__ */ r(I.ol, {
+          tabIndex: -1,
+          ...E,
+          ref: S
+        })
+      }),
+      y && /* @__PURE__ */ r(se, {
+        ref: h,
+        onFocusFromOutsideViewport: () => {
+          U(f({ tabbingDirection: "backwards" }));
+        }
+      })
+    ]
+  });
+}, "ToastViewport")), Be = "ToastFocusProxy", se = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, onFocusFromOutsideViewport: n, ...l } = e, E = z(Be, o);
+  return /* @__PURE__ */ r(ue, {
+    tabIndex: 0,
+    ...l,
+    ref: t,
+    style: { position: "fixed" },
+    onFocus: (m) => {
+      const v = m.relatedTarget;
+      E.viewport?.contains(v) || n();
+    }
+  });
+}, "ToastFocusProxy")), j = "Toast", qe = "toast.swipeStart", Ge = "toast.swipeMove", Je = "toast.swipeCancel", Qe = "toast.swipeEnd", Ze = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { forceMount: o, open: n, defaultOpen: l, onOpenChange: E, ...m } = e, [v, C] = _e({
+    prop: n,
+    defaultProp: l ?? !0,
+    onChange: E,
+    caller: j
+  });
+  return /* @__PURE__ */ r(Fe, {
+    present: o || v,
+    children: /* @__PURE__ */ r(ot, {
+      open: v,
+      ...m,
+      ref: t,
+      onClose: () => C(!1),
+      onPause: Y(e.onPause),
+      onResume: Y(e.onResume),
+      onSwipeStart: A(e.onSwipeStart, (c) => {
+        c.currentTarget.setAttribute("data-swipe", "start");
+      }),
+      onSwipeMove: A(e.onSwipeMove, (c) => {
+        const { x: h, y: T } = c.detail.delta;
+        c.currentTarget.setAttribute("data-swipe", "move"), c.currentTarget.style.setProperty("--radix-toast-swipe-move-x", `${h}px`), c.currentTarget.style.setProperty("--radix-toast-swipe-move-y", `${T}px`);
+      }),
+      onSwipeCancel: A(e.onSwipeCancel, (c) => {
+        c.currentTarget.setAttribute("data-swipe", "cancel"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), c.currentTarget.style.removeProperty("--radix-toast-swipe-end-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-end-y");
+      }),
+      onSwipeEnd: A(e.onSwipeEnd, (c) => {
+        const { x: h, y: T } = c.detail.delta;
+        c.currentTarget.setAttribute("data-swipe", "end"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-x"), c.currentTarget.style.removeProperty("--radix-toast-swipe-move-y"), c.currentTarget.style.setProperty("--radix-toast-swipe-end-x", `${h}px`), c.currentTarget.style.setProperty("--radix-toast-swipe-end-y", `${T}px`), C(!1);
+      })
+    })
+  });
+}, "Toast")), [et, tt] = pe(j, { onClose() {
+} }), ot = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, type: n = "foreground", duration: l, open: E, onClose: m, onEscapeKeyDown: v, onPause: C, onResume: c, onSwipeStart: h, onSwipeMove: T, onSwipeCancel: S, onSwipeEnd: N, ...y } = e, f = z(j, o), d = fe(o), [w, p] = s.useState(null), g = ce(t, p), x = s.useRef(null), R = s.useRef(null), P = l || f.duration, V = s.useRef(0), F = s.useRef(P), K = s.useRef(0), { onToastAdd: te, onToastRemove: oe } = f, L = Y(() => {
+    w?.contains(document.activeElement) && f.viewport?.focus(), m();
+  }), W = s.useCallback((i) => {
+    !i || i === 1 / 0 || (window.clearTimeout(K.current), V.current = (/* @__PURE__ */ new Date()).getTime(), K.current = window.setTimeout(L, i));
+  }, [L]);
+  s.useEffect(() => {
+    const i = f.viewport;
+    if (i) {
+      const b = /* @__PURE__ */ u(() => {
+        W(F.current), c?.();
+      }, "handleResume"), _ = /* @__PURE__ */ u(() => {
+        const k = (/* @__PURE__ */ new Date()).getTime() - V.current;
+        F.current = F.current - k, window.clearTimeout(K.current), C?.();
+      }, "handlePause");
+      return i.addEventListener(J, _), i.addEventListener(Q, b), () => {
+        i.removeEventListener(J, _), i.removeEventListener(Q, b);
+      };
+    }
+  }, [
+    f.viewport,
+    P,
+    C,
+    c,
+    W
+  ]), s.useEffect(() => {
+    E && !f.isClosePausedRef.current && W(P);
+  }, [
+    E,
+    P,
+    f.isClosePausedRef,
+    W
+  ]), s.useEffect(() => () => {
+    window.clearTimeout(K.current);
+  }, []), s.useEffect(() => (te(), () => oe()), [te, oe]);
+  const ne = s.useMemo(() => w ? ee(w) : null, [w]);
+  return f.viewport ? /* @__PURE__ */ D(le, { children: [ne && /* @__PURE__ */ r(nt, {
+    __scopeToast: o,
+    role: "status",
+    "aria-live": n === "foreground" ? "assertive" : "polite",
+    children: ne
+  }), /* @__PURE__ */ r(et, {
+    scope: o,
+    onClose: L,
+    children: We.createPortal(/* @__PURE__ */ r(Z.ItemSlot, {
+      scope: o,
+      children: /* @__PURE__ */ r(De, {
+        asChild: !0,
+        onEscapeKeyDown: A(v, (i) => {
+          d().some((b) => b.ref.current?.contains(i.target)) || L();
+        }),
+        children: /* @__PURE__ */ r(I.li, {
+          tabIndex: 0,
+          "data-state": E ? "open" : "closed",
+          "data-swipe-direction": f.swipeDirection,
+          ...y,
+          ref: g,
+          style: {
+            userSelect: "none",
+            touchAction: "none",
+            ...e.style
+          },
+          onKeyDown: A(e.onKeyDown, (i) => {
+            i.key === "Escape" && (v?.(i.nativeEvent), i.nativeEvent.defaultPrevented || L());
+          }),
+          onPointerDown: A(e.onPointerDown, (i) => {
+            i.button === 0 && (x.current = {
+              x: i.clientX,
+              y: i.clientY
+            });
+          }),
+          onPointerMove: A(e.onPointerMove, (i) => {
+            if (!x.current) return;
+            const b = i.clientX - x.current.x, _ = i.clientY - x.current.y, k = !!R.current, M = ["left", "right"].includes(f.swipeDirection), H = ["left", "up"].includes(f.swipeDirection) ? Math.min : Math.max, Ee = M ? H(0, b) : 0, he = M ? 0 : H(0, _), B = i.pointerType === "touch" ? 10 : 2, $ = {
+              x: Ee,
+              y: he
+            }, re = {
+              originalEvent: i,
+              delta: $
+            };
+            k ? (R.current = $, O(Ge, T, re, { discrete: !1 })) : ae($, f.swipeDirection, B) ? (R.current = $, O(qe, h, re, { discrete: !1 }), i.target.setPointerCapture(i.pointerId)) : (Math.abs(b) > B || Math.abs(_) > B) && (x.current = null);
+          }),
+          onPointerUp: A(e.onPointerUp, (i) => {
+            const b = R.current, _ = i.target;
+            if (_.hasPointerCapture(i.pointerId) && _.releasePointerCapture(i.pointerId), R.current = null, x.current = null, b) {
+              const k = i.currentTarget, M = {
+                originalEvent: i,
+                delta: b
+              };
+              ae(b, f.swipeDirection, f.swipeThreshold) ? O(Qe, N, M, { discrete: !0 }) : O(Je, S, M, { discrete: !0 }), k.addEventListener("click", (H) => H.preventDefault(), { once: !0 });
+            }
+          })
+        })
+      })
+    }), f.viewport)
+  })] }) : null;
+}, "ToastImpl")), nt = /* @__PURE__ */ u((a) => {
+  const { __scopeToast: e, children: t, ...o } = a, n = z(j, e), [l, E] = s.useState(!1), [m, v] = s.useState(!1);
+  return Te(() => E(!0)), s.useEffect(() => {
+    const C = window.setTimeout(() => v(!0), 1e3);
+    return () => window.clearTimeout(C);
+  }, []), m ? null : /* @__PURE__ */ r(Ne, {
+    asChild: !0,
+    container: n.announcerContainer || void 0,
+    children: /* @__PURE__ */ r(ue, {
+      ...o,
+      children: l && /* @__PURE__ */ D(le, { children: [
+        n.label,
+        " ",
+        t
+      ] })
+    })
+  });
+}, "ToastAnnounce"), rt = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, ...n } = e;
+  return /* @__PURE__ */ r(I.div, {
+    ...n,
+    ref: t
+  });
+}, "ToastTitle")), st = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, ...n } = e;
+  return /* @__PURE__ */ r(I.div, {
+    ...n,
+    ref: t
+  });
+}, "ToastDescription")), at = "ToastAction", it = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { altText: o, ...n } = e;
+  return o.trim() ? /* @__PURE__ */ r(me, {
+    altText: o,
+    asChild: !0,
+    children: /* @__PURE__ */ r(ut, {
+      ...n,
+      ref: t
+    })
+  }) : (console.error(`Invalid prop \`altText\` supplied to \`${at}\`. Expected non-empty \`string\`.`), null);
+}, "ToastAction")), ct = "ToastClose", ut = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, ...n } = e, l = tt(ct, o);
+  return /* @__PURE__ */ r(me, {
+    asChild: !0,
+    children: /* @__PURE__ */ r(I.button, {
+      type: "button",
+      ...n,
+      ref: t,
+      onClick: A(e.onClick, l.onClose)
+    })
+  });
+}, "ToastClose")), me = /* @__PURE__ */ s.forwardRef(/* @__PURE__ */ u(function(e, t) {
+  const { __scopeToast: o, altText: n, ...l } = e;
+  return /* @__PURE__ */ r(I.div, {
+    "data-radix-toast-announce-exclude": "",
+    "data-radix-toast-announce-alt": n || void 0,
+    ...l,
+    ref: t
+  });
+}, "ToastAnnounceExclude"));
+function ee(a) {
+  const e = [];
+  return Array.from(a.childNodes).forEach((t) => {
+    if (t.nodeType === t.TEXT_NODE && t.textContent && e.push(t.textContent), ve(t)) {
+      const o = t.ariaHidden || t.hidden || t.style.display === "none", n = t.dataset.radixToastAnnounceExclude === "";
+      if (!o) if (n) {
+        const l = t.dataset.radixToastAnnounceAlt;
+        l && e.push(l);
+      } else e.push(...ee(t));
+    }
+  }), e;
+}
+u(ee, "getAnnounceTextContent");
+function O(a, e, t, { discrete: o }) {
+  const n = t.originalEvent.currentTarget, l = new CustomEvent(a, {
+    bubbles: !0,
+    cancelable: !0,
+    detail: t
+  });
+  e && n.addEventListener(a, e, { once: !0 }), o ? xe(n, l) : n.dispatchEvent(l);
+}
+u(O, "handleAndDispatchCustomEvent");
+var ae = /* @__PURE__ */ u((a, e, t = 0) => {
+  const o = Math.abs(a.x), n = Math.abs(a.y), l = o > n;
+  return e === "left" || e === "right" ? l && o > t : !l && n > t;
+}, "isDeltaInDirection");
+function Te(a = () => {
+}) {
+  const e = Y(a);
+  Ae(() => {
+    let t = 0, o = 0;
+    return t = window.requestAnimationFrame(() => o = window.requestAnimationFrame(e)), () => {
+      window.cancelAnimationFrame(t), window.cancelAnimationFrame(o);
+    };
+  }, [e]);
+}
+u(Te, "useNextFrame");
+function ve(a) {
+  return a.nodeType === a.ELEMENT_NODE;
+}
+u(ve, "isHTMLElement");
+function we(a) {
+  const e = [], t = document.createTreeWalker(a, NodeFilter.SHOW_ELEMENT, { acceptNode: /* @__PURE__ */ u((o) => {
+    const n = o.tagName === "INPUT" && o.type === "hidden";
+    return o.disabled || o.hidden || n ? NodeFilter.FILTER_SKIP : o.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+  }, "acceptNode") });
+  for (; t.nextNode(); ) e.push(t.currentNode);
+  return e;
+}
+u(we, "getTabbableCandidates");
+function U(a) {
+  const e = document.activeElement;
+  return a.some((t) => t === e ? !0 : (t.focus(), document.activeElement !== e));
+}
+u(U, "focusFirst");
+var lt = Ue, dt = je, ft = Ze, pt = rt, ie = st, mt = it, Lt = ({ title: a, duration: e = 5e3, titleClassName: t, descriptionClassName: o, description: n, children: l, theme: E, showCloseButton: m = !0, closeButtonClassName: v, className: C, open: c = !1, setOpen: h, variant: T }) => {
+  const S = Ke(0);
+  Ve(() => () => clearTimeout(S.current), []);
+  const N = G(a) ? /* @__PURE__ */ r(q, {
+    className: t,
+    children: a
+  }) : a, y = G(n) ? /* @__PURE__ */ r(q, {
+    className: o,
+    children: n
+  }) : n;
+  return /* @__PURE__ */ D(lt, {
+    swipeDirection: "right",
+    duration: e,
+    children: [
+      /* @__PURE__ */ r(q, {
+        onClick: () => {
+          h(!1), S.current = window.setTimeout(() => h(!0), 100);
+        },
+        children: l
+      }),
+      /* @__PURE__ */ D(ft, {
+        className: X(Me({
+          variant: T,
+          className: C
+        })),
+        "data-theme": E,
+        open: c,
+        onOpenChange: h,
+        children: [/* @__PURE__ */ D("div", {
+          className: "flex gap-2 items-center flex-1",
+          children: [
+            T === "success" && /* @__PURE__ */ r(ye, {
+              size: 20,
+              className: "shrink-0"
+            }),
+            T === "error" && /* @__PURE__ */ r(Re, {
+              size: 20,
+              className: "shrink-0"
+            }),
+            T === "warning" && /* @__PURE__ */ r(be, {
+              size: 20,
+              className: "shrink-0"
+            }),
+            T === "info" && /* @__PURE__ */ r(ge, {
+              size: 20,
+              className: "shrink-0"
+            }),
+            /* @__PURE__ */ D("div", {
+              className: "flex flex-col gap-1",
+              children: [/* @__PURE__ */ r(pt, {
+                asChild: !0,
+                className: t,
+                children: N
+              }), y && (G(y) ? /* @__PURE__ */ r(ie, {
+                asChild: !0,
+                children: y
+              }) : /* @__PURE__ */ r(ie, {
+                className: X("text-sm", o),
+                children: y
+              }))]
+            })
+          ]
+        }), m && /* @__PURE__ */ r(mt, {
+          asChild: !0,
+          altText: "Close the toast",
+          children: /* @__PURE__ */ D("button", {
+            type: "button",
+            className: "cursor-pointer",
+            children: [/* @__PURE__ */ r(Ce, { className: X(ke({ className: v })) }), /* @__PURE__ */ r(Pe, { children: "Close toast" })]
+          })
+        })]
+      }),
+      /* @__PURE__ */ r(dt, { className: X(Oe()) })
+    ]
+  });
+};
+export {
+  Lt as t
+};

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
+};