@rpcbase/ui 0.181.0 → 0.183.0

package/dist/index18.js

@@ -1,722 +1,390 @@
-import { j as a } from "./index28.js";
-import { Check as ue, ChevronDown as oe, ChevronUp as ae } from "lucide-react";
-import * as r from "react";
-import { DismissableLayerBranch as fe } from "./index29.js";
-import { createPortal as de } from "react-dom";
-import { IMaskInput as me } from "react-imask";
-import pe, { InputMask as he } from "imask";
-import { Select as ve, SelectTrigger as be, SelectValue as ge, SelectContent as xe, SelectItem as we } from "./index20.js";
-import { useIsTouchDevice as ke } from "./index4.js";
-import { cn as W } from "./index2.js";
-const te = pe;
-typeof te.InputMask != "function" && (te.InputMask = he);
-function Z(d) {
-  return String(d).padStart(2, "0");
+import { j as a } from "./index29.js";
+import * as t from "react";
+import je, { components as Ne } from "react-select";
+import { cn as F } from "./index2.js";
+const se = t.createContext(null);
+function Ve({ children: n, value: l, defaultValue: c, onChange: i }) {
+  const f = l !== void 0, [r, d] = t.useState(c ?? W), h = l ?? r, N = t.useCallback(
+    (v) => {
+      f || d(v), i?.(v);
+    },
+    [f, i]
+  ), R = t.useMemo(
+    () => ({
+      locale: h,
+      setLocale: N
+    }),
+    [h, N]
+  );
+  return /* @__PURE__ */ a.jsx(se.Provider, { value: R, children: n });
 }
-function Te(d) {
-  const f = d.trim();
-  if (!f) return null;
-  const n = /^(\d{1,2}):(\d{2})$/.exec(f);
-  if (!n)
-    return null;
-  const i = Number(n[1]), o = Number(n[2]);
-  return !Number.isFinite(i) || !Number.isFinite(o) || i < 0 || i > 23 || o < 0 || o > 59 ? null : `${Z(i)}:${Z(o)}`;
+const W = "en";
+function Re(n) {
+  const c = (n.split("-")[0] ?? "").replace(/[^A-Za-z]/g, "");
+  return c ? c.slice(0, 3).toUpperCase() : "?";
 }
-function Q(d, f) {
-  const n = Te(d);
-  if (!n) return null;
-  const i = f.find((o) => o.value === n);
-  return z(i) ? { parsed: n, selectableValue: n } : { parsed: n, selectableValue: null };
+function Ie(n) {
+  return n.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
 }
-function U(d) {
-  const f = /^(\d{2}):(\d{2})$/.exec(d);
-  if (!f)
-    return null;
-  const n = Number(f[1]), i = Number(f[2]);
-  return !Number.isFinite(n) || !Number.isFinite(i) ? null : n * 60 + i;
+function K(n) {
+  return Ie(n).toLowerCase();
 }
-function z(d) {
-  return d ? !d.disabled : !1;
+function Pe(n, l) {
+  if (Object.prototype.hasOwnProperty.call(n, l))
+    return n[l] ?? "";
+  const c = l.split("-").filter(Boolean);
+  for (; c.length > 1; ) {
+    c.pop();
+    const i = c.join("-");
+    if (Object.prototype.hasOwnProperty.call(n, i))
+      return n[i] ?? "";
+  }
+  return "";
 }
-function re(d, f) {
-  let n = null, i = Number.POSITIVE_INFINITY, o = Number.NEGATIVE_INFINITY;
-  for (const h of f) {
-    if (!z(h)) continue;
-    const g = U(h.value);
-    if (g == null) continue;
-    const N = Math.abs(g - d);
-    (N < i || N === i && g > o) && (n = h, i = N, o = g);
+function oe(n, l) {
+  if (typeof Intl > "u" || typeof Intl.DisplayNames > "u") return null;
+  try {
+    const c = Array.isArray(n) ? n : n ? [n] : void 0;
+    return new Intl.DisplayNames(c, { type: l });
+  } catch {
+    return null;
   }
-  return n;
 }
-function ne({
-  direction: d,
-  viewportRef: f,
-  speed: n = 400,
-  className: i
-}) {
-  const [o, h] = r.useState(!0), g = r.useRef(void 0), N = r.useRef(void 0), m = r.useRef(!1), p = r.useCallback(() => {
-    const T = f.current;
-    if (!T) {
-      h(!0);
+function H(n, l) {
+  if (n)
+    try {
+      return n.of(l) ?? void 0;
+    } catch {
       return;
     }
-    const { scrollTop: x, scrollHeight: v, clientHeight: E } = T, w = 2, F = x > w, M = x < v - E - w;
-    if (!(v > E + w)) {
-      h(!0);
-      return;
-    }
-    h(d === "up" ? !F : !M);
-  }, [d, f]);
-  r.useEffect(() => {
-    const T = f.current;
-    if (!T) return;
-    p();
-    const x = () => p(), v = () => p();
-    T.addEventListener("scroll", x, { passive: !0 });
-    const E = new ResizeObserver(v);
-    E.observe(T);
-    const w = new MutationObserver(v);
-    return w.observe(T, { childList: !0, subtree: !0 }), () => {
-      T.removeEventListener("scroll", x), E.disconnect(), w.disconnect();
+}
+function ke(n, l) {
+  const c = oe(n, "language"), i = oe("en", "language");
+  return (l ?? []).filter((r) => typeof r == "string" && r.length > 0).map((r) => {
+    const d = H(c, r) ?? H(i, r) ?? r;
+    return {
+      value: r,
+      name: d,
+      code: r,
+      searchable: Array.from(
+        /* @__PURE__ */ new Set([
+          d,
+          H(i, r) ?? r,
+          r.toLowerCase(),
+          r.toUpperCase()
+        ])
+      ).map((h) => K(h))
     };
-  }, [f, p]);
-  const j = r.useCallback(() => {
-    g.current && (cancelAnimationFrame(g.current), g.current = void 0), m.current = !1, N.current = void 0;
-  }, []), P = r.useCallback(
-    (T) => {
-      const x = f.current;
-      if (!x || o || !m.current) {
-        j();
-        return;
-      }
-      N.current || (N.current = T);
-      const v = T - N.current, E = n * v / 1e3;
-      if (E < 0.1) {
-        g.current = requestAnimationFrame(P);
-        return;
-      }
-      const w = x.scrollTop, F = x.scrollHeight - x.clientHeight;
-      let M;
-      d === "up" ? M = Math.max(0, w - E) : M = Math.min(F, w + E), x.scrollTo({ top: M }), N.current = T;
-      const L = 1;
-      (d === "up" ? M > L : M < F - L) && Math.abs(M - w) > 0.01 ? g.current = requestAnimationFrame(P) : (j(), setTimeout(p, 16));
-    },
-    [p, d, o, n, j, f]
-  ), q = r.useCallback(() => {
-    o || !f.current || m.current || (m.current = !0, N.current = void 0, g.current = requestAnimationFrame(P));
-  }, [o, P, f]);
-  return r.useEffect(() => j, [j]), /* @__PURE__ */ a.jsx(
+  }).sort((r, d) => r.name.localeCompare(d.name));
+}
+const Me = {
+  control: () => ({
+    display: "none"
+  }),
+  menu: (n) => ({
+    ...n,
+    marginTop: 4,
+    borderRadius: "var(--radius)",
+    boxShadow: "0 18px 36px rgba(15, 23, 42, 0.18)",
+    backgroundColor: "hsl(var(--popover))",
+    overflow: "hidden",
+    zIndex: 30
+  }),
+  menuList: (n) => ({
+    ...n,
+    maxHeight: 280,
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden"
+  }),
+  option: (n, l) => ({
+    ...n,
+    fontSize: "0.875rem",
+    backgroundColor: l.isFocused ? "hsl(var(--muted))" : l.isSelected ? "hsl(var(--accent))" : "transparent",
+    color: l.isSelected ? "hsl(var(--accent-foreground))" : "hsl(var(--foreground))",
+    cursor: "pointer"
+  }),
+  noOptionsMessage: (n) => ({
+    ...n,
+    fontSize: "0.875rem",
+    color: "hsl(var(--muted-foreground))"
+  })
+}, De = () => /* @__PURE__ */ a.jsx("div", { style: { display: "none" } }), D = () => null;
+function Fe(n) {
+  const { data: l, innerRef: c, innerProps: i, isFocused: f, isSelected: r } = n;
+  return /* @__PURE__ */ a.jsxs(
     "div",
     {
-      className: W(
-        "flex items-center justify-center py-1 select-none",
-        o ? "cursor-default opacity-40" : "cursor-pointer opacity-100 hover:bg-accent/20",
-        i
+      ref: c,
+      ...i,
+      className: F(
+        "flex cursor-pointer items-center justify-between gap-3 px-3 py-2 text-sm",
+        r ? "bg-accent text-accent-foreground" : f ? "bg-muted text-foreground" : "text-foreground"
       ),
-      onPointerEnter: () => {
-        o || q();
-      },
-      onPointerMove: () => {
-        !o && !m.current && q();
-      },
-      onPointerLeave: () => {
-        j();
-      },
-      children: d === "up" ? /* @__PURE__ */ a.jsx(ae, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" }) : /* @__PURE__ */ a.jsx(oe, { "aria-hidden": !0, className: "h-4 w-4 opacity-50" })
+      children: [
+        /* @__PURE__ */ a.jsx("span", { className: "flex min-w-0 items-center gap-2", children: /* @__PURE__ */ a.jsx("span", { className: "truncate", children: l.name }) }),
+        /* @__PURE__ */ a.jsx("span", { className: "text-xs text-muted-foreground uppercase", children: l.code })
+      ]
     }
   );
 }
-function se({
-  id: d,
-  value: f,
-  onChange: n,
-  onValueUpdate: i,
-  options: o,
-  placeholder: h = "Select time",
-  className: g,
-  inputClassName: N,
-  disabled: m,
-  readOnly: p,
-  open: j,
-  onOpenChange: P,
-  triggerTestId: q,
-  contentTestId: T,
-  isHydrated: x
-}) {
-  const v = r.useId(), E = d ?? `hours-picker-${v}`, w = r.useRef(null), F = r.useRef(null), M = r.useCallback((e) => {
-    F.current = e;
-  }, []), L = r.useRef(null), C = r.useRef(!1), [O, I] = r.useState(null), J = r.useRef(null), _ = r.useRef(null), t = r.useRef(null), [l, k] = r.useState(() => ({
-    left: 0,
-    top: 0,
-    width: 0
-  })), [S, R] = r.useState(!1), b = j ?? S, V = P ?? R;
-  r.useEffect(() => {
-    if (!b || m || p)
-      return;
-    const e = w.current;
-    e instanceof HTMLInputElement && (typeof document < "u" && document.activeElement === e || e.focus({ preventScroll: !0 }));
-  }, [m, b, p]);
-  const $ = r.useCallback((e) => {
-    L.current = e, I(e);
-  }, []), ie = r.useCallback(() => {
-    C.current = !0;
-  }, []);
-  r.useEffect(() => {
-    if (!b) return;
-    const e = o.find((c) => c.value === f);
-    if (e && z(e)) {
-      $(e.value);
-      return;
-    }
-    const s = o.find((c) => z(c));
-    $(s?.value ?? null);
-  }, [b, o, $, f]);
-  const le = r.useCallback(
-    (e) => {
-      if (e === null) {
-        i && i(null);
-        return;
-      }
-      const s = o.find((c) => c.value === e);
-      z(s) && i && i(e);
-    },
-    [i, o]
-  ), ee = r.useCallback(
-    (e) => {
-      if (e === null) {
-        i && i(null), n(null);
-        return;
-      }
-      const s = o.find((c) => c.value === e);
-      z(s) && (i && i(e), n(e));
-    },
-    [n, i, o]
-  );
-  r.useEffect(() => {
-    if (!b) return;
-    const e = (s) => {
-      const c = s.target;
-      if (!(c instanceof Node))
-        return;
-      const u = J.current;
-      !u || u.contains(c) || _.current?.contains(c) || V(!1);
-    };
-    return document.addEventListener("pointerdown", e, !0), () => {
-      document.removeEventListener("pointerdown", e, !0);
-    };
-  }, [b, V]), r.useEffect(() => {
-    if (!b)
-      return;
-    const e = _.current;
-    if (!e)
-      return;
-    const s = (c) => {
-      const u = t.current;
-      if (!u)
-        return;
-      const D = c.deltaY;
-      if (D === 0)
-        return;
-      const A = Math.max(0, u.scrollHeight - u.clientHeight), y = u.scrollTop <= 0, G = u.scrollTop >= A, B = c.target;
-      if (B instanceof Node && u.contains(B)) {
-        (D < 0 && y || D > 0 && G) && c.preventDefault();
-        return;
-      }
-      c.preventDefault();
-      const K = Math.min(A, Math.max(0, u.scrollTop + D));
-      u.scrollTop = K;
-    };
-    return e.addEventListener("wheel", s, { passive: !1 }), () => {
-      e.removeEventListener("wheel", s);
-    };
-  }, [b]), r.useEffect(() => {
-    if (!b || j !== void 0 && !P || typeof window > "u" || !("IntersectionObserver" in window))
-      return;
-    const e = w.current;
-    if (!(e instanceof HTMLElement))
-      return;
-    let s = !0;
-    const c = new IntersectionObserver((u) => {
-      if (!s)
-        return;
-      const D = u[0];
-      D && !D.isIntersecting && V(!1);
-    });
-    return c.observe(e), () => {
-      s = !1, c.disconnect();
-    };
-  }, [P, b, j, V]);
-  const Y = r.useCallback(() => {
-    if (typeof window > "u") return;
-    const e = w.current, s = _.current;
-    if (!(e instanceof HTMLElement) || !s) return;
-    const c = e.getBoundingClientRect(), u = s.offsetHeight, D = window.innerWidth ?? 0, A = window.innerHeight ?? 0, y = 8, G = c.width;
-    let B = c.left;
-    B + G > D - y && (B = Math.max(y, D - G - y)), B < y && (B = y);
-    let H = c.bottom + y;
-    const K = H + u > A - y, X = c.top - u - y;
-    K && X >= y && (H = X), H < y && (H = y), H + u > A - y && (H = Math.max(y, A - u - y)), k({ left: B, top: H, width: G });
-  }, []);
-  return r.useLayoutEffect(() => {
-    if (!b || m || typeof window > "u") return;
-    Y();
-    const e = window.requestAnimationFrame(Y);
-    return window.addEventListener("scroll", Y, !0), window.addEventListener("resize", Y), () => {
-      window.cancelAnimationFrame(e), window.removeEventListener("scroll", Y, !0), window.removeEventListener("resize", Y);
-    };
-  }, [m, b, Y]), r.useEffect(() => {
-    if (!b) return;
-    const e = t.current;
-    if (!e) return;
-    const c = requestAnimationFrame(() => {
-      const u = e.querySelector('[role="option"][data-state="checked"]');
-      if (u instanceof HTMLElement) {
-        const K = u.offsetTop - 8, X = u.offsetTop + u.offsetHeight + 8;
-        if (K < e.scrollTop) {
-          e.scrollTop = Math.max(0, K);
-          return;
-        }
-        const ce = e.scrollTop + e.clientHeight;
-        X > ce && (e.scrollTop = Math.max(0, X - e.clientHeight));
-        return;
-      }
-      const D = Array.from(e.querySelectorAll('[role="option"]'));
-      if (!D.length) return;
-      let A, y;
-      for (const H of D) {
-        if (!H.hasAttribute("data-disabled")) {
-          A = H;
-          break;
+const Oe = t.forwardRef(
+  function(l, c) {
+    const {
+      value: i,
+      defaultValue: f,
+      locale: r,
+      defaultLocale: d,
+      onChange: h,
+      onLocaleChange: N,
+      locales: R,
+      multiline: v,
+      className: le,
+      inputClassName: ae,
+      selectProps: ce,
+      selectFooter: O,
+      languageSelectTabIndex: ie = -1,
+      disabled: I,
+      ...ue
+    } = l, { rows: de, ...P } = ue, E = t.useMemo(() => i ?? f ?? {}, [f, i]), [fe, Z] = t.useState(E), S = i !== void 0, y = S ? i ?? {} : fe, [p, z] = t.useState(""), m = t.useContext(se), g = t.useMemo(() => {
+      const e = Array.from(/* @__PURE__ */ new Set([...R ?? [], ...Object.keys(y)]));
+      return ke(void 0, e);
+    }, [y, R]), pe = t.useMemo(() => r ?? m?.locale ?? d ?? Object.keys(y)[0] ?? g[0]?.value ?? W, [y, d, m?.locale, g, r]), [w, A] = t.useState(pe), V = r ?? m?.locale ?? w;
+    t.useEffect(() => {
+      S || Z(E);
+    }, [E, S]), t.useEffect(() => {
+      r && r !== w && A(r);
+    }, [w, r]), t.useEffect(() => {
+      !r && m?.locale && m.locale !== w && A(m.locale);
+    }, [w, m?.locale, r]);
+    const L = g.find((e) => e.value === V) ?? g.find((e) => e.value === W) ?? g[0] ?? null, [x, _] = t.useState(!1), $ = t.useRef(null), k = t.useRef(null), G = t.useRef(null), J = t.useRef(null), T = t.useRef(null), j = t.useRef(null), Q = t.useRef(null), [X, me] = t.useState({ left: 0, top: 0 });
+    t.useImperativeHandle(c, () => k.current, []);
+    const B = (e) => {
+      if (!e) return;
+      const o = e.value;
+      S || A(o), N?.(o, e), m?.setLocale(o), b(!0);
+    }, ge = (e) => {
+      const o = {
+        ...y,
+        [V]: e.target.value
+      };
+      S || Z(o), h?.(o);
+    }, xe = Pe(y, V), M = t.useCallback(
+      (e) => {
+        if (!p) return !0;
+        const o = K(p);
+        return e.data.searchable.some((s) => s.includes(o));
+      },
+      [p]
+    ), be = v ? "left-2 top-2 -translate-y-0" : "left-3 top-1/2 -translate-y-1/2", he = "pl-10 pr-3", q = t.useCallback(() => {
+      const e = G.current, o = J.current;
+      if (!e || !o) return;
+      const s = e.getBoundingClientRect(), u = o.getBoundingClientRect();
+      me({
+        left: s.left - u.left,
+        top: s.bottom - u.top + 4
+      });
+    }, []), Y = t.useCallback((e) => !e || !(e instanceof Node) ? !1 : !!$.current?.contains(e), []), ee = t.useCallback(() => {
+      const e = k.current;
+      if (!e) return;
+      e.focus();
+      const o = Q.current;
+      o && o.start != null && o.end != null && e.setSelectionRange(o.start, o.end);
+    }, []);
+    t.useEffect(() => {
+      if (!x) return;
+      const e = j.current;
+      e && requestAnimationFrame(() => {
+        if (document.activeElement === e) return;
+        e.focus();
+        const o = e.value.length;
+        try {
+          e.setSelectionRange(o, o);
+        } catch {
         }
-        y = H;
-      }
-      if (!A) return;
-      const B = Math.max(0, (y || A).offsetTop - 8);
-      e.scrollTop = B;
-    });
-    return () => cancelAnimationFrame(c);
-  }, [b, o]), r.useEffect(() => {
-    if (!b || !O || !C.current) return;
-    const e = t.current;
-    if (!e) return;
-    const s = e.querySelector(`[role="option"][data-value="${O}"]`);
-    if (!(s instanceof HTMLElement)) return;
-    const c = 8, u = s.offsetTop - c, D = s.offsetTop + s.offsetHeight + c;
-    if (u < e.scrollTop) {
-      e.scrollTop = Math.max(0, u);
-      return;
-    }
-    const A = e.scrollTop + e.clientHeight;
-    D > A && (e.scrollTop = Math.max(0, D - e.clientHeight));
-  }, [O, b]), /* @__PURE__ */ a.jsx(
-    "div",
-    {
-      "data-slot": "hours-picker-input",
-      className: W("w-[150px]", g),
-      ref: J,
-      children: /* @__PURE__ */ a.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ a.jsx(
-          De,
-          {
-            id: E,
-            placeholder: h,
-            value: f,
-            onValueUpdate: le,
-            onCommit: ee,
-            options: o,
-            disabled: m,
-            readOnly: p,
-            open: b,
-            setOpen: V,
-            inputClassName: N,
-            triggerTestId: q,
-            isHydrated: x,
-            highlightedValueRef: L,
-            setHighlightedValue: $,
-            markKeyboardNavigation: ie,
-            inputRef: (e) => {
-              w.current = e;
-            },
-            onDraftValueHandlerChange: M
-          }
-        ),
-        b ? (() => {
-          const e = /* @__PURE__ */ a.jsx(fe, { children: /* @__PURE__ */ a.jsxs(
-            "div",
-            {
-              ref: _,
-              "data-testid": T,
-              "data-state": "open",
-              className: W(
-                "pointer-events-auto fixed z-[60] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-                "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95"
-              ),
-              style: {
-                left: l.left,
-                top: l.top,
-                width: l.width
-              },
-              children: [
-                /* @__PURE__ */ a.jsx(
-                  ne,
-                  {
-                    direction: "up",
-                    viewportRef: t
+      });
+    }, [x, p]);
+    const b = t.useCallback(
+      (e = !0) => {
+        _(!1), z(""), e && requestAnimationFrame(() => {
+          ee();
+        });
+      },
+      [ee]
+    ), {
+      components: te,
+      styles: ne,
+      classNamePrefix: ve,
+      placeholder: ye,
+      noOptionsMessage: Ce,
+      ...Se
+    } = ce ?? {}, U = t.useMemo(() => {
+      const e = K(p), o = (s) => {
+        const u = s.code.toLowerCase();
+        return e && u === e ? 0 : e && u.startsWith(e) ? 1 : e && s.searchable.some((C) => C.startsWith(e)) ? 2 : e && s.searchable.some((C) => C.includes(e)) ? 3 : 4;
+      };
+      return g.filter((s) => M({ data: s })).sort((s, u) => {
+        const C = o(s) - o(u);
+        return C !== 0 ? C : s.name.localeCompare(u.name);
+      });
+    }, [M, g, p]), we = t.useMemo(
+      () => ({
+        Control: De,
+        IndicatorsContainer: D,
+        DropdownIndicator: D,
+        IndicatorSeparator: D,
+        ValueContainer: D,
+        MenuList: (e) => {
+          const { children: o } = e;
+          return /* @__PURE__ */ a.jsxs(Ne.MenuList, { ...e, className: "!p-0 flex flex-col overflow-hidden", children: [
+            /* @__PURE__ */ a.jsx("div", { className: "border-b border-muted px-2 pb-2 pt-2", children: /* @__PURE__ */ a.jsx(
+              "input",
+              {
+                ref: j,
+                value: p,
+                onChange: (s) => z(s.target.value),
+                onKeyDown: (s) => {
+                  if (s.key === "Escape") {
+                    s.preventDefault(), b(!0);
+                    return;
                   }
-                ),
-                /* @__PURE__ */ a.jsx(
-                  "div",
-                  {
-                    ref: t,
-                    role: "listbox",
-                    className: "max-h-64 overflow-y-auto p-1 [overscroll-behavior:contain] [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
-                    children: o.map((s) => {
-                      const c = s.value === f;
-                      return /* @__PURE__ */ a.jsxs(
-                        "div",
-                        {
-                          role: "option",
-                          "aria-selected": c,
-                          "data-value": s.value,
-                          "data-state": c ? "checked" : "unchecked",
-                          "data-disabled": s.disabled ? "" : void 0,
-                          className: W(
-                            "relative flex w-full select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none cursor-pointer",
-                            s.disabled && "pointer-events-none opacity-50",
-                            O === s.value && "bg-accent text-accent-foreground"
-                          ),
-                          onMouseDown: (u) => {
-                            u.preventDefault();
-                          },
-                          onClick: () => {
-                            s.disabled || (F.current?.(s.value), $(s.value), w.current?.focus({ preventScroll: !0 }), ee(s.value), V(!1));
-                          },
-                          onPointerEnter: () => {
-                            C.current || (C.current = !1, $(s.value));
-                          },
-                          onPointerMove: (u) => {
-                            C.current && u.movementX === 0 && u.movementY === 0 || (C.current = !1, $(s.value));
-                          },
-                          children: [
-                            /* @__PURE__ */ a.jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: c ? /* @__PURE__ */ a.jsx(ue, { "aria-hidden": !0, className: "h-4 w-4" }) : null }),
-                            /* @__PURE__ */ a.jsxs("div", { className: "flex flex-col", children: [
-                              /* @__PURE__ */ a.jsx("span", { children: s.label }),
-                              s.description != null ? /* @__PURE__ */ a.jsx("span", { "data-slot": "description", className: "text-xs text-muted-foreground", children: s.description }) : null
-                            ] })
-                          ]
-                        },
-                        s.value
-                      );
-                    })
+                  if (s.key === "Enter") {
+                    s.preventDefault();
+                    const u = U[0];
+                    u && B(u);
+                    return;
                   }
-                ),
-                /* @__PURE__ */ a.jsx(
-                  ne,
-                  {
-                    direction: "down",
-                    viewportRef: t
-                  }
-                )
-              ]
-            }
-          ) });
-          return typeof document > "u" ? e : de(e, document.body);
-        })() : null
-      ] })
-    }
-  );
-}
-se.displayName = "HourPickerInput";
-function ye({
-  id: d,
-  value: f,
-  onChange: n,
-  onValueUpdate: i,
-  options: o,
-  placeholder: h = "Select time",
-  className: g,
-  inputClassName: N,
-  disabled: m,
-  open: p,
-  onOpenChange: j,
-  triggerTestId: P,
-  contentTestId: q,
-  isHydrated: T
-}) {
-  const x = r.useCallback(
-    (v) => {
-      const E = o.find((w) => w.value === v);
-      z(E) && (i && i(v), n(v));
-    },
-    [n, i, o]
-  );
-  return /* @__PURE__ */ a.jsx("div", { "data-slot": "hours-picker-field", className: W("w-[150px]", g), children: /* @__PURE__ */ a.jsxs(
-    ve,
-    {
-      disabled: m,
-      open: p,
-      onOpenChange: j,
-      value: f ?? "",
-      onValueChange: (v) => x(v),
-      children: [
-        /* @__PURE__ */ a.jsx(
-          be,
-          {
-            id: d,
-            "data-testid": P,
-            "data-hydrated": T ? "true" : void 0,
-            className: W(
-              "transition-colors hover:bg-accent hover:text-accent-foreground",
-              !f && "text-muted-foreground",
-              p && "ring-2 ring-primary ring-offset-2",
-              "[&_[data-slot='description']]:hidden",
-              N
-            ),
-            children: /* @__PURE__ */ a.jsx(ge, { placeholder: h })
-          }
-        ),
-        /* @__PURE__ */ a.jsx(
-          xe,
-          {
-            "data-testid": q,
-            autoScroll: "firstEnabledWithContext",
-            className: "max-h-64 overflow-y-auto",
-            children: o.map((v) => /* @__PURE__ */ a.jsxs(
-              we,
-              {
-                value: v.value,
-                disabled: v.disabled,
-                children: [
-                  /* @__PURE__ */ a.jsx("span", { children: v.label }),
-                  v.description != null ? /* @__PURE__ */ a.jsx("span", { "data-slot": "description", className: "block text-xs text-muted-foreground", children: v.description }) : null
-                ]
-              },
-              v.value
-            ))
-          }
-        )
-      ]
-    }
-  ) });
-}
-function Se(d) {
-  return ke() ? /* @__PURE__ */ a.jsx(ye, { ...d }) : /* @__PURE__ */ a.jsx(se, { ...d });
-}
-Se.displayName = "HourPickerField";
-function De({
-  id: d,
-  placeholder: f,
-  value: n,
-  onValueUpdate: i,
-  onCommit: o,
-  options: h,
-  disabled: g,
-  readOnly: N,
-  open: m,
-  setOpen: p,
-  inputClassName: j,
-  triggerTestId: P,
-  isHydrated: q,
-  highlightedValueRef: T,
-  setHighlightedValue: x,
-  markKeyboardNavigation: v,
-  inputRef: E,
-  onDraftValueHandlerChange: w
-}) {
-  const F = r.useRef(!1), M = r.useRef(!1), L = r.useRef(!1), C = r.useRef(null), [O, I] = r.useState(() => n || "");
-  r.useEffect(() => (w((t) => {
-    I(t);
-  }), () => {
-    w(null);
-  }), [w]);
-  const J = r.useCallback(
-    (t) => {
-      const l = T.current ?? n ?? "";
-      let k = h.findIndex((S) => S.value === l);
-      k === -1 && (k = t === 1 ? -1 : h.length);
-      for (let S = k + t; S >= 0 && S < h.length; S += t) {
-        const R = h[S];
-        if (z(R)) {
-          x(R.value), C.current = R.value, I(R.value), i(R.value);
-          return;
-        }
-      }
-    },
-    [T, i, h, x, n]
-  );
-  r.useEffect(() => {
-    F.current || I(n || "");
-  }, [n]);
-  const _ = W(
-    "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-    "transition-colors group-hover:bg-accent group-hover:text-accent-foreground",
-    !O && "text-muted-foreground",
-    m && "ring-2 ring-primary ring-offset-2",
-    "[&_[data-slot='description']]:hidden",
-    j
-  );
-  return /* @__PURE__ */ a.jsxs("div", { className: "relative group", children: [
-    /* @__PURE__ */ a.jsx(
-      me,
-      {
-        id: d,
-        "data-testid": P,
-        "data-hydrated": q ? "true" : void 0,
-        type: "text",
-        disabled: g,
-        readOnly: N,
-        inputRef: E,
-        autoComplete: "off",
-        mask: [
-          { mask: "00:00", lazy: !0 },
-          { mask: "0:00", lazy: !0 }
-        ],
-        dispatch: (t, l) => {
-          const k = (l.value + t).replace(/\D/g, "");
-          if (k.length <= 2 || k.length >= 4) return l.compiledMasks[0];
-          const S = Z(Number(k.slice(0, 2)));
-          return h.some((b) => b.value.startsWith(`${S}:`)) ? l.compiledMasks[0] : l.compiledMasks[1];
-        },
-        placeholder: f,
-        value: O,
-        className: _,
-        onAccept: (t) => {
-          const l = typeof t == "string" ? t : String(t ?? "");
-          I(l), l.replace(/\D/g, "").length === 0 && n && o(null);
-        },
-        onComplete: (t) => {
-          const l = typeof t == "string" ? t : String(t ?? "");
-          if (C.current === l) {
-            C.current = null;
-            return;
-          }
-          const k = Q(l, h);
-          if (!k)
-            return;
-          if (k.selectableValue) {
-            if (x(k.selectableValue), I(k.selectableValue), n === k.selectableValue)
-              return;
-            o(k.selectableValue);
-            return;
-          }
-          const S = U(k.parsed);
-          if (S == null)
-            return;
-          const R = re(S, h);
-          R && x(R.value);
-        },
-        onPointerDown: () => {
-          M.current = !0, !g && (m || p(!0));
-        },
-        onMouseDown: (t) => {
-          M.current = !0, L.current = typeof document < "u" && document.activeElement === t.currentTarget, !g && (m || p(!0));
-        },
-        onClick: () => {
-          g || m || p(!0);
-        },
-        onKeyDown: (t) => {
-          if (!g) {
-            if (t.key === "Tab" && m && !t.defaultPrevented) {
-              p(!1);
-              return;
-            }
-            if (t.key === "Escape") {
-              if (!m)
-                return;
-              t.preventDefault(), p(!1);
-              return;
-            }
-            if (!m && !t.defaultPrevented && (t.key.length === 1 || t.key === "Backspace" || t.key === "Delete") && !t.ctrlKey && !t.metaKey && !t.altKey && p(!0), t.key === "ArrowDown" || t.key === "ArrowUp") {
-              if (v(), t.preventDefault(), !m) {
-                p(!0);
-                return;
+                  (s.key === "ArrowDown" || s.key === "ArrowUp") && (s.preventDefault(), T.current?.focus());
+                },
+                className: "w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring",
+                placeholder: "Search language…"
               }
-              J(t.key === "ArrowDown" ? 1 : -1);
-              return;
-            }
-            if (t.key === "Enter") {
-              v();
-              const l = Q(O, h);
-              if (!l) {
-                if (!m || O.trim() !== "")
-                  return;
-                const R = h.find((V) => V.value === T.current), b = (z(R) ? R?.value : void 0) ?? h.find((V) => z(V))?.value;
-                if (!b)
-                  return;
-                t.preventDefault(), x(b), I(b), o(b), p(!1);
-                return;
-              }
-              if (l.selectableValue) {
-                t.preventDefault(), x(l.selectableValue), I(l.selectableValue), o(l.selectableValue), p(!1);
-                return;
-              }
-              const k = U(l.parsed);
-              if (k == null)
-                return;
-              const S = re(k, h);
-              if (!S)
-                return;
-              t.preventDefault(), x(S.value), I(S.value), o(S.value), p(!1);
-              return;
-            }
-          }
+            ) }),
+            /* @__PURE__ */ a.jsx("div", { className: "max-h-60 overflow-y-auto", children: o }),
+            O ? /* @__PURE__ */ a.jsx("div", { className: "border-t border-muted bg-muted/60 px-3 py-2 text-xs text-muted-foreground", children: O }) : null
+          ] });
         },
-        onFocus: (t) => {
-          const l = !M.current || !L.current;
-          if (M.current = !1, L.current = !1, F.current = !0, l) {
-            const k = t.currentTarget;
-            requestAnimationFrame(() => k.select());
-          }
-          g || m || p(!0);
-        },
-        onBlur: () => {
-          F.current = !1;
-          const t = O.trim();
-          if (!t) {
-            I(n || "");
-            return;
-          }
-          const l = Q(t, h);
-          if (!l) {
-            I(n || "");
-            return;
-          }
-          if (!l.selectableValue) {
-            I(n || "");
-            return;
-          }
-          I(l.selectableValue), n !== l.selectableValue && o(l.selectableValue);
-        }
-      }
-    ),
-    /* @__PURE__ */ a.jsx(
-      "button",
+        ...te ?? {},
+        Option: Fe
+      }),
+      [b, M, U, B, g, p, O, te]
+    ), Le = t.useMemo(
+      () => ({
+        ...Me,
+        ...ne ?? {}
+      }),
+      [ne]
+    );
+    t.useLayoutEffect(() => {
+      if (!x) return;
+      q();
+      const e = () => q();
+      return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+    }, [x, q]);
+    const re = {
+      ...P,
+      ref: k,
+      disabled: I,
+      value: xe,
+      onChange: ge,
+      onFocus: (e) => {
+        x && b(!1), P.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        Y(e.relatedTarget) || b(!1), P.onBlur?.(e);
+      },
+      className: F(
+        "w-full rounded-md border border-input bg-background text-base ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        v ? "min-h-24 py-2" : "h-10 py-2",
+        he,
+        ae
+      ),
+      placeholder: P.placeholder
+    };
+    return /* @__PURE__ */ a.jsxs(
+      "div",
       {
-        type: "button",
-        tabIndex: -1,
-        disabled: g,
-        "data-slot": "hours-picker-input-toggle",
-        className: W(
-          "absolute right-1 top-1/2 inline-flex size-8 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
-        ),
-        "aria-label": m ? "Close time picker" : "Open time picker",
-        onPointerDown: (t) => {
-          t.preventDefault();
-        },
-        onMouseDown: (t) => {
-          t.preventDefault();
+        ref: $,
+        className: F("relative flex flex-col", le),
+        onBlur: (e) => {
+          Y(e.relatedTarget) || b(!1);
         },
-        onClick: () => {
-          g || p(!m);
-        },
-        children: /* @__PURE__ */ a.jsx(oe, { "aria-hidden": !0, className: "size-4" })
+        children: [
+          /* @__PURE__ */ a.jsxs("div", { ref: J, className: "relative", children: [
+            v ? /* @__PURE__ */ a.jsx("textarea", { rows: de, ...re }) : /* @__PURE__ */ a.jsx("input", { type: "text", ...re }),
+            /* @__PURE__ */ a.jsx(
+              "button",
+              {
+                type: "button",
+                className: F(
+                  "absolute flex h-6 w-6 items-center justify-center rounded border text-xs font-semibold leading-none transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+                  be,
+                  I ? "cursor-not-allowed opacity-50 pointer-events-none" : "cursor-pointer hover:bg-muted",
+                  L ? "border-transparent" : "border-dashed border-border text-muted-foreground"
+                ),
+                "aria-label": L ? `Select language (${L.code})` : "Select language",
+                onMouseDown: (e) => e.preventDefault(),
+                onClick: () => {
+                  if (I) return;
+                  const e = k.current;
+                  e && (Q.current = {
+                    start: e.selectionStart,
+                    end: e.selectionEnd
+                  }), z(""), _(!0), requestAnimationFrame(() => {
+                    j.current ? (j.current.focus(), j.current.select()) : T.current?.focus();
+                  });
+                },
+                tabIndex: ie,
+                disabled: I,
+                ref: G,
+                children: /* @__PURE__ */ a.jsx("span", { "aria-hidden": "true", children: L ? Re(L.code) : "?" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ a.jsx(
+            "div",
+            {
+              className: "absolute left-0 top-full z-30 mt-1",
+              style: {
+                pointerEvents: x ? "auto" : "none",
+                width: "min(260px, 100%)",
+                left: X.left,
+                top: X.top
+              },
+              children: /* @__PURE__ */ a.jsx(
+                je,
+                {
+                  ...Se,
+                  menuIsOpen: x,
+                  options: U,
+                  value: null,
+                  onChange: B,
+                  classNamePrefix: ve ?? "i18n-language-select",
+                  components: we,
+                  styles: Le,
+                  isClearable: !1,
+                  isSearchable: !1,
+                  backspaceRemovesValue: !1,
+                  tabSelectsValue: !0,
+                  menuShouldScrollIntoView: !1,
+                  placeholder: ye ?? "",
+                  filterOption: M,
+                  noOptionsMessage: Ce,
+                  onMenuClose: () => b(!0),
+                  ref: T
+                }
+              )
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+Oe.displayName = "I18nField";
 export {
-  Se as HourPickerField,
-  se as HourPickerInput
+  Oe as I18nField,
+  Ve as I18nFieldLocaleProvider
 };
 //# sourceMappingURL=index18.js.map